Skip to content

Commit a987c76

Browse files
artemmufazalovartemmufazalov
authored
refactor: split nodes columns file, use nodes api, update types (#1310)
1 parent 1d26b81 commit a987c76

File tree

26 files changed

+354
-214
lines changed

26 files changed

+354
-214
lines changed

‎src/containers/Nodes/Nodes.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ import {
3838
nodesUptimeFilterValuesSchema,
3939
} from '../../utils/nodes';
4040

41-
import {NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns} from './getNodesColumns';
41+
import {getNodesColumns} from './columns/columns';
42+
import {NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
4243
import i18n from './i18n';
4344

4445
import './Nodes.scss';

‎src/containers/Nodes/PaginatedNodes.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ import {
3232
nodesUptimeFilterValuesSchema,
3333
} from '../../utils/nodes';
3434

35+
import {getNodesColumns} from './columns/columns';
36+
import {NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
3537
import {getNodes} from './getNodes';
36-
import {NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns} from './getNodesColumns';
3738
import i18n from './i18n';
3839

3940
import './Nodes.scss';

‎src/containers/Nodes/getNodesColumns.tsx ‎src/containers/Nodes/columns/columns.tsx

+26-48
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,20 @@
11
import DataTable from '@gravity-ui/react-data-table';
22
import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
33

4-
import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
5-
import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
6-
import type {Column as PaginatedTableColumn} from '../../components/PaginatedTable';
7-
import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
8-
import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
9-
import {TabletsStatistic} from '../../components/TabletsStatistic';
10-
import {UsageLabel} from '../../components/UsageLabel/UsageLabel';
11-
import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
12-
import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
13-
import type {GetNodeRefFunc} from '../../types/additionalProps';
14-
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
15-
import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
4+
import {CellWithPopover} from '../../../components/CellWithPopover/CellWithPopover';
5+
import {NodeHostWrapper} from '../../../components/NodeHostWrapper/NodeHostWrapper';
6+
import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph';
7+
import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
8+
import {TabletsStatistic} from '../../../components/TabletsStatistic';
9+
import {UsageLabel} from '../../../components/UsageLabel/UsageLabel';
10+
import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
11+
import {getLoadSeverityForNode} from '../../../store/reducers/nodes/utils';
12+
import type {GetNodeRefFunc} from '../../../types/additionalProps';
13+
import {EMPTY_DATA_PLACEHOLDER} from '../../../utils/constants';
14+
import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
1615

17-
export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
18-
19-
const NODES_COLUMNS_IDS = {
20-
NodeId: 'NodeId',
21-
Host: 'Host',
22-
DC: 'DC',
23-
Rack: 'Rack',
24-
Version: 'Version',
25-
Uptime: 'Uptime',
26-
Memory: 'Memory',
27-
CPU: 'CPU',
28-
LoadAverage: 'LoadAverage',
29-
Tablets: 'Tablets',
30-
TopNodesLoadAverage: 'TopNodesLoadAverage',
31-
TopNodesMemory: 'TopNodesMemory',
32-
SharedCacheUsage: 'SharedCacheUsage',
33-
MemoryUsedInAlloc: 'MemoryUsedInAlloc',
34-
TotalSessions: 'TotalSessions',
35-
};
36-
37-
interface GetNodesColumnsProps {
38-
database?: string;
39-
getNodeRef?: GetNodeRefFunc;
40-
}
41-
42-
type NodesColumn = PaginatedTableColumn<NodesPreparedEntity> & DataTableColumn<NodesPreparedEntity>;
16+
import {NODES_COLUMNS_IDS, NODES_COLUMNS_TITLES} from './constants';
17+
import type {GetNodesColumnsProps, NodesColumn} from './types';
4318

4419
const nodeIdColumn: NodesColumn = {
4520
name: NODES_COLUMNS_IDS.NodeId,
@@ -52,6 +27,7 @@ const nodeIdColumn: NodesColumn = {
5227

5328
const getHostColumn = (getNodeRef?: GetNodeRefFunc, database?: string): NodesColumn => ({
5429
name: NODES_COLUMNS_IDS.Host,
30+
header: NODES_COLUMNS_TITLES.Host,
5531
render: ({row}) => {
5632
return <NodeHostWrapper node={row} getNodeRef={getNodeRef} database={database} />;
5733
},
@@ -68,22 +44,23 @@ const getHostColumnWithUndefinedWidth = (
6844

6945
const dataCenterColumn: NodesColumn = {
7046
name: NODES_COLUMNS_IDS.DC,
71-
header: 'DC',
47+
header: NODES_COLUMNS_TITLES.DC,
7248
align: DataTable.LEFT,
7349
render: ({row}) => row.DC || EMPTY_DATA_PLACEHOLDER,
7450
width: 60,
7551
};
7652

7753
const rackColumn: NodesColumn = {
7854
name: NODES_COLUMNS_IDS.Rack,
79-
header: 'Rack',
55+
header: NODES_COLUMNS_TITLES.Rack,
8056
align: DataTable.LEFT,
8157
render: ({row}) => (row.Rack ? row.Rack : '—'),
8258
width: 80,
8359
};
8460

8561
const versionColumn: NodesColumn = {
8662
name: NODES_COLUMNS_IDS.Version,
63+
header: NODES_COLUMNS_TITLES.Version,
8764
width: 200,
8865
align: DataTable.LEFT,
8966
render: ({row}) => {
@@ -94,7 +71,7 @@ const versionColumn: NodesColumn = {
9471

9572
const uptimeColumn: NodesColumn = {
9673
name: NODES_COLUMNS_IDS.Uptime,
97-
header: 'Uptime',
74+
header: NODES_COLUMNS_TITLES.Uptime,
9875
sortAccessor: ({StartTime}) => StartTime && -StartTime,
9976
render: ({row}) => row.Uptime,
10077
align: DataTable.RIGHT,
@@ -104,7 +81,7 @@ const uptimeColumn: NodesColumn = {
10481

10582
const memoryColumn: NodesColumn = {
10683
name: NODES_COLUMNS_IDS.Memory,
107-
header: 'Memory',
84+
header: NODES_COLUMNS_TITLES.Memory,
10885
sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
10986
defaultOrder: DataTable.DESCENDING,
11087
render: ({row}) => (
@@ -121,7 +98,7 @@ const memoryColumn: NodesColumn = {
12198

12299
const cpuColumn: NodesColumn = {
123100
name: NODES_COLUMNS_IDS.CPU,
124-
header: 'CPU',
101+
header: NODES_COLUMNS_TITLES.CPU,
125102
sortAccessor: ({PoolStats = []}) => Math.max(...PoolStats.map(({Usage}) => Number(Usage))),
126103
defaultOrder: DataTable.DESCENDING,
127104
render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
@@ -133,7 +110,7 @@ const cpuColumn: NodesColumn = {
133110

134111
const loadAverageColumn: NodesColumn = {
135112
name: NODES_COLUMNS_IDS.LoadAverage,
136-
header: 'Load average',
113+
header: NODES_COLUMNS_TITLES.LoadAverage,
137114
sortAccessor: ({LoadAveragePercents = []}) => LoadAveragePercents[0],
138115
defaultOrder: DataTable.DESCENDING,
139116
render: ({row}) => (
@@ -156,6 +133,7 @@ const loadAverageColumn: NodesColumn = {
156133

157134
const getTabletsColumn = (tabletsPath?: string): NodesColumn => ({
158135
name: NODES_COLUMNS_IDS.Tablets,
136+
header: NODES_COLUMNS_TITLES.Tablets,
159137
width: 500,
160138
resizeMinWidth: 500,
161139
render: ({row}) => {
@@ -175,7 +153,7 @@ const getTabletsColumn = (tabletsPath?: string): NodesColumn => ({
175153

176154
const topNodesLoadAverageColumn: NodesColumn = {
177155
name: NODES_COLUMNS_IDS.TopNodesLoadAverage,
178-
header: 'Load',
156+
header: NODES_COLUMNS_TITLES.TopNodesLoadAverage,
179157
render: ({row}) =>
180158
row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (
181159
<UsageLabel
@@ -193,7 +171,7 @@ const topNodesLoadAverageColumn: NodesColumn = {
193171

194172
const topNodesMemoryColumn: NodesColumn = {
195173
name: NODES_COLUMNS_IDS.TopNodesMemory,
196-
header: 'Process',
174+
header: NODES_COLUMNS_TITLES.TopNodesMemory,
197175
render: ({row}) => (
198176
<ProgressViewer
199177
value={row.MemoryUsed}
@@ -210,7 +188,7 @@ const topNodesMemoryColumn: NodesColumn = {
210188

211189
const sharedCacheUsageColumn: NodesColumn = {
212190
name: NODES_COLUMNS_IDS.SharedCacheUsage,
213-
header: 'Caches',
191+
header: NODES_COLUMNS_TITLES.SharedCacheUsage,
214192
render: ({row}) => (
215193
<ProgressViewer
216194
value={row.SharedCacheUsed}
@@ -227,7 +205,7 @@ const sharedCacheUsageColumn: NodesColumn = {
227205

228206
const sessionsColumn: NodesColumn = {
229207
name: NODES_COLUMNS_IDS.TotalSessions,
230-
header: 'Sessions',
208+
header: NODES_COLUMNS_TITLES.TotalSessions,
231209
render: ({row}) => row.TotalSessions ?? '—',
232210
align: DataTable.RIGHT,
233211
width: 100,

‎src/containers/Nodes/columns/constants.ts

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import type {ValueOf} from '../../../types/common';
2+
3+
import i18n from './i18n';
4+
5+
export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
6+
7+
export const NODES_COLUMNS_IDS = {
8+
NodeId: 'NodeId',
9+
Host: 'Host',
10+
DC: 'DC',
11+
Rack: 'Rack',
12+
Version: 'Version',
13+
Uptime: 'Uptime',
14+
Memory: 'Memory',
15+
CPU: 'CPU',
16+
LoadAverage: 'LoadAverage',
17+
Tablets: 'Tablets',
18+
TopNodesLoadAverage: 'TopNodesLoadAverage',
19+
TopNodesMemory: 'TopNodesMemory',
20+
SharedCacheUsage: 'SharedCacheUsage',
21+
TotalSessions: 'TotalSessions',
22+
} as const;
23+
24+
type NodesColumnId = ValueOf<typeof NODES_COLUMNS_IDS>;
25+
26+
// This code is running when module is initialized and correct language may not be set yet
27+
// get functions guarantee that i18n fields will be inited on render with current render language
28+
export const NODES_COLUMNS_TITLES = {
29+
get NodeId() {
30+
return i18n('node-id');
31+
},
32+
get Host() {
33+
return i18n('host');
34+
},
35+
get DC() {
36+
return i18n('dc');
37+
},
38+
get Rack() {
39+
return i18n('rack');
40+
},
41+
get Version() {
42+
return i18n('version');
43+
},
44+
get Uptime() {
45+
return i18n('uptime');
46+
},
47+
get Memory() {
48+
return i18n('memory');
49+
},
50+
get CPU() {
51+
return i18n('cpu');
52+
},
53+
get LoadAverage() {
54+
return i18n('load-average');
55+
},
56+
get Tablets() {
57+
return i18n('tablets');
58+
},
59+
get TopNodesLoadAverage() {
60+
return i18n('load');
61+
},
62+
get TopNodesMemory() {
63+
return i18n('process');
64+
},
65+
get SharedCacheUsage() {
66+
return i18n('caches');
67+
},
68+
get TotalSessions() {
69+
return i18n('sessions');
70+
},
71+
} as const satisfies Record<NodesColumnId, string>;

‎src/containers/Nodes/columns/i18n/en.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"node-id": "Node Id",
3+
"host": "Host",
4+
"dc": "DC",
5+
"rack": "Rack",
6+
"version": "Version",
7+
"uptime": "Uptime",
8+
"memory": "Memory",
9+
"cpu": "CPU",
10+
"tablets": "Tablets",
11+
"load-average": "Load Average",
12+
"load": "Load",
13+
"process": "Process",
14+
"caches": "Caches",
15+
"sessions": "Sessions"
16+
}

‎src/containers/Nodes/columns/i18n/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {registerKeysets} from '../../../../utils/i18n';
2+
3+
import en from './en.json';
4+
5+
const COMPONENT = 'ydb-nodes-columns';
6+
7+
export default registerKeysets(COMPONENT, {en});

‎src/containers/Nodes/columns/types.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
2+
3+
import type {Column as PaginatedTableColumn} from '../../../components/PaginatedTable';
4+
import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
5+
import type {GetNodeRefFunc} from '../../../types/additionalProps';
6+
7+
export interface GetNodesColumnsProps {
8+
database?: string;
9+
getNodeRef?: GetNodeRefFunc;
10+
}
11+
12+
export type NodesColumn = PaginatedTableColumn<NodesPreparedEntity> &
13+
DataTableColumn<NodesPreparedEntity>;

‎src/containers/Nodes/getNodes.ts

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import type {FetchData} from '../../components/PaginatedTable';
2-
import type {
3-
NodesApiRequestParams,
4-
NodesFilters,
5-
NodesPreparedEntity,
6-
} from '../../store/reducers/nodes/types';
2+
import type {NodesFilters, NodesPreparedEntity} from '../../store/reducers/nodes/types';
73
import {prepareNodesData} from '../../store/reducers/nodes/utils';
8-
import {getProblemParamValue, getUptimeParamValue} from '../../utils/nodes';
9-
import type {NodesSortValue} from '../../utils/nodes';
4+
import type {NodesRequestParams} from '../../types/api/nodes';
5+
import {prepareSortValue} from '../../utils/filters';
6+
import {
7+
getProblemParamValue,
8+
getUptimeParamValue,
9+
isSortableNodesProperty,
10+
} from '../../utils/nodes';
1011

1112
const getConcurrentId = (limit?: number, offset?: number) => {
1213
return `getNodes|offset${offset}|limit${limit}`;
@@ -15,7 +16,7 @@ const getConcurrentId = (limit?: number, offset?: number) => {
1516
export const getNodes: FetchData<
1617
NodesPreparedEntity,
1718
NodesFilters,
18-
Pick<NodesApiRequestParams, 'type' | 'storage' | 'tablets'>
19+
Pick<NodesRequestParams, 'type' | 'storage' | 'tablets'>
1920
> = async (params) => {
2021
const {
2122
type = 'any',
@@ -30,15 +31,18 @@ export const getNodes: FetchData<
3031
const {sortOrder, columnId} = sortParams ?? {};
3132
const {path, database, searchValue, problemFilter, uptimeFilter} = filters ?? {};
3233

34+
const sort = isSortableNodesProperty(columnId)
35+
? prepareSortValue(columnId, sortOrder)
36+
: undefined;
37+
3338
const response = await window.api.getNodes(
3439
{
3540
type,
3641
storage,
3742
tablets,
3843
limit,
3944
offset,
40-
sortOrder,
41-
sortValue: columnId as NodesSortValue,
45+
sort,
4246
path,
4347
database,
4448
filter: searchValue,

‎src/containers/Storage/Storage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export const Storage = ({additionalNodesProps, database, nodeId}: StorageProps)
9191
const groupsSortParams = groupSort.sortOrder ? groupSort : getDefaultSortGroup(visibleEntities);
9292

9393
const nodesQuery = storageApi.useGetStorageNodesInfoQuery(
94-
{database, visibleEntities, node_id: nodeId},
94+
{database, with: visibleEntities, node_id: nodeId},
9595
{
9696
skip: storageType !== STORAGE_TYPES.nodes,
9797
pollingInterval: autoRefreshInterval,

‎src/containers/Storage/StorageGroups/getGroups.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import type {
66
PreparedStorageGroup,
77
PreparedStorageGroupFilters,
88
} from '../../../store/reducers/storage/types';
9-
import type {StorageV2Sort} from '../../../types/api/storage';
109
import {prepareSortValue} from '../../../utils/filters';
10+
import {isSortableStorageProperty} from '../../../utils/storage';
1111

1212
const getConcurrentId = (limit?: number, offset?: number) => {
1313
return `getStorageGroups|offset${offset}|limit${limit}`;
@@ -22,7 +22,9 @@ export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
2222
const {sortOrder, columnId} = sortParams ?? {};
2323
const {searchValue, visibleEntities, database, nodeId} = filters ?? {};
2424

25-
const sort = prepareSortValue(columnId, sortOrder) as StorageV2Sort;
25+
const sort = isSortableStorageProperty(columnId)
26+
? prepareSortValue(columnId, sortOrder)
27+
: undefined;
2628

2729
const {groups, found, total} = await requestStorageData(
2830
{

0 commit comments

Comments
 (0)