refactor: rework columns group by and sorting (#1614)

Author: artemmufazalov

src/components/nodesColumns/columns.tsx

@@ -154,25 +154,6 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
         resizeMinWidth: 40,
     };
 }
-export function getSharedCacheUsageColumn<
-    T extends {SharedCacheUsed?: string | number; SharedCacheLimit?: string | number},
->(): Column<T> {
-    return {
-        name: NODES_COLUMNS_IDS.SharedCacheUsage,
-        header: NODES_COLUMNS_TITLES.SharedCacheUsage,
-        render: ({row}) => (
-            <ProgressViewer
-                value={row.SharedCacheUsed}
-                capacity={row.SharedCacheLimit}
-                formatValues={formatStorageValuesToGb}
-                colorizeProgress={true}
-            />
-        ),
-        align: DataTable.LEFT,
-        width: 170,
-        resizeMinWidth: 170,
-    };
-}
 export function getMemoryColumn<
     T extends {MemoryStats?: TMemoryStats; MemoryUsed?: string; MemoryLimit?: string},
 >(): Column<T> {

src/components/nodesColumns/constants.ts

@@ -1,4 +1,4 @@
-import type {NodesRequiredField} from '../../types/api/nodes';
+import type {NodesGroupByField, NodesRequiredField, NodesSortValue} from '../../types/api/nodes';
 import type {ValueOf} from '../../types/common';
 
 import i18n from './i18n';
@@ -7,7 +7,6 @@ export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
 
 export const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
-    SystemState: 'SystemState',
     Host: 'Host',
     Database: 'Database',
     NodeName: 'NodeName',
@@ -22,7 +21,6 @@ export const NODES_COLUMNS_IDS = {
     LoadAverage: 'LoadAverage',
     Load: 'Load',
     DiskSpaceUsage: 'DiskSpaceUsage',
-    SharedCacheUsage: 'SharedCacheUsage',
     TotalSessions: 'TotalSessions',
     Missing: 'Missing',
     Tablets: 'Tablets',
@@ -37,9 +35,6 @@ export const NODES_COLUMNS_TITLES = {
     get NodeId() {
         return i18n('node-id');
     },
-    get SystemState() {
-        return i18n('system-state');
-    },
     get Host() {
         return i18n('host');
     },
@@ -82,9 +77,6 @@ export const NODES_COLUMNS_TITLES = {
     get DiskSpaceUsage() {
         return i18n('disk-usage');
     },
-    get SharedCacheUsage() {
-        return i18n('caches');
-    },
     get TotalSessions() {
         return i18n('sessions');
     },
@@ -99,11 +91,62 @@ export const NODES_COLUMNS_TITLES = {
     },
 } as const satisfies Record<NodesColumnId, string>;
 
+const NODES_COLUMNS_GROUP_BY_TITLES = {
+    get NodeId() {
+        return i18n('node-id');
+    },
+    get Host() {
+        return i18n('host');
+    },
+    get NodeName() {
+        return i18n('node-name');
+    },
+    get Database() {
+        return i18n('database');
+    },
+    get DiskSpaceUsage() {
+        return i18n('disk-usage');
+    },
+    get DC() {
+        return i18n('dc');
+    },
+    get Rack() {
+        return i18n('rack');
+    },
+    get Missing() {
+        return i18n('missing');
+    },
+    get Uptime() {
+        return i18n('uptime');
+    },
+    get Version() {
+        return i18n('version');
+    },
+    get SystemState() {
+        return i18n('system-state');
+    },
+    get ConnectStatus() {
+        return i18n('connect-status');
+    },
+    get NetworkUtilization() {
+        return i18n('network-utilization');
+    },
+    get ClockSkew() {
+        return i18n('clock-skew');
+    },
+    get PingTime() {
+        return i18n('ping-time');
+    },
+} as const satisfies Record<NodesGroupByField, string>;
+
+export function getNodesGroupByFieldTitle(groupByField: NodesGroupByField) {
+    return NODES_COLUMNS_GROUP_BY_TITLES[groupByField];
+}
+
 // Although columns ids mostly similar to backend fields, there might be some difference
 // Also for some columns we may use more than one field
 export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredField[]> = {
     NodeId: ['NodeId'],
-    SystemState: ['SystemState'],
     Host: ['Host', 'Rack', 'Database', 'SystemState'],
     Database: ['Database'],
     NodeName: ['NodeName'],
@@ -118,9 +161,38 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
     LoadAverage: ['LoadAverage'],
     Load: ['LoadAverage'],
     DiskSpaceUsage: ['DiskSpaceUsage'],
-    SharedCacheUsage: ['SystemState'],
     TotalSessions: ['SystemState'],
     Missing: ['Missing'],
     Tablets: ['Tablets', 'Database'],
     PDisks: ['PDisks'],
 };
+
+const NODES_COLUMNS_TO_SORT_FIELDS: Record<NodesColumnId, NodesSortValue | undefined> = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    Database: 'Database',
+    NodeName: 'NodeName',
+    DC: 'DC',
+    Rack: 'Rack',
+    Version: 'Version',
+    Uptime: 'Uptime',
+    Memory: 'Memory',
+    RAM: 'Memory',
+    CPU: 'CPU',
+    Pools: 'CPU',
+    LoadAverage: 'LoadAverage',
+    Load: 'LoadAverage',
+    DiskSpaceUsage: 'DiskSpaceUsage',
+    TotalSessions: undefined,
+    Missing: 'Missing',
+    Tablets: undefined,
+    PDisks: undefined,
+};
+
+export function getNodesColumnSortField(columnId?: string) {
+    return NODES_COLUMNS_TO_SORT_FIELDS[columnId as NodesColumnId];
+}
+
+export function isSortableNodesColumn(columnId: string) {
+    return Boolean(getNodesColumnSortField(columnId));
+}

src/components/nodesColumns/i18n/en.json

@@ -1,6 +1,5 @@
 {
   "node-id": "Node ID",
-  "system-state": "System State",
   "host": "Host",
   "database": "Database",
   "node-name": "Node Name",
@@ -12,14 +11,20 @@
   "ram": "RAM",
   "cpu": "CPU",
   "pools": "Pools",
-  "disk-usage": "Disk usage",
+  "disk-usage": "Disk Usage",
   "tablets": "Tablets",
   "load-average": "Load Average",
   "load": "Load",
-  "caches": "Caches",
   "sessions": "Sessions",
   "missing": "Missing",
   "pdisks": "PDisks",
+
   "field_memory-used": "Memory used",
-  "field_memory-limit": "Memory limit"
+  "field_memory-limit": "Memory limit",
+
+  "system-state": "System State",
+  "connect-status": "Connect Status",
+  "network-utilization": "Network Utilization",
+  "clock-skew": "Clock Skew",
+  "ping-time": "Ping Time"
 }

src/containers/Nodes/columns/columns.tsx

@@ -13,9 +13,9 @@ import {
     getUptimeColumn,
     getVersionColumn,
 } from '../../../components/nodesColumns/columns';
+import {isSortableNodesColumn} from '../../../components/nodesColumns/constants';
 import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
 import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
-import {isSortableNodesProperty} from '../../../utils/nodes';
 import type {Column} from '../../../utils/tableUtils/types';
 
 export function getNodesColumns(params: GetNodesColumnsParams): Column<NodesPreparedEntity>[] {
@@ -36,6 +36,6 @@ export function getNodesColumns(params: GetNodesColumnsParams): Column<NodesPrep
     ];
 
     return columns.map((column) => {
-        return {...column, sortable: isSortableNodesProperty(column.name)};
+        return {...column, sortable: isSortableNodesColumn(column.name)};
     });
 }

src/containers/Nodes/columns/constants.ts

@@ -1,6 +1,6 @@
 import type {SelectOption} from '@gravity-ui/uikit';
 
-import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants';
+import {getNodesGroupByFieldTitle} from '../../../components/nodesColumns/constants';
 import type {NodesColumnId} from '../../../components/nodesColumns/constants';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 
@@ -43,7 +43,7 @@ export function getNodesGroupByOptions(withSystemStateGroupBy?: boolean): Select
     return getAvailableNodesGroupByParams(withSystemStateGroupBy).map((param) => {
         return {
             value: param,
-            content: NODES_COLUMNS_TITLES[param],
+            content: getNodesGroupByFieldTitle(param),
         };
     });
 }

src/containers/Nodes/getNodes.ts

@@ -1,15 +1,13 @@
 import type {FetchData} from '../../components/PaginatedTable';
-import {NODES_COLUMNS_TO_DATA_FIELDS} from '../../components/nodesColumns/constants';
+import {
+    NODES_COLUMNS_TO_DATA_FIELDS,
+    getNodesColumnSortField,
+} from '../../components/nodesColumns/constants';
 import type {NodesFilters, NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import {prepareNodesData} from '../../store/reducers/nodes/utils';
 import type {NodesRequestParams} from '../../types/api/nodes';
 import {prepareSortValue} from '../../utils/filters';
-import {
-    NODES_SORT_VALUE_TO_FIELD,
-    getProblemParamValue,
-    getUptimeParamValue,
-    isSortableNodesProperty,
-} from '../../utils/nodes';
+import {getProblemParamValue, getUptimeParamValue} from '../../utils/nodes';
 import {getRequiredDataFields} from '../../utils/tableUtils/getRequiredDataFields';
 
 export const getNodes: FetchData<
@@ -32,9 +30,8 @@ export const getNodes: FetchData<
     const {path, database, searchValue, problemFilter, uptimeFilter, filterGroup, filterGroupBy} =
         filters ?? {};
 
-    const sort = isSortableNodesProperty(columnId)
-        ? prepareSortValue(NODES_SORT_VALUE_TO_FIELD[columnId], sortOrder)
-        : undefined;
+    const sortField = getNodesColumnSortField(columnId);
+    const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
 
     const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
 

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

@@ -14,14 +14,18 @@ import {valueIsDefined} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../../../utils/constants';
 import {formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
-import {getSpaceUsageSeverity, isSortableStorageProperty} from '../../../../utils/storage';
+import {getSpaceUsageSeverity} from '../../../../utils/storage';
 import {formatToMs} from '../../../../utils/timeParsers';
 import {bytesToGB, bytesToSpeed} from '../../../../utils/utils';
 import {Disks} from '../../Disks/Disks';
 import {getDegradedSeverity, isVdiskActive} from '../../utils';
 import i18n from '../i18n';
 
-import {STORAGE_GROUPS_COLUMNS_IDS, STORAGE_GROUPS_COLUMNS_TITLES} from './constants';
+import {
+    STORAGE_GROUPS_COLUMNS_IDS,
+    STORAGE_GROUPS_COLUMNS_TITLES,
+    isSortableStorageGroupsColumn,
+} from './constants';
 import type {GetStorageColumnsData, StorageColumnsGetter, StorageGroupsColumn} from './types';
 
 import './StorageGroupsColumns.scss';
@@ -297,6 +301,6 @@ export const getStorageGroupsColumns: StorageColumnsGetter = (data) => {
 
     return columns.map((column) => ({
         ...column,
-        sortable: isSortableStorageProperty(column.name),
+        sortable: isSortableStorageGroupsColumn(column.name),
     }));
 };