feat: redesign Storage section

astandrik · astandrik · commit 7477f0ee8bf6 · 2025-07-24T21:27:19.000+03:00
diff --git a/src/components/Errors/ResponseError/ResponseError.tsx b/src/components/Errors/ResponseError/ResponseError.tsx
@@ -14,5 +14,5 @@ export const ResponseError = ({
 }: ResponseErrorProps) => {
     const message = prepareErrorMessage(error) || defaultMessage;
 
-    return <div className={`error ${className}`}>{message}</div>;
+    return <div className={`error ${className || ''}`}>{message}</div>;
 };
diff --git 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_storage {
+        .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
@@ -16,6 +16,7 @@ export interface InfoViewerProps {
     info?: InfoViewerItem[];
     dots?: boolean;
     size?: 's';
+    variant?: 'default' | 'storage';
     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/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss
@@ -109,4 +109,31 @@
         font-size: var(--g-text-body-1-font-size);
         line-height: 36px;
     }
+
+    &_size_storage {
+        position: relative;
+
+        width: 400px;
+        min-width: unset;
+        height: 10px;
+        padding: 0;
+
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-private-white-100);
+
+        #{$block}__progress-container {
+            position: relative;
+
+            width: 100%;
+            height: 100%;
+
+            border-radius: inherit;
+            background: inherit;
+        }
+
+        #{$block}__line {
+            border-radius: var(--g-border-radius-xs);
+            background-color: var(--g-color-private-green-450);
+        }
+    }
 }
diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -1,15 +1,17 @@
-import {useTheme} from '@gravity-ui/uikit';
+import {Flex, Text, useTheme} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {calculateProgressStatus} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
 
+import i18n from './i18n';
+
 import './ProgressViewer.scss';
 
 const b = cn('progress-viewer');
 
-type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head';
+type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head' | 'storage';
 
 export type FormatProgressViewerValues = (
     value?: number,
@@ -107,7 +109,29 @@ export function ProgressViewer({
         return valueText;
     };
 
+    const isStorageVariant = size === 'storage';
+
     if (isNumeric(value)) {
+        if (isStorageVariant) {
+            const storageDisplayText =
+                isNumeric(capacity) && !hideCapacity
+                    ? i18n('value_of_capacity', {value: valueText, capacity: capacityText})
+                    : valueText;
+
+            return (
+                <Flex alignItems="center" gap="2" className={className}>
+                    <div className={b({size, theme, status})}>
+                        <div className={b('progress-container')}>
+                            <div className={b('line')} style={lineStyle}></div>
+                        </div>
+                    </div>
+                    <Text variant="body-2" color="secondary">
+                        {storageDisplayText}
+                    </Text>
+                </Flex>
+            );
+        }
+
         return (
             <div className={b({size, theme, status}, className)}>
                 <div className={b('line')} style={lineStyle}></div>
@@ -116,5 +140,5 @@ export function ProgressViewer({
         );
     }
 
-    return <div className={`${b({size})} ${className} error`}>no data</div>;
+    return <div className={`${b({size})} ${className || ''} error`}>{i18n('no-data')}</div>;
 }
diff --git a/src/components/ProgressViewer/i18n/en.json b/src/components/ProgressViewer/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "value_of_capacity": "{{value}} of {{capacity}}",
+  "no-data": "no data"
+}
diff --git a/src/components/ProgressViewer/i18n/index.ts 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/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/TenantStorage.scss 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
@@ -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 {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: (
@@ -43,6 +67,7 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
                     capacity={tabletStorageLimit}
                     formatValues={formatStorageValues}
                     colorizeProgress={true}
+                    size="storage"
                 />
             ),
         },
@@ -59,6 +84,7 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
                     capacity={blobStorageLimit}
                     formatValues={formatStorageValues}
                     colorizeProgress={true}
+                    size="storage"
                 />
             ),
         },
@@ -67,9 +93,27 @@ 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="storage"
+                title={i18n('storage.storage-details-title')}
+                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
@@ -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/useTenantStorageQueryParams.ts b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/useTenantStorageQueryParams.ts
@@ -0,0 +1,30 @@
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {TENANT_STORAGE_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
+import type {TenantStorageTab} from '../../../../../store/reducers/tenant/types';
+
+export function useTenantStorageQueryParams() {
+    const [queryParams, setQueryParams] = useQueryParams({
+        storageTab: StringParam,
+    });
+
+    // Parse and validate storageTab with fallback to tables
+    const storageTab: TenantStorageTab = (() => {
+        if (!queryParams.storageTab) {
+            return TENANT_STORAGE_TABS_IDS.tables;
+        }
+        const validTabs = Object.values(TENANT_STORAGE_TABS_IDS) as string[];
+        return validTabs.includes(queryParams.storageTab)
+            ? (queryParams.storageTab as TenantStorageTab)
+            : TENANT_STORAGE_TABS_IDS.tables;
+    })();
+
+    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
@@ -35,6 +35,7 @@
   "charts.cpu-usage": "CPU usage by pool",
   "charts.storage-usage": "Tablet storage usage",
   "charts.memory-usage": "Memory usage",
+  "storage.storage-details-title": "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
@@ -15,6 +15,8 @@ type AdditionalQueryParams = {
     selectedPartition?: string;
     activeOffset?: string;
     metricsTab?: string;
+    cpuTab?: string;
+    storageTab?: string;
     showPreview?: boolean;
     queryMode?: string;
 };
@@ -27,6 +29,7 @@ export const TenantTabsGroups = {
     diagnosticsTab: 'diagnosticsTab',
     metricsTab: 'metricsTab',
     cpuTab: 'cpuTab',
+    storageTab: 'storageTab',
 } as const;
 
 export const TENANT_INFO_TABS = [
diff --git 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
@@ -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

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "value_of_capacity": "{{value}} of {{capacity}}",
 +  "no-data": "no data"
 +}