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

Author: artemmufazalov

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"
 }