feat: add Queries activities banner (#2549)

Author: astandrik

src/components/MetricChart/MetricChart.scss

@@ -2,13 +2,15 @@
     display: flex;
     flex-direction: column;
 
-    padding: 16px 16px 8px;
+    padding: var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-2);
 
     border: 1px solid var(--g-color-line-generic);
     border-radius: 8px;
 
-    &__title {
-        margin-bottom: 10px;
+    &_noBorder {
+        padding: 0;
+
+        border: none;
     }
 
     &__chart {

src/components/MetricChart/MetricChart.tsx

@@ -103,7 +103,6 @@ const emptyChartData: PreparedMetricsData = {timeline: [], metrics: []};
 interface DiagnosticsChartProps {
     database: string;
 
-    title?: string;
     metrics: MetricDescription[];
     timeFrame?: TimeFrame;
 
@@ -122,11 +121,19 @@ interface DiagnosticsChartProps {
      * Pass isChartVisible prop to ensure proper chart render
      */
     isChartVisible?: boolean;
+
+    /** Remove border from chart */
+    noBorder?: boolean;
+
+    /** Make chart take full width of container */
+    fullWidth?: boolean;
+
+    /** Render custom toolbar content to the right of chart title */
+    renderChartToolbar?: () => React.ReactNode;
 }
 
 export const MetricChart = ({
     database,
-    title,
     metrics,
     timeFrame = '1h',
     autorefresh,
@@ -135,7 +142,14 @@ export const MetricChart = ({
     chartOptions,
     onChartDataStatusChange,
     isChartVisible,
+    noBorder,
+    fullWidth,
+    renderChartToolbar,
 }: DiagnosticsChartProps) => {
+    // Use a reasonable default for maxDataPoints when fullWidth is true
+    const effectiveWidth = fullWidth ? 600 : width;
+    const maxDataPoints = effectiveWidth / 2;
+
     const {currentData, error, isFetching, status} = chartApi.useGetChartDataQuery(
         // maxDataPoints param is calculated based on width
         // should be width > maxDataPoints to prevent points that cannot be selected
@@ -144,7 +158,7 @@ export const MetricChart = ({
             database,
             metrics,
             timeFrame,
-            maxDataPoints: width / 2,
+            maxDataPoints,
         },
         {pollingInterval: autorefresh},
     );
@@ -176,13 +190,13 @@ export const MetricChart = ({
 
     return (
         <div
-            className={b(null)}
+            className={b({noBorder})}
             style={{
                 height,
-                width,
+                width: fullWidth ? '100%' : width,
             }}
         >
-            <div className={b('title')}>{title}</div>
+            {renderChartToolbar?.()}
             {renderContent()}
         </div>
     );

src/components/QueriesActivityBar/QueriesActivityBar.scss

@@ -0,0 +1,109 @@
+@use '../../styles/mixins.scss';
+
+.queries-activity-bar {
+    $b: &;
+
+    margin-bottom: var(--diagnostics-section-title-margin);
+
+    border: 1px solid transparent;
+    border-radius: var(--g-border-radius-m);
+
+    // Collapsed state (default)
+    background-color: var(--g-color-base-float);
+
+    &_expanded {
+        border: 1px solid var(--g-color-base-generic);
+        border-radius: var(--g-border-radius-m);
+        background-color: transparent;
+    }
+
+    &__disclosure {
+        width: 100%;
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--g-spacing-3);
+
+        padding: var(--g-spacing-3) var(--g-spacing-4);
+
+        cursor: pointer;
+
+        border-radius: var(--g-border-radius-m);
+
+        transition: background-color 0.15s ease;
+
+        &:hover {
+            background-color: var(--g-color-base-simple-hover);
+        }
+
+        // When expanded, only round top corners
+        #{$b}_expanded &:hover {
+            background-color: transparent;
+        }
+    }
+
+    &__content-wrapper {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        gap: var(--g-spacing-2);
+    }
+
+    &__metrics {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-4);
+    }
+
+    &__stats {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--g-spacing-1);
+
+        padding: 0 var(--g-spacing-4);
+    }
+
+    &__open-queries-button {
+        margin-left: 4px;
+    }
+
+    &__charts {
+        display: flex;
+        gap: var(--g-spacing-4);
+
+        padding: 0 var(--g-spacing-4);
+        padding-top: var(--g-spacing-4);
+
+        @media (max-width: 1200px) {
+            flex-direction: column;
+        }
+    }
+
+    &__chart-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--g-spacing-3);
+    }
+
+    &__toolbar {
+        margin-bottom: 10px;
+    }
+
+    // Focus states for accessibility
+    &__header:focus-visible,
+    &__open-queries-button:focus-visible {
+        outline: 2px solid var(--g-color-line-focus);
+        outline-offset: 2px;
+    }
+}