feat: add Queries activities banner

Author: astandrik

src/components/MetricChart/MetricChart.scss

@@ -7,6 +7,14 @@
     border: 1px solid var(--g-color-line-generic);
     border-radius: 8px;
 
+    &_noBorder {
+        border: none;
+    }
+
+    &_fullWidth {
+        width: 100%;
+    }
+
     &__title {
         margin-bottom: 10px;
     }

src/components/MetricChart/MetricChart.tsx

@@ -3,11 +3,14 @@ import React from 'react';
 import ChartKit, {settings} from '@gravity-ui/chartkit';
 import type {YagrWidgetData} from '@gravity-ui/chartkit/yagr';
 import {YagrPlugin} from '@gravity-ui/chartkit/yagr';
+import {Flex} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import type {TimeFrame} from '../../utils/timeframes';
 import {ResponseError} from '../Errors/ResponseError';
 import {Loader} from '../Loader';
+import {TimeFrameDropdown} from '../TimeFrameDropdown/TimeFrameDropdown';
+import {TimeFrameSelector} from '../TimeFrameSelector/TimeFrameSelector';
 
 import {colorToRGBA, colors} from './colors';
 import {getDefaultDataFormatter} from './getDefaultDataFormatter';
@@ -122,6 +125,21 @@ 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;
+
+    /** Show timeframe selector to the right of chart title */
+    withTimeframeSelector?: boolean;
+
+    /** Callback when timeframe is changed via the selector */
+    onTimeFrameChange?: (timeFrame: TimeFrame) => void;
+
+    /** Timeframe component to choose between 'selector' and 'dropdown' */
+    timeFrameComponent?: 'selector' | 'dropdown';
 }
 
 export const MetricChart = ({
@@ -135,7 +153,16 @@ export const MetricChart = ({
     chartOptions,
     onChartDataStatusChange,
     isChartVisible,
+    noBorder,
+    fullWidth,
+    withTimeframeSelector,
+    onTimeFrameChange,
+    timeFrameComponent = 'selector',
 }: 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 +171,7 @@ export const MetricChart = ({
             database,
             metrics,
             timeFrame,
-            maxDataPoints: width / 2,
+            maxDataPoints,
         },
         {pollingInterval: autorefresh},
     );
@@ -176,13 +203,22 @@ export const MetricChart = ({
 
     return (
         <div
-            className={b(null)}
+            className={b({noBorder, fullWidth})}
             style={{
                 height,
-                width,
+                width: fullWidth ? '100%' : width,
             }}
         >
-            <div className={b('title')}>{title}</div>
+            <Flex className={b('title')} justifyContent="space-between" alignItems="center">
+                <div>{title}</div>
+                {withTimeframeSelector &&
+                    onTimeFrameChange &&
+                    (timeFrameComponent === 'dropdown' ? (
+                        <TimeFrameDropdown value={timeFrame} onChange={onTimeFrameChange} />
+                    ) : (
+                        <TimeFrameSelector value={timeFrame} onChange={onTimeFrameChange} />
+                    ))}
+            </Flex>
             {renderContent()}
         </div>
     );

src/components/QueriesActivityBar/QueriesActivityBar.scss

@@ -0,0 +1,106 @@
+@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);
+
+        padding: 0 0 var(--g-spacing-2);
+    }
+
+    &__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);
+
+        @media (max-width: 1200px) {
+            flex-direction: column;
+        }
+    }
+
+    &__chart-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--g-spacing-3);
+    }
+
+    // Focus states for accessibility
+    &__header:focus-visible,
+    &__open-queries-button:focus-visible {
+        outline: 2px solid var(--g-color-line-focus);
+        outline-offset: 2px;
+    }
+}