feat(StorageNodes): add columns, use the same nodes columns

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -1,17 +1,23 @@
 import {PopoverBehavior} from '@gravity-ui/uikit';
 
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
-import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {NodeAddress} from '../../types/additionalProps';
+import type {TSystemStateInfo} from '../../types/api/nodes';
 import {createDeveloperUILinkWithNodeId} from '../../utils/developerUI/developerUI';
 import {isUnavailableNode} from '../../utils/nodes';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {DeveloperUILinkButton} from '../DeveloperUILinkButton/DeveloperUILinkButton';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 
+export type NodeHostData = NodeAddress &
+    Pick<TSystemStateInfo, 'SystemState'> & {
+        NodeId: string | number;
+        TenantName?: string;
+    };
+
 interface NodeHostWrapperProps {
-    node: NodesPreparedEntity;
+    node: NodeHostData;
     getNodeRef?: (node?: NodeAddress) => string | null;
     database?: string;
 }

src/components/TabletsStatistic/TabletsStatistic.tsx

@@ -26,18 +26,23 @@ const prepareTablets = (tablets: TTabletStateInfo[]) => {
 
 interface TabletsStatisticProps {
     tablets: TTabletStateInfo[];
-    path: string | undefined;
+    tenantName: string | undefined;
     nodeId: string | number;
     backend?: string;
 }
 
-export const TabletsStatistic = ({tablets = [], path, nodeId, backend}: TabletsStatisticProps) => {
+export const TabletsStatistic = ({
+    tablets = [],
+    tenantName,
+    nodeId,
+    backend,
+}: TabletsStatisticProps) => {
     const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
         const tabletsPath = createHref(
             routes.node,
             {id: nodeId, activeTab: TABLETS},
             {
-                tenantName: path,
+                tenantName,
                 backend,
             },
         );

src/components/nodesColumns/columns.tsx

@@ -0,0 +1,231 @@
+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 {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+import {NodeHostWrapper} from '../NodeHostWrapper/NodeHostWrapper';
+import type {NodeHostData} from '../NodeHostWrapper/NodeHostWrapper';
+import {PoolsGraph} from '../PoolsGraph/PoolsGraph';
+import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+import {TabletsStatistic} from '../TabletsStatistic';
+import {UsageLabel} from '../UsageLabel/UsageLabel';
+
+import {NODES_COLUMNS_IDS, NODES_COLUMNS_TITLES} from './constants';
+import type {Column, GetNodesColumnsParams} from './types';
+
+export function getNodeIdColumn<T extends {NodeId?: string | number}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.NodeId,
+        header: '#',
+        width: 80,
+        render: ({row}) => row.NodeId,
+        align: DataTable.RIGHT,
+    };
+}
+export function getHostColumn<T extends NodeHostData>({
+    getNodeRef,
+    database,
+}: GetNodesColumnsParams): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Host,
+        header: NODES_COLUMNS_TITLES.Host,
+        render: ({row}) => {
+            return <NodeHostWrapper node={row} getNodeRef={getNodeRef} database={database} />;
+        },
+        width: 350,
+        align: DataTable.LEFT,
+    };
+}
+export function getNodeNameColumn<T extends {NodeName?: string}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.NodeName,
+        header: NODES_COLUMNS_TITLES.NodeName,
+        align: DataTable.LEFT,
+        render: ({row}) => row.NodeName || EMPTY_DATA_PLACEHOLDER,
+        width: 200,
+    };
+}
+export function getDataCenterColumn<T extends {DC?: string}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.DC,
+        header: NODES_COLUMNS_TITLES.DC,
+        align: DataTable.LEFT,
+        render: ({row}) => row.DC || EMPTY_DATA_PLACEHOLDER,
+        width: 60,
+    };
+}
+export function getRackColumn<T extends {Rack?: string}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Rack,
+        header: NODES_COLUMNS_TITLES.Rack,
+        align: DataTable.LEFT,
+        render: ({row}) => row.Rack || EMPTY_DATA_PLACEHOLDER,
+        width: 100,
+    };
+}
+export function getVersionColumn<T extends {Version?: string}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Version,
+        header: NODES_COLUMNS_TITLES.Version,
+        width: 200,
+        align: DataTable.LEFT,
+        render: ({row}) => {
+            return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
+        },
+    };
+}
+export function getUptimeColumn<T extends {StartTime?: string; Uptime?: string}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Uptime,
+        header: NODES_COLUMNS_TITLES.Uptime,
+        sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
+        render: ({row}) => row.Uptime,
+        align: DataTable.RIGHT,
+        width: 110,
+    };
+}
+export function getMemoryColumn<
+    T extends {MemoryUsed?: string; MemoryLimit?: string},
+>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Memory,
+        header: NODES_COLUMNS_TITLES.Memory,
+        sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
+        defaultOrder: DataTable.DESCENDING,
+        render: ({row}) => (
+            <ProgressViewer
+                value={row.MemoryUsed}
+                capacity={row.MemoryLimit}
+                formatValues={formatStorageValuesToGb}
+                colorizeProgress={true}
+            />
+        ),
+        align: DataTable.LEFT,
+        width: 140,
+        resizeMinWidth: 140,
+    };
+}
+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: 140,
+        resizeMinWidth: 140,
+    };
+}
+export function getCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.CPU,
+        header: NODES_COLUMNS_TITLES.CPU,
+        sortAccessor: ({PoolStats = []}) => Math.max(...PoolStats.map(({Usage}) => Number(Usage))),
+        defaultOrder: DataTable.DESCENDING,
+        render: ({row}) =>
+            row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : EMPTY_DATA_PLACEHOLDER,
+        align: DataTable.LEFT,
+        width: 80,
+        resizeMinWidth: 60,
+    };
+}
+export function getLoadAverageColumn<T extends {LoadAveragePercents?: number[]}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.LoadAverage,
+        header: NODES_COLUMNS_TITLES.LoadAverage,
+        sortAccessor: ({LoadAveragePercents = []}) => LoadAveragePercents[0],
+        defaultOrder: DataTable.DESCENDING,
+        render: ({row}) => (
+            <ProgressViewer
+                value={
+                    row.LoadAveragePercents && row.LoadAveragePercents.length > 0
+                        ? row.LoadAveragePercents[0]
+                        : undefined
+                }
+                percents={true}
+                colorizeProgress={true}
+                capacity={100}
+            />
+        ),
+        align: DataTable.LEFT,
+        width: 140,
+        resizeMinWidth: 140,
+    };
+}
+// The same as loadAverage, but more compact
+export function getLoadColumn<T extends {LoadAveragePercents?: number[]}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Load,
+        header: NODES_COLUMNS_TITLES.Load,
+        sortAccessor: ({LoadAveragePercents = []}) => LoadAveragePercents[0],
+        defaultOrder: DataTable.DESCENDING,
+        render: ({row}) =>
+            row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (
+                <UsageLabel
+                    value={row.LoadAveragePercents[0].toFixed()}
+                    theme={getLoadSeverityForNode(row.LoadAveragePercents[0])}
+                />
+            ) : (
+                EMPTY_DATA_PLACEHOLDER
+            ),
+        align: DataTable.LEFT,
+        width: 80,
+        resizeMinWidth: 70,
+    };
+}
+export function getSessionsColumn<T extends {TotalSessions?: number}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.TotalSessions,
+        header: NODES_COLUMNS_TITLES.TotalSessions,
+        render: ({row}) => row.TotalSessions ?? EMPTY_DATA_PLACEHOLDER,
+        align: DataTable.RIGHT,
+        width: 100,
+    };
+}
+export function getTabletsColumn<
+    T extends {
+        TenantName?: string;
+        NodeId: string | number;
+        Tablets?: TTabletStateInfo[];
+    },
+>({database}: GetNodesColumnsParams): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Tablets,
+        header: NODES_COLUMNS_TITLES.Tablets,
+        width: 500,
+        resizeMinWidth: 500,
+        render: ({row}) => {
+            return row.Tablets ? (
+                <TabletsStatistic
+                    tenantName={database ?? row.TenantName}
+                    nodeId={row.NodeId}
+                    tablets={row.Tablets}
+                />
+            ) : (
+                EMPTY_DATA_PLACEHOLDER
+            );
+        },
+        align: DataTable.LEFT,
+        sortable: false,
+    };
+}
+export function getMissingDisksColumn<T extends {Missing?: number}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.Missing,
+        header: NODES_COLUMNS_TITLES.Missing,
+        render: ({row}) => row.Missing,
+        align: DataTable.CENTER,
+        defaultOrder: DataTable.DESCENDING,
+    };
+}

src/components/nodesColumns/constants.ts

@@ -0,0 +1,75 @@
+import type {ValueOf} from '../../types/common';
+
+import i18n from './i18n';
+
+export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
+
+export const NODES_COLUMNS_IDS = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    NodeName: 'NodeName',
+    DC: 'DC',
+    Rack: 'Rack',
+    Version: 'Version',
+    Uptime: 'Uptime',
+    Memory: 'Memory',
+    CPU: 'CPU',
+    LoadAverage: 'LoadAverage',
+    Load: 'Load',
+    SharedCacheUsage: 'SharedCacheUsage',
+    TotalSessions: 'TotalSessions',
+    Missing: 'Missing',
+    Tablets: 'Tablets',
+} as const;
+
+export type NodesColumnId = ValueOf<typeof NODES_COLUMNS_IDS>;
+
+// This code is running when module is initialized and correct language may not be set yet
+// get functions guarantee that i18n fields will be inited on render with current render language
+export const NODES_COLUMNS_TITLES = {
+    get NodeId() {
+        return i18n('node-id');
+    },
+    get Host() {
+        return i18n('host');
+    },
+    get NodeName() {
+        return i18n('node-name');
+    },
+    get DC() {
+        return i18n('dc');
+    },
+    get Rack() {
+        return i18n('rack');
+    },
+    get Version() {
+        return i18n('version');
+    },
+    get Uptime() {
+        return i18n('uptime');
+    },
+    get Memory() {
+        return i18n('memory');
+    },
+    get CPU() {
+        return i18n('cpu');
+    },
+    get LoadAverage() {
+        return i18n('load-average');
+    },
+    get Load() {
+        return i18n('load');
+    },
+    get SharedCacheUsage() {
+        return i18n('caches');
+    },
+    get TotalSessions() {
+        return i18n('sessions');
+    },
+    get Missing() {
+        return i18n('missing');
+    },
+    get Tablets() {
+        return i18n('tablets');
+    },
+} as const satisfies Record<NodesColumnId, string>;

src/containers/Nodes/columns/i18n/en.json → src/components/nodesColumns/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "node-id": "Node Id",
+  "node-id": "Node ID",
   "host": "Host",
   "node-name": "Node Name",
   "dc": "DC",
@@ -11,7 +11,7 @@
   "tablets": "Tablets",
   "load-average": "Load Average",
   "load": "Load",
-  "process": "Process",
   "caches": "Caches",
-  "sessions": "Sessions"
+  "sessions": "Sessions",
+  "missing": "Missing"
 }

src/containers/Nodes/columns/i18n/index.ts → src/components/nodesColumns/i18n/index.ts

@@ -1,4 +1,4 @@
-import {registerKeysets} from '../../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
 

src/components/nodesColumns/types.ts

@@ -0,0 +1,11 @@
+import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
+
+import type {GetNodeRefFunc} from '../../types/additionalProps';
+import type {Column as PaginatedTableColumn} from '../PaginatedTable';
+
+export type Column<T> = PaginatedTableColumn<T> & DataTableColumn<T>;
+
+export interface GetNodesColumnsParams {
+    getNodeRef?: GetNodeRefFunc;
+    database?: string;
+}