feat(Versions): use columns from Nodes table (#1713)

Author: artemmufazalov

src/components/nodesColumns/columns.tsx

@@ -39,6 +39,7 @@ export function getNodeIdColumn<T extends {NodeId?: string | number}>(): Column<
         name: NODES_COLUMNS_IDS.NodeId,
         header: '#',
         width: 80,
+        resizeMinWidth: 80,
         render: ({row}) => row.NodeId,
         align: DataTable.RIGHT,
     };

src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -20,9 +20,6 @@
 
         margin-right: $margin-size;
         margin-left: $margin-size;
-
-        @include freeze-nth-column(1);
-        @include freeze-nth-column(2, 80px);
     }
 
     .ydb-tree-view {

src/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import {TreeView} from 'ydb-ui-components';
 
+import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
 import type {VersionValue} from '../../../types/versions';
 import {cn} from '../../../utils/cn';
-import type {PreparedNodeSystemState} from '../../../utils/nodes';
 import {NodesTable} from '../NodesTable/NodesTable';
 import {NodesTreeTitle} from '../NodesTreeTitle/NodesTreeTitle';
 import type {GroupedNodesItem} from '../types';
@@ -15,7 +15,7 @@ export const b = cn('ydb-versions-grouped-node-tree');
 
 interface GroupedNodesTreeProps {
     title?: string;
-    nodes?: PreparedNodeSystemState[];
+    nodes?: NodesPreparedEntity[];
     items?: GroupedNodesItem[];
     expanded?: boolean;
     versionColor?: string;

src/containers/Versions/NodesTable/NodesTable.tsx

@@ -1,119 +1,43 @@
 import type {Column} from '@gravity-ui/react-data-table';
-import DataTable from '@gravity-ui/react-data-table';
 
-import {EntityStatus} from '../../../components/EntityStatus/EntityStatus';
-import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph';
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
+import {
+    getCpuColumn,
+    getHostColumn,
+    getLoadAverageColumn,
+    getNodeIdColumn,
+    getRAMColumn,
+    getUptimeColumn,
+} from '../../../components/nodesColumns/columns';
+import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
+import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
+import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
-import type {PreparedNodeSystemState} from '../../../utils/nodes';
-import {isUnavailableNode} from '../../../utils/nodes';
-import {getDefaultNodePath} from '../../Node/NodePages';
+import {useAdditionalNodeProps} from '../../AppWithClusters/useClusterData';
 
 const VERSIONS_COLUMNS_WIDTH_LS_KEY = 'versionsTableColumnsWidth';
 
-const columns: Column<PreparedNodeSystemState>[] = [
-    {
-        name: 'NodeId',
-        header: '#',
-        width: 80,
-        resizeMinWidth: 80,
-        align: DataTable.LEFT,
-        render: ({row}) => row.NodeId,
-    },
-    {
-        name: 'Host',
-        render: ({row}) => {
-            const port =
-                row.Endpoints && row.Endpoints.find((item) => item.Name === 'http-mon')?.Address;
-            const host = row.Host && `${row.Host}${port || ''}`;
-            const title = host || 'unknown';
-
-            const nodePath =
-                !isUnavailableNode(row) && row.NodeId ? getDefaultNodePath(row.NodeId) : undefined;
-
-            return (
-                <EntityStatus name={title} path={nodePath} hasClipboardButton showStatus={false} />
-            );
-        },
-        width: 400,
-        align: DataTable.LEFT,
-    },
-    {
-        name: 'Endpoints',
-        sortable: false,
-        render: ({row}) =>
-            row.Endpoints
-                ? row.Endpoints.map(({Name, Address}) => `${Name} ${Address}`).join(', ')
-                : '-',
-        width: 300,
-        align: DataTable.LEFT,
-    },
-    {
-        name: 'Uptime',
-        header: 'Uptime',
-        sortAccessor: ({StartTime}) => StartTime && -StartTime,
-        width: 120,
-        align: DataTable.LEFT,
-        render: ({row}) => row.Uptime,
-    },
-    {
-        name: 'MemoryUsed',
-        header: 'Memory used',
-        sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
-        defaultOrder: DataTable.DESCENDING,
-        render: ({row}) => (row.MemoryUsed ? formatBytes(row.MemoryUsed) : '—'),
-        width: 120,
-        align: DataTable.RIGHT,
-    },
-    {
-        name: 'MemoryLimit',
-        header: 'Memory limit',
-        sortAccessor: ({MemoryLimit = 0}) => Number(MemoryLimit),
-        defaultOrder: DataTable.DESCENDING,
-        render: ({row}) => (row.MemoryLimit ? formatBytes(row.MemoryLimit) : '—'),
-        width: 120,
-        align: DataTable.RIGHT,
-    },
-    {
-        name: 'PoolStats',
-        header: 'Pools',
-        sortAccessor: ({PoolStats = []}) =>
-            PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
-        defaultOrder: DataTable.DESCENDING,
-        width: 80,
-        resizeMinWidth: 60,
-        render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
-        align: DataTable.LEFT,
-    },
-    {
-        name: 'LoadAverage',
-        header: 'Load average',
-        sortAccessor: ({LoadAveragePercents = []}) => LoadAveragePercents[0],
-        defaultOrder: DataTable.DESCENDING,
-        width: 170,
-        resizeMinWidth: 170,
-        render: ({row}) =>
-            row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (
-                <ProgressViewer
-                    value={row.LoadAveragePercents[0]}
-                    percents={true}
-                    capacity={100}
-                    colorizeProgress={true}
-                />
-            ) : (
-                '—'
-            ),
-        align: DataTable.LEFT,
-    },
-];
+function getColumns(params: GetNodesColumnsParams): Column<NodesPreparedEntity>[] {
+    return [
+        getNodeIdColumn(),
+        getHostColumn(params),
+        getUptimeColumn(),
+        getRAMColumn(),
+        getCpuColumn(),
+        getLoadAverageColumn(),
+    ];
+}
 
 interface NodesTableProps {
-    nodes: PreparedNodeSystemState[];
+    nodes: NodesPreparedEntity[];
 }
 
 export const NodesTable = ({nodes}: NodesTableProps) => {
+    const {balancer} = useClusterBaseInfo();
+    const {additionalNodesProps} = useAdditionalNodeProps({balancer});
+
+    const columns = getColumns({getNodeRef: additionalNodesProps.getNodeRef});
+
     return (
         <ResizeableDataTable
             columnsWidthLSKey={VERSIONS_COLUMNS_WIDTH_LS_KEY}

src/containers/Versions/groupNodes.ts

@@ -1,7 +1,7 @@
 import groupBy from 'lodash/groupBy';
 
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {VersionToColorMap} from '../../types/versions';
-import type {PreparedNodeSystemState} from '../../utils/nodes';
 import {getMinorVersion, parseNodesToVersionsValues} from '../../utils/versions';
 
 import type {GroupedNodesItem} from './types';
@@ -11,7 +11,7 @@ const sortByTitle = (a: GroupedNodesItem, b: GroupedNodesItem) =>
     a.title?.localeCompare(b.title || '') || -1;
 
 export const getGroupedTenantNodes = (
-    nodes: PreparedNodeSystemState[] | undefined,
+    nodes: NodesPreparedEntity[] | undefined,
     versionToColor: VersionToColorMap | undefined,
     groupByValue: GroupByValue,
 ): GroupedNodesItem[] | undefined => {
@@ -85,7 +85,7 @@ export const getGroupedTenantNodes = (
 };
 
 export const getGroupedStorageNodes = (
-    nodes: PreparedNodeSystemState[] | undefined,
+    nodes: NodesPreparedEntity[] | undefined,
     versionToColor: VersionToColorMap | undefined,
 ): GroupedNodesItem[] | undefined => {
     if (!nodes || !nodes.length) {
@@ -105,7 +105,7 @@ export const getGroupedStorageNodes = (
 };
 
 export const getOtherNodes = (
-    nodes: PreparedNodeSystemState[] | undefined,
+    nodes: NodesPreparedEntity[] | undefined,
     versionToColor: VersionToColorMap | undefined,
 ): GroupedNodesItem[] | undefined => {
     if (!nodes || !nodes.length) {

src/containers/Versions/types.ts

@@ -1,9 +1,9 @@
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {VersionValue} from '../../types/versions';
-import type {PreparedNodeSystemState} from '../../utils/nodes';
 
 export interface GroupedNodesItem {
     title?: string;
-    nodes?: PreparedNodeSystemState[];
+    nodes?: NodesPreparedEntity[];
     items?: GroupedNodesItem[];
     versionColor?: string;
     versionsValues?: VersionValue[];