ydb-embedded-ui 11.0.0 → 11.1.0

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

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

package/dist/components/MetricChart/MetricChart.js

@@ -75,7 +75,10 @@ const prepareWidgetData = (data, options = {}) => {
     };
 };
 const emptyChartData = { timeline: [], metrics: [] };
-export const MetricChart = ({ database, title, metrics, timeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, }) => {
+export const MetricChart = ({ database, metrics, timeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, noBorder, fullWidth, renderChartToolbar, }) => {
+    // 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
@@ -84,7 +87,7 @@ export const MetricChart = ({ database, title, metrics, timeFrame = '1h', autore
         database,
         metrics,
         timeFrame,
-        maxDataPoints: width / 2,
+        maxDataPoints,
     }, { pollingInterval: autorefresh });
     const loading = isFetching && !currentData;
     React.useEffect(() => {
@@ -100,9 +103,9 @@ export const MetricChart = ({ database, title, metrics, timeFrame = '1h', autore
         }
         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(null), style: {
+    return (_jsxs("div", { className: b({ noBorder }), style: {
             height,
-            width,
-        }, children: [_jsx("div", { className: b('title'), children: title }), renderContent()] }));
+            width: fullWidth ? '100%' : width,
+        }, children: [renderChartToolbar === null || renderChartToolbar === void 0 ? void 0 : renderChartToolbar(), 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,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 {

package/dist/components/QueriesActivityBar/QueriesActivityBar.d.ts

@@ -0,0 +1,6 @@
+import './QueriesActivityBar.scss';
+interface QueriesActivityBarProps {
+    tenantName: string;
+}
+export declare function QueriesActivityBar({ tenantName }: QueriesActivityBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/QueriesActivityBar/QueriesActivityBar.js

@@ -0,0 +1,80 @@
+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 { useHistory, useLocation } from 'react-router-dom';
+import { TenantTabsGroups, getTenantPath } from '../../containers/Tenant/TenantPages';
+import { parseQuery } from '../../routes';
+import { topQueriesApi } from '../../store/reducers/executeTopQueries/executeTopQueries';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../store/reducers/tenant/constants';
+import { cn } from '../../utils/cn';
+import { useAutoRefreshInterval } from '../../utils/hooks';
+import { chartApi } from '../MetricChart/reducer';
+import { QueriesActivityCharts } from './QueriesActivityCharts';
+import i18n from './i18n';
+import { calculateLatency, calculateQueriesPerSecond, formatTrendValue } from './utils';
+import './QueriesActivityBar.scss';
+const b = cn('queries-activity-bar');
+export function QueriesActivityBar({ tenantName }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const history = useHistory();
+    const location = useLocation();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const [expanded, setExpanded] = React.useState(false);
+    const [queriesTimeFrame] = React.useState('1h');
+    const [latenciesTimeFrame] = React.useState('1h');
+    // Fetch running queries
+    const { data: runningQueriesData } = topQueriesApi.useGetRunningQueriesQuery({
+        database: tenantName,
+        filters: {},
+    }, { pollingInterval: autoRefreshInterval });
+    // Fetch queries per second data for header metrics
+    const { data: queriesPerSecData } = chartApi.useGetChartDataQuery({
+        database: tenantName,
+        metrics: [{ target: 'queries.requests' }],
+        timeFrame: queriesTimeFrame,
+        maxDataPoints: 30,
+    }, { pollingInterval: autoRefreshInterval });
+    // Fetch latency data for header metrics
+    const { data: latencyData } = chartApi.useGetChartDataQuery({
+        database: tenantName,
+        metrics: [{ target: 'queries.latencies.p99' }],
+        timeFrame: latenciesTimeFrame,
+        maxDataPoints: 30,
+    }, { pollingInterval: autoRefreshInterval });
+    const runningQueriesCount = ((_c = (_b = (_a = runningQueriesData === null || runningQueriesData === void 0 ? void 0 : runningQueriesData.resultSets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.result) === null || _c === void 0 ? void 0 : _c.length) || 0;
+    const qps = React.useMemo(() => { var _a, _b; return calculateQueriesPerSecond((_b = (_a = queriesPerSecData === null || queriesPerSecData === void 0 ? void 0 : queriesPerSecData.metrics) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.data); }, [(_e = (_d = queriesPerSecData === null || queriesPerSecData === void 0 ? void 0 : queriesPerSecData.metrics) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.data]);
+    const latency = React.useMemo(() => { var _a, _b; return calculateLatency((_b = (_a = latencyData === null || latencyData === void 0 ? void 0 : latencyData.metrics) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.data); }, [(_g = (_f = latencyData === null || latencyData === void 0 ? void 0 : latencyData.metrics) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.data]);
+    // Calculate unique applications and users
+    const uniqueApplications = React.useMemo(() => {
+        var _a, _b, _c;
+        const apps = new Set();
+        (_c = (_b = (_a = runningQueriesData === null || runningQueriesData === void 0 ? void 0 : runningQueriesData.resultSets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.result) === null || _c === void 0 ? void 0 : _c.forEach((row) => {
+            if (row.ApplicationName) {
+                apps.add(String(row.ApplicationName));
+            }
+        });
+        return apps.size;
+    }, [runningQueriesData]);
+    const uniqueUsers = React.useMemo(() => {
+        var _a, _b, _c;
+        const users = new Set();
+        (_c = (_b = (_a = runningQueriesData === null || runningQueriesData === void 0 ? void 0 : runningQueriesData.resultSets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.result) === null || _c === void 0 ? void 0 : _c.forEach((row) => {
+            if (row.UserSID) {
+                users.add(String(row.UserSID));
+            }
+        });
+        return users.size;
+    }, [runningQueriesData]);
+    const handleOpenRunningQueries = () => {
+        const queryParams = parseQuery(location);
+        const path = getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+            queryMode: 'running',
+        });
+        history.push(path);
+    };
+    return (_jsxs("div", { className: b({ expanded }), 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 })] }));
+}
+//# sourceMappingURL=QueriesActivityBar.js.map

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

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

package/dist/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;
+    }
+}

package/dist/components/QueriesActivityBar/QueriesActivityCharts.d.ts

@@ -0,0 +1,6 @@
+interface QueriesActivityChartsProps {
+    tenantName: string;
+    expanded: boolean;
+}
+export declare function QueriesActivityCharts({ tenantName, expanded }: QueriesActivityChartsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/QueriesActivityBar/QueriesActivityCharts.js

@@ -0,0 +1,53 @@
+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 }) {
+    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) => {
+        return defaultDashboardConfig.find((chart) => chart.metrics.some((metric) => metric.target === target));
+    };
+    const queriesChartConfig = getChartByTarget('queries.requests');
+    const latenciesChartConfig = getChartByTarget('queries.latencies.p99');
+    // Early return if required charts are not found
+    if (!queriesChartConfig || !latenciesChartConfig) {
+        console.warn('Required chart configurations not found in defaultDashboardConfig');
+        return null;
+    }
+    // Refetch data only if charts have successfully loaded at least once
+    const shouldRefresh = hasChartsLoaded ? autoRefreshInterval : 0;
+    const handleChartDataStatusChange = React.useCallback((status) => {
+        if (status === 'success') {
+            setHasChartsLoaded(true);
+        }
+    }, []);
+    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
+    if (!expanded) {
+        return null;
+    }
+    return (_jsxs("div", { className: b('charts'), 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, 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, noBorder: true, fullWidth: true, renderChartToolbar: renderLatenciesChartToolbar }) })] }));
+}
+//# sourceMappingURL=QueriesActivityCharts.js.map

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

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

package/dist/components/QueriesActivityBar/i18n/en.json

@@ -0,0 +1,10 @@
+{
+    "title_queries-activity": "Queries Activity",
+    "context_monitor-changes-realtime": "Monitor changes in real time",
+    "value_per-sec": "{{count}} per sec",
+    "value_ms": "{{time}} ms",
+    "field_running-queries": "Running Queries",
+    "field_applications": "Applications",
+    "field_users": "Users",
+    "action_open-running-queries": "Open Running Queries"
+}

package/dist/components/QueriesActivityBar/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/components/QueriesActivityBar/i18n/index.js

@@ -0,0 +1,6 @@
+import { Lang, i18n } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-queries-activity-bar';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+export default i18n.keyset(COMPONENT);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/QueriesActivityBar/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,MAAM,WAAW,CAAC;AAE3B,MAAM,SAAS,GAAG,0BAA0B,CAAC;AAE7C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;AAE5C,eAAe,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}

package/dist/components/QueriesActivityBar/utils.d.ts

@@ -0,0 +1,24 @@
+export declare enum TrendDirection {
+    Up = "up",
+    Down = "down"
+}
+export interface MetricTrend {
+    value: number;
+    direction: TrendDirection;
+}
+export interface MetricCalculationResult {
+    value: string;
+    trend: MetricTrend;
+}
+/**
+ * Calculate queries per second metrics from chart data
+ */
+export declare const calculateQueriesPerSecond: (data?: (number | null)[]) => MetricCalculationResult;
+/**
+ * Calculate latency metrics from chart data
+ */
+export declare const calculateLatency: (data?: (number | null)[]) => MetricCalculationResult;
+/**
+ * Format trend value for display
+ */
+export declare const formatTrendValue: (val: number) => string;

package/dist/components/QueriesActivityBar/utils.js

@@ -0,0 +1,85 @@
+const FALLBACK_VALUE = 0.000001;
+export var TrendDirection;
+(function (TrendDirection) {
+    TrendDirection["Up"] = "up";
+    TrendDirection["Down"] = "down";
+})(TrendDirection || (TrendDirection = {}));
+/**
+ * Calculate queries per second metrics from chart data
+ */
+export const calculateQueriesPerSecond = (data) => {
+    var _a, _b;
+    const emptyFallback = {
+        value: FALLBACK_VALUE.toFixed(0),
+        trend: { value: FALLBACK_VALUE, direction: TrendDirection.Up },
+    };
+    if (!data) {
+        return emptyFallback;
+    }
+    // Safe array access with length validation
+    if (data.length === 0) {
+        return emptyFallback;
+    }
+    const current = (_a = data[data.length - 1]) !== null && _a !== void 0 ? _a : FALLBACK_VALUE;
+    const previous = data.length >= 2 ? ((_b = data[data.length - 2]) !== null && _b !== void 0 ? _b : FALLBACK_VALUE) : FALLBACK_VALUE;
+    let trend;
+    if (previous > 0) {
+        const change = current - previous;
+        trend = {
+            value: Math.abs(change),
+            direction: change >= 0 ? TrendDirection.Up : TrendDirection.Down,
+        };
+    }
+    else {
+        trend = { value: FALLBACK_VALUE, direction: TrendDirection.Up };
+    }
+    return { value: current.toFixed(0), trend };
+};
+/**
+ * Calculate latency metrics from chart data
+ */
+export const calculateLatency = (data) => {
+    var _a, _b;
+    if (!data) {
+        return {
+            value: FALLBACK_VALUE.toFixed(1),
+            trend: { value: FALLBACK_VALUE, direction: TrendDirection.Up },
+        };
+    }
+    // Safe array access with length validation
+    if (data.length === 0) {
+        return {
+            value: FALLBACK_VALUE.toFixed(1),
+            trend: { value: FALLBACK_VALUE, direction: TrendDirection.Up },
+        };
+    }
+    const current = (_a = data[data.length - 1]) !== null && _a !== void 0 ? _a : FALLBACK_VALUE;
+    const previous = data.length >= 2 ? ((_b = data[data.length - 2]) !== null && _b !== void 0 ? _b : FALLBACK_VALUE) : FALLBACK_VALUE;
+    let trend;
+    if (previous > 0) {
+        const change = current - previous;
+        trend = {
+            value: Math.abs(change),
+            direction: change >= 0 ? TrendDirection.Up : TrendDirection.Down,
+        };
+    }
+    else {
+        trend = { value: FALLBACK_VALUE, direction: TrendDirection.Up };
+    }
+    return { value: current.toFixed(1), trend };
+};
+/**
+ * Format trend value for display
+ */
+export const formatTrendValue = (val) => {
+    if (val >= 1) {
+        return `+${val.toFixed(0)}`;
+    }
+    else if (val > 0) {
+        return `+${val.toFixed(1)}`;
+    }
+    else {
+        return val.toFixed(1);
+    }
+};
+//# sourceMappingURL=utils.js.map

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

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

package/dist/components/TimeFrameDropdown/TimeFrameDropdown.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonProps } from '@gravity-ui/uikit';
+import type { TimeFrame } from '../../utils/timeframes';
+interface TimeFrameDropdownProps {
+    value: TimeFrame;
+    onChange: (value: TimeFrame) => void;
+    className?: string;
+    size?: ButtonProps['size'];
+    view?: ButtonProps['view'];
+}
+export declare const TimeFrameDropdown: ({ value, onChange, className, size, view, }: TimeFrameDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimeFrameDropdown/TimeFrameDropdown.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronDown } from '@gravity-ui/icons';
+import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
+import { TIMEFRAMES } from '../../utils/timeframes';
+import i18n from './i18n';
+const getTimeFrameLabel = (timeFrame) => {
+    switch (timeFrame) {
+        case '30m':
+            return i18n('value_30m');
+        case '1h':
+            return i18n('value_1h');
+        case '1d':
+            return i18n('value_1d');
+        case '1w':
+            return i18n('value_1w');
+        default:
+            return timeFrame;
+    }
+};
+const b = cn('ydb-timeframe-dropdown');
+export const TimeFrameDropdown = ({ value, onChange, className, size = 's', view = 'flat-secondary', }) => {
+    const items = React.useMemo(() => Object.keys(TIMEFRAMES).map((timeFrame) => ({
+        text: getTimeFrameLabel(timeFrame),
+        action: () => onChange(timeFrame),
+    })), [onChange]);
+    const renderSwitcher = (props) => (_jsxs(Button, { ...props, size: size, view: view, className: b(null, className), children: [getTimeFrameLabel(value), _jsx(Icon, { data: ChevronDown, size: 12 })] }));
+    return (_jsx(DropdownMenu, { renderSwitcher: renderSwitcher, items: items, popupProps: { placement: 'bottom-start' } }));
+};
+//# sourceMappingURL=TimeFrameDropdown.js.map

package/dist/components/TimeFrameDropdown/TimeFrameDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFrameDropdown.js","sourceRoot":"","sources":["../../../src/components/TimeFrameDropdown/TimeFrameDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAGlD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAE,EAAE;IAC/C,QAAQ,SAAS,EAAE,CAAC;QAChB,KAAK,KAAK;YACN,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7B,KAAK,IAAI;YACL,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5B,KAAK,IAAI;YACL,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5B,KAAK,IAAI;YACL,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5B;YACI,OAAO,SAAS,CAAC;IACzB,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAUvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,GAAG,EACV,IAAI,GAAG,gBAAgB,GACF,EAAE,EAAE;IACzB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACvB,GAAG,EAAE,CACD,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACxC,IAAI,EAAE,iBAAiB,CAAC,SAAsB,CAAC;QAC/C,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAsB,CAAC;KACjD,CAAC,CAAC,EACP,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC3C,MAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aACnE,iBAAiB,CAAC,KAAK,CAAC,EACzB,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,GAAI,IAChC,CACZ,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,EAAC,SAAS,EAAE,cAAc,EAAC,GACzC,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/components/TimeFrameDropdown/i18n/en.json

@@ -0,0 +1,6 @@
+{
+    "value_30m": "Last 30 min",
+    "value_1h": "Last hour",
+    "value_1d": "Last day",
+    "value_1w": "Last week"
+}

package/dist/components/TimeFrameDropdown/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "value_30m" | "value_1h" | "value_1d" | "value_1w", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/components/TimeFrameDropdown/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-timeframe-dropdown';
+export default registerKeysets(COMPONENT, { en });
+//# sourceMappingURL=index.js.map

package/dist/components/TimeFrameDropdown/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TimeFrameDropdown/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,WAAW,CAAC;AAE3B,MAAM,SAAS,GAAG,wBAAwB,CAAC;AAE3C,eAAe,eAAe,CAAC,SAAS,EAAE,EAAC,EAAE,EAAC,CAAC,CAAC"}

package/dist/containers/App/App.d.ts

@@ -10,7 +10,7 @@ export interface AppProps {
     userSettings?: YDBEmbeddedUISettings;
     children?: React.ReactNode;
 }
-declare function App({ store, history, singleClusterMode, children, userSettings, }: AppProps): import("react/jsx-runtime").JSX.Element;
+declare function App({ store, history, singleClusterMode, children, userSettings }: AppProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react-redux").ConnectedComponent<typeof App, {
     history: History;
     children?: React.ReactNode;