From 4798b36b226e6190d20c94866f0b5c9b55e70d3f Mon Sep 17 00:00:00 2001 From: mufazalov Date: Wed, 27 Nov 2024 12:44:31 +0300 Subject: [PATCH] feat(Versions): use columns from Nodes table --- src/components/nodesColumns/columns.tsx | 1 + .../GroupedNodesTree/GroupedNodesTree.scss | 3 - .../GroupedNodesTree/GroupedNodesTree.tsx | 4 +- .../Versions/NodesTable/NodesTable.tsx | 132 ++++-------------- src/containers/Versions/groupNodes.ts | 8 +- src/containers/Versions/types.ts | 4 +- 6 files changed, 37 insertions(+), 115 deletions(-) diff --git a/src/components/nodesColumns/columns.tsx b/src/components/nodesColumns/columns.tsx index b3ba4b8f4..f39d55bb8 100644 --- a/src/components/nodesColumns/columns.tsx +++ b/src/components/nodesColumns/columns.tsx @@ -39,6 +39,7 @@ export function getNodeIdColumn(): Column< name: NODES_COLUMNS_IDS.NodeId, header: '#', width: 80, + resizeMinWidth: 80, render: ({row}) => row.NodeId, align: DataTable.RIGHT, }; diff --git a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss b/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss index 9af922b4e..a57839a44 100644 --- a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss +++ b/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 { diff --git a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx b/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx index 10a343287..5ad0d3b0c 100644 --- a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx +++ b/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; diff --git a/src/containers/Versions/NodesTable/NodesTable.tsx b/src/containers/Versions/NodesTable/NodesTable.tsx index d139a36a9..f614cb840 100644 --- a/src/containers/Versions/NodesTable/NodesTable.tsx +++ b/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[] = [ - { - 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 ( - - ); - }, - 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 ? : '—'), - 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 ? ( - - ) : ( - '—' - ), - align: DataTable.LEFT, - }, -]; +function getColumns(params: GetNodesColumnsParams): Column[] { + 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 ( 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) { diff --git a/src/containers/Versions/types.ts b/src/containers/Versions/types.ts index f76100542..019e1d4d7 100644 --- a/src/containers/Versions/types.ts +++ b/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[];