From 7ecf8f353bc262df17158da3eaec94eda5f2373f Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 22 Jul 2025 12:13:26 +0300
Subject: [PATCH 1/4] feat: redesign Storage section

---
 src/components/InfoViewer/InfoViewer.scss     | 20 ++++++
 src/components/InfoViewer/InfoViewer.tsx      |  4 +-
 src/components/MemoryViewer/MemoryViewer.tsx  |  2 +-
 .../ProgressViewer/ProgressViewer.tsx         | 19 +-----
 src/components/ProgressViewer/i18n/en.json    |  3 +
 src/components/ProgressViewer/i18n/index.ts   |  7 ++
 .../TenantCpu/useTenantCpuQueryParams.ts      | 29 ++------
 .../TenantDashboard/TenantDashboard.scss      |  2 +-
 .../TenantStorage/ProgressWrapper.tsx         | 67 +++++++++++++++++++
 .../TenantStorage/TenantStorage.scss          |  9 +++
 .../TenantStorage/TenantStorage.tsx           | 56 +++++++++++++---
 .../TenantStorage/TopTables.tsx               |  8 ---
 .../TenantOverview/TenantStorage/constants.ts |  5 ++
 .../TenantOverview/TenantStorage/i18n/en.json |  4 ++
 .../TenantStorage/i18n/index.ts               |  7 ++
 .../useTenantStorageQueryParams.ts            | 21 ++++++
 .../Diagnostics/TenantOverview/i18n/en.json   |  3 +
 src/containers/Tenant/TenantPages.tsx         |  1 -
 src/store/reducers/tenant/constants.ts        |  5 ++
 src/store/reducers/tenant/tenant.ts           |  4 +-
 src/store/reducers/tenant/types.ts            | 20 +++++-
 src/utils/progress.ts                         | 14 ++++
 22 files changed, 244 insertions(+), 66 deletions(-)
 create mode 100644 src/components/ProgressViewer/i18n/en.json
 create mode 100644 src/components/ProgressViewer/i18n/index.ts
 create mode 100644 src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/ProgressWrapper.tsx
 create mode 100644 src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss
 create mode 100644 src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/constants.ts
 create mode 100644 src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/en.json
 create mode 100644 src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/index.ts
 create mode 100644 src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/useTenantStorageQueryParams.ts

diff --git a/src/components/InfoViewer/InfoViewer.scss b/src/components/InfoViewer/InfoViewer.scss
index a31c77ce0d..7b8a1cabd6 100644
--- a/src/components/InfoViewer/InfoViewer.scss
+++ b/src/components/InfoViewer/InfoViewer.scss
@@ -1,3 +1,5 @@
+@use '../../styles/mixins.scss';
+
 .info-viewer {
     --ydb-info-viewer-font-size: var(--g-text-body-2-font-size);
     --ydb-info-viewer-line-height: var(--g-text-body-2-line-height);
@@ -28,6 +30,10 @@
 
         max-width: 100%;
         padding-top: 4px;
+
+        &:first-child {
+            padding-top: 0;
+        }
     }
 
     &__label {
@@ -88,4 +94,18 @@
             }
         }
     }
+
+    &_variant_small {
+        .info-viewer__title {
+            margin: 0 0 var(--g-spacing-3);
+
+            color: var(--g-color-text-primary);
+            @include mixins.subheader-1-typography();
+        }
+
+        .info-viewer__label {
+            color: var(--g-color-text-secondary);
+            @include mixins.body-1-typography();
+        }
+    }
 }
diff --git a/src/components/InfoViewer/InfoViewer.tsx b/src/components/InfoViewer/InfoViewer.tsx
index d3b421c056..248b8037b3 100644
--- a/src/components/InfoViewer/InfoViewer.tsx
+++ b/src/components/InfoViewer/InfoViewer.tsx
@@ -16,6 +16,7 @@ export interface InfoViewerProps {
     info?: InfoViewerItem[];
     dots?: boolean;
     size?: 's';
+    variant?: 'default' | 'small';
     className?: string;
     multilineLabels?: boolean;
     renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => React.ReactNode;
@@ -28,6 +29,7 @@ export const InfoViewer = ({
     info,
     dots = true,
     size,
+    variant = 'default',
     className,
     multilineLabels,
     renderEmptyState,
@@ -37,7 +39,7 @@ export const InfoViewer = ({
     }
 
     return (
-        <div className={b({size}, className)}>
+        <div className={b({size, variant}, className)}>
             {title && <div className={b('title')}>{title}</div>}
             {info && info.length > 0 ? (
                 <div className={b('items')}>
diff --git a/src/components/MemoryViewer/MemoryViewer.tsx b/src/components/MemoryViewer/MemoryViewer.tsx
index f0ccc9a686..93e537c637 100644
--- a/src/components/MemoryViewer/MemoryViewer.tsx
+++ b/src/components/MemoryViewer/MemoryViewer.tsx
@@ -4,10 +4,10 @@ import type {TMemoryStats} from '../../types/api/nodes';
 import {formatBytes} from '../../utils/bytesParsers';
 import {cn} from '../../utils/cn';
 import {GIGABYTE} from '../../utils/constants';
+import type {FormatProgressViewerValues} from '../../utils/progress';
 import {calculateProgressStatus} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
 import {HoverPopup} from '../HoverPopup/HoverPopup';
-import type {FormatProgressViewerValues} from '../ProgressViewer/ProgressViewer';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 
 import {calculateAllocatedMemory, getMemorySegments} from './utils';
diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
index f7ef0001b2..3e4fdcb69c 100644
--- a/src/components/ProgressViewer/ProgressViewer.tsx
+++ b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -1,8 +1,8 @@
 import {useTheme} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
-import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
-import {calculateProgressStatus} from '../../utils/progress';
+import {calculateProgressStatus, defaultFormatProgressValues} from '../../utils/progress';
+import type {FormatProgressViewerValues} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
 
 import './ProgressViewer.scss';
@@ -11,19 +11,6 @@ const b = cn('progress-viewer');
 
 type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head';
 
-export type FormatProgressViewerValues = (
-    value?: number,
-    capacity?: number,
-) => (string | number | undefined)[];
-
-const formatValue = (value?: number) => {
-    return formatNumber(roundToPrecision(Number(value), 2));
-};
-
-const defaultFormatValues: FormatProgressViewerValues = (value, total) => {
-    return [formatValue(value), formatValue(total)];
-};
-
 /*
 
 Props description:
@@ -56,7 +43,7 @@ export interface ProgressViewerProps {
 export function ProgressViewer({
     value,
     capacity,
-    formatValues = defaultFormatValues,
+    formatValues = defaultFormatProgressValues,
     percents,
     withOverflow,
     className,
diff --git a/src/components/ProgressViewer/i18n/en.json b/src/components/ProgressViewer/i18n/en.json
new file mode 100644
index 0000000000..839fe16e58
--- /dev/null
+++ b/src/components/ProgressViewer/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "no-data": "No data"
+}
diff --git a/src/components/ProgressViewer/i18n/index.ts b/src/components/ProgressViewer/i18n/index.ts
new file mode 100644
index 0000000000..991b1002cb
--- /dev/null
+++ b/src/components/ProgressViewer/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-progress-viewer';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/useTenantCpuQueryParams.ts b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/useTenantCpuQueryParams.ts
index 05e4ed8641..b7aebb1c42 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/useTenantCpuQueryParams.ts
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/useTenantCpuQueryParams.ts
@@ -1,9 +1,9 @@
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {
-    TENANT_CPU_NODES_MODE_IDS,
-    TENANT_CPU_TABS_IDS,
-} from '../../../../../store/reducers/tenant/constants';
+    tenantCpuTabSchema,
+    tenantNodesModeSchema,
+} from '../../../../../store/reducers/tenant/types';
 import type {TenantCpuTab, TenantNodesMode} from '../../../../../store/reducers/tenant/types';
 
 export function useTenantCpuQueryParams() {
@@ -12,27 +12,8 @@ export function useTenantCpuQueryParams() {
         nodesMode: StringParam,
     });
 
-    // Parse and validate cpuTab with fallback to nodes
-    const cpuTab: TenantCpuTab = (() => {
-        if (!queryParams.cpuTab) {
-            return TENANT_CPU_TABS_IDS.nodes;
-        }
-        const validTabs = Object.values(TENANT_CPU_TABS_IDS) as string[];
-        return validTabs.includes(queryParams.cpuTab)
-            ? (queryParams.cpuTab as TenantCpuTab)
-            : TENANT_CPU_TABS_IDS.nodes;
-    })();
-
-    // Parse and validate nodesMode with fallback to load
-    const nodesMode: TenantNodesMode = (() => {
-        if (!queryParams.nodesMode) {
-            return TENANT_CPU_NODES_MODE_IDS.load;
-        }
-        const validModes = Object.values(TENANT_CPU_NODES_MODE_IDS) as string[];
-        return validModes.includes(queryParams.nodesMode)
-            ? (queryParams.nodesMode as TenantNodesMode)
-            : TENANT_CPU_NODES_MODE_IDS.load;
-    })();
+    const cpuTab: TenantCpuTab = tenantCpuTabSchema.parse(queryParams.cpuTab);
+    const nodesMode: TenantNodesMode = tenantNodesModeSchema.parse(queryParams.nodesMode);
 
     const handleCpuTabChange = (value: TenantCpuTab) => {
         setQueryParams({cpuTab: value}, 'replaceIn');
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.scss
index 2434c4c3e1..79c966a408 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.scss
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.scss
@@ -1,6 +1,6 @@
 .ydb-tenant-dashboard {
     width: var(--diagnostics-section-table-width);
-    margin-bottom: var(--diagnostics-section-margin);
+    margin-bottom: var(--g-spacing-4);
 
     &__charts {
         display: flex;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/ProgressWrapper.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/ProgressWrapper.tsx
new file mode 100644
index 0000000000..8e729b0bf0
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/ProgressWrapper.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import {Flex, Progress, Text} from '@gravity-ui/uikit';
+
+import {defaultFormatProgressValues} from '../../../../../utils/progress';
+import type {FormatProgressViewerValues} from '../../../../../utils/progress';
+import {isNumeric, safeParseNumber} from '../../../../../utils/utils';
+
+import {DEFAULT_PROGRESS_WIDTH, MAX_PERCENTAGE, MIN_PERCENTAGE, PROGRESS_SIZE} from './constants';
+import i18n from './i18n';
+
+interface ProgressWrapperProps {
+    value?: number | string;
+    capacity?: number | string;
+    formatValues?: FormatProgressViewerValues;
+    className?: string;
+    width?: number;
+}
+
+const isValidValue = (val?: number | string): boolean =>
+    isNumeric(val) && safeParseNumber(val) >= 0;
+
+export function ProgressWrapper({
+    value,
+    capacity,
+    formatValues = defaultFormatProgressValues,
+    className,
+    width = DEFAULT_PROGRESS_WIDTH,
+}: ProgressWrapperProps) {
+    if (!isValidValue(value)) {
+        return <div className={className}>{i18n('alert_no-data')}</div>;
+    }
+
+    const numericValue = safeParseNumber(value);
+    const numericCapacity = safeParseNumber(capacity);
+
+    const rawPercentage =
+        numericCapacity > 0
+            ? Math.floor((numericValue / numericCapacity) * MAX_PERCENTAGE)
+            : MAX_PERCENTAGE;
+    const fillWidth = Math.max(MIN_PERCENTAGE, rawPercentage);
+    const clampedFillWidth = Math.min(fillWidth, MAX_PERCENTAGE);
+
+    const [valueText, capacityText] = React.useMemo(() => {
+        return formatValues(Number(value), Number(capacity));
+    }, [formatValues, value, capacity]);
+
+    const displayText = React.useMemo(() => {
+        if (numericCapacity <= 0) {
+            return String(valueText);
+        }
+        return i18n('context_capacity-usage', {value: valueText, capacity: capacityText});
+    }, [valueText, capacityText, numericCapacity]);
+
+    const validatedWidth = Math.max(0, width);
+
+    return (
+        <Flex alignItems="center" gap="2" className={className}>
+            <div style={{width: `${validatedWidth}px`}}>
+                <Progress value={clampedFillWidth} theme="success" size={PROGRESS_SIZE} />
+            </div>
+            <Text variant="body-1" color="secondary">
+                {displayText}
+            </Text>
+        </Flex>
+    );
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss
new file mode 100644
index 0000000000..d84d6f5f99
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss
@@ -0,0 +1,9 @@
+.tenant-storage {
+    &__tabs-container {
+        margin-top: var(--g-spacing-3);
+    }
+
+    &__tab-content {
+        margin-top: var(--g-spacing-3);
+    }
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx
index 3419c76e84..7a19d1ba8d 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx
@@ -1,18 +1,29 @@
 import React from 'react';
 
+import {Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+
 import {InfoViewer} from '../../../../../components/InfoViewer/InfoViewer';
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
-import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
+import {TENANT_STORAGE_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
+import {cn} from '../../../../../utils/cn';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
-import {b} from '../utils';
 
+import {ProgressWrapper} from './ProgressWrapper';
 import {TopGroups} from './TopGroups';
 import {TopTables} from './TopTables';
 import {storageDashboardConfig} from './storageDashboardConfig';
+import {useTenantStorageQueryParams} from './useTenantStorageQueryParams';
+
+import './TenantStorage.scss';
 
-import '../TenantOverview.scss';
+const tenantStorageCn = cn('tenant-storage');
+
+const storageTabs = [
+    {id: TENANT_STORAGE_TABS_IDS.tables, title: i18n('title_top-tables-by-size')},
+    {id: TENANT_STORAGE_TABS_IDS.groups, title: i18n('title_top-groups-by-usage')},
+];
 
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
@@ -27,8 +38,21 @@ interface TenantStorageProps {
 }
 
 export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
+    const {storageTab, handleStorageTabChange} = useTenantStorageQueryParams();
+
     const {blobStorageUsed, tabletStorageUsed, blobStorageLimit, tabletStorageLimit} = metrics;
 
+    const renderTabContent = () => {
+        switch (storageTab) {
+            case TENANT_STORAGE_TABS_IDS.tables:
+                return <TopTables database={tenantName} />;
+            case TENANT_STORAGE_TABS_IDS.groups:
+                return <TopGroups tenant={tenantName} />;
+            default:
+                return null;
+        }
+    };
+
     const info = [
         {
             label: (
@@ -38,11 +62,10 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
                 />
             ),
             value: (
-                <ProgressViewer
+                <ProgressWrapper
                     value={tabletStorageUsed}
                     capacity={tabletStorageLimit}
                     formatValues={formatStorageValues}
-                    colorizeProgress={true}
                 />
             ),
         },
@@ -54,11 +77,10 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
                 />
             ),
             value: (
-                <ProgressViewer
+                <ProgressWrapper
                     value={blobStorageUsed}
                     capacity={blobStorageLimit}
                     formatValues={formatStorageValues}
-                    colorizeProgress={true}
                 />
             ),
         },
@@ -67,9 +89,23 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
     return (
         <React.Fragment>
             <TenantDashboard database={tenantName} charts={storageDashboardConfig} />
-            <InfoViewer className={b('storage-info')} title="Storage details" info={info} />
-            <TopTables database={tenantName} />
-            <TopGroups tenant={tenantName} />
+            <InfoViewer variant="small" title={i18n('title_storage-details')} info={info} />
+
+            <div className={tenantStorageCn('tabs-container')}>
+                <TabProvider value={storageTab}>
+                    <TabList size="m">
+                        {storageTabs.map(({id, title}) => {
+                            return (
+                                <Tab key={id} value={id} onClick={() => handleStorageTabChange(id)}>
+                                    {title}
+                                </Tab>
+                            );
+                        })}
+                    </TabList>
+                </TabProvider>
+
+                <div className={tenantStorageCn('tab-content')}>{renderTabContent()}</div>
+            </div>
         </React.Fragment>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx
index 85e8aece8a..a02485cb75 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx
@@ -11,8 +11,6 @@ import {TENANT_OVERVIEW_TABLES_SETTINGS} from '../../../../../utils/constants';
 import {useAutoRefreshInterval} from '../../../../../utils/hooks';
 import {parseQueryErrorToString} from '../../../../../utils/query';
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
-import {getSectionTitle} from '../getSectionTitle';
-import i18n from '../i18n';
 
 import '../TenantOverview.scss';
 
@@ -57,14 +55,8 @@ export function TopTables({database}: TopTablesProps) {
                 ) : null,
         },
     ];
-    const title = getSectionTitle({
-        entity: i18n('tables'),
-        postfix: i18n('by-size'),
-    });
-
     return (
         <TenantOverviewTableLayout
-            title={title}
             loading={loading}
             error={parseQueryErrorToString(error)}
             withData={Boolean(currentData)}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/constants.ts b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/constants.ts
new file mode 100644
index 0000000000..66c4df99fc
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/constants.ts
@@ -0,0 +1,5 @@
+export const DEFAULT_PROGRESS_WIDTH = 400;
+export const MAX_PERCENTAGE = 100;
+export const MIN_PERCENTAGE = 0;
+
+export const PROGRESS_SIZE = 's';
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/en.json b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/en.json
new file mode 100644
index 0000000000..a4b5e8bb6c
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "alert_no-data": "No data",
+  "context_capacity-usage": "{{value}} of {{capacity}}"
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/index.ts b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/index.ts
new file mode 100644
index 0000000000..3b02f91f14
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'tenant-storage-progress-wrapper';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/useTenantStorageQueryParams.ts b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/useTenantStorageQueryParams.ts
new file mode 100644
index 0000000000..65c43d0a6a
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/useTenantStorageQueryParams.ts
@@ -0,0 +1,21 @@
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {tenantStorageTabSchema} from '../../../../../store/reducers/tenant/types';
+import type {TenantStorageTab} from '../../../../../store/reducers/tenant/types';
+
+export function useTenantStorageQueryParams() {
+    const [queryParams, setQueryParams] = useQueryParams({
+        storageTab: StringParam,
+    });
+
+    const storageTab: TenantStorageTab = tenantStorageTabSchema.parse(queryParams.storageTab);
+
+    const handleStorageTabChange = (value: TenantStorageTab) => {
+        setQueryParams({storageTab: value}, 'replaceIn');
+    };
+
+    return {
+        storageTab,
+        handleStorageTabChange,
+    };
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
index b613553a2a..e821d175ab 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
@@ -35,6 +35,7 @@
   "charts.cpu-usage": "CPU usage by pool",
   "charts.storage-usage": "Tablet storage usage",
   "charts.memory-usage": "Memory usage",
+  "title_storage-details": "Storage Details",
   "storage.tablet-storage-title": "Tablet storage",
   "storage.tablet-storage-description": "Size of user data and indexes stored in schema objects (tables, topics, etc.)",
   "storage.db-storage-title": "Database storage",
@@ -44,6 +45,8 @@
   "title_top-nodes": "Top Nodes",
   "title_top-shards": "Top Shards",
   "title_top-queries": "Top Queries",
+  "title_top-tables-by-size": "Top Tables By Size",
+  "title_top-groups-by-usage": "Top Groups By Usage",
   "action_by-load": "By Load",
   "action_by-pool-usage": "By Pool Usage"
 }
diff --git a/src/containers/Tenant/TenantPages.tsx b/src/containers/Tenant/TenantPages.tsx
index f67117b4dc..7b08a77390 100644
--- a/src/containers/Tenant/TenantPages.tsx
+++ b/src/containers/Tenant/TenantPages.tsx
@@ -26,7 +26,6 @@ export const TenantTabsGroups = {
     queryTab: 'queryTab',
     diagnosticsTab: 'diagnosticsTab',
     metricsTab: 'metricsTab',
-    cpuTab: 'cpuTab',
 } as const;
 
 export const TENANT_INFO_TABS = [
diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts
index 6d1b7fe0d9..267dfc3e12 100644
--- a/src/store/reducers/tenant/constants.ts
+++ b/src/store/reducers/tenant/constants.ts
@@ -54,3 +54,8 @@ export const TENANT_CPU_NODES_MODE_IDS = {
     load: 'load',
     pools: 'pools',
 } as const;
+
+export const TENANT_STORAGE_TABS_IDS = {
+    tables: 'tables',
+    groups: 'groups',
+} as const;
diff --git a/src/store/reducers/tenant/tenant.ts b/src/store/reducers/tenant/tenant.ts
index b0457fb581..59585d7cd6 100644
--- a/src/store/reducers/tenant/tenant.ts
+++ b/src/store/reducers/tenant/tenant.ts
@@ -44,8 +44,8 @@ const slice = createSlice({
         },
         setMetricsTab: (state, action: PayloadAction<TenantMetricsTab>) => {
             // Ensure we always have a valid metrics tab - fallback to CPU if empty/invalid
-            const validTabs = Object.values(TENANT_METRICS_TABS_IDS);
-            const isValidTab = action.payload && validTabs.includes(action.payload as any);
+            const validTabs = Object.values(TENANT_METRICS_TABS_IDS) as TenantMetricsTab[];
+            const isValidTab = action.payload && validTabs.includes(action.payload);
             state.metricsTab = isValidTab ? action.payload : TENANT_METRICS_TABS_IDS.cpu;
         },
     },
diff --git a/src/store/reducers/tenant/types.ts b/src/store/reducers/tenant/types.ts
index 8915d1efa1..cf5b85b154 100644
--- a/src/store/reducers/tenant/types.ts
+++ b/src/store/reducers/tenant/types.ts
@@ -2,10 +2,13 @@ import {z} from 'zod';
 
 import type {ValueOf} from '../../../types/common';
 
-import {TENANT_PAGES_IDS} from './constants';
-import type {
+import {
     TENANT_CPU_NODES_MODE_IDS,
     TENANT_CPU_TABS_IDS,
+    TENANT_PAGES_IDS,
+    TENANT_STORAGE_TABS_IDS,
+} from './constants';
+import type {
     TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_METRICS_TABS_IDS,
     TENANT_QUERY_TABS_ID,
@@ -15,12 +18,25 @@ import type {
 export const tenantPageSchema = z.nativeEnum(TENANT_PAGES_IDS);
 export type TenantPage = z.infer<typeof tenantPageSchema>;
 
+export const tenantStorageTabSchema = z
+    .nativeEnum(TENANT_STORAGE_TABS_IDS)
+    .catch(TENANT_STORAGE_TABS_IDS.tables);
+
+export const tenantCpuTabSchema = z
+    .nativeEnum(TENANT_CPU_TABS_IDS)
+    .catch(TENANT_CPU_TABS_IDS.nodes);
+
+export const tenantNodesModeSchema = z
+    .nativeEnum(TENANT_CPU_NODES_MODE_IDS)
+    .catch(TENANT_CPU_NODES_MODE_IDS.load);
+
 export type TenantQueryTab = ValueOf<typeof TENANT_QUERY_TABS_ID>;
 export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
 export type TenantSummaryTab = ValueOf<typeof TENANT_SUMMARY_TABS_IDS>;
 export type TenantMetricsTab = ValueOf<typeof TENANT_METRICS_TABS_IDS>;
 export type TenantCpuTab = ValueOf<typeof TENANT_CPU_TABS_IDS>;
 export type TenantNodesMode = ValueOf<typeof TENANT_CPU_NODES_MODE_IDS>;
+export type TenantStorageTab = ValueOf<typeof TENANT_STORAGE_TABS_IDS>;
 
 export interface TenantState {
     tenantPage: TenantPage;
diff --git a/src/utils/progress.ts b/src/utils/progress.ts
index 03bf016bbd..51eefb01c6 100644
--- a/src/utils/progress.ts
+++ b/src/utils/progress.ts
@@ -1,7 +1,21 @@
 import {DEFAULT_DANGER_THRESHOLD, DEFAULT_WARNING_THRESHOLD} from './constants';
+import {formatNumber, roundToPrecision} from './dataFormatters/dataFormatters';
 
 export type ProgressStatus = 'good' | 'warning' | 'danger';
 
+export type FormatProgressViewerValues = (
+    value?: number,
+    capacity?: number,
+) => (string | number | undefined)[];
+
+const formatValue = (value?: number) => {
+    return formatNumber(roundToPrecision(Number(value), 2));
+};
+
+export const defaultFormatProgressValues: FormatProgressViewerValues = (value, total) => {
+    return [formatValue(value), formatValue(total)];
+};
+
 interface CalculateProgressStatusProps {
     inverseColorize?: boolean;
     dangerThreshold?: number;

From 465ff9a48c36a573b773bbd880f47a7036bc079b Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Mon, 28 Jul 2025 11:51:01 +0300
Subject: [PATCH 2/4] fix: remove unused

---
 src/components/ProgressViewer/i18n/en.json  | 3 ---
 src/components/ProgressViewer/i18n/index.ts | 7 -------
 2 files changed, 10 deletions(-)
 delete mode 100644 src/components/ProgressViewer/i18n/en.json
 delete mode 100644 src/components/ProgressViewer/i18n/index.ts

diff --git a/src/components/ProgressViewer/i18n/en.json b/src/components/ProgressViewer/i18n/en.json
deleted file mode 100644
index 839fe16e58..0000000000
--- a/src/components/ProgressViewer/i18n/en.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "no-data": "No data"
-}
diff --git a/src/components/ProgressViewer/i18n/index.ts b/src/components/ProgressViewer/i18n/index.ts
deleted file mode 100644
index 991b1002cb..0000000000
--- a/src/components/ProgressViewer/i18n/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {registerKeysets} from '../../../utils/i18n';
-
-import en from './en.json';
-
-const COMPONENT = 'ydb-progress-viewer';
-
-export default registerKeysets(COMPONENT, {en});

From 114250ef9fb57ed42d1f6da2f6ec28a0b3344852 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Mon, 28 Jul 2025 12:07:59 +0300
Subject: [PATCH 3/4] fix: move first-child to small variant

---
 src/components/InfoViewer/InfoViewer.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/InfoViewer/InfoViewer.scss b/src/components/InfoViewer/InfoViewer.scss
index 7b8a1cabd6..85be69a8f5 100644
--- a/src/components/InfoViewer/InfoViewer.scss
+++ b/src/components/InfoViewer/InfoViewer.scss
@@ -30,10 +30,6 @@
 
         max-width: 100%;
         padding-top: 4px;
-
-        &:first-child {
-            padding-top: 0;
-        }
     }
 
     &__label {
@@ -107,5 +103,9 @@
             color: var(--g-color-text-secondary);
             @include mixins.body-1-typography();
         }
+
+        .info-viewer__item:first-child {
+            padding-top: 0;
+        }
     }
 }

From 28dbececadc9ab55c9a66a021184bf1fea933cf8 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Mon, 28 Jul 2025 12:32:30 +0300
Subject: [PATCH 4/4] fix: item -> row

---
 src/components/InfoViewer/InfoViewer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InfoViewer/InfoViewer.scss b/src/components/InfoViewer/InfoViewer.scss
index 85be69a8f5..c75126ee02 100644
--- a/src/components/InfoViewer/InfoViewer.scss
+++ b/src/components/InfoViewer/InfoViewer.scss
@@ -104,7 +104,7 @@
             @include mixins.body-1-typography();
         }
 
-        .info-viewer__item:first-child {
+        .info-viewer__row:first-child {
             padding-top: 0;
         }
     }