fix(storage): finish BS capacity metrics MVP for Storage/Nodes (#4107)

astandrik · web-flow · commit ac0dcb882e1e · 2026-07-15T09:43:18.000Z
diff --git a/src/components/PaginatedTable/PaginatedTable.tsx b/src/components/PaginatedTable/PaginatedTable.tsx
@@ -16,6 +16,7 @@ import type {
     RenderEmptyDataMessage,
     RenderErrorMessage,
 } from './types';
+import {isSortColumnAvailable} from './utils';
 
 import './PaginatedTable.scss';
 
@@ -65,6 +66,7 @@ export const PaginatedTable = <T, F>({
         usePaginatedTableState();
 
     const {sortParams, foundEntities} = tableState;
+    const activeSortParams = isSortColumnAvailable(sortParams, columns) ? sortParams : undefined;
 
     const tableRef = React.useRef<HTMLDivElement>(null);
 
@@ -122,7 +124,7 @@ export const PaginatedTable = <T, F>({
                     fetchData={fetchData}
                     filters={filters}
                     tableName={tableName}
-                    sortParams={sortParams}
+                    sortParams={activeSortParams}
                     getRowClassName={getRowClassName}
                     onRowClick={onRowClick}
                     renderErrorMessage={renderErrorMessage}
diff --git a/src/components/PaginatedTable/TableHead.tsx b/src/components/PaginatedTable/TableHead.tsx
@@ -66,8 +66,6 @@ interface TableHeadCellProps<T> {
     defaultSortOrder: SortOrderType;
     onSort?: (columnName: string) => void;
     rowHeight: number;
-    onCellMount?: (element: Element) => void;
-    onCellUnMount?: (element: Element) => void;
     onColumnsResize?: HandleTableColumnsResize;
 }
 
@@ -78,24 +76,10 @@ export const TableHeadCell = <T,>({
     defaultSortOrder,
     onSort,
     rowHeight,
-    onCellMount,
-    onCellUnMount,
     onColumnsResize,
 }: TableHeadCellProps<T>) => {
     const cellWrapperRef = React.useRef<HTMLTableCellElement>(null);
 
-    React.useEffect(() => {
-        const cellWrapper = cellWrapperRef.current;
-        if (cellWrapper) {
-            onCellMount?.(cellWrapper);
-        }
-        return () => {
-            if (cellWrapper) {
-                onCellUnMount?.(cellWrapper);
-            }
-        };
-    }, [onCellMount, onCellUnMount]);
-
     const getCurrentColumnWidth = React.useCallback(() => {
         return cellWrapperRef.current?.getBoundingClientRect().width;
     }, []);
diff --git a/src/components/PaginatedTable/__test__/utils.test.ts b/src/components/PaginatedTable/__test__/utils.test.ts
@@ -0,0 +1,17 @@
+import {isSortColumnAvailable} from '../utils';
+
+describe('isSortColumnAvailable', () => {
+    test('returns false when the active sort column is not available', () => {
+        expect(
+            isSortColumnAvailable({columnId: 'DiskSpaceUsage'}, [{name: 'NodeId'}, {name: 'Host'}]),
+        ).toBe(false);
+    });
+
+    test('returns true when the active sort column is available or sorting is inactive', () => {
+        const columns = [{name: 'NodeId'}, {name: 'DiskSpaceUsage'}];
+
+        expect(isSortColumnAvailable({columnId: 'DiskSpaceUsage'}, columns)).toBe(true);
+        expect(isSortColumnAvailable({}, columns)).toBe(true);
+        expect(isSortColumnAvailable(undefined, columns)).toBe(true);
+    });
+});
diff --git a/src/components/PaginatedTable/utils.tsx b/src/components/PaginatedTable/utils.tsx
@@ -1,5 +1,14 @@
 import React from 'react';
 
+import type {SortParams} from './types';
+
+export function isSortColumnAvailable(
+    sortParams: SortParams | undefined,
+    columns: Array<{name: string}>,
+) {
+    return !sortParams?.columnId || columns.some((column) => column.name === sortParams.columnId);
+}
+
 // invoke passed function at most once per animation frame
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function rafThrottle<Fn extends (...args: any[]) => any>(fn: Fn) {
diff --git a/src/components/nodesColumns/constants.ts b/src/components/nodesColumns/constants.ts
@@ -39,6 +39,7 @@ export const NODES_COLUMNS_IDS = {
     PileName: 'PileName',
     PDiskUsage: CAPACITY_METRICS_COLUMN_IDS.MaxPDiskUsage,
     VDiskSlotUsage: CAPACITY_METRICS_COLUMN_IDS.MaxVDiskSlotUsage,
+    VDiskRawUsage: CAPACITY_METRICS_COLUMN_IDS.MaxVDiskRawUsage,
     CapacityAlert: CAPACITY_METRICS_COLUMN_IDS.CapacityAlert,
 } as const;
 
@@ -147,6 +148,9 @@ export const NODES_COLUMNS_TITLES = {
     get MaxVDiskSlotUsage() {
         return CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage;
     },
+    get MaxVDiskRawUsage() {
+        return CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage;
+    },
     get CapacityAlert() {
         return CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert;
     },
@@ -242,6 +246,7 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
     PileName: ['PileName'],
     MaxPDiskUsage: ['MaxPDiskUsage'],
     MaxVDiskSlotUsage: ['MaxVDiskSlotUsage'],
+    MaxVDiskRawUsage: ['MaxVDiskRawUsage'],
     CapacityAlert: ['CapacityAlert'],
 };
 
@@ -275,6 +280,7 @@ const NODES_COLUMNS_TO_SORT_FIELDS: Record<NodesColumnId, NodesSortValue | undef
     PileName: undefined,
     MaxPDiskUsage: 'MaxPDiskUsage',
     MaxVDiskSlotUsage: 'MaxVDiskSlotUsage',
+    MaxVDiskRawUsage: 'MaxVDiskRawUsage',
     CapacityAlert: 'CapacityAlert',
 };
 
diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx
@@ -7,7 +7,7 @@ import {usePaginatedTableState} from '../../../components/PaginatedTable/Paginat
 import {Search} from '../../../components/Search/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
 import {useBlobStorageCapacityMetricsEnabled} from '../../../store/reducers/capabilities/hooks';
-import {STORAGE_NODES_GROUP_BY_OPTIONS} from '../PaginatedStorageNodesTable/columns/constants';
+import {getStorageNodesGroupByOptions} from '../PaginatedStorageNodesTable/columns/constants';
 import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
 import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
 import i18n from '../i18n';
@@ -46,15 +46,10 @@ export function StorageNodesControls({
 
     const blobMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
 
-    const nodesGroupByOptions = React.useMemo(() => {
-        const skippedValues: string[] = [];
-
-        if (!blobMetricsEnabled) {
-            skippedValues.push('CapacityAlert');
-        }
-
-        return STORAGE_NODES_GROUP_BY_OPTIONS.filter((opt) => !skippedValues.includes(opt.value));
-    }, [blobMetricsEnabled]);
+    const nodesGroupByOptions = React.useMemo(
+        () => getStorageNodesGroupByOptions(blobMetricsEnabled),
+        [blobMetricsEnabled],
+    );
 
     const handleGroupBySelectUpdate = (value: string[]) => {
         handleStorageNodesGroupByParamChange(value[0]);
diff --git a/src/containers/Storage/PaginatedStorageNodesTable/columns/__test__/constants.test.ts b/src/containers/Storage/PaginatedStorageNodesTable/columns/__test__/constants.test.ts
@@ -0,0 +1,17 @@
+import {getStorageNodesGroupByOptions} from '../constants';
+
+describe('getStorageNodesGroupByOptions', () => {
+    test('keeps legacy disk usage group-by and hides capacity alert when experiment is disabled', () => {
+        const optionValues = getStorageNodesGroupByOptions(false).map(({value}) => value);
+
+        expect(optionValues).toContain('DiskSpaceUsage');
+        expect(optionValues).not.toContain('CapacityAlert');
+    });
+
+    test('keeps capacity alert group-by and hides legacy disk usage when experiment is enabled', () => {
+        const optionValues = getStorageNodesGroupByOptions(true).map(({value}) => value);
+
+        expect(optionValues).toContain('CapacityAlert');
+        expect(optionValues).not.toContain('DiskSpaceUsage');
+    });
+});
diff --git a/src/containers/Storage/PaginatedStorageNodesTable/columns/columns.tsx b/src/containers/Storage/PaginatedStorageNodesTable/columns/columns.tsx
@@ -3,6 +3,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import {
     getCapacityAlertColumn,
     getPDiskUsageColumn,
+    getVDiskRawUsageColumn,
     getVDiskSlotUsageColumn,
 } from '../../../../components/capacityMetricsColumns/columns';
 import {
@@ -86,6 +87,7 @@ export const getStorageNodesColumns = ({
         getTabletsColumn({database}),
         getPDiskUsageColumn(),
         getVDiskSlotUsageColumn(),
+        getVDiskRawUsageColumn(),
         getCapacityAlertColumn(),
     ];
 
diff --git a/src/containers/Storage/PaginatedStorageNodesTable/columns/constants.ts b/src/containers/Storage/PaginatedStorageNodesTable/columns/constants.ts
@@ -32,6 +32,7 @@ const STORAGE_NODES_GROUP_BY_PARAMS = [
 export const CAPACITY_METRICS_USER_SETTINGS_COLUMNS_IDS: NodesColumnId[] = [
     'MaxPDiskUsage',
     'MaxVDiskSlotUsage',
+    'MaxVDiskRawUsage',
     'CapacityAlert',
 ];
 
@@ -44,6 +45,16 @@ export const STORAGE_NODES_GROUP_BY_OPTIONS: SelectOption[] = STORAGE_NODES_GROU
     },
 );
 
+export function getStorageNodesGroupByOptions(blobMetricsEnabled: boolean): SelectOption[] {
+    const skippedValues: NodesGroupByField[] = blobMetricsEnabled
+        ? ['DiskSpaceUsage']
+        : ['CapacityAlert'];
+
+    return STORAGE_NODES_GROUP_BY_OPTIONS.filter(
+        (option) => !skippedValues.includes(option.value as NodesGroupByField),
+    );
+}
+
 export const storageNodesGroupByParamSchema = z
     .custom<
         NodesGroupByField | undefined
diff --git a/src/containers/Storage/PaginatedStorageNodesTable/columns/hooks.ts b/src/containers/Storage/PaginatedStorageNodesTable/columns/hooks.ts
@@ -41,6 +41,10 @@ export function useStorageNodesSelectedColumns({
             skipped.push(...CAPACITY_METRICS_USER_SETTINGS_COLUMNS_IDS);
         }
 
+        if (blobMetricsEnabled) {
+            skipped.push(NODES_COLUMNS_IDS.DiskSpaceUsage);
+        }
+
         return skipped;
     }, [bridgeModeEnabled, blobMetricsEnabled]);
 
diff --git a/src/containers/Storage/__test__/useStorageQueryParams.test.ts b/src/containers/Storage/__test__/useStorageQueryParams.test.ts
@@ -0,0 +1,48 @@
+import {getStorageGroupByCleanupPatch} from '../useStorageQueryParams';
+
+describe('getStorageGroupByCleanupPatch', () => {
+    test('clears legacy group-by values when blob metrics are enabled', () => {
+        expect(
+            getStorageGroupByCleanupPatch({
+                blobMetricsEnabled: true,
+                storageGroupsGroupBy: 'Usage',
+                storageNodesGroupBy: 'DiskSpaceUsage',
+            }),
+        ).toEqual({
+            storageGroupsGroupBy: undefined,
+            storageNodesGroupBy: undefined,
+        });
+    });
+
+    test('keeps capacity alert group-by values when blob metrics are enabled', () => {
+        expect(
+            getStorageGroupByCleanupPatch({
+                blobMetricsEnabled: true,
+                storageGroupsGroupBy: 'CapacityAlert',
+                storageNodesGroupBy: 'CapacityAlert',
+            }),
+        ).toEqual({});
+    });
+
+    test('clears capacity alert group-by values when blob metrics are disabled', () => {
+        expect(
+            getStorageGroupByCleanupPatch({
+                blobMetricsEnabled: false,
+                storageGroupsGroupBy: 'CapacityAlert',
+                storageNodesGroupBy: 'CapacityAlert',
+            }),
+        ).toEqual({
+            storageGroupsGroupBy: undefined,
+            storageNodesGroupBy: undefined,
+        });
+    });
+
+    test('keeps legacy node disk usage group-by when blob metrics are disabled', () => {
+        expect(
+            getStorageGroupByCleanupPatch({
+                blobMetricsEnabled: false,
+                storageNodesGroupBy: 'DiskSpaceUsage',
+            }),
+        ).toEqual({});
+    });
+});
diff --git a/src/containers/Storage/useStorageQueryParams.ts b/src/containers/Storage/useStorageQueryParams.ts
@@ -16,6 +16,42 @@ import {VDisksGroupBy, vdisksGroupBySchema} from './StorageExpertModePanel/const
 import type {VDisksGroupByValue} from './StorageExpertModePanel/constants';
 import {STORAGE_SEARCH_PARAM_BY_TYPE} from './constants';
 
+interface StorageGroupByCleanupParams {
+    blobMetricsEnabled: boolean;
+    storageGroupsGroupBy?: string | null;
+    storageNodesGroupBy?: string | null;
+}
+
+export function getStorageGroupByCleanupPatch({
+    blobMetricsEnabled,
+    storageGroupsGroupBy,
+    storageNodesGroupBy,
+}: StorageGroupByCleanupParams): Record<string, string | undefined> {
+    const patch: Record<string, string | undefined> = {};
+
+    if (blobMetricsEnabled) {
+        if (storageGroupsGroupBy === 'Usage') {
+            patch.storageGroupsGroupBy = undefined;
+        }
+
+        if (storageNodesGroupBy === 'DiskSpaceUsage') {
+            patch.storageNodesGroupBy = undefined;
+        }
+
+        return patch;
+    }
+
+    if (storageGroupsGroupBy === 'CapacityAlert') {
+        patch.storageGroupsGroupBy = undefined;
+    }
+
+    if (storageNodesGroupBy === 'CapacityAlert') {
+        patch.storageNodesGroupBy = undefined;
+    }
+
+    return patch;
+}
+
 export function useStorageQueryParams() {
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
@@ -138,28 +174,11 @@ export function useStorageQueryParams() {
     };
 
     React.useEffect(() => {
-        if (blobMetricsEnabled) {
-            const patch: Record<string, string | undefined> = {};
-
-            if (queryParams.storageGroupsGroupBy === 'Usage') {
-                patch.storageGroupsGroupBy = undefined;
-            }
-
-            if (Object.keys(patch).length > 0) {
-                setQueryParams(patch, 'replaceIn');
-            }
-            return;
-        }
-
-        const patch: Record<string, string | undefined> = {};
-
-        if (queryParams.storageGroupsGroupBy === 'CapacityAlert') {
-            patch.storageGroupsGroupBy = undefined;
-        }
-
-        if (queryParams.storageNodesGroupBy === 'CapacityAlert') {
-            patch.storageNodesGroupBy = undefined;
-        }
+        const patch = getStorageGroupByCleanupPatch({
+            blobMetricsEnabled,
+            storageGroupsGroupBy: queryParams.storageGroupsGroupBy,
+            storageNodesGroupBy: queryParams.storageNodesGroupBy,
+        });
 
         if (Object.keys(patch).length > 0) {
             setQueryParams(patch, 'replaceIn');
diff --git a/src/store/reducers/capabilities/hooks.ts b/src/store/reducers/capabilities/hooks.ts
@@ -243,7 +243,7 @@ export const useBlobStorageCapacityMetricsAvailable = () => {
 
 export const useBlobStorageCapacityMetricsEnabled = () => {
     const available = useBlobStorageCapacityMetricsAvailable();
-    const [enabled] = useSetting(SETTING_KEYS.ENABLE_BLOB_STORAGE_CAPACITY_METRICS, true);
+    const [enabled] = useSetting(SETTING_KEYS.ENABLE_BLOB_STORAGE_CAPACITY_METRICS, false);
 
     return enabled && available;
 };
diff --git a/src/store/reducers/settings/__test__/utils.test.ts b/src/store/reducers/settings/__test__/utils.test.ts
@@ -0,0 +1,8 @@
+import {SETTING_KEYS} from '../constants';
+import {getSettingDefault} from '../utils';
+
+describe('settings utils', () => {
+    test('disables blob storage capacity metrics by default', () => {
+        expect(getSettingDefault(SETTING_KEYS.ENABLE_BLOB_STORAGE_CAPACITY_METRICS)).toBe(false);
+    });
+});
diff --git a/src/store/reducers/settings/constants.ts b/src/store/reducers/settings/constants.ts
@@ -87,7 +87,7 @@ export const DEFAULT_USER_SETTINGS = {
     [SETTING_KEYS.QUERY_EXECUTION_SETTINGS]: DEFAULT_QUERY_SETTINGS,
     [SETTING_KEYS.ACL_SYNTAX]: AclSyntax.YdbShort,
     [SETTING_KEYS.STORAGE_TYPE]: STORAGE_TYPES.groups,
-    [SETTING_KEYS.ENABLE_BLOB_STORAGE_CAPACITY_METRICS]: true,
+    [SETTING_KEYS.ENABLE_BLOB_STORAGE_CAPACITY_METRICS]: false,
     [SETTING_KEYS.ENABLE_TENANT_NAVIGATION_V2]: true,
     [SETTING_KEYS.IS_V2_NAVIGATION_ALERT_SEEN]: false,
     [SETTING_KEYS.ENABLE_STORAGE_EXPERT_MODE]: false,
diff --git a/src/store/reducers/storage/types.ts b/src/store/reducers/storage/types.ts
@@ -42,6 +42,7 @@ export interface PreparedStorageNode
 
     MaxPDiskUsage?: number;
     MaxVDiskSlotUsage?: number;
+    MaxVDiskRawUsage?: number;
     CapacityAlert?: ECapacityAlert | string;
 }
 
diff --git a/src/store/reducers/storage/utils.ts b/src/store/reducers/storage/utils.ts
diff --git a/src/types/api/nodes.ts b/src/types/api/nodes.ts

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,10 @@ export function useStorageNodesSelectedColumns({`
`41`	`41`	`skipped.push(...CAPACITY_METRICS_USER_SETTINGS_COLUMNS_IDS);`
`42`	`42`	`}`
`43`	`43`
	`44`	`+ if (blobMetricsEnabled) {`
	`45`	`+ skipped.push(NODES_COLUMNS_IDS.DiskSpaceUsage);`
	`46`	`+ }`
	`47`	`+`
`44`	`48`	`return skipped;`
`45`	`49`	`}, [bridgeModeEnabled, blobMetricsEnabled]);`
`46`	`50`