feat(Storage): add disk space usage column (#1425)

src/components/nodesColumns/columns.tsx

@@ -3,8 +3,10 @@ import DataTable from '@gravity-ui/react-data-table';
 import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
 import type {TPoolStats} from '../../types/api/nodes';
 import type {TTabletStateInfo} from '../../types/api/tablet';
+import {valueIsDefined} from '../../utils';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
+import {getSpaceUsageSeverity} from '../../utils/storage';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {NodeHostWrapper} from '../NodeHostWrapper/NodeHostWrapper';
 import type {NodeHostData} from '../NodeHostWrapper/NodeHostWrapper';
@@ -184,6 +186,25 @@ export function getLoadColumn<T extends {LoadAveragePercents?: number[]}>(): Col
         resizeMinWidth: 70,
     };
 }
+export function getDiskSpaceUsageColumn<T extends {DiskSpaceUsage?: number}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.DiskSpaceUsage,
+        header: NODES_COLUMNS_TITLES.DiskSpaceUsage,
+        render: ({row}) => {
+            return valueIsDefined(row.DiskSpaceUsage) ? (
+                <UsageLabel
+                    value={Math.floor(row.DiskSpaceUsage)}
+                    theme={getSpaceUsageSeverity(row.DiskSpaceUsage)}
+                />
+            ) : (
+                EMPTY_DATA_PLACEHOLDER
+            );
+        },
+        align: DataTable.LEFT,
+        width: 115,
+        resizeMinWidth: 75,
+    };
+}
 export function getSessionsColumn<T extends {TotalSessions?: number}>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.TotalSessions,

src/components/nodesColumns/constants.ts

@@ -16,6 +16,7 @@ export const NODES_COLUMNS_IDS = {
     CPU: 'CPU',
     LoadAverage: 'LoadAverage',
     Load: 'Load',
+    DiskSpaceUsage: 'DiskSpaceUsage',
     SharedCacheUsage: 'SharedCacheUsage',
     TotalSessions: 'TotalSessions',
     Missing: 'Missing',
@@ -60,6 +61,9 @@ export const NODES_COLUMNS_TITLES = {
     get Load() {
         return i18n('load');
     },
+    get DiskSpaceUsage() {
+        return i18n('disk-usage');
+    },
     get SharedCacheUsage() {
         return i18n('caches');
     },

src/components/nodesColumns/i18n/en.json

@@ -8,6 +8,7 @@
   "uptime": "Uptime",
   "memory": "Memory",
   "cpu": "CPU",
+  "disk-usage": "Disk usage",
   "tablets": "Tablets",
   "load-average": "Load Average",
   "load": "Load",

src/containers/Storage/StorageControls/StorageControls.tsx

@@ -88,7 +88,7 @@ export function StorageGroupsControls({
                     <Select
                         hasClear
                         placeholder={'-'}
-                        width={170}
+                        width={150}
                         defaultValue={
                             storageGroupsGroupByParam ? [storageGroupsGroupByParam] : undefined
                         }
@@ -168,7 +168,7 @@ export function StorageNodesControls({
                     <Select
                         hasClear
                         placeholder={'-'}
-                        width={170}
+                        width={150}
                         defaultValue={
                             storageNodesGroupByParam ? [storageNodesGroupByParam] : undefined
                         }

src/containers/Storage/StorageGroups/columns/columns.tsx

@@ -14,11 +14,11 @@ import {valueIsDefined} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../../../utils/constants';
 import {formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
-import {isSortableStorageProperty} from '../../../../utils/storage';
+import {getSpaceUsageSeverity, isSortableStorageProperty} from '../../../../utils/storage';
 import {formatToMs} from '../../../../utils/timeParsers';
 import {bytesToGB, bytesToSpeed} from '../../../../utils/utils';
 import {Disks} from '../../Disks/Disks';
-import {getDegradedSeverity, getUsageSeverityForStorageGroup, isVdiskActive} from '../../utils';
+import {getDegradedSeverity, isVdiskActive} from '../../utils';
 import i18n from '../i18n';
 
 import {STORAGE_GROUPS_COLUMNS_IDS, STORAGE_GROUPS_COLUMNS_TITLES} from './constants';
@@ -102,19 +102,32 @@ const degradedColumn: StorageGroupsColumn = {
 const usageColumn: StorageGroupsColumn = {
     name: STORAGE_GROUPS_COLUMNS_IDS.Usage,
     header: STORAGE_GROUPS_COLUMNS_TITLES.Usage,
-    width: 75,
+    width: 85,
     resizeMinWidth: 75,
     render: ({row}) => {
-        // without a limit the usage can be evaluated as 0,
-        // but the absence of a value is more clear
-        return row.Limit ? (
-            <UsageLabel value={row.Usage} theme={getUsageSeverityForStorageGroup(row.Usage)} />
+        return valueIsDefined(row.Usage) ? (
+            <UsageLabel value={Math.floor(row.Usage)} theme={getSpaceUsageSeverity(row.Usage)} />
         ) : (
-            '-'
+            EMPTY_DATA_PLACEHOLDER
+        );
+    },
+    align: DataTable.LEFT,
+};
+const diskSpaceUsageColumn: StorageGroupsColumn = {
+    name: STORAGE_GROUPS_COLUMNS_IDS.DiskSpaceUsage,
+    header: STORAGE_GROUPS_COLUMNS_TITLES.DiskSpaceUsage,
+    width: 115,
+    resizeMinWidth: 75,
+    render: ({row}) => {
+        return valueIsDefined(row.DiskSpaceUsage) ? (
+            <UsageLabel
+                value={Math.floor(row.DiskSpaceUsage)}
+                theme={getSpaceUsageSeverity(row.DiskSpaceUsage)}
+            />
+        ) : (
+            EMPTY_DATA_PLACEHOLDER
         );
     },
-    // without a limit exclude usage from sort to display at the bottom
-    sortAccessor: (row) => (row.Limit ? row.Usage : null),
     align: DataTable.LEFT,
 };
 
@@ -270,6 +283,7 @@ export const getStorageGroupsColumns: StorageColumnsGetter = (data) => {
         erasureColumn,
         degradedColumn,
         usageColumn,
+        diskSpaceUsageColumn,
         usedColumn,
         limitColumn,
         usedSpaceFlagColumn,

src/containers/Storage/StorageGroups/columns/constants.ts

@@ -76,7 +76,7 @@ export const STORAGE_GROUPS_COLUMNS_TITLES = {
         return i18n('usage');
     },
     get DiskSpaceUsage() {
-        return i18n('disk-space-usage');
+        return i18n('disk-usage');
     },
     get DiskSpace() {
         return i18n('space');

src/containers/Storage/StorageGroups/columns/i18n/en.json

@@ -7,7 +7,7 @@
   "missing-disks": "Missing Disks",
   "state": "State",
   "usage": "Usage",
-  "disk-space-usage": "Disk space usage",
+  "disk-usage": "Disk usage",
   "group-id": "Group ID",
   "used": "Used",
   "limit": "Limit",

src/containers/Storage/StorageNodes/columns/columns.tsx

@@ -3,6 +3,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import {
     getCpuColumn,
     getDataCenterColumn,
+    getDiskSpaceUsageColumn,
     getHostColumn,
     getMemoryColumn,
     getMissingDisksColumn,
@@ -69,6 +70,7 @@ export const getStorageNodesColumns = ({
         getVersionColumn<PreparedStorageNode>(),
         getMemoryColumn<PreparedStorageNode>(),
         getCpuColumn<PreparedStorageNode>(),
+        getDiskSpaceUsageColumn<PreparedStorageNode>(),
         getUptimeColumn<PreparedStorageNode>(),
         getMissingDisksColumn<PreparedStorageNode>(),
         getPDisksColumn({viewContext}),

src/containers/Storage/StorageNodes/columns/constants.ts

@@ -16,7 +16,6 @@ export const STORAGE_NODES_SELECTED_COLUMNS_LS_KEY = 'storageNodesSelectedColumn
 export const STORAGE_NODES_COLUMNS_IDS = {
     ...BASE_NODES_COLUMNS_IDS,
     PDisks: 'PDisks',
-    DiskSpaceUsage: 'DiskSpaceUsage',
 } as const;
 
 type StorageNodesColumnId = ValueOf<typeof STORAGE_NODES_COLUMNS_IDS>;
@@ -39,9 +38,6 @@ export const STORAGE_NODES_COLUMNS_TITLES = {
     get PDisks() {
         return i18n('pdisks');
     },
-    get DiskSpaceUsage() {
-        return i18n('disk-space-usage');
-    },
 } as const satisfies Record<StorageNodesColumnId, string>;
 
 const STORAGE_NODES_GROUP_BY_PARAMS = [

src/containers/Storage/StorageNodes/columns/i18n/en.json

@@ -1,4 +1,3 @@
 {
-  "disk-space-usage": "Disk space usage",
   "pdisks": "PDisks"
 }

src/containers/Storage/utils/index.ts

@@ -32,12 +32,6 @@ export const getDegradedSeverity = (group: PreparedStorageGroup) => {
     return evaluate(group.Degraded);
 };
 
-export const getUsageSeverityForStorageGroup = generateEvaluator(80, 85, [
-    'success',
-    'warning',
-    'danger',
-]);
-
 export const defaultSortNode: NodesSortParams = {
     sortValue: NODES_COLUMNS_IDS.NodeId,
     sortOrder: ASCENDING,

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
     useCapabilitiesLoaded,
     useStorageGroupsHandlerAvailable,
@@ -15,8 +13,6 @@ import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
-import {prepareTopStorageGroups} from './utils';
-
 interface TopGroupsProps {
     tenant?: string;
 }
@@ -46,9 +42,7 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     const loading = isFetching && currentData === undefined;
 
-    const preparedGroups = React.useMemo(() => {
-        return prepareTopStorageGroups(currentData);
-    }, [currentData]);
+    const groups = currentData?.groups || [];
 
     const title = getSectionTitle({
         entity: i18n('groups'),
@@ -62,7 +56,7 @@ export function TopGroups({tenant}: TopGroupsProps) {
     return (
         <TenantOverviewTableLayout
             columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
-            data={preparedGroups}
+            data={groups}
             columns={columns}
             title={title}
             loading={loading || !capabilitiesLoaded}

src/store/reducers/storage/types.ts

@@ -2,10 +2,10 @@ import type {OrderType} from '@gravity-ui/react-data-table';
 import {z} from 'zod';
 
 import type {EFlag} from '../../../types/api/enums';
-import type {NodesGroupByField, TSystemStateInfo} from '../../../types/api/nodes';
+import type {NodesGroupByField} from '../../../types/api/nodes';
 import type {GroupsGroupByField, StorageV2SortValue} from '../../../types/api/storage';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
-import type {NodesUptimeFilterValues} from '../../../utils/nodes';
+import type {NodesUptimeFilterValues, PreparedNodeSystemState} from '../../../utils/nodes';
 
 import {STORAGE_TYPES, VISIBLE_ENTITIES} from './constants';
 
@@ -27,16 +27,15 @@ export interface PreparedStorageNodeFilters {
     filterGroupBy?: NodesGroupByField;
 }
 
-export interface PreparedStorageNode extends TSystemStateInfo {
+export interface PreparedStorageNode extends PreparedNodeSystemState {
     NodeId: number;
+
+    DiskSpaceUsage?: number;
+
     PDisks?: PreparedPDisk[];
     VDisks?: PreparedVDisk[];
 
-    DC?: string;
-    Rack?: string;
-
     Missing: number;
-    Uptime: string;
 }
 
 export interface PreparedStorageGroupFilters {
@@ -62,12 +61,14 @@ export interface PreparedStorageGroup {
 
     GroupId?: string | number;
 
-    Usage: number;
+    Usage?: number;
     Read: number;
     Write: number;
     Used: number;
     Limit: number;
 
+    DiskSpaceUsage?: number;
+
     DiskSpace: EFlag;
 
     VDisks?: PreparedVDisk[];

src/store/reducers/storage/utils.ts

@@ -98,7 +98,11 @@ export const prepareStorageGroupData = (
     }
 
     const vDisks = group.VDisks?.map((vdisk) => prepareVDisk(vdisk, poolName));
-    const usage = getUsage({Used: usedSpaceBytes, Limit: limitSizeBytes}, 5);
+
+    // Do not calculate usage if there is no limit
+    const usage = limitSizeBytes
+        ? getUsage({Used: usedSpaceBytes, Limit: limitSizeBytes}, 5)
+        : undefined;
 
     const diskSpaceStatus = getGroupDiskSpaceStatus(group);
 
@@ -138,7 +142,7 @@ export const prepareStorageGroupDataV2 = (group: TStorageGroupInfoV2): PreparedS
     } = group;
 
     const vDisks = VDisks.map((vdisk) => prepareVDisk(vdisk, PoolName));
-    const usage = Math.floor(Number(Usage) * 100);
+    const usage = Number(Usage) * 100;
 
     const diskSpaceStatus = getGroupDiskSpaceStatus(group);
 
@@ -202,6 +206,7 @@ const prepareStorageNodeData = (node: TNodeInfo): PreparedStorageNode => {
     return {
         ...prepareNodeSystemState(node.SystemState),
         NodeId: node.NodeId,
+        DiskSpaceUsage: node.DiskSpaceUsage,
         PDisks: pDisks,
         VDisks: vDisks,
         Missing: missing,
@@ -250,6 +255,7 @@ export function prepareGroupsResponse(data: StorageGroupsResponse): PreparedStor
     const preparedGroups: PreparedStorageGroup[] = StorageGroups.map((group) => {
         const {
             Usage,
+            DiskSpaceUsage,
             Read,
             Write,
             Used,
@@ -303,7 +309,8 @@ export function prepareGroupsResponse(data: StorageGroupsResponse): PreparedStor
 
         return {
             ...group,
-            Usage: Math.floor(Number(Usage)) || 0,
+            Usage,
+            DiskSpaceUsage,
             Read: Number(Read),
             Write: Number(Write),
             Used: Number(Used),

src/types/api/nodes.ts

@@ -22,6 +22,11 @@ export interface TNodesInfo {
 
 export interface TNodeInfo {
     NodeId: number;
+
+    CpuUsage?: number;
+    DiskSpaceUsage?: number;
+    UptimeSeconds?: number;
+
     SystemState: TSystemStateInfo;
     PDisks?: TPDiskStateInfo[];
     VDisks?: TVDiskStateInfo[];

src/types/api/storage.ts

@@ -244,7 +244,8 @@ export type StorageV2SortValue =
     // So this sort does nothing
     // Added them here for types compatibility
     | 'AllocationUnits'
-    | 'Latency';
+    | 'Latency'
+    | 'DiskSpaceUsage';
 
 /**
  * Values to sort /storage/groups response
@@ -254,7 +255,6 @@ export type GroupsSortField =
     | 'MissingDisks'
     | 'State'
     | 'Available'
-    | 'DiskSpaceUsage'
     | 'Encryption';
 
 export type StorageV2Sort = BackendSortParam<StorageV2SortValue>;