Skip to content

Commit aeaaf3c

Browse files
DaryaVorontsovaDaryaVorontsova
authored
fix: format bytes columns and avoid refetch on column toggle (#3149)
1 parent d1a6ade commit aeaaf3c

File tree

23 files changed

+75
-38
lines changed

23 files changed

+75
-38
lines changed

‎src/components/PaginatedTable/PaginatedTable.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import {usePaginatedTableState} from './PaginatedTableContext';
44
import {TableChunksRenderer} from './TableChunksRenderer';
55
import {TableHead} from './TableHead';
6+
import type {PaginatedTableId} from './constants';
67
import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
78
import {b} from './shared';
89
import type {
@@ -22,7 +23,7 @@ export interface PaginatedTableProps<T, F> {
2223
initialEntitiesCount?: number;
2324
fetchData: FetchData<T, F>;
2425
filters?: F;
25-
tableName: string;
26+
tableName: PaginatedTableId;
2627
columns: Column<T>[];
2728
getRowClassName?: GetRowClassName<T>;
2829
rowHeight?: number;

‎src/components/PaginatedTable/TableChunk.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {ResponseError} from '../Errors/ResponseError';
88

99
import {usePaginatedTableState} from './PaginatedTableContext';
1010
import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
11+
import type {PaginatedTableId} from './constants';
12+
import {shouldSendColumnIds} from './constants';
1113
import i18n from './i18n';
1214
import type {
1315
Column,
@@ -32,7 +34,7 @@ interface TableChunkProps<T, F> {
3234
sortParams?: SortParams;
3335
shouldFetch: boolean;
3436
shouldRender: boolean;
35-
tableName: string;
37+
tableName: PaginatedTableId;
3638

3739
fetchData: FetchData<T, F>;
3840
getRowClassName?: GetRowClassName<T>;
@@ -66,8 +68,14 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
6668
const [autoRefreshInterval] = useAutoRefreshInterval();
6769
const {noBatching} = usePaginatedTableState();
6870

69-
//sort ids to prevent refetch if only order was changed
70-
const columnsIds = columns.map((column) => column.name).toSorted();
71+
const hasColumnsIdsInRequest = shouldSendColumnIds(tableName);
72+
73+
const columnsIds = React.useMemo(
74+
() =>
75+
// sort ids to prevent refetch if only order was changed
76+
hasColumnsIdsInRequest ? columns.map((column) => column.name).toSorted() : [],
77+
[columns, hasColumnsIdsInRequest],
78+
);
7179

7280
const queryParams = {
7381
offset: id * chunkSize,

‎src/components/PaginatedTable/TableChunksRenderer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
import {TableChunk} from './TableChunk';
4+
import type {PaginatedTableId} from './constants';
45
import {b} from './shared';
56
import type {
67
Column,
@@ -22,7 +23,7 @@ export interface TableChunksRendererProps<T, F> {
2223
columns: Column<T>[];
2324
fetchData: FetchData<T, F>;
2425
filters?: F;
25-
tableName: string;
26+
tableName: PaginatedTableId;
2627
sortParams?: SortParams;
2728
getRowClassName?: GetRowClassName<T>;
2829
renderErrorMessage?: RenderErrorMessage;

‎src/components/PaginatedTable/constants.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,25 @@ export const DEFAULT_REQUEST_TIMEOUT = 200;
1616
export const DEFAULT_TABLE_ROW_HEIGHT = 41;
1717

1818
export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';
19+
20+
export const PAGINATED_TABLE_IDS = {
21+
NODES: 'nodes',
22+
STORAGE_NODES: 'storage-nodes',
23+
STORAGE_GROUPS: 'storage-groups',
24+
TOPIC_DATA: 'topic-data',
25+
NODE_PEERS: 'node-peers',
26+
} as const;
27+
28+
export type PaginatedTableId = (typeof PAGINATED_TABLE_IDS)[keyof typeof PAGINATED_TABLE_IDS];
29+
30+
export const PAGINATED_TABLE_COLUMN_IDS_IN_REQUEST: Record<PaginatedTableId, boolean> = {
31+
[PAGINATED_TABLE_IDS.NODES]: true,
32+
[PAGINATED_TABLE_IDS.STORAGE_NODES]: true,
33+
[PAGINATED_TABLE_IDS.STORAGE_GROUPS]: true,
34+
[PAGINATED_TABLE_IDS.TOPIC_DATA]: true,
35+
[PAGINATED_TABLE_IDS.NODE_PEERS]: false,
36+
};
37+
38+
export function shouldSendColumnIds(tableId: PaginatedTableId): boolean {
39+
return PAGINATED_TABLE_COLUMN_IDS_IN_REQUEST[tableId] ?? false;
40+
}

‎src/components/nodesColumns/__test__/utils.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {UNBREAKABLE_GAP} from '../../../utils/utils';
1+
import {UNBREAKABLE_GAP} from '../../../utils/constants';
22
import {prepareClockSkewValue, preparePingTimeValue} from '../utils';
33

44
describe('preparePingTimeValue', () => {

‎src/containers/Node/NodeNetwork/NodeNetworkTable.tsx‎

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

3-
import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
3+
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
44
import type {PaginatedTableData} from '../../../components/PaginatedTable';
55
import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
66
import type {Column} from '../../../utils/tableUtils/types';
@@ -42,7 +42,7 @@ export function NodeNetworkTable({
4242
columns={columns}
4343
fetchData={getNodePeers}
4444
filters={filters}
45-
tableName={i18n('table_node-peers')}
45+
tableName={PAGINATED_TABLE_IDS.NODE_PEERS}
4646
renderErrorMessage={renderPaginatedTableErrorMessage}
4747
renderEmptyDataMessage={renderEmptyDataMessage}
4848
onDataFetched={onDataFetched}

‎src/containers/Node/NodeNetwork/columns.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import {
1212
} from '../../../components/nodesColumns/columns';
1313
import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
1414
import {EMPTY_DATA_PLACEHOLDER} from '../../../lib';
15+
import {formatBytes} from '../../../utils/bytesParsers';
1516
import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
1617
import type {Column} from '../../../utils/tableUtils/types';
17-
import {bytesToMB, isNumeric} from '../../../utils/utils';
1818

1919
import {
2020
NODE_NETWORK_COLUMNS_IDS,
@@ -35,15 +35,22 @@ function getPeerConnectTimeColumn<T extends {ConnectTime?: string}>(): Column<T>
3535
};
3636
}
3737

38+
function renderBytes(bytes?: number | string) {
39+
return formatBytes({
40+
value: bytes,
41+
size: 'mb',
42+
withSizeLabel: true,
43+
});
44+
}
45+
3846
function getPeerSentBytesColumn<T extends {BytesSend?: string | number}>(): Column<T> {
3947
return {
4048
name: NODE_NETWORK_COLUMNS_IDS.BytesSend,
4149
header: NODE_NETWORK_COLUMNS_TITLES.BytesSend,
4250
align: DataTable.RIGHT,
4351
width: 140,
4452
resizeMinWidth: 120,
45-
render: ({row}) =>
46-
isNumeric(row.BytesSend) ? bytesToMB(row.BytesSend, 0) : EMPTY_DATA_PLACEHOLDER,
53+
render: ({row}) => renderBytes(row.BytesSend) || EMPTY_DATA_PLACEHOLDER,
4754
};
4855
}
4956

@@ -54,8 +61,7 @@ function getPeerReceivedBytesColumn<T extends {BytesReceived?: string | number}>
5461
align: DataTable.RIGHT,
5562
width: 160,
5663
resizeMinWidth: 130,
57-
render: ({row}) =>
58-
isNumeric(row.BytesReceived) ? bytesToMB(row.BytesReceived, 0) : EMPTY_DATA_PLACEHOLDER,
64+
render: ({row}) => renderBytes(row.BytesReceived) || EMPTY_DATA_PLACEHOLDER,
5965
};
6066
}
6167

‎src/containers/Node/NodeNetwork/i18n/en.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,5 @@
44
"field_received-bytes": "Received Bytes",
55
"alert_no-network-data": "No network data",
66
"search-placeholder": "Search peers",
7-
"field_peers": "Peers",
8-
"table_node-peers": "Node Peers"
7+
"field_peers": "Peers"
98
}

‎src/containers/Nodes/NodesTable.tsx‎

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

33
import {Illustration} from '../../components/Illustration';
44
import type {PaginatedTableData} from '../../components/PaginatedTable';
5-
import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
5+
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../components/PaginatedTable';
66
import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
77
import type {NodesColumn} from '../../components/nodesColumns/types';
88
import type {NodesFilters} from '../../store/reducers/nodes/types';
@@ -94,7 +94,7 @@ export function NodesTable({
9494
renderEmptyDataMessage={renderEmptyDataMessage}
9595
getRowClassName={getRowClassName}
9696
filters={tableFilters}
97-
tableName="nodes"
97+
tableName={PAGINATED_TABLE_IDS.NODES}
9898
onDataFetched={onDataFetched}
9999
/>
100100
);

‎src/containers/Storage/PaginatedStorageGroupsTable/PaginatedStorageGroupsTable.tsx‎

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

33
import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
44
import type {RenderErrorMessage} from '../../../components/PaginatedTable';
5-
import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
5+
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
66
import {
77
useCapabilitiesLoaded,
88
useStorageGroupsHandlerAvailable,
@@ -103,7 +103,7 @@ export const PaginatedStorageGroupsTable = ({
103103
renderErrorMessage={renderErrorMessage}
104104
renderEmptyDataMessage={renderEmptyDataMessage}
105105
filters={tableFilters}
106-
tableName="storage-groups"
106+
tableName={PAGINATED_TABLE_IDS.STORAGE_GROUPS}
107107
/>
108108
</LoaderWrapper>
109109
);

0 commit comments

Comments
 (0)