refactor: rework columns group by and sorting

Author: artemmufazalov

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',
@@ -37,9 +36,6 @@ export const NODES_COLUMNS_TITLES = {
     get NodeId() {
         return i18n('node-id');
     },
-    get SystemState() {
-        return i18n('system-state');
-    },
     get Host() {
         return i18n('host');
     },
@@ -99,11 +95,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'],
@@ -124,3 +171,34 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
     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',
+    SharedCacheUsage: undefined,
+    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,21 @@
   "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),
     }));
 };

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

@@ -1,7 +1,11 @@
 import type {SelectOption} from '@gravity-ui/uikit';
 import {z} from 'zod';
 
-import type {GroupsGroupByField, GroupsRequiredField} from '../../../../types/api/storage';
+import type {
+    GroupsGroupByField,
+    GroupsRequiredField,
+    StorageV2SortValue,
+} from '../../../../types/api/storage';
 import type {ValueOf} from '../../../../types/common';
 
 import i18n from './i18n';
@@ -13,7 +17,6 @@ export const STORAGE_GROUPS_COLUMNS_IDS = {
     GroupId: 'GroupId',
     PoolName: 'PoolName',
     MediaType: 'MediaType',
-    Encryption: 'Encryption',
     Erasure: 'Erasure',
     Used: 'Used',
     Limit: 'Limit',
@@ -26,9 +29,7 @@ export const STORAGE_GROUPS_COLUMNS_IDS = {
     AllocationUnits: 'AllocationUnits',
     VDisks: 'VDisks',
     VDisksPDisks: 'VDisksPDisks',
-    MissingDisks: 'MissingDisks',
     Degraded: 'Degraded',
-    State: 'State',
 } as const;
 
 export type StorageGroupsColumnId = ValueOf<typeof STORAGE_GROUPS_COLUMNS_IDS>;
@@ -57,9 +58,6 @@ export const STORAGE_GROUPS_COLUMNS_TITLES = {
     get MediaType() {
         return i18n('type');
     },
-    get Encryption() {
-        return i18n('encryption');
-    },
     get Erasure() {
         return i18n('erasure');
     },
@@ -102,13 +100,43 @@ export const STORAGE_GROUPS_COLUMNS_TITLES = {
     get Degraded() {
         return i18n('missing-disks');
     },
+} as const satisfies Record<StorageGroupsColumnId, string>;
+
+const STORAGE_GROUPS_COLUMNS_GROUP_BY_TITLES = {
+    get GroupId() {
+        return i18n('group-id');
+    },
+    get Erasure() {
+        return i18n('erasure');
+    },
+    get Usage() {
+        return i18n('usage');
+    },
+    get DiskSpaceUsage() {
+        return i18n('disk-usage');
+    },
+    get PoolName() {
+        return i18n('pool-name');
+    },
+    get Kind() {
+        return i18n('type');
+    },
+    get Encryption() {
+        return i18n('encryption');
+    },
+    get MediaType() {
+        return i18n('type');
+    },
     get MissingDisks() {
         return i18n('missing-disks');
     },
     get State() {
         return i18n('state');
     },
-} as const satisfies Record<StorageGroupsColumnId, string>;
+    get Latency() {
+        return i18n('latency');
+    },
+} as const satisfies Record<GroupsGroupByField, string>;
 
 const STORAGE_GROUPS_GROUP_BY_PARAMS = [
     'PoolName',
@@ -126,7 +154,7 @@ export const STORAGE_GROUPS_GROUP_BY_OPTIONS: SelectOption[] = STORAGE_GROUPS_GR
     (param) => {
         return {
             value: param,
-            content: STORAGE_GROUPS_COLUMNS_TITLES[param],
+            content: STORAGE_GROUPS_COLUMNS_GROUP_BY_TITLES[param],
         };
     },
 );
@@ -144,7 +172,6 @@ export const GROUPS_COLUMNS_TO_DATA_FIELDS: Record<StorageGroupsColumnId, Groups
     PoolName: ['PoolName'],
     // We display MediaType and Encryption in one Type column
     MediaType: ['MediaType', 'Encryption'],
-    Encryption: ['Encryption'],
     Erasure: ['Erasure'],
     Used: ['Used'],
     Limit: ['Limit'],
@@ -158,7 +185,35 @@ export const GROUPS_COLUMNS_TO_DATA_FIELDS: Record<StorageGroupsColumnId, Groups
     // Read and Write fields make backend to return Whiteboard data
     VDisks: ['VDisk', 'PDisk', 'Read', 'Write'],
     VDisksPDisks: ['VDisk', 'PDisk', 'Read', 'Write'],
-    MissingDisks: ['MissingDisks'],
     Degraded: ['MissingDisks'],
-    State: ['State'],
 };
+
+const STORAGE_GROUPS_COLUMNS_TO_SORT_FIELDS: Record<
+    StorageGroupsColumnId,
+    StorageV2SortValue | undefined
+> = {
+    GroupId: 'GroupId',
+    PoolName: 'PoolName',
+    MediaType: 'MediaType',
+    Erasure: 'Erasure',
+    Used: 'Used',
+    Limit: 'Limit',
+    Usage: 'Usage',
+    DiskSpaceUsage: 'DiskSpaceUsage',
+    DiskSpace: undefined,
+    Read: 'Read',
+    Write: 'Write',
+    Latency: 'Latency',
+    AllocationUnits: 'AllocationUnits',
+    VDisks: undefined,
+    VDisksPDisks: undefined,
+    Degraded: 'Degraded',
+};
+
+export function getStorageGroupsColumnSortField(columnId?: string) {
+    return STORAGE_GROUPS_COLUMNS_TO_SORT_FIELDS[columnId as StorageGroupsColumnId];
+}
+
+export function isSortableStorageGroupsColumn(columnId: string) {
+    return Boolean(getStorageGroupsColumnSortField(columnId));
+}