ydb-embedded-ui 17.2.0 → 18.0.0

package/dist/containers/Tenant/Diagnostics/StorageUsage/MediaSectionSummary.js

@@ -2,15 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
 import { cn } from '../../../../utils/cn';
 import { formatNumber } from '../../../../utils/dataFormatters/dataFormatters';
+import { getMetricBytesCommonSize } from '../../../../utils/storageMetrics';
 import i18n from '../i18n';
-import { formatMetricBytes, formatOverhead, getConsistentMetricBytesSize, } from './storageUsageFormatters';
+import { formatMetricBytes, formatOverhead } from './storageUsageFormatters';
 import './MediaSectionSummary.scss';
 const b = cn('ydb-media-section-summary');
 function MetricCard({ title, value, note }) {
     return (_jsxs("div", { className: b('metric-card'), children: [_jsx(Text, { variant: "subheader-2", children: value }), _jsxs(Flex, { className: b('metric-card-subtitle'), alignItems: "center", gap: "1", children: [_jsx(Text, { color: "secondary", children: title }), note ? (_jsx(HelpMark, { iconSize: "s", className: b('metric-card-help-mark'), children: note })) : null] })] }));
 }
 export function MediaSectionSummary({ section }) {
-    const metricBytesSize = getConsistentMetricBytesSize([section.dataSize, section.diskUsage]);
+    const metricBytesSize = getMetricBytesCommonSize([section.dataSize, section.diskUsage]);
     return (_jsxs("div", { className: b('cards'), children: [_jsx("div", { className: b('card'), children: _jsxs("div", { className: b('main'), children: [_jsx(MetricCard, { title: i18n('field_storage-usage-data-size'), value: formatMetricBytes(section.dataSize, metricBytesSize), note: i18n('context_storage-usage-data-size-description') }), _jsx(MetricCard, { title: i18n('field_storage-usage-disk-usage'), value: formatMetricBytes(section.diskUsage, metricBytesSize) }), _jsx(MetricCard, { title: i18n('field_storage-usage-overhead'), value: formatOverhead(section.diskUsage, section.dataSize), note: i18n('context_storage-usage-overhead-description') })] }) }), _jsx("div", { className: b('card', { groups: true }), children: _jsx(MetricCard, { title: i18n('field_storage-usage-storage-groups'), value: formatNumber(section.storageGroupsCount) || '0' }) })] }));
 }
 //# sourceMappingURL=MediaSectionSummary.js.map

package/dist/containers/Tenant/Diagnostics/StorageUsage/MediaSectionSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaSectionSummary.js","sourceRoot":"","sources":["../../../../../src/containers/Tenant/Diagnostics/StorageUsage/MediaSectionSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAC,EAAE,EAAC,MAAM,sBAAsB,CAAC;AACxC,OAAO,EAAC,YAAY,EAAC,MAAM,iDAAiD,CAAC;AAC7E,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACH,iBAAiB,EACjB,cAAc,EACd,4BAA4B,GAC/B,MAAM,0BAA0B,CAAC;AAElC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,CAAC,GAAG,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAY1C,SAAS,UAAU,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAkB;IACrD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,aAC5B,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,YAAE,KAAK,GAAQ,EAC1C,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,aACnE,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,KAAK,GAAQ,EACrC,IAAI,CAAC,CAAC,CAAC,CACJ,KAAC,QAAQ,IAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,CAAC,uBAAuB,CAAC,YACvD,IAAI,GACE,CACd,CAAC,CAAC,CAAC,IAAI,IACL,IACL,CACT,CAAC;AACN,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAAC,OAAO,EAA2B;IACnE,MAAM,eAAe,GAAG,4BAA4B,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAE5F,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,aACtB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,+BAA+B,CAAC,EAC5C,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,QAAQ,EAAE,eAAe,CAAC,EAC3D,IAAI,EAAE,IAAI,CAAC,6CAA6C,CAAC,GAC3D,EACF,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,gCAAgC,CAAC,EAC7C,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,SAAS,EAAE,eAAe,CAAC,GAC9D,EACF,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,8BAA8B,CAAC,EAC3C,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC1D,IAAI,EAAE,IAAI,CAAC,4CAA4C,CAAC,GAC1D,IACA,GACJ,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,YACrC,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,oCAAoC,CAAC,EACjD,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,IAAI,GAAG,GACxD,GACA,IACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"MediaSectionSummary.js","sourceRoot":"","sources":["../../../../../src/containers/Tenant/Diagnostics/StorageUsage/MediaSectionSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAC,EAAE,EAAC,MAAM,sBAAsB,CAAC;AACxC,OAAO,EAAC,YAAY,EAAC,MAAM,iDAAiD,CAAC;AAC7E,OAAO,EAAC,wBAAwB,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,0BAA0B,CAAC;AAE3E,OAAO,4BAA4B,CAAC;AAEpC,MAAM,CAAC,GAAG,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAY1C,SAAS,UAAU,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAkB;IACrD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,aAC5B,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,YAAE,KAAK,GAAQ,EAC1C,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,aACnE,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,KAAK,GAAQ,EACrC,IAAI,CAAC,CAAC,CAAC,CACJ,KAAC,QAAQ,IAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,CAAC,uBAAuB,CAAC,YACvD,IAAI,GACE,CACd,CAAC,CAAC,CAAC,IAAI,IACL,IACL,CACT,CAAC;AACN,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAAC,OAAO,EAA2B;IACnE,MAAM,eAAe,GAAG,wBAAwB,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAExF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,aACtB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,+BAA+B,CAAC,EAC5C,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,QAAQ,EAAE,eAAe,CAAC,EAC3D,IAAI,EAAE,IAAI,CAAC,6CAA6C,CAAC,GAC3D,EACF,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,gCAAgC,CAAC,EAC7C,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,SAAS,EAAE,eAAe,CAAC,GAC9D,EACF,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,8BAA8B,CAAC,EAC3C,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC1D,IAAI,EAAE,IAAI,CAAC,4CAA4C,CAAC,GAC1D,IACA,GACJ,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,YACrC,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,CAAC,oCAAoC,CAAC,EACjD,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,IAAI,GAAG,GACxD,GACA,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricPageSummary/MetricPageSummary.d.ts

@@ -0,0 +1,13 @@
+import './MetricPageSummary.scss';
+type MetricPageSummaryProgressTheme = 'neutral' | 'success' | 'warning' | 'danger';
+interface MetricPageSummaryProps {
+    className?: string;
+    dataQa: string;
+    description: string;
+    legend?: string;
+    percentText: string;
+    progressTheme: MetricPageSummaryProgressTheme;
+    progressValue: number;
+}
+export declare function MetricPageSummary({ className, dataQa, description, legend, percentText, progressTheme, progressValue, }: MetricPageSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricPageSummary/MetricPageSummary.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Divider, Text } from '@gravity-ui/uikit';
+import { SegmentedProgress } from '../../../../../components/SegmentedProgress/SegmentedProgress';
+import { cn } from '../../../../../utils/cn';
+import i18n from '../i18n';
+import './MetricPageSummary.scss';
+const b = cn('ydb-tenant-metric-page-summary');
+export function MetricPageSummary({ className, dataQa, description, legend, percentText, progressTheme, progressValue, }) {
+    const hasLegend = legend !== undefined;
+    return (_jsx("div", { className: b(null, className), "data-qa": dataQa, children: _jsxs("div", { className: b('content'), children: [_jsxs("div", { className: b('header'), children: [_jsx(Text, { className: b('description'), color: "secondary", "data-qa": "tenant-page-metric-summary-description", children: description }), _jsxs("div", { className: b('values'), children: [_jsx(Text, { color: "secondary", "data-qa": "tenant-page-metric-summary-percent", children: i18n('context_metric-summary-used', { value: percentText }) }), hasLegend && (_jsxs(React.Fragment, { children: [_jsx(Divider, { className: b('divider'), orientation: "vertical" }), _jsx(Text, { color: "secondary", "data-qa": "tenant-page-metric-summary-value", children: legend })] }))] })] }), _jsx(SegmentedProgress, { className: b('progress'), dataQa: "tenant-page-metric-summary-progress", value: progressValue, total: 100, theme: progressTheme, hideLabels: true, ariaLabel: description })] }) }));
+}
+//# sourceMappingURL=MetricPageSummary.js.map

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricPageSummary/MetricPageSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricPageSummary.js","sourceRoot":"","sources":["../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricPageSummary/MetricPageSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,iBAAiB,EAAC,MAAM,+DAA+D,CAAC;AAChG,OAAO,EAAC,EAAE,EAAC,MAAM,yBAAyB,CAAC;AAC3C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,0BAA0B,CAAC;AAElC,MAAM,CAAC,GAAG,EAAE,CAAC,gCAAgC,CAAC,CAAC;AAc/C,MAAM,UAAU,iBAAiB,CAAC,EAC9B,SAAS,EACT,MAAM,EACN,WAAW,EACX,MAAM,EACN,WAAW,EACX,aAAa,EACb,aAAa,GACQ;IACrB,MAAM,SAAS,GAAG,MAAM,KAAK,SAAS,CAAC;IAEvC,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAAW,MAAM,YAC/C,eAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,IAAI,IACD,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAC3B,KAAK,EAAC,WAAW,aACT,wCAAwC,YAE/C,WAAW,GACT,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,aAAS,oCAAoC,YAC/D,IAAI,CAAC,6BAA6B,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,CAAC,GACvD,EACN,SAAS,IAAI,CACV,MAAC,KAAK,CAAC,QAAQ,eACX,KAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,WAAW,EAAC,UAAU,GAAG,EAC3D,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,aAAS,kCAAkC,YAC7D,MAAM,GACJ,IACM,CACpB,IACC,IACJ,EACN,KAAC,iBAAiB,IACd,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EACxB,MAAM,EAAC,qCAAqC,EAC5C,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,aAAa,EACpB,UAAU,QACV,SAAS,EAAE,WAAW,GACxB,IACA,GACJ,CACT,CAAC;AACN,CAAC"}

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricPageSummary/MetricPageSummary.scss

@@ -0,0 +1,51 @@
+.ydb-tenant-metric-page-summary {
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--g-spacing-4);
+
+    border-radius: var(--g-border-radius-s);
+    background-color: var(--g-color-base-generic);
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+    }
+
+    &__header {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--g-spacing-2) var(--g-spacing-3);
+
+        min-width: 0;
+    }
+
+    &__description {
+        flex: 1 1 280px;
+
+        min-width: 0;
+    }
+
+    &__values {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: var(--g-spacing-3);
+
+        white-space: nowrap;
+    }
+
+    &__divider {
+        height: 12px;
+    }
+
+    &__progress {
+        --ydb-segmented-progress-height: 8px;
+        --ydb-segmented-progress-section-min-width: 8px;
+        --ydb-segmented-progress-empty-opacity: 0.75;
+
+        border-radius: var(--g-border-radius-xs);
+    }
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.d.ts

@@ -1,26 +1,10 @@
 import type { TenantMetricsTab } from '../../../../../store/reducers/tenant/types';
-import type { TenantMetricStats, TenantPoolsStats, TenantStorageStats } from '../../../../../store/reducers/tenants/utils';
-import type { ETenantType } from '../../../../../types/api/tenant';
+import type { TenantOverviewMetrics } from '../metricOverview';
 import './MetricsTabs.scss';
-interface SelectStorageStatsForMetricCardParams {
-    blobStorageStats?: TenantStorageStats[];
-    tabletStorageStats?: TenantStorageStats[];
-    isServerless: boolean;
-}
-export declare function selectStorageStatsForMetricCard({ blobStorageStats, tabletStorageStats, isServerless, }: SelectStorageStatsForMetricCardParams): TenantStorageStats[];
 interface MetricsTabsProps {
-    poolsCpuStats?: TenantPoolsStats[];
-    memoryStats?: TenantMetricStats[];
-    storageMetricStats?: TenantStorageStats[];
-    blobStorageStats?: TenantStorageStats[];
-    tabletStorageStats?: TenantStorageStats[];
-    networkUtilization?: number;
-    networkThroughput?: number;
-    storageGroupsCount?: number;
-    controlPlaneNodesCount?: number;
-    coresTotal?: number;
-    databaseType?: ETenantType;
     activeTab: TenantMetricsTab;
+    isServerless: boolean;
+    metrics: TenantOverviewMetrics;
 }
-export declare function MetricsTabs({ poolsCpuStats, memoryStats, storageMetricStats, blobStorageStats, tabletStorageStats, networkUtilization, networkThroughput, storageGroupsCount, controlPlaneNodesCount, coresTotal, databaseType, activeTab, }: MetricsTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetricsTabs({ activeTab, isServerless, metrics: { network, cpu, storage, memory }, }: MetricsTabsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
 import { Flex } from '@gravity-ui/uikit';
 import { useLocation } from 'react-router-dom';
 import { getTenantPath, parseQuery } from '../../../../../routes';
@@ -7,8 +6,6 @@ import { SETTING_KEYS } from '../../../../../store/reducers/settings/constants';
 import { TENANT_METRICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
 import { cn } from '../../../../../utils/cn';
 import { useSetting } from '../../../../../utils/hooks';
-import { calculateMetricAggregates } from '../../../../../utils/metrics';
-// no direct legend formatters needed here – handled in subcomponents
 import { TenantTabsGroups } from '../../../TenantPages';
 import { CpuTab } from './components/CpuTab';
 import { MemoryTab } from './components/MemoryTab';
@@ -17,20 +14,7 @@ import { PlaceholderTab } from './components/PlaceholderTab';
 import { StorageTab } from './components/StorageTab';
 import './MetricsTabs.scss';
 const b = cn('tenant-metrics-tabs');
-export function selectStorageStatsForMetricCard({ blobStorageStats, tabletStorageStats, isServerless, }) {
-    if (isServerless) {
-        return tabletStorageStats || blobStorageStats || [];
-    }
-    const hasLimit = (stats) => Boolean(stats === null || stats === void 0 ? void 0 : stats.some((item) => Number(item.limit) > 0));
-    if (hasLimit(tabletStorageStats)) {
-        return tabletStorageStats || [];
-    }
-    if (hasLimit(blobStorageStats)) {
-        return blobStorageStats || [];
-    }
-    return blobStorageStats || tabletStorageStats || [];
-}
-export function MetricsTabs({ poolsCpuStats, memoryStats, storageMetricStats, blobStorageStats, tabletStorageStats, networkUtilization, networkThroughput, storageGroupsCount, controlPlaneNodesCount, coresTotal, databaseType, activeTab, }) {
+export function MetricsTabs({ activeTab, isServerless, metrics: { network, cpu, storage, memory }, }) {
     const location = useLocation();
     const queryParams = parseQuery(location);
     const tabLinks = {
@@ -51,47 +35,20 @@ export function MetricsTabs({ poolsCpuStats, memoryStats, storageMetricStats, bl
             [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.network,
         }),
     };
-    // Sum CPU usage from all pools except the IO pool
-    const cpuPools = React.useMemo(() => (poolsCpuStats || []).filter((pool) => pool.name !== 'IO'), [poolsCpuStats]);
-    const cpuMetrics = React.useMemo(() => calculateMetricAggregates(cpuPools), [cpuPools]);
-    const isServerless = databaseType === 'Serverless';
-    // Calculate storage metrics using utility
-    const storageStats = React.useMemo(() => storageMetricStats !== null && storageMetricStats !== void 0 ? storageMetricStats : selectStorageStatsForMetricCard({
-        blobStorageStats,
-        tabletStorageStats,
-        isServerless,
-    }), [blobStorageStats, isServerless, storageMetricStats, tabletStorageStats]);
-    const storageMetrics = React.useMemo(() => calculateMetricAggregates(storageStats), [storageStats]);
-    // Calculate memory metrics using utility
-    const memoryMetrics = React.useMemo(() => calculateMetricAggregates(memoryStats), [memoryStats]);
-    // Pass raw network values; DedicatedMetricsTabs computes percent and legend
     const [showNetworkUtilization] = useSetting(SETTING_KEYS.SHOW_NETWORK_UTILIZATION);
     // card variant is handled within subcomponents
     const renderNetworkTab = () => {
-        if (!showNetworkUtilization) {
+        if (isServerless || !showNetworkUtilization || !network) {
             return null;
         }
-        const canShow = networkUtilization !== undefined &&
-            networkThroughput !== undefined &&
-            isFinite(networkUtilization) &&
-            isFinite(networkThroughput);
-        if (!canShow) {
+        return (_jsx(NetworkTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.network], active: activeTab === TENANT_METRICS_TABS_IDS.network, network: network }));
+    };
+    const renderMemoryTab = () => {
+        if (isServerless || !memory) {
             return null;
         }
-        if (isServerless) {
-            return _jsx(PlaceholderTab, {});
-        }
-        return (_jsx(NetworkTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.network], active: activeTab === TENANT_METRICS_TABS_IDS.network, networkUtilization: networkUtilization, networkThroughput: networkThroughput }));
+        return (_jsx(MemoryTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.memory], active: activeTab === TENANT_METRICS_TABS_IDS.memory, memory: memory }));
     };
-    return (_jsxs(Flex, { className: b({ serverless: Boolean(isServerless) }), alignItems: "center", children: [_jsx(CpuTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.cpu], active: activeTab === TENANT_METRICS_TABS_IDS.cpu, isServerless: Boolean(isServerless), cpu: {
-                    totalUsed: cpuMetrics.totalUsed,
-                    totalLimit: coresTotal && coresTotal > 0 ? coresTotal : cpuMetrics.totalLimit,
-                }, controlPlaneNodesCount: controlPlaneNodesCount }), _jsx(StorageTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.storage], active: activeTab === TENANT_METRICS_TABS_IDS.storage, isServerless: Boolean(isServerless), storage: {
-                    totalUsed: storageMetrics.totalUsed,
-                    totalLimit: storageMetrics.totalLimit,
-                }, storageGroupsCount: storageGroupsCount }), isServerless ? (_jsx(PlaceholderTab, {})) : (_jsx(MemoryTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.memory], active: activeTab === TENANT_METRICS_TABS_IDS.memory, memory: {
-                    totalUsed: memoryMetrics.totalUsed,
-                    totalLimit: memoryMetrics.totalLimit,
-                } })), renderNetworkTab()] }));
+    return (_jsxs(Flex, { className: b({ serverless: isServerless }), alignItems: "start", children: [_jsx(CpuTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.cpu], active: activeTab === TENANT_METRICS_TABS_IDS.cpu, cpu: cpu, isServerless: isServerless }), _jsx(StorageTab, { to: tabLinks[TENANT_METRICS_TABS_IDS.storage], active: activeTab === TENANT_METRICS_TABS_IDS.storage, storage: storage, isServerless: isServerless }), renderMemoryTab(), renderNetworkTab(), _jsx(PlaceholderTab, {})] }));
 }
 //# sourceMappingURL=MetricsTabs.js.map

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.js.map

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

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.scss

@@ -93,12 +93,13 @@
     --tab-border-width: 1px;
     --tab-filler-size: 10px;
     --tab-overlap: -1px;
-    --tab-lift-offset: -6px;
-    --tab-border-compensation: 1px;
     --tab-adjusted-spacing: calc(var(--g-spacing-3) - var(--tab-border-width));
     --z-tab-base: 100;
     --z-tab-active: 110;
     --g-border-radius-xxl: 12px;
+    --metric-tab-card-width: 225px;
+    --metric-tab-card-width-narrow: 210px;
+    --metric-tab-card-height: 70px;
 
     // Fallback for browsers without :has() support
     @supports not selector(:has(*)) {
@@ -111,6 +112,8 @@
     }
 
     &__link {
+        display: block;
+
         text-decoration: none;
 
         color: inherit;
@@ -124,7 +127,7 @@
         position: relative;
         z-index: var(--z-tab-base);
 
-        flex: 1;
+        flex: 0 0 auto;
 
         margin-left: var(--tab-overlap);
         padding: 0 var(--g-spacing-3) var(--g-spacing-3) var(--g-spacing-3);
@@ -132,15 +135,6 @@
         border-bottom: var(--tab-border-width) solid var(--g-color-line-generic);
         background: var(--g-color-base-background);
 
-        .tenant-tab-card__card-container {
-            border: 1px solid transparent;
-            border-top: none;
-
-            & > div {
-                transform: translateY(1px);
-            }
-        }
-
         &:nth-child(1) {
             z-index: calc(var(--z-tab-base) + 3);
         }
@@ -172,34 +166,31 @@
             padding-right: 0;
             @include tab-edge-filler(right);
         }
-    }
 
-    &__link {
-        display: block;
+        &_placeholder {
+            z-index: 1;
+
+            flex: 1 1 auto;
+
+            pointer-events: none;
+
+            .tenant-metrics-tabs__link {
+                height: var(--metric-tab-card-height);
+            }
+        }
     }
 
     // Active state styling
     &__link-container_active {
         z-index: var(--z-tab-active) !important;
 
+        width: var(--metric-tab-card-width);
+        height: var(--metric-tab-card-height);
         padding: 0;
 
         border-bottom: 0;
-        background: var(--g-color-base-background);
-
-        transform: translateY(var(--tab-lift-offset));
-
-        .tenant-tab-card__card-container {
-            border: none;
-            border-radius: var(--g-border-radius-xs);
-
-            & > div {
-                transform: translateY(0);
-            }
-        }
 
         .tenant-metrics-tabs__link {
-            padding-bottom: var(--tab-border-compensation);
             @include tab-border-base(var(--g-color-line-generic));
         }
     }
@@ -223,14 +214,12 @@
     &__link-container:not(:has(+ &__link-container_active)) {
         padding-right: 0;
     }
-}
 
-.tenant-metrics-tabs_serverless {
-    .tenant-metrics-tabs__link-container_placeholder {
-        pointer-events: none;
+    &_serverless {
+        --metric-tab-card-width: 242px;
+    }
 
-        .tenant-tab-card__card-container {
-            opacity: 0;
-        }
+    @media (max-width: 1200px) {
+        --metric-tab-card-width: var(--metric-tab-card-width-narrow);
     }
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/CpuTab.d.ts

@@ -1,13 +1,10 @@
+import type { TenantOverviewMetric } from '../../metricOverview';
 import '../MetricsTabs.scss';
 interface CpuTabProps {
     to: string;
     active: boolean;
+    cpu?: TenantOverviewMetric;
     isServerless: boolean;
-    cpu: {
-        totalUsed: number;
-        totalLimit: number;
-    };
-    controlPlaneNodesCount?: number;
 }
-export declare function CpuTab({ to, active, isServerless, cpu, controlPlaneNodesCount }: CpuTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function CpuTab({ to, active, cpu, isServerless }: CpuTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/CpuTab.js

@@ -1,16 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from 'react-router-dom';
 import { cn } from '../../../../../../utils/cn';
-import { formatCoresLegend } from '../../../../../../utils/metrics/formatMetricLegend';
+import { MetricTabCard } from '../../TabCard/MetricTabCard';
 import { ServerlessTabCard } from '../../TabCard/ServerlessTabCard';
-import { UsageTabCard } from '../../TabCard/UsageTabCard';
 import i18n from '../../i18n';
 import '../MetricsTabs.scss';
 const b = cn('tenant-metrics-tabs');
-export function CpuTab({ to, active, isServerless, cpu, controlPlaneNodesCount }) {
-    const dedicatedDatabaseUsageText = !controlPlaneNodesCount
-        ? i18n('context_cpu-load')
-        : i18n('context_cpu-nodes-count', { count: controlPlaneNodesCount });
-    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: isServerless ? (_jsx(ServerlessTabCard, { text: i18n('context_cpu-load'), active: active, helpText: i18n('context_cpu-description'), subtitle: i18n('context_serverless-autoscaled') })) : (_jsx(UsageTabCard, { text: dedicatedDatabaseUsageText, value: cpu.totalUsed, limit: cpu.totalLimit, legendFormatter: formatCoresLegend, active: active, helpText: i18n('context_cpu-description') })) }) }));
+export function CpuTab({ to, active, cpu, isServerless }) {
+    var _a;
+    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: isServerless || !cpu ? (_jsx(ServerlessTabCard, { title: i18n('title_cpu-load'), active: active, description: i18n('context_serverless-autoscaled'), helpText: i18n('context_cpu-description') })) : (_jsx(MetricTabCard, { title: i18n('title_cpu'), status: cpu.status, value: (_a = cpu.percentText) !== null && _a !== void 0 ? _a : i18n('value_unavailable-percent'), active: active, description: i18n('context_cpu-tab-description') })) }) }));
 }
 //# sourceMappingURL=CpuTab.js.map

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/CpuTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"CpuTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/CpuTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAC,iBAAiB,EAAC,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAC,YAAY,EAAC,MAAM,4BAA4B,CAAC;AACxD,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAUpC,MAAM,UAAU,MAAM,CAAC,EAAC,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,sBAAsB,EAAc;IACvF,MAAM,0BAA0B,GAAG,CAAC,sBAAsB;QACtD,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAC1B,CAAC,CAAC,IAAI,CAAC,yBAAyB,EAAE,EAAC,KAAK,EAAE,sBAAsB,EAAC,CAAC,CAAC;IAEvE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC7B,YAAY,CAAC,CAAC,CAAC,CACZ,KAAC,iBAAiB,IACd,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,EAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,CAAC,yBAAyB,CAAC,EACzC,QAAQ,EAAE,IAAI,CAAC,+BAA+B,CAAC,GACjD,CACL,CAAC,CAAC,CAAC,CACA,KAAC,YAAY,IACT,IAAI,EAAE,0BAA0B,EAChC,KAAK,EAAE,GAAG,CAAC,SAAS,EACpB,KAAK,EAAE,GAAG,CAAC,UAAU,EACrB,eAAe,EAAE,iBAAiB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,CAAC,yBAAyB,CAAC,GAC3C,CACL,GACE,GACL,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"CpuTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/CpuTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAC,MAAM,iCAAiC,CAAC;AAClE,OAAO,IAAI,MAAM,YAAY,CAAC;AAG9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AASpC,MAAM,UAAU,MAAM,CAAC,EAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY,EAAc;;IAC/D,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC7B,YAAY,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACpB,KAAC,iBAAiB,IACd,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,+BAA+B,CAAC,EAClD,QAAQ,EAAE,IAAI,CAAC,yBAAyB,CAAC,GAC3C,CACL,CAAC,CAAC,CAAC,CACA,KAAC,aAAa,IACV,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,EACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,KAAK,EAAE,MAAA,GAAG,CAAC,WAAW,mCAAI,IAAI,CAAC,2BAA2B,CAAC,EAC3D,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,6BAA6B,CAAC,GAClD,CACL,GACE,GACL,CACT,CAAC;AACN,CAAC"}

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/MemoryTab.d.ts

@@ -1,11 +1,9 @@
+import type { TenantOverviewMetric } from '../../metricOverview';
 import '../MetricsTabs.scss';
 interface MemoryTabProps {
     to: string;
     active: boolean;
-    memory: {
-        totalUsed: number;
-        totalLimit: number;
-    };
+    memory: TenantOverviewMetric;
 }
 export declare function MemoryTab({ to, active, memory }: MemoryTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/MemoryTab.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from 'react-router-dom';
 import { cn } from '../../../../../../utils/cn';
-import { formatStorageLegend } from '../../../../../../utils/metrics/formatMetricLegend';
-import { UsageTabCard } from '../../TabCard/UsageTabCard';
+import { MetricTabCard } from '../../TabCard/MetricTabCard';
 import i18n from '../../i18n';
 import '../MetricsTabs.scss';
 const b = cn('tenant-metrics-tabs');
 export function MemoryTab({ to, active, memory }) {
-    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: _jsx(UsageTabCard, { text: i18n('context_memory-used'), value: memory.totalUsed, limit: memory.totalLimit, legendFormatter: formatStorageLegend, active: active, helpText: i18n('context_memory-description') }) }) }));
+    var _a;
+    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: _jsx(MetricTabCard, { title: i18n('title_memory'), status: memory.status, value: (_a = memory.percentText) !== null && _a !== void 0 ? _a : i18n('value_unavailable-percent'), active: active, description: i18n('context_memory-tab-description') }) }) }));
 }
 //# sourceMappingURL=MemoryTab.js.map

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/MemoryTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"MemoryTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/MemoryTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oDAAoD,CAAC;AACvF,OAAO,EAAC,YAAY,EAAC,MAAM,4BAA4B,CAAC;AACxD,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAQpC,MAAM,UAAU,SAAS,CAAC,EAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAiB;IAC1D,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC9B,KAAC,YAAY,IACT,IAAI,EAAE,IAAI,CAAC,qBAAqB,CAAC,EACjC,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,eAAe,EAAE,mBAAmB,EACpC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,CAAC,4BAA4B,CAAC,GAC9C,GACC,GACL,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"MemoryTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/MemoryTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,IAAI,MAAM,YAAY,CAAC;AAG9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAQpC,MAAM,UAAU,SAAS,CAAC,EAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAiB;;IAC1D,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC9B,KAAC,aAAa,IACV,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,EAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,KAAK,EAAE,MAAA,MAAM,CAAC,WAAW,mCAAI,IAAI,CAAC,2BAA2B,CAAC,EAC9D,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,gCAAgC,CAAC,GACrD,GACC,GACL,CACT,CAAC;AACN,CAAC"}

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/NetworkTab.d.ts

@@ -1,9 +1,9 @@
+import type { TenantOverviewMetric } from '../../metricOverview';
 import '../MetricsTabs.scss';
 interface NetworkTabProps {
     to: string;
     active: boolean;
-    networkUtilization: number;
-    networkThroughput: number;
+    network: TenantOverviewMetric;
 }
-export declare function NetworkTab({ to, active, networkUtilization, networkThroughput }: NetworkTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function NetworkTab({ to, active, network }: NetworkTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/NetworkTab.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from 'react-router-dom';
 import { cn } from '../../../../../../utils/cn';
-import { formatNetworkMetric } from '../../../../../../utils/metrics/formatMetricLegend';
-import { UtilizationTabCard } from '../../TabCard/UtilizationTabCard';
+import { MetricTabCard } from '../../TabCard/MetricTabCard';
 import i18n from '../../i18n';
 import '../MetricsTabs.scss';
 const b = cn('tenant-metrics-tabs');
-export function NetworkTab({ to, active, networkUtilization, networkThroughput }) {
-    const fillPercent = networkUtilization * 100;
-    const legendText = formatNetworkMetric(networkThroughput);
-    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: _jsx(UtilizationTabCard, { text: i18n('context_network-usage'), fillPercent: fillPercent, legendText: legendText, active: active, helpText: i18n('context_network-description') }) }) }));
+export function NetworkTab({ to, active, network }) {
+    var _a;
+    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: _jsx(MetricTabCard, { title: i18n('title_network'), status: network.status, value: (_a = network.percentText) !== null && _a !== void 0 ? _a : i18n('value_unavailable-percent'), active: active, description: i18n('context_network-tab-description') }) }) }));
 }
 //# sourceMappingURL=NetworkTab.js.map

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/NetworkTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/NetworkTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oDAAoD,CAAC;AACvF,OAAO,EAAC,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACpE,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AASpC,MAAM,UAAU,UAAU,CAAC,EAAC,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAkB;IAC3F,MAAM,WAAW,GAAG,kBAAkB,GAAG,GAAG,CAAC;IAC7C,MAAM,UAAU,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;IAE1D,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC9B,KAAC,kBAAkB,IACf,IAAI,EAAE,IAAI,CAAC,uBAAuB,CAAC,EACnC,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,CAAC,6BAA6B,CAAC,GAC/C,GACC,GACL,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"NetworkTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/NetworkTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,IAAI,MAAM,YAAY,CAAC;AAG9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAQpC,MAAM,UAAU,UAAU,CAAC,EAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAkB;;IAC7D,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC9B,KAAC,aAAa,IACV,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,EAC5B,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,KAAK,EAAE,MAAA,OAAO,CAAC,WAAW,mCAAI,IAAI,CAAC,2BAA2B,CAAC,EAC/D,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,iCAAiC,CAAC,GACtD,GACC,GACL,CACT,CAAC;AACN,CAAC"}

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/PlaceholderTab.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../../../../../utils/cn';
-import { UNBREAKABLE_GAP } from '../../../../../../utils/constants';
-import { ServerlessTabCard } from '../../TabCard/ServerlessTabCard';
 import '../MetricsTabs.scss';
 const b = cn('tenant-metrics-tabs');
 export function PlaceholderTab() {
-    return (_jsx("div", { className: b('link-container', { placeholder: true }), children: _jsx("div", { className: b('link'), children: _jsx(ServerlessTabCard, { text: UNBREAKABLE_GAP, active: false, helpText: undefined, subtitle: UNBREAKABLE_GAP }) }) }));
+    return (_jsx("div", { className: b('link-container', { placeholder: true }), children: _jsx("div", { className: b('link') }) }));
 }
 //# sourceMappingURL=PlaceholderTab.js.map

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/PlaceholderTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceholderTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/PlaceholderTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAC,iBAAiB,EAAC,MAAM,iCAAiC,CAAC;AAElE,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAEpC,MAAM,UAAU,cAAc;IAC1B,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,YACpD,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,iBAAiB,IACd,IAAI,EAAE,eAAe,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,eAAe,GAC3B,GACA,GACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"PlaceholderTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/PlaceholderTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAE9C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAEpC,MAAM,UAAU,cAAc;IAC1B,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,YACpD,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAI,GAC3B,CACT,CAAC;AACN,CAAC"}

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/StorageTab.d.ts

@@ -1,13 +1,10 @@
+import type { TenantOverviewMetric } from '../../metricOverview';
 import '../MetricsTabs.scss';
 interface StorageTabProps {
     to: string;
     active: boolean;
     isServerless: boolean;
-    storage: {
-        totalUsed: number;
-        totalLimit: number;
-    };
-    storageGroupsCount?: number;
+    storage?: TenantOverviewMetric;
 }
-export declare function StorageTab({ to, active, isServerless, storage, storageGroupsCount, }: StorageTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function StorageTab({ to, active, isServerless, storage }: StorageTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/StorageTab.js

@@ -1,30 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from 'react-router-dom';
 import { cn } from '../../../../../../utils/cn';
-import { formatStorageLegend } from '../../../../../../utils/metrics/formatMetricLegend';
+import { MetricTabCard } from '../../TabCard/MetricTabCard';
 import { ServerlessTabCard } from '../../TabCard/ServerlessTabCard';
-import { UsageTabCard } from '../../TabCard/UsageTabCard';
 import i18n from '../../i18n';
 import '../MetricsTabs.scss';
 const b = cn('tenant-metrics-tabs');
-export function StorageTab({ to, active, isServerless, storage, storageGroupsCount, }) {
-    const text = storageGroupsCount === undefined || isServerless
-        ? i18n('cards.storage-label')
-        : i18n('context_storage-groups', { count: storageGroupsCount });
-    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: isServerless ? (_jsx(ServerlessTabCard, { text: text, active: active, helpText: i18n('context_storage-description'), subtitle: storage.totalLimit
-                    ? i18n('context_serverless-storage-subtitle', {
-                        groups: String(storageGroupsCount !== null && storageGroupsCount !== void 0 ? storageGroupsCount : 0),
-                        legend: formatStorageLegend({
-                            value: storage.totalUsed,
-                            capacity: storage.totalLimit,
-                        }),
-                    })
-                    : undefined })) : (_jsx(UsageTabCard, { text: text, value: storage.totalUsed, limit: storage.totalLimit, legendFormatter: formatStorageLegend, active: active, helpText: i18n('context_storage-description'), 
-                // Never show the "danger" (red) status for the storage
-                // doughnut, regardless of usage. The doughnut stays
-                // "warning" (yellow) above the warning threshold and
-                // never turns red, even at high usage below 100%
-                // (e.g. 91-99%) or on overflow above 100%.
-                dangerThreshold: Infinity })) }) }));
+export function StorageTab({ to, active, isServerless, storage }) {
+    var _a;
+    return (_jsx("div", { className: b('link-container', { active }), children: _jsx(Link, { to: to, className: b('link'), children: isServerless || !storage ? (_jsx(ServerlessTabCard, { title: i18n('title_storage'), active: active, description: i18n('context_storage-serverless-tab-description'), helpText: i18n('context_storage-description') })) : (_jsx(MetricTabCard, { title: i18n('title_storage'), status: storage.status, value: (_a = storage.percentText) !== null && _a !== void 0 ? _a : i18n('value_unavailable-percent'), active: active, description: i18n('context_storage-tab-description') })) }) }));
 }
 //# sourceMappingURL=StorageTab.js.map

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/StorageTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"StorageTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/StorageTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oDAAoD,CAAC;AACvF,OAAO,EAAC,iBAAiB,EAAC,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAC,YAAY,EAAC,MAAM,4BAA4B,CAAC;AACxD,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAUpC,MAAM,UAAU,UAAU,CAAC,EACvB,EAAE,EACF,MAAM,EACN,YAAY,EACZ,OAAO,EACP,kBAAkB,GACJ;IACd,MAAM,IAAI,GACN,kBAAkB,KAAK,SAAS,IAAI,YAAY;QAC5C,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC;QAC7B,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAC,KAAK,EAAE,kBAAkB,EAAC,CAAC,CAAC;IACtE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC7B,YAAY,CAAC,CAAC,CAAC,CACZ,KAAC,iBAAiB,IACd,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,CAAC,6BAA6B,CAAC,EAC7C,QAAQ,EACJ,OAAO,CAAC,UAAU;oBACd,CAAC,CAAC,IAAI,CAAC,qCAAqC,EAAE;wBACxC,MAAM,EAAE,MAAM,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,CAAC;wBACvC,MAAM,EAAE,mBAAmB,CAAC;4BACxB,KAAK,EAAE,OAAO,CAAC,SAAS;4BACxB,QAAQ,EAAE,OAAO,CAAC,UAAU;yBAC/B,CAAC;qBACL,CAAC;oBACJ,CAAC,CAAC,SAAS,GAErB,CACL,CAAC,CAAC,CAAC,CACA,KAAC,YAAY,IACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,OAAO,CAAC,SAAS,EACxB,KAAK,EAAE,OAAO,CAAC,UAAU,EACzB,eAAe,EAAE,mBAAmB,EACpC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,CAAC,6BAA6B,CAAC;gBAC7C,uDAAuD;gBACvD,oDAAoD;gBACpD,qDAAqD;gBACrD,iDAAiD;gBACjD,2CAA2C;gBAC3C,eAAe,EAAE,QAAQ,GAC3B,CACL,GACE,GACL,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"StorageTab.js","sourceRoot":"","sources":["../../../../../../../src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/StorageTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,EAAE,EAAC,MAAM,4BAA4B,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAC,MAAM,iCAAiC,CAAC;AAClE,OAAO,IAAI,MAAM,YAAY,CAAC;AAG9B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC;AASpC,MAAM,UAAU,UAAU,CAAC,EAAC,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAkB;;IAC3E,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAC,CAAC,YACzC,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAC7B,YAAY,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACxB,KAAC,iBAAiB,IACd,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,EAC5B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,4CAA4C,CAAC,EAC/D,QAAQ,EAAE,IAAI,CAAC,6BAA6B,CAAC,GAC/C,CACL,CAAC,CAAC,CAAC,CACA,KAAC,aAAa,IACV,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,EAC5B,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,KAAK,EAAE,MAAA,OAAO,CAAC,WAAW,mCAAI,IAAI,CAAC,2BAA2B,CAAC,EAC/D,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,iCAAiC,CAAC,GACtD,CACL,GACE,GACL,CACT,CAAC;AACN,CAAC"}