ydb-embedded-ui 11.2.0 → 11.3.0

package/dist/components/DoughnutMetrics/DoughnutMetrics.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TextProps } from '@gravity-ui/uikit';
+import type { HelpMarkProps, TextProps } from '@gravity-ui/uikit';
 import type { ProgressStatus } from '../../utils/progress';
 import './DoughnutMetrics.scss';
 interface LegendProps {
@@ -7,16 +7,18 @@ interface LegendProps {
     variant?: TextProps['variant'];
     color?: TextProps['color'];
     note?: React.ReactNode;
+    noteIconSize?: HelpMarkProps['iconSize'];
 }
 interface DoughnutProps {
     status: ProgressStatus;
     fillWidth: number;
     children?: React.ReactNode;
     className?: string;
+    size?: 'small' | 'medium' | 'large';
 }
-export declare function DoughnutMetrics({ status, fillWidth, children, className }: DoughnutProps): import("react/jsx-runtime").JSX.Element;
+export declare function DoughnutMetrics({ status, fillWidth, children, className, size, }: DoughnutProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DoughnutMetrics {
-    var Legend: ({ children, variant, color, note }: LegendProps) => import("react/jsx-runtime").JSX.Element;
+    var Legend: ({ children, variant, color, note, noteIconSize, }: LegendProps) => import("react/jsx-runtime").JSX.Element;
     var Value: ({ children, variant }: LegendProps) => import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/dist/components/DoughnutMetrics/DoughnutMetrics.js

@@ -1,15 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
 import './DoughnutMetrics.scss';
 const b = cn('ydb-doughnut-metrics');
-function Legend({ children, variant = 'subheader-3', color = 'primary', note }) {
-    return (_jsxs(Flex, { gap: 1, alignItems: "center", children: [_jsx(Text, { variant: variant, color: color, className: b('legend'), as: "div", children: children }), note && (_jsx(HelpMark, { className: b('legend-note'), popoverProps: { placement: 'right' }, children: note }))] }));
+const SizeContext = React.createContext('medium');
+function Legend({ children, variant = 'subheader-3', color = 'primary', note, noteIconSize, }) {
+    return (_jsxs(Flex, { gap: 1, alignItems: "center", children: [_jsx(Text, { variant: variant, color: color, className: b('legend'), as: "div", children: children }), note && (_jsx(HelpMark, { iconSize: noteIconSize || 'm', className: b('legend-note'), popoverProps: { placement: 'right' }, children: note }))] }));
 }
-function Value({ children, variant = 'subheader-2' }) {
-    return (_jsx(Text, { variant: variant, className: b('value'), children: children }));
+function Value({ children, variant }) {
+    const size = React.useContext(SizeContext);
+    const sizeVariantMap = {
+        small: 'subheader-1',
+        medium: 'subheader-2',
+        large: 'subheader-3',
+    };
+    const finalVariant = variant || sizeVariantMap[size];
+    return (_jsx(Text, { variant: finalVariant, className: b('value'), children: children }));
 }
-export function DoughnutMetrics({ status, fillWidth, children, className }) {
+export function DoughnutMetrics({ status, fillWidth, children, className, size = 'medium', }) {
     let filledDegrees = fillWidth * 3.6;
     let doughnutFillVar = 'var(--doughnut-color)';
     let doughnutBackdropVar = 'var(--doughnut-backdrop-color)';
@@ -18,9 +27,10 @@ export function DoughnutMetrics({ status, fillWidth, children, className }) {
         doughnutBackdropVar = 'var(--doughnut-color)';
         doughnutFillVar = 'var(--doughnut-overlap-color)';
     }
-    return (_jsx("div", { className: b(null, className), children: _jsx("div", { style: {
-                background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
-            }, className: b('doughnut', { status }), children: _jsx("div", { className: b('text-wrapper'), children: children }) }) }));
+    const doughnutStyle = {
+        background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
+    };
+    return (_jsx(SizeContext.Provider, { value: size, children: _jsxs("div", { className: b({ status }, className), style: { position: 'relative' }, children: [_jsx("div", { style: doughnutStyle, className: b('doughnut', { size }) }), _jsx("div", { className: b('text-wrapper'), children: children })] }) }));
 }
 DoughnutMetrics.Legend = Legend;
 DoughnutMetrics.Value = Value;

package/dist/components/DoughnutMetrics/DoughnutMetrics.js.map

@@ -1 +1 @@
-{"version":3,"file":"DoughnutMetrics.js","sourceRoot":"","sources":["../../../src/components/DoughnutMetrics/DoughnutMetrics.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAGlC,OAAO,wBAAwB,CAAC;AAEhC,MAAM,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,CAAC;AASrC,SAAS,MAAM,CAAC,EAAC,QAAQ,EAAE,OAAO,GAAG,aAAa,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,EAAc;IACrF,OAAO,CACH,MAAC,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,aAC7B,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAC,KAAK,YACjE,QAAQ,GACN,EACN,IAAI,IAAI,CACL,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,YAAY,EAAE,EAAC,SAAS,EAAE,OAAO,EAAC,YACpE,IAAI,GACE,CACd,IACE,CACV,CAAC;AACN,CAAC;AACD,SAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,OAAO,GAAG,aAAa,EAAc;IAC3D,OAAO,CACH,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACxC,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AASD,MAAM,UAAU,eAAe,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAgB;IACnF,IAAI,aAAa,GAAG,SAAS,GAAG,GAAG,CAAC;IACpC,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,mBAAmB,GAAG,gCAAgC,CAAC;IAE3D,IAAI,aAAa,GAAG,GAAG,EAAE,CAAC;QACtB,aAAa,IAAI,GAAG,CAAC;QACrB,mBAAmB,GAAG,uBAAuB,CAAC;QAC9C,eAAe,GAAG,+BAA+B,CAAC;IACtD,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC9B,cACI,KAAK,EAAE;gBACH,UAAU,EAAE,kBAAkB,eAAe,SAAS,aAAa,QAAQ,mBAAmB,IAAI,aAAa,aAAa;aAC/H,EACD,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,EAAC,MAAM,EAAC,CAAC,YAElC,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAAG,QAAQ,GAAO,GACjD,GACJ,CACT,CAAC;AACN,CAAC;AAED,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC;AAChC,eAAe,CAAC,KAAK,GAAG,KAAK,CAAC"}
+{"version":3,"file":"DoughnutMetrics.js","sourceRoot":"","sources":["../../../src/components/DoughnutMetrics/DoughnutMetrics.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAGlC,OAAO,wBAAwB,CAAC;AAEhC,MAAM,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAErC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA+B,QAAQ,CAAC,CAAC;AAUhF,SAAS,MAAM,CAAC,EACZ,QAAQ,EACR,OAAO,GAAG,aAAa,EACvB,KAAK,GAAG,SAAS,EACjB,IAAI,EACJ,YAAY,GACF;IACV,OAAO,CACH,MAAC,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,aAC7B,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAC,KAAK,YACjE,QAAQ,GACN,EACN,IAAI,IAAI,CACL,KAAC,QAAQ,IACL,QAAQ,EAAE,YAAY,IAAI,GAAG,EAC7B,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAC3B,YAAY,EAAE,EAAC,SAAS,EAAE,OAAO,EAAC,YAEjC,IAAI,GACE,CACd,IACE,CACV,CAAC;AACN,CAAC;AACD,SAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,OAAO,EAAc;IAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAE3C,MAAM,cAAc,GAAG;QACnB,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,aAAa;QACrB,KAAK,EAAE,aAAa;KACd,CAAC;IAEX,MAAM,YAAY,GAAG,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;IAErD,OAAO,CACH,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAC7C,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AAUD,MAAM,UAAU,eAAe,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,GACH;IACZ,IAAI,aAAa,GAAG,SAAS,GAAG,GAAG,CAAC;IACpC,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,mBAAmB,GAAG,gCAAgC,CAAC;IAE3D,IAAI,aAAa,GAAG,GAAG,EAAE,CAAC;QACtB,aAAa,IAAI,GAAG,CAAC;QACrB,mBAAmB,GAAG,uBAAuB,CAAC;QAC9C,eAAe,GAAG,+BAA+B,CAAC;IACtD,CAAC;IAED,MAAM,aAAa,GAAwB;QACvC,UAAU,EAAE,kBAAkB,eAAe,SAAS,aAAa,QAAQ,mBAAmB,IAAI,aAAa,aAAa;KAC/H,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAC7B,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAC,aACjE,cAAK,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,EAAC,IAAI,EAAC,CAAC,GAAQ,EACnE,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAAG,QAAQ,GAAO,IACjD,GACa,CAC1B,CAAC;AACN,CAAC;AAED,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC;AAChC,eAAe,CAAC,KAAK,GAAG,KAAK,CAAC"}

package/dist/components/DoughnutMetrics/DoughnutMetrics.scss

@@ -1,64 +1,75 @@
 .ydb-doughnut-metrics {
     --doughnut-border: 16px;
-    --doughnut-color: var(--ydb-color-status-green);
-    --doughnut-backdrop-color: var(--g-color-base-positive-light);
+    --doughnut-width: 100px;
+    --doughnut-wrapper-indent: calc(var(--doughnut-border) + 5px);
+    --doughnut-color: var(--g-color-base-positive-heavy);
+    --doughnut-backdrop-color: var(--g-color-base-generic);
     --doughnut-overlap-color: var(--g-color-base-positive-heavy-hover);
+    --doughnut-text-color: var(--g-color-text-positive-heavy);
+
     &__doughnut {
         position: relative;
 
-        width: 100px;
+        width: var(--doughnut-width);
         aspect-ratio: 1;
 
         border-radius: 50%;
+        mask: radial-gradient(circle at center, transparent 46%, #000 46.5%);
 
         transform: rotate(180deg);
-        &::before {
-            display: block;
-
-            height: calc(100% - calc(var(--doughnut-border) * 2));
+    }
 
-            content: '';
+    // Size modifiers - using visually centered values
+    &__doughnut_size_small {
+        --doughnut-border: 12px;
+        --doughnut-width: 65px;
+        --doughnut-wrapper-indent: 15px;
+    }
 
-            border-radius: 50%;
-            background-color: var(--g-color-base-background);
+    &__doughnut_size_medium {
+        --doughnut-border: 16px;
+        --doughnut-width: 100px;
+        --doughnut-wrapper-indent: calc(var(--doughnut-border) + 5px);
+    }
 
-            transform: translate(var(--doughnut-border), var(--doughnut-border));
-            aspect-ratio: 1;
-        }
+    &__doughnut_size_large {
+        --doughnut-border: 20px;
+        --doughnut-width: 130px;
+        --doughnut-wrapper-indent: 25px;
     }
-    &__doughnut_status_warning {
-        --doughnut-color: var(--ydb-color-status-yellow);
-        --doughnut-backdrop-color: var(--g-color-base-warning-light);
+
+    &_status_warning {
+        --doughnut-color: var(--g-color-base-warning-heavy);
         --doughnut-overlap-color: var(--g-color-base-warning-heavy-hover);
+        --doughnut-text-color: var(--g-color-text-warning);
     }
-    &__doughnut_status_danger {
-        --doughnut-color: var(--ydb-color-status-red);
-        --doughnut-backdrop-color: var(--g-color-base-danger-light);
+    &_status_danger {
+        --doughnut-color: var(--g-color-base-danger-heavy);
         --doughnut-overlap-color: var(--g-color-base-danger-heavy-hover);
+        --doughnut-text-color: var(--g-color-base-danger-heavy);
     }
     &__text-wrapper {
-        --wrapper-indent: calc(var(--doughnut-border) + 5px);
-
         position: absolute;
-        top: var(--wrapper-indent);
-        right: var(--wrapper-indent);
+        z-index: 1;
+        top: var(--doughnut-wrapper-indent);
+        left: var(--doughnut-wrapper-indent);
 
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
 
-        width: calc(100% - calc(var(--wrapper-indent) * 2));
+        width: calc(100% - calc(var(--doughnut-wrapper-indent) * 2));
 
         text-align: center;
 
-        transform: rotate(180deg);
         aspect-ratio: 1;
     }
+
     &__value {
-        position: absolute;
-        bottom: 20px;
+        color: var(--doughnut-text-color);
     }
+
     &__legend-note {
         display: flex;
     }

package/dist/components/MetricChart/MetricChart.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import type { TimeFrame } from '../../utils/timeframes';
 import type { ChartOptions, MetricDescription, OnChartDataStatusChange } from './types';
 import './MetricChart.scss';
 interface DiagnosticsChartProps {
     database: string;
     metrics: MetricDescription[];
-    timeFrame?: TimeFrame;
+    defaultTimeFrame?: TimeFrame;
     autorefresh?: number;
     height?: number;
     width?: number;
@@ -17,12 +16,8 @@ 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;
+    /** Chart title displayed in the toolbar */
+    title: string;
 }
-export declare const MetricChart: ({ database, metrics, timeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, noBorder, fullWidth, renderChartToolbar, }: DiagnosticsChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetricChart: ({ database, metrics, defaultTimeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, title, }: DiagnosticsChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MetricChart/MetricChart.js

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ChartKit, { settings } from '@gravity-ui/chartkit';
 import { YagrPlugin } from '@gravity-ui/chartkit/yagr';
+import { Flex } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
 import { ResponseError } from '../Errors/ResponseError';
 import { Loader } from '../Loader';
+import { TimeFrameDropdown } from '../TimeFrameDropdown/TimeFrameDropdown';
 import { colorToRGBA, colors } from './colors';
 import { getDefaultDataFormatter } from './getDefaultDataFormatter';
 import { chartApi } from './reducer';
 import './MetricChart.scss';
 const b = cn('ydb-metric-chart');
+// Constants
+const DEFAULT_EFFECTIVE_WIDTH = 600; // Used for maxDataPoints calculation when using fullWidth
 settings.set({ plugins: [YagrPlugin] });
 const prepareWidgetData = (data, options = {}) => {
     const { dataType, scaleRange, showLegend } = options;
@@ -75,10 +79,10 @@ const prepareWidgetData = (data, options = {}) => {
     };
 };
 const emptyChartData = { timeline: [], metrics: [] };
-export const MetricChart = ({ database, metrics, timeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, noBorder, fullWidth, renderChartToolbar, }) => {
+export const MetricChart = ({ database, metrics, defaultTimeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, title, }) => {
+    const [timeFrame, setTimeFrame] = React.useState(defaultTimeFrame);
     // Use a reasonable default for maxDataPoints when fullWidth is true
-    const effectiveWidth = fullWidth ? 600 : width;
-    const maxDataPoints = effectiveWidth / 2;
+    const maxDataPoints = DEFAULT_EFFECTIVE_WIDTH / 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
@@ -94,6 +98,7 @@ export const MetricChart = ({ database, metrics, timeFrame = '1h', autorefresh,
         return onChartDataStatusChange === null || onChartDataStatusChange === void 0 ? void 0 : onChartDataStatusChange(status === 'fulfilled' ? 'success' : 'loading');
     }, [status, onChartDataStatusChange]);
     const convertedData = prepareWidgetData(currentData || emptyChartData, chartOptions);
+    const renderToolbar = () => (_jsxs(Flex, { className: b('toolbar'), justifyContent: "space-between", alignItems: "center", children: [_jsx("div", { children: title }), _jsx(TimeFrameDropdown, { value: timeFrame, onChange: setTimeFrame })] }));
     const renderContent = () => {
         if (loading) {
             return _jsx(Loader, {});
@@ -103,9 +108,8 @@ export const MetricChart = ({ database, metrics, timeFrame = '1h', autorefresh,
         }
         return (_jsxs("div", { className: b('chart'), children: [_jsx(ChartKit, { type: "yagr", data: convertedData }), error ? _jsx(ResponseError, { className: b('error'), error: error }) : null] }));
     };
-    return (_jsxs("div", { className: b({ noBorder }), style: {
+    return (_jsxs("div", { className: b(), style: {
             height,
-            width: fullWidth ? '100%' : width,
-        }, children: [renderChartToolbar === null || renderChartToolbar === void 0 ? void 0 : renderChartToolbar(), renderContent()] }));
+        }, children: [renderToolbar(), renderContent()] }));
 };
 //# sourceMappingURL=MetricChart.js.map

package/dist/components/MetricChart/MetricChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricChart.js","sourceRoot":"","sources":["../../../src/components/MetricChart/MetricChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MetricChart.js","sourceRoot":"","sources":["../../../src/components/MetricChart/MetricChart.tsx"],"names":[],"mappings":"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"}

package/dist/components/MetricChart/MetricChart.scss

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

package/dist/components/QueriesActivityBar/QueriesActivityBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { CirclePlay, Clock, Display, Person, Rocket } from '@gravity-ui/icons';
-import { ArrowToggle, Button, Disclosure, Flex, Icon, Label, Text } from '@gravity-ui/uikit';
+import { ArrowToggle, Button, Card, Flex, Icon, Label, Text } from '@gravity-ui/uikit';
 import { useHistory, useLocation } from 'react-router-dom';
 import { TenantTabsGroups, getTenantPath } from '../../containers/Tenant/TenantPages';
 import { parseQuery } from '../../routes';
@@ -92,6 +92,9 @@ export function QueriesActivityBar({ tenantName }) {
         });
         history.push(path);
     };
-    return (_jsxs("div", { className: b({ expanded }), style: { display: isActivityBarHidden ? 'none' : undefined }, children: [_jsxs(Disclosure, { expanded: expanded, onUpdate: setExpanded, className: b('disclosure'), children: [_jsx(Disclosure.Summary, { children: (props) => (_jsxs("div", { ...props, className: b('header'), children: [_jsxs(Flex, { justifyContent: "space-between", className: b('content-wrapper'), children: [_jsxs(Flex, { direction: "column", className: b('title-section'), children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: i18n('title_queries-activity') }), _jsx(Text, { color: "secondary", variant: "caption-2", className: b('subtitle'), children: i18n('context_monitor-changes-realtime') })] }), _jsxs("div", { className: b('metrics'), children: [_jsx(Label, { theme: runningQueriesCount > 0 ? 'success' : 'unknown', size: "s", icon: _jsx(Icon, { data: CirclePlay, size: 14 }), children: runningQueriesCount }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Rocket, size: 14 }), value: formatTrendValue(qps.trend.value), children: i18n('value_per-sec', { count: qps.value }) }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Clock, size: 14 }), value: formatTrendValue(latency.trend.value), children: i18n('value_ms', { time: latency.value }) })] })] }), _jsx(ArrowToggle, { direction: props.expanded ? 'top' : 'bottom' })] })) }), expanded ? (_jsx("div", { className: b('content'), children: _jsxs("div", { className: b('stats'), children: [_jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: CirclePlay }), size: "s", value: String(runningQueriesCount), children: i18n('field_running-queries') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Display }), size: "s", value: String(uniqueApplications), children: i18n('field_applications') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Person }), size: "s", value: String(uniqueUsers), children: i18n('field_users') }), _jsx(Button, { view: "outlined", size: "s", onClick: handleOpenRunningQueries, className: b('open-queries-button'), children: i18n('action_open-running-queries') })] }) })) : null] }), _jsx(QueriesActivityCharts, { tenantName: tenantName, expanded: expanded, onChartDataStatusChange: handleChartDataStatusChange })] }));
+    const handleToggleExpanded = () => {
+        setExpanded(!expanded);
+    };
+    return (_jsx("div", { className: b({ expanded }), style: { display: isActivityBarHidden ? 'none' : undefined }, children: _jsxs(Card, { className: b('card'), type: "container", view: expanded ? 'outlined' : 'raised', children: [_jsxs("div", { className: b('header'), onClick: handleToggleExpanded, children: [_jsxs(Flex, { justifyContent: "space-between", className: b('content-wrapper'), children: [_jsxs(Flex, { direction: "column", className: b('title-section'), children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: i18n('title_queries-activity') }), _jsx(Text, { color: "secondary", variant: "caption-2", className: b('subtitle'), children: i18n('context_monitor-changes-realtime') })] }), _jsxs("div", { className: b('metrics'), children: [_jsx(Label, { theme: runningQueriesCount > 0 ? 'success' : 'unknown', size: "s", icon: _jsx(Icon, { data: CirclePlay, size: 14 }), children: runningQueriesCount }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Rocket, size: 14 }), value: formatTrendValue(qps.trend.value), children: i18n('value_per-sec', { count: qps.value }) }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Clock, size: 14 }), value: formatTrendValue(latency.trend.value), children: i18n('value_ms', { time: latency.value }) })] })] }), _jsx(ArrowToggle, { direction: expanded ? 'top' : 'bottom' })] }), expanded && (_jsx("div", { className: b('content'), children: _jsxs("div", { className: b('stats'), children: [_jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: CirclePlay }), size: "s", value: String(runningQueriesCount), children: i18n('field_running-queries') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Display }), size: "s", value: String(uniqueApplications), children: i18n('field_applications') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Person }), size: "s", value: String(uniqueUsers), children: i18n('field_users') }), _jsx(Button, { view: "outlined", size: "s", onClick: handleOpenRunningQueries, className: b('open-queries-button'), children: i18n('action_open-running-queries') })] }) })), _jsx(QueriesActivityCharts, { tenantName: tenantName, expanded: expanded, onChartDataStatusChange: handleChartDataStatusChange })] }) }));
 }
 //# sourceMappingURL=QueriesActivityBar.js.map

package/dist/components/QueriesActivityBar/QueriesActivityBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueriesActivityBar.js","sourceRoot":"","sources":["../../../src/components/QueriesActivityBar/QueriesActivityBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueriesActivityBar.js","sourceRoot":"","sources":["../../../src/components/QueriesActivityBar/QueriesActivityBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/QueriesActivityBar/QueriesActivityBar.scss

@@ -3,22 +3,15 @@
 .queries-activity-bar {
     $b: &;
 
-    margin-bottom: var(--diagnostics-section-title-margin);
+    border-radius: var(--g-border-radius-s);
 
-    border: 1px solid transparent;
-    border-radius: var(--g-border-radius-m);
+    &__card {
+        width: 100%;
 
-    // Collapsed state (default)
-    background-color: var(--g-color-base-float);
+        // Override Card's default padding for custom content layout
+        padding: 0;
 
-    &_expanded {
-        border: 1px solid var(--g-color-base-generic);
-        border-radius: var(--g-border-radius-m);
-        background-color: transparent;
-    }
-
-    &__disclosure {
-        width: 100%;
+        border-radius: var(--g-border-radius-s);
     }
 
     &__header {
@@ -31,15 +24,21 @@
 
         cursor: pointer;
 
-        border-radius: var(--g-border-radius-m);
+        border: 1px solid transparent;
+        border-radius: var(--g-border-radius-s);
 
         transition: background-color 0.15s ease;
 
         &:hover {
-            background-color: var(--g-color-base-simple-hover);
+            background-color: var(--g-color-base-float-hover);
+        }
+
+        #{$b}_expanded & {
+            border: none;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
         }
 
-        // When expanded, only round top corners
         #{$b}_expanded &:hover {
             background-color: transparent;
         }
@@ -62,6 +61,9 @@
         display: flex;
         flex-direction: column;
         gap: var(--g-spacing-4);
+
+        padding-top: var(--g-spacing-3);
+        padding-bottom: var(--g-spacing-3);
     }
 
     &__stats {
@@ -82,7 +84,6 @@
         gap: var(--g-spacing-4);
 
         padding: 0 var(--g-spacing-4);
-        padding-top: var(--g-spacing-4);
 
         @media (max-width: 1200px) {
             flex-direction: column;
@@ -96,10 +97,6 @@
         gap: var(--g-spacing-3);
     }
 
-    &__toolbar {
-        margin-bottom: 10px;
-    }
-
     // Focus states for accessibility
     &__header:focus-visible,
     &__open-queries-button:focus-visible {

package/dist/components/QueriesActivityBar/QueriesActivityCharts.js

@@ -1,17 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Flex } from '@gravity-ui/uikit';
 import { defaultDashboardConfig } from '../../containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig';
 import { cn } from '../../utils/cn';
 import { useAutoRefreshInterval } from '../../utils/hooks';
 import { MetricChart } from '../MetricChart/MetricChart';
-import { TimeFrameDropdown } from '../TimeFrameDropdown/TimeFrameDropdown';
 const b = cn('queries-activity-bar');
 const ACTIVITY_CHART_HEIGHT = 292;
 export function QueriesActivityCharts({ tenantName, expanded, onChartDataStatusChange, }) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const [queriesTimeFrame, setQueriesTimeFrame] = React.useState('1h');
-    const [latenciesTimeFrame, setLatenciesTimeFrame] = React.useState('1h');
     const [hasChartsLoaded, setHasChartsLoaded] = React.useState(false);
     // Extract chart configurations from defaultDashboardConfig
     const getChartByTarget = (target) => {
@@ -33,20 +29,12 @@ export function QueriesActivityCharts({ tenantName, expanded, onChartDataStatusC
         // Also call parent callback if provided
         onChartDataStatusChange === null || onChartDataStatusChange === void 0 ? void 0 : onChartDataStatusChange(status);
     }, [onChartDataStatusChange]);
-    const handleQueriesTimeFrameChange = React.useCallback((newTimeFrame) => {
-        setQueriesTimeFrame(newTimeFrame);
-    }, []);
-    const handleLatenciesTimeFrameChange = React.useCallback((newTimeFrame) => {
-        setLatenciesTimeFrame(newTimeFrame);
-    }, []);
-    const renderQueriesChartToolbar = React.useCallback(() => (_jsxs(Flex, { className: b('toolbar'), justifyContent: "space-between", alignItems: "center", children: [_jsx("div", { children: queriesChartConfig.title }), _jsx(TimeFrameDropdown, { value: queriesTimeFrame, onChange: handleQueriesTimeFrameChange })] })), [queriesChartConfig.title, queriesTimeFrame]);
-    const renderLatenciesChartToolbar = React.useCallback(() => (_jsxs(Flex, { className: b('toolbar'), justifyContent: "space-between", alignItems: "center", children: [_jsx("div", { children: latenciesChartConfig.title }), _jsx(TimeFrameDropdown, { value: latenciesTimeFrame, onChange: handleLatenciesTimeFrameChange })] })), [latenciesChartConfig.title, latenciesTimeFrame]);
     // WORKAROUND: Charts are rendered outside Disclosure component due to YAGR tooltip bug
     // Issue: https://github.com/gravity-ui/yagr/issues/262
     // Problem: YAGR tooltips don't work when charts are mounted inside collapsible containers
     // that use CSS transforms or have complex nested DOM structures. The tooltip initialization
     // fails when the chart is not immediately visible during mounting.
     // TODO: Remove this workaround once the upstream issue is fixed
-    return (_jsxs("div", { className: b('charts'), style: { display: expanded ? undefined : 'none' }, children: [_jsx("div", { className: b('chart-container'), children: _jsx(MetricChart, { database: tenantName, metrics: queriesChartConfig.metrics, timeFrame: queriesTimeFrame, autorefresh: shouldRefresh, height: ACTIVITY_CHART_HEIGHT, chartOptions: queriesChartConfig.options, onChartDataStatusChange: handleChartDataStatusChange, isChartVisible: hasChartsLoaded && expanded, noBorder: true, fullWidth: true, renderChartToolbar: renderQueriesChartToolbar }) }), _jsx("div", { className: b('chart-container'), children: _jsx(MetricChart, { database: tenantName, metrics: latenciesChartConfig.metrics, timeFrame: latenciesTimeFrame, autorefresh: shouldRefresh, height: ACTIVITY_CHART_HEIGHT, chartOptions: latenciesChartConfig.options, onChartDataStatusChange: handleChartDataStatusChange, isChartVisible: hasChartsLoaded && expanded, noBorder: true, fullWidth: true, renderChartToolbar: renderLatenciesChartToolbar }) })] }));
+    return (_jsxs("div", { className: b('charts'), style: { display: expanded ? undefined : 'none' }, children: [_jsx("div", { className: b('chart-container'), children: _jsx(MetricChart, { database: tenantName, metrics: queriesChartConfig.metrics, autorefresh: shouldRefresh, height: ACTIVITY_CHART_HEIGHT, chartOptions: queriesChartConfig.options, onChartDataStatusChange: handleChartDataStatusChange, isChartVisible: hasChartsLoaded && expanded, title: queriesChartConfig.title }) }), _jsx("div", { className: b('chart-container'), children: _jsx(MetricChart, { database: tenantName, metrics: latenciesChartConfig.metrics, autorefresh: shouldRefresh, height: ACTIVITY_CHART_HEIGHT, chartOptions: latenciesChartConfig.options, onChartDataStatusChange: handleChartDataStatusChange, isChartVisible: hasChartsLoaded && expanded, title: latenciesChartConfig.title }) })] }));
 }
 //# sourceMappingURL=QueriesActivityCharts.js.map

package/dist/components/QueriesActivityBar/QueriesActivityCharts.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueriesActivityCharts.js","sourceRoot":"","sources":["../../../src/components/QueriesActivityBar/QueriesActivityCharts.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueriesActivityCharts.js","sourceRoot":"","sources":["../../../src/components/QueriesActivityBar/QueriesActivityCharts.tsx"],"names":[],"mappings":"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"}

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.scss

@@ -70,6 +70,9 @@
         font-size: 18px;
         line-height: 24px;
     }
+    &__popover-content {
+        padding: var(--g-spacing-4);
+    }
 
     &__popover-row {
         display: block;

package/dist/components/VDiskInfo/VDiskInfo.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from '@gravity-ui/uikit';
 import { getVDiskPagePath } from '../../routes';
+import { EVDiskState } from '../../types/api/vdisk';
 import { valueIsDefined } from '../../utils';
 import { cn } from '../../utils/cn';
-import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
+import { formatStorageValuesToGb, formatUptimeInSeconds, } from '../../utils/dataFormatters/dataFormatters';
 import { createVDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
 import { getSeverityColor } from '../../utils/disks/helpers';
 import { useIsUserAllowedToMakeChanges } from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import { bytesToSpeed } from '../../utils/utils';
 import { InfoViewer } from '../InfoViewer';
+import { InternalLink } from '../InternalLink';
 import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
 import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import { StatusIcon } from '../StatusIcon/StatusIcon';
@@ -19,7 +21,7 @@ const b = cn('ydb-vdisk-info');
 export function VDiskInfo({ data, withVDiskPageLink, withTitle, className, wrap, }) {
     var _a, _b, _c, _d;
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
-    const { AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, PDiskId, NodeId, } = data || {};
+    const { AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, ReplicationProgress, ReplicationSecondsRemaining, Donors, VDiskState, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, PDiskId, NodeId, } = data || {};
     const leftColumn = [];
     if (valueIsDefined(StoragePoolName)) {
         leftColumn.push({ label: vDiskInfoKeyset('pool-name'), value: StoragePoolName });
@@ -79,6 +81,24 @@ export function VDiskInfo({ data, withVDiskPageLink, withTitle, className, wrap,
             value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
         });
     }
+    // Only show replication progress and time remaining when disk is not replicated and state is OK
+    if (Replicated === false && VDiskState === EVDiskState.OK) {
+        if (valueIsDefined(ReplicationProgress)) {
+            rightColumn.push({
+                label: vDiskInfoKeyset('replication-progress'),
+                value: (_jsx(ProgressViewer, { value: Math.round(ReplicationProgress * 100), percents: true, colorizeProgress: true, capacity: 100 })),
+            });
+        }
+        if (valueIsDefined(ReplicationSecondsRemaining)) {
+            const timeRemaining = formatUptimeInSeconds(ReplicationSecondsRemaining);
+            if (timeRemaining) {
+                rightColumn.push({
+                    label: vDiskInfoKeyset('replication-time-remaining'),
+                    value: timeRemaining,
+                });
+            }
+        }
+    }
     if (valueIsDefined(VDiskSlotId)) {
         rightColumn.push({ label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId });
     }
@@ -100,6 +120,27 @@ export function VDiskInfo({ data, withVDiskPageLink, withTitle, className, wrap,
             value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
         });
     }
+    // Show donors list when replication is in progress
+    if (Replicated === false && VDiskState === EVDiskState.OK && (Donors === null || Donors === void 0 ? void 0 : Donors.length)) {
+        const donorLinks = Donors.map((donor, index) => {
+            const { StringifiedId: id, NodeId: dNodeId, PDiskId: dPDiskId, VDiskSlotId: dVSlotId, } = donor;
+            if (!id || !dVSlotId || !dNodeId || !dPDiskId) {
+                return null;
+            }
+            const vDiskPath = getVDiskPagePath({
+                nodeId: dNodeId,
+                pDiskId: dPDiskId,
+                vDiskSlotId: dVSlotId,
+            });
+            return (_jsx(InternalLink, { to: vDiskPath, children: id }, index));
+        }).filter(Boolean);
+        if (donorLinks.length) {
+            rightColumn.push({
+                label: vDiskInfoKeyset('donors'),
+                value: (_jsx(Flex, { direction: "column", gap: 1, children: donorLinks })),
+            });
+        }
+    }
     const diskParamsDefined = valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId);
     if (diskParamsDefined) {
         const links = [];