Merge pull request #4426 from Blargian/fix_sidebar_styling

Usability improvements to sidebar

Author: Blargian

docs/use-cases/observability/clickstack/deployment/hyperdx-clickhouse-cloud.md

@@ -67,8 +67,158 @@ curl -O https://raw.githubusercontent.com/ClickHouse/clickhouse-docs/refs/heads/
 
 <details>
 <summary>otel-cloud-config.yaml</summary>
+
 ```yaml file=docs/use-cases/observability/clickstack/deployment/_snippets/otel-cloud-config.yaml
+receivers:
+  otlp/hyperdx:
+    protocols:
+      grpc:
+        include_metadata: true
+        endpoint: '0.0.0.0:4317'
+      http:
+        cors:
+          allowed_origins: ['*']
+          allowed_headers: ['*']
+        include_metadata: true
+        endpoint: '0.0.0.0:4318'
+processors:
+  transform:
+    log_statements:
+      - context: log
+        error_mode: ignore
+        statements:
+          # JSON parsing: Extends log attributes with the fields from structured log body content, either as an OTEL map or
+          # as a string containing JSON content.
+          - set(log.cache, ExtractPatterns(log.body, "(?P<0>(\\{.*\\}))")) where
+            IsString(log.body)
+          - merge_maps(log.attributes, ParseJSON(log.cache["0"]), "upsert")
+            where IsMap(log.cache)
+          - flatten(log.attributes) where IsMap(log.cache)
+          - merge_maps(log.attributes, log.body, "upsert") where IsMap(log.body)
+      - context: log
+        error_mode: ignore
+        conditions:
+          - severity_number == 0 and severity_text == ""
+        statements:
+          # Infer: extract the first log level keyword from the first 256 characters of the body
+          - set(log.cache["substr"], log.body.string) where Len(log.body.string)
+            < 256
+          - set(log.cache["substr"], Substring(log.body.string, 0, 256)) where
+            Len(log.body.string) >= 256
+          - set(log.cache, ExtractPatterns(log.cache["substr"],
+            "(?i)(?P<0>(alert|crit|emerg|fatal|error|err|warn|notice|debug|dbug|trace))"))
+          # Infer: detect FATAL
+          - set(log.severity_number, SEVERITY_NUMBER_FATAL) where
+            IsMatch(log.cache["0"], "(?i)(alert|crit|emerg|fatal)")
+          - set(log.severity_text, "fatal") where log.severity_number ==
+            SEVERITY_NUMBER_FATAL
+          # Infer: detect ERROR
+          - set(log.severity_number, SEVERITY_NUMBER_ERROR) where
+            IsMatch(log.cache["0"], "(?i)(error|err)")
+          - set(log.severity_text, "error") where log.severity_number ==
+            SEVERITY_NUMBER_ERROR
+          # Infer: detect WARN
+          - set(log.severity_number, SEVERITY_NUMBER_WARN) where
+            IsMatch(log.cache["0"], "(?i)(warn|notice)")
+          - set(log.severity_text, "warn") where log.severity_number ==
+            SEVERITY_NUMBER_WARN
+          # Infer: detect DEBUG
+          - set(log.severity_number, SEVERITY_NUMBER_DEBUG) where
+            IsMatch(log.cache["0"], "(?i)(debug|dbug)")
+          - set(log.severity_text, "debug") where log.severity_number ==
+            SEVERITY_NUMBER_DEBUG
+          # Infer: detect TRACE
+          - set(log.severity_number, SEVERITY_NUMBER_TRACE) where
+            IsMatch(log.cache["0"], "(?i)(trace)")
+          - set(log.severity_text, "trace") where log.severity_number ==
+            SEVERITY_NUMBER_TRACE
+          # Infer: else
+          - set(log.severity_text, "info") where log.severity_number == 0
+          - set(log.severity_number, SEVERITY_NUMBER_INFO) where log.severity_number == 0
+      - context: log
+        error_mode: ignore
+        statements:
+          # Normalize the severity_text case
+          - set(log.severity_text, ConvertCase(log.severity_text, "lower"))
+  resourcedetection:
+    detectors:
+      - env
+      - system
+      - docker
+    timeout: 5s
+    override: false
+  batch:
+  memory_limiter:
+    # 80% of maximum memory up to 2G, adjust for low memory environments
+    limit_mib: 1500
+    # 25% of limit up to 2G, adjust for low memory environments
+    spike_limit_mib: 512
+    check_interval: 5s
+connectors:
+  routing/logs:
+    default_pipelines: [logs/out-default]
+    error_mode: ignore
+    table:
+      - context: log
+        statement: route() where IsMatch(attributes["rr-web.event"], ".*")
+        pipelines: [logs/out-rrweb]
+exporters:
+  debug:
+    verbosity: detailed
+    sampling_initial: 5
+    sampling_thereafter: 200
+  clickhouse/rrweb:
+    database: ${env:CLICKHOUSE_DATABASE}
+    endpoint: ${env:CLICKHOUSE_ENDPOINT}
+    password: ${env:CLICKHOUSE_PASSWORD}
+    username: ${env:CLICKHOUSE_USER}
+    ttl: 720h
+    logs_table_name: hyperdx_sessions
+    timeout: 5s
+    retry_on_failure:
+      enabled: true
+      initial_interval: 5s
+      max_interval: 30s
+      max_elapsed_time: 300s
+  clickhouse:
+    database: ${env:CLICKHOUSE_DATABASE}
+    endpoint: ${env:CLICKHOUSE_ENDPOINT}
+    password: ${env:CLICKHOUSE_PASSWORD}
+    username: ${env:CLICKHOUSE_USER}
+    ttl: 720h
+    timeout: 5s
+    retry_on_failure:
+      enabled: true
+      initial_interval: 5s
+      max_interval: 30s
+      max_elapsed_time: 300s
+extensions:
+  health_check:
+    endpoint: :13133
+service:
+  pipelines:
+    traces:
+      receivers: [otlp/hyperdx]
+      processors: [memory_limiter, batch]
+      exporters: [clickhouse]
+    metrics:
+      receivers: [otlp/hyperdx]
+      processors: [memory_limiter, batch]
+      exporters: [clickhouse]
+    logs/in:
+      receivers: [otlp/hyperdx]
+      exporters: [routing/logs]
+    logs/out-default:
+      receivers: [routing/logs]
+      processors: [memory_limiter, transform, batch]
+      exporters: [clickhouse]
+    logs/out-rrweb:
+      receivers: [routing/logs]
+      processors: [memory_limiter, batch]
+      exporters: [clickhouse/rrweb]
+
 ```
+
 </details>
 
 Deploy the collector using the following Docker command, setting the respective environment variables to the connection settings recorded earlier and using the appropriate command below based on your operating system.

src/components/Feedback/index.jsx

@@ -124,8 +124,8 @@ export default function Feedback({side}) {
 
   const ThumbsUp = ({ highlighted, colorMode }) => (
     <svg
-      width="16"
-      height="16"
+      width="12"
+      height="12"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -158,8 +158,8 @@ export default function Feedback({side}) {
 
   const ThumbsDown = ({ highlighted, colorMode }) => (
     <svg
-      width="16"
-      height="16"
+      width="12"
+      height="12"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -192,13 +192,13 @@ export default function Feedback({side}) {
 
   return (
     <div className={styles.displayFeedback}>
-    <Panel hasBorder alignItems='start'>
+    <Panel hasBorder alignItems='start' padding='xs'>
     <Popover open={open} >
         <Popover.Trigger>
             <div>
-                <Text size='lg' color='muted' weight='semibold'>Was this page helpful?</Text>
+                <Text size='sm' color='muted' weight='semibold'>Was this page helpful?</Text>
             </div>
-            <div className='mt-[8px] flex'>
+            <div className='mt-[6px] flex'>
                 <div className={clsx( styles.Button, colorMode === 'dark' ? styles.dark : styles.light, selected === 'pos' && styles.selected )} onClick={() => { handleClick(true); handleSubmit(true)}}>
                     <ThumbsUp highlighted={selected === 'pos'} colorMode={colorMode}/>
                 </div>

src/components/Feedback/styles.module.scss

@@ -11,8 +11,8 @@
     }
 
     .Button {
-      width: 40px;
-      height: 40px;
+      width: 25px;
+      height: 25px;
       display: flex;
       align-items: center;
       justify-content: center;

src/theme/DocItem/TOC/Desktop/index.js

@@ -14,7 +14,7 @@ export default function DocItemTOCDesktop() {
   const {toc, frontMatter} = useDoc();
   const [isClosed, setClosed] = useState(() => {
     if (typeof window !== 'undefined') {
-      return window.sessionStorage.getItem('doc-cloud-card-banner') === 'closed';
+      return window.localStorage.getItem('doc-cloud-card-banner') === 'closed';
     }
     return false;
   });
@@ -30,10 +30,10 @@ export default function DocItemTOCDesktop() {
         const cacheKey = 'doc-cloud-card-banner-attributes';
         let attributes = {};
 
-        // Get cached ad data from session
-        if (window.sessionStorage.getItem(cacheKey)) {
+        // Get cached ad data from local storage
+        if (window.localStorage.getItem(cacheKey)) {
           try {
-            attributes = JSON.parse(window.sessionStorage.getItem(cacheKey));
+            attributes = JSON.parse(window.localStorage.getItem(cacheKey));
           } catch (e) {
             console.log('Failed to parse cached ad attributes', e);
           }
@@ -54,7 +54,7 @@ export default function DocItemTOCDesktop() {
 
             if (data && typeof data === 'object' && data.hasOwnProperty('attributes')) {
               attributes = data.attributes;
-              window.sessionStorage.setItem(cacheKey, JSON.stringify(attributes));
+              window.localStorage.setItem(cacheKey, JSON.stringify(attributes));
             }
           } catch (e) {
             console.log('Failed to fetch ad content', e);
@@ -84,7 +84,7 @@ export default function DocItemTOCDesktop() {
         maxHeadingLevel={frontMatter.toc_max_heading_level}
         className={clsx(styles.docTOC, ThemeClassNames.docs.docTocDesktop)}
       />
-      <div style={{'marginTop': '32px'}}>
+      <div>
         <Feedback side ={toc.length >= 7 ? 'left' : 'bottom'}/>
       </div>
 
@@ -98,7 +98,7 @@ export default function DocItemTOCDesktop() {
                       onClick={() => {
                         setClosed(true);
                         galaxyOnClick('docs.sidebarCloudAdvert.advertDismissed');
-                        window.sessionStorage.setItem('doc-cloud-card-banner', 'closed');
+                        window.localStorage.setItem('doc-cloud-card-banner', 'closed');
                       }}>
                     <IconClose color="var(--ifm-color-emphasis-600)" width={10} height={10}/>
                   </button>

src/theme/DocItem/TOC/Desktop/styles.module.scss

@@ -32,22 +32,21 @@
 }
 
 .docCloudCardHeader h6 {
-  margin-bottom: 16px;
   font-weight: 600;
-  font-size: 16px;
+  font-size: 13px;
 }
 
 .docCloudCardContent {
   font-weight: 400;
-  font-size: 14px;
-  margin-bottom: 24px;
+  font-size: 12px;
 }
 
 
 .docCloudCardLink {
   width: fit-content;
-  padding: 0 16px;
+  padding: 0 12px;
   white-space: nowrap;
+  font-size: 12px;
 }
 .docCloudCardLink:hover {
   text-decoration: none;
@@ -74,5 +73,6 @@
     padding: 1rem;
     border-radius: 8px;
     margin-bottom: 24px;
+    height: 200px;
   }
 }