fix: format bytes columns and avoid refetch on column toggle

src/components/PaginatedTable/PaginatedTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {usePaginatedTableState} from './PaginatedTableContext';
 import {TableChunksRenderer} from './TableChunksRenderer';
 import {TableHead} from './TableHead';
+import type {PaginatedTableId} from './constants';
 import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
 import {b} from './shared';
 import type {
@@ -22,7 +23,7 @@ export interface PaginatedTableProps<T, F> {
     initialEntitiesCount?: number;
     fetchData: FetchData<T, F>;
     filters?: F;
-    tableName: string;
+    tableName: PaginatedTableId;
     columns: Column<T>[];
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;

src/components/PaginatedTable/TableChunk.tsx

@@ -8,6 +8,8 @@ import {ResponseError} from '../Errors/ResponseError';
 
 import {usePaginatedTableState} from './PaginatedTableContext';
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
+import type {PaginatedTableId} from './constants';
+import {shouldSendColumnIds} from './constants';
 import i18n from './i18n';
 import type {
     Column,
@@ -32,7 +34,7 @@ interface TableChunkProps<T, F> {
     sortParams?: SortParams;
     shouldFetch: boolean;
     shouldRender: boolean;
-    tableName: string;
+    tableName: PaginatedTableId;
 
     fetchData: FetchData<T, F>;
     getRowClassName?: GetRowClassName<T>;
@@ -66,8 +68,14 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {noBatching} = usePaginatedTableState();
 
-    //sort ids to prevent refetch if only order was changed
-    const columnsIds = columns.map((column) => column.name).toSorted();
+    const hasColumnsIdsInRequest = shouldSendColumnIds(tableName);
+
+    const columnsIds = React.useMemo(
+        () =>
+            // sort ids to prevent refetch if only order was changed
+            hasColumnsIdsInRequest ? columns.map((column) => column.name).toSorted() : [],
+        [columns, hasColumnsIdsInRequest],
+    );
 
     const queryParams = {
         offset: id * chunkSize,

src/components/PaginatedTable/TableChunksRenderer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {TableChunk} from './TableChunk';
+import type {PaginatedTableId} from './constants';
 import {b} from './shared';
 import type {
     Column,
@@ -22,7 +23,7 @@ export interface TableChunksRendererProps<T, F> {
     columns: Column<T>[];
     fetchData: FetchData<T, F>;
     filters?: F;
-    tableName: string;
+    tableName: PaginatedTableId;
     sortParams?: SortParams;
     getRowClassName?: GetRowClassName<T>;
     renderErrorMessage?: RenderErrorMessage;

src/components/PaginatedTable/constants.ts

@@ -16,3 +16,25 @@ export const DEFAULT_REQUEST_TIMEOUT = 200;
 export const DEFAULT_TABLE_ROW_HEIGHT = 41;
 
 export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';
+
+export const PAGINATED_TABLE_IDS = {
+    NODES: 'nodes',
+    STORAGE_NODES: 'storage-nodes',
+    STORAGE_GROUPS: 'storage-groups',
+    TOPIC_DATA: 'topic-data',
+    NODE_PEERS: 'node-peers',
+} as const;
+
+export type PaginatedTableId = (typeof PAGINATED_TABLE_IDS)[keyof typeof PAGINATED_TABLE_IDS];
+
+export const PAGINATED_TABLE_COLUMN_IDS_IN_REQUEST: Record<PaginatedTableId, boolean> = {
+    [PAGINATED_TABLE_IDS.NODES]: true,
+    [PAGINATED_TABLE_IDS.STORAGE_NODES]: true,
+    [PAGINATED_TABLE_IDS.STORAGE_GROUPS]: true,
+    [PAGINATED_TABLE_IDS.TOPIC_DATA]: true,
+    [PAGINATED_TABLE_IDS.NODE_PEERS]: false,
+};
+
+export function shouldSendColumnIds(tableId: PaginatedTableId): boolean {
+    return PAGINATED_TABLE_COLUMN_IDS_IN_REQUEST[tableId] ?? false;
+}

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

@@ -1,4 +1,4 @@
-import {UNBREAKABLE_GAP} from '../../../utils/utils';
+import {UNBREAKABLE_GAP} from '../../../utils/constants';
 import {prepareClockSkewValue, preparePingTimeValue} from '../utils';
 
 describe('preparePingTimeValue', () => {

src/containers/Node/NodeNetwork/NodeNetworkTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
+import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import type {PaginatedTableData} from '../../../components/PaginatedTable';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {Column} from '../../../utils/tableUtils/types';
@@ -42,7 +42,7 @@ export function NodeNetworkTable({
             columns={columns}
             fetchData={getNodePeers}
             filters={filters}
-            tableName={i18n('table_node-peers')}
+            tableName={PAGINATED_TABLE_IDS.NODE_PEERS}
             renderErrorMessage={renderPaginatedTableErrorMessage}
             renderEmptyDataMessage={renderEmptyDataMessage}
             onDataFetched={onDataFetched}

src/containers/Node/NodeNetwork/columns.ts

@@ -12,9 +12,9 @@ import {
 } from '../../../components/nodesColumns/columns';
 import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
 import {EMPTY_DATA_PLACEHOLDER} from '../../../lib';
+import {formatBytes} from '../../../utils/bytesParsers';
 import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
 import type {Column} from '../../../utils/tableUtils/types';
-import {bytesToMB, isNumeric} from '../../../utils/utils';
 
 import {
     NODE_NETWORK_COLUMNS_IDS,
@@ -35,15 +35,22 @@ function getPeerConnectTimeColumn<T extends {ConnectTime?: string}>(): Column<T>
     };
 }
 
+function renderBytes(bytes?: number | string) {
+    return formatBytes({
+        value: bytes,
+        size: 'mb',
+        withSizeLabel: true,
+    });
+}
+
 function getPeerSentBytesColumn<T extends {BytesSend?: string | number}>(): Column<T> {
     return {
         name: NODE_NETWORK_COLUMNS_IDS.BytesSend,
         header: NODE_NETWORK_COLUMNS_TITLES.BytesSend,
         align: DataTable.RIGHT,
         width: 140,
         resizeMinWidth: 120,
-        render: ({row}) =>
-            isNumeric(row.BytesSend) ? bytesToMB(row.BytesSend, 0) : EMPTY_DATA_PLACEHOLDER,
+        render: ({row}) => renderBytes(row.BytesSend) || EMPTY_DATA_PLACEHOLDER,
     };
 }
 
@@ -54,8 +61,7 @@ function getPeerReceivedBytesColumn<T extends {BytesReceived?: string | number}>
         align: DataTable.RIGHT,
         width: 160,
         resizeMinWidth: 130,
-        render: ({row}) =>
-            isNumeric(row.BytesReceived) ? bytesToMB(row.BytesReceived, 0) : EMPTY_DATA_PLACEHOLDER,
+        render: ({row}) => renderBytes(row.BytesReceived) || EMPTY_DATA_PLACEHOLDER,
     };
 }
 

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

@@ -4,6 +4,5 @@
   "field_received-bytes": "Received Bytes",
   "alert_no-network-data": "No network data",
   "search-placeholder": "Search peers",
-  "field_peers": "Peers",
-  "table_node-peers": "Node Peers"
+  "field_peers": "Peers"
 }

src/containers/Nodes/NodesTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Illustration} from '../../components/Illustration';
 import type {PaginatedTableData} from '../../components/PaginatedTable';
-import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
+import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../components/PaginatedTable';
 import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
 import type {NodesColumn} from '../../components/nodesColumns/types';
 import type {NodesFilters} from '../../store/reducers/nodes/types';
@@ -94,7 +94,7 @@ export function NodesTable({
             renderEmptyDataMessage={renderEmptyDataMessage}
             getRowClassName={getRowClassName}
             filters={tableFilters}
-            tableName="nodes"
+            tableName={PAGINATED_TABLE_IDS.NODES}
             onDataFetched={onDataFetched}
         />
     );

src/containers/Storage/PaginatedStorageGroupsTable/PaginatedStorageGroupsTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
 import type {RenderErrorMessage} from '../../../components/PaginatedTable';
-import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
+import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import {
     useCapabilitiesLoaded,
     useStorageGroupsHandlerAvailable,
@@ -103,7 +103,7 @@ export const PaginatedStorageGroupsTable = ({
                 renderErrorMessage={renderErrorMessage}
                 renderEmptyDataMessage={renderEmptyDataMessage}
                 filters={tableFilters}
-                tableName="storage-groups"
+                tableName={PAGINATED_TABLE_IDS.STORAGE_GROUPS}
             />
         </LoaderWrapper>
     );

src/containers/Storage/PaginatedStorageNodesTable/PaginatedStorageNodesTable.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type {PaginatedTableData, RenderErrorMessage} from '../../../components/PaginatedTable';
-import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
+import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
@@ -109,7 +109,7 @@ export const PaginatedStorageNodesTable = ({
             renderEmptyDataMessage={renderEmptyDataMessage}
             getRowClassName={getRowUnavailableClassName}
             filters={tableFilters}
-            tableName="storage-nodes"
+            tableName={PAGINATED_TABLE_IDS.STORAGE_NODES}
             onDataFetched={onDataFetched}
         />
     );

src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/PlaceholderTab.tsx

@@ -1,5 +1,5 @@
 import {cn} from '../../../../../../utils/cn';
-import {NON_BREAKING_SPACE} from '../../../../../../utils/constants';
+import {UNBREAKABLE_GAP} from '../../../../../../utils/constants';
 import {ServerlessTabCard} from '../../TabCard/ServerlessTabCard';
 
 import '../MetricsTabs.scss';
@@ -11,10 +11,10 @@ export function PlaceholderTab() {
         <div className={b('link-container', {placeholder: true})}>
             <div className={b('link')}>
                 <ServerlessTabCard
-                    text={NON_BREAKING_SPACE}
+                    text={UNBREAKABLE_GAP}
                     active={false}
                     helpText={undefined}
-                    subtitle={NON_BREAKING_SPACE}
+                    subtitle={UNBREAKABLE_GAP}
                 />
             </div>
         </div>

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

@@ -11,6 +11,7 @@ import {PageError} from '../../../../components/Errors/PageError/PageError';
 import {Fullscreen} from '../../../../components/Fullscreen/Fullscreen';
 import {
     DEFAULT_TABLE_ROW_HEIGHT,
+    PAGINATED_TABLE_IDS,
     ResizeablePaginatedTable,
 } from '../../../../components/PaginatedTable';
 import {PaginatedTableWithLayout} from '../../../../components/PaginatedTable/PaginatedTableWithLayout';
@@ -354,7 +355,7 @@ export function TopicData({scrollContainerRef, path, database, databaseFullPath}
                             renderErrorMessage={renderPaginatedTableErrorMessage}
                             renderEmptyDataMessage={renderEmptyDataMessage}
                             filters={tableFilters}
-                            tableName="topicData"
+                            tableName={PAGINATED_TABLE_IDS.TOPIC_DATA}
                             rowHeight={DEFAULT_TABLE_ROW_HEIGHT}
                             keepCache={false}
                             getRowClassName={(row) => {

src/utils/bytesParsers/__test__/formatBytes.test.ts

@@ -1,4 +1,4 @@
-import {UNBREAKABLE_GAP} from '../../utils';
+import {UNBREAKABLE_GAP} from '../../constants';
 import {formatBytes} from '../formatBytes';
 
 describe('formatBytes', () => {

src/utils/bytesParsers/formatBytes.ts

@@ -1,7 +1,7 @@
-import {GIGABYTE, KILOBYTE, MEGABYTE, TERABYTE} from '../constants';
+import {GIGABYTE, KILOBYTE, MEGABYTE, TERABYTE, UNBREAKABLE_GAP} from '../constants';
 import type {FormatToSizeArgs, FormatValuesArgs} from '../dataFormatters/common';
 import {formatNumber, roundToPrecision} from '../dataFormatters/dataFormatters';
-import {UNBREAKABLE_GAP, isNumeric} from '../utils';
+import {isNumeric} from '../utils';
 
 import i18n from './i18n';
 

src/utils/constants.ts

@@ -68,7 +68,7 @@ export const SECTION_IDS = {
 export const TENANT_OVERVIEW_TABLES_LIMIT = 3;
 
 export const EMPTY_DATA_PLACEHOLDER = '—';
-export const NON_BREAKING_SPACE = '\u00A0';
+export const UNBREAKABLE_GAP = '\u00A0';
 
 export const QUERY_TECHNICAL_MARK = '/*UI-QUERY-EXCLUDE*/';
 

src/utils/dataFormatters/__test__/formatNumbers.test.ts

@@ -1,4 +1,4 @@
-import {UNBREAKABLE_GAP} from '../../utils';
+import {UNBREAKABLE_GAP} from '../../constants';
 import {formatNumericValues} from '../dataFormatters';
 
 describe('formatNumericValues', () => {

src/utils/dataFormatters/__test__/formatStorageValues.test.ts

@@ -1,4 +1,4 @@
-import {UNBREAKABLE_GAP} from '../../utils';
+import {UNBREAKABLE_GAP} from '../../constants';
 import {formatStorageValues} from '../dataFormatters';
 
 describe('formatStorageValues', () => {

src/utils/dataFormatters/__test__/formatUptime.test.ts

@@ -1,4 +1,4 @@
-import {UNBREAKABLE_GAP} from '../../utils';
+import {UNBREAKABLE_GAP} from '../../constants';
 import {
     formatUptimeInSeconds,
     getDowntimeFromDateFormatted,

src/utils/dataFormatters/dataFormatters.ts

@@ -3,9 +3,9 @@ import {dateTimeParse, duration} from '@gravity-ui/date-utils';
 import type {TVDiskID, TVSlotId} from '../../types/api/vdisk';
 import {formatBytes as formatBytesCustom, getBytesSizeUnit} from '../bytesParsers/formatBytes';
 import type {BytesSizes} from '../bytesParsers/formatBytes';
-import {HOUR_IN_SECONDS} from '../constants';
+import {HOUR_IN_SECONDS, UNBREAKABLE_GAP} from '../constants';
 import {configuredNumeral} from '../numeral';
-import {UNBREAKABLE_GAP, isNumeric} from '../utils';
+import {isNumeric} from '../utils';
 
 import {formatValues} from './common';
 import {formatNumberWithDigits, getNumberSizeUnit} from './formatNumber';

src/utils/dataFormatters/formatNumber.ts

@@ -1,5 +1,6 @@
 import i18n from '../bytesParsers/i18n';
-import {UNBREAKABLE_GAP, isNumeric} from '../utils';
+import {UNBREAKABLE_GAP} from '../constants';
+import {isNumeric} from '../utils';
 
 import type {FormatToSizeArgs, FormatValuesArgs} from './common';
 import {formatNumber, roundToPrecision} from './dataFormatters';

src/utils/numeral.ts

@@ -1,8 +1,8 @@
 import numeral from 'numeral';
 import 'numeral/locales'; // Without this numeral will throw an error when using not 'en' locale
 
+import {UNBREAKABLE_GAP} from './constants';
 import {Lang, i18n} from './i18n';
-import {UNBREAKABLE_GAP} from './utils';
 
 // Set space delimiter for all locales possible in project
 Object.values(Lang).forEach((value) => {

src/utils/utils.ts

@@ -107,8 +107,6 @@ export function toExponential(value: number, precision?: number) {
     return Number(value).toExponential(precision);
 }
 
-export const UNBREAKABLE_GAP = '\xa0';
-
 // Numeric values expected, not numeric value should be displayd as 0
 export function safeParseNumber(value: unknown, defaultValue = 0): number {
     if (isNumeric(value)) {