Skip to content

Commit 4798b36

Browse files
artemmufazalovartemmufazalov
committed
feat(Versions): use columns from Nodes table
1 parent efb0b9c commit 4798b36

File tree

6 files changed

+37
-115
lines changed

6 files changed

+37
-115
lines changed

‎src/components/nodesColumns/columns.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export function getNodeIdColumn<T extends {NodeId?: string | number}>(): Column<
3939
name: NODES_COLUMNS_IDS.NodeId,
4040
header: '#',
4141
width: 80,
42+
resizeMinWidth: 80,
4243
render: ({row}) => row.NodeId,
4344
align: DataTable.RIGHT,
4445
};

‎src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@
2020

2121
margin-right: $margin-size;
2222
margin-left: $margin-size;
23-
24-
@include freeze-nth-column(1);
25-
@include freeze-nth-column(2, 80px);
2623
}
2724

2825
.ydb-tree-view {

‎src/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React from 'react';
22

33
import {TreeView} from 'ydb-ui-components';
44

5+
import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
56
import type {VersionValue} from '../../../types/versions';
67
import {cn} from '../../../utils/cn';
7-
import type {PreparedNodeSystemState} from '../../../utils/nodes';
88
import {NodesTable} from '../NodesTable/NodesTable';
99
import {NodesTreeTitle} from '../NodesTreeTitle/NodesTreeTitle';
1010
import type {GroupedNodesItem} from '../types';
@@ -15,7 +15,7 @@ export const b = cn('ydb-versions-grouped-node-tree');
1515

1616
interface GroupedNodesTreeProps {
1717
title?: string;
18-
nodes?: PreparedNodeSystemState[];
18+
nodes?: NodesPreparedEntity[];
1919
items?: GroupedNodesItem[];
2020
expanded?: boolean;
2121
versionColor?: string;

‎src/containers/Versions/NodesTable/NodesTable.tsx‎

Lines changed: 28 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,43 @@
11
import type {Column} from '@gravity-ui/react-data-table';
2-
import DataTable from '@gravity-ui/react-data-table';
32

4-
import {EntityStatus} from '../../../components/EntityStatus/EntityStatus';
5-
import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph';
6-
import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
73
import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
4+
import {
5+
getCpuColumn,
6+
getHostColumn,
7+
getLoadAverageColumn,
8+
getNodeIdColumn,
9+
getRAMColumn,
10+
getUptimeColumn,
11+
} from '../../../components/nodesColumns/columns';
12+
import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
13+
import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
14+
import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
815
import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
9-
import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
10-
import type {PreparedNodeSystemState} from '../../../utils/nodes';
11-
import {isUnavailableNode} from '../../../utils/nodes';
12-
import {getDefaultNodePath} from '../../Node/NodePages';
16+
import {useAdditionalNodeProps} from '../../AppWithClusters/useClusterData';
1317

1418
const VERSIONS_COLUMNS_WIDTH_LS_KEY = 'versionsTableColumnsWidth';
1519

16-
const columns: Column<PreparedNodeSystemState>[] = [
17-
{
18-
name: 'NodeId',
19-
header: '#',
20-
width: 80,
21-
resizeMinWidth: 80,
22-
align: DataTable.LEFT,
23-
render: ({row}) => row.NodeId,
24-
},
25-
{
26-
name: 'Host',
27-
render: ({row}) => {
28-
const port =
29-
row.Endpoints && row.Endpoints.find((item) => item.Name === 'http-mon')?.Address;
30-
const host = row.Host && `${row.Host}${port || ''}`;
31-
const title = host || 'unknown';
32-
33-
const nodePath =
34-
!isUnavailableNode(row) && row.NodeId ? getDefaultNodePath(row.NodeId) : undefined;
35-
36-
return (
37-
<EntityStatus name={title} path={nodePath} hasClipboardButton showStatus={false} />
38-
);
39-
},
40-
width: 400,
41-
align: DataTable.LEFT,
42-
},
43-
{
44-
name: 'Endpoints',
45-
sortable: false,
46-
render: ({row}) =>
47-
row.Endpoints
48-
? row.Endpoints.map(({Name, Address}) => `${Name} ${Address}`).join(', ')
49-
: '-',
50-
width: 300,
51-
align: DataTable.LEFT,
52-
},
53-
{
54-
name: 'Uptime',
55-
header: 'Uptime',
56-
sortAccessor: ({StartTime}) => StartTime && -StartTime,
57-
width: 120,
58-
align: DataTable.LEFT,
59-
render: ({row}) => row.Uptime,
60-
},
61-
{
62-
name: 'MemoryUsed',
63-
header: 'Memory used',
64-
sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
65-
defaultOrder: DataTable.DESCENDING,
66-
render: ({row}) => (row.MemoryUsed ? formatBytes(row.MemoryUsed) : '—'),
67-
width: 120,
68-
align: DataTable.RIGHT,
69-
},
70-
{
71-
name: 'MemoryLimit',
72-
header: 'Memory limit',
73-
sortAccessor: ({MemoryLimit = 0}) => Number(MemoryLimit),
74-
defaultOrder: DataTable.DESCENDING,
75-
render: ({row}) => (row.MemoryLimit ? formatBytes(row.MemoryLimit) : '—'),
76-
width: 120,
77-
align: DataTable.RIGHT,
78-
},
79-
{
80-
name: 'PoolStats',
81-
header: 'Pools',
82-
sortAccessor: ({PoolStats = []}) =>
83-
PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
84-
defaultOrder: DataTable.DESCENDING,
85-
width: 80,
86-
resizeMinWidth: 60,
87-
render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
88-
align: DataTable.LEFT,
89-
},
90-
{
91-
name: 'LoadAverage',
92-
header: 'Load average',
93-
sortAccessor: ({LoadAveragePercents = []}) => LoadAveragePercents[0],
94-
defaultOrder: DataTable.DESCENDING,
95-
width: 170,
96-
resizeMinWidth: 170,
97-
render: ({row}) =>
98-
row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (
99-
<ProgressViewer
100-
value={row.LoadAveragePercents[0]}
101-
percents={true}
102-
capacity={100}
103-
colorizeProgress={true}
104-
/>
105-
) : (
106-
'—'
107-
),
108-
align: DataTable.LEFT,
109-
},
110-
];
20+
function getColumns(params: GetNodesColumnsParams): Column<NodesPreparedEntity>[] {
21+
return [
22+
getNodeIdColumn(),
23+
getHostColumn(params),
24+
getUptimeColumn(),
25+
getRAMColumn(),
26+
getCpuColumn(),
27+
getLoadAverageColumn(),
28+
];
29+
}
11130

11231
interface NodesTableProps {
113-
nodes: PreparedNodeSystemState[];
32+
nodes: NodesPreparedEntity[];
11433
}
11534

11635
export const NodesTable = ({nodes}: NodesTableProps) => {
36+
const {balancer} = useClusterBaseInfo();
37+
const {additionalNodesProps} = useAdditionalNodeProps({balancer});
38+
39+
const columns = getColumns({getNodeRef: additionalNodesProps.getNodeRef});
40+
11741
return (
11842
<ResizeableDataTable
11943
columnsWidthLSKey={VERSIONS_COLUMNS_WIDTH_LS_KEY}

‎src/containers/Versions/groupNodes.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import groupBy from 'lodash/groupBy';
22

3+
import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
34
import type {VersionToColorMap} from '../../types/versions';
4-
import type {PreparedNodeSystemState} from '../../utils/nodes';
55
import {getMinorVersion, parseNodesToVersionsValues} from '../../utils/versions';
66

77
import type {GroupedNodesItem} from './types';
@@ -11,7 +11,7 @@ const sortByTitle = (a: GroupedNodesItem, b: GroupedNodesItem) =>
1111
a.title?.localeCompare(b.title || '') || -1;
1212

1313
export const getGroupedTenantNodes = (
14-
nodes: PreparedNodeSystemState[] | undefined,
14+
nodes: NodesPreparedEntity[] | undefined,
1515
versionToColor: VersionToColorMap | undefined,
1616
groupByValue: GroupByValue,
1717
): GroupedNodesItem[] | undefined => {
@@ -85,7 +85,7 @@ export const getGroupedTenantNodes = (
8585
};
8686

8787
export const getGroupedStorageNodes = (
88-
nodes: PreparedNodeSystemState[] | undefined,
88+
nodes: NodesPreparedEntity[] | undefined,
8989
versionToColor: VersionToColorMap | undefined,
9090
): GroupedNodesItem[] | undefined => {
9191
if (!nodes || !nodes.length) {
@@ -105,7 +105,7 @@ export const getGroupedStorageNodes = (
105105
};
106106

107107
export const getOtherNodes = (
108-
nodes: PreparedNodeSystemState[] | undefined,
108+
nodes: NodesPreparedEntity[] | undefined,
109109
versionToColor: VersionToColorMap | undefined,
110110
): GroupedNodesItem[] | undefined => {
111111
if (!nodes || !nodes.length) {

‎src/containers/Versions/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
12
import type {VersionValue} from '../../types/versions';
2-
import type {PreparedNodeSystemState} from '../../utils/nodes';
33

44
export interface GroupedNodesItem {
55
title?: string;
6-
nodes?: PreparedNodeSystemState[];
6+
nodes?: NodesPreparedEntity[];
77
items?: GroupedNodesItem[];
88
versionColor?: string;
99
versionsValues?: VersionValue[];

0 commit comments

Comments
 (0)