fix: format bytes columns and avoid refetch on column toggle

src/components/PaginatedTable/PaginatedTable.tsx

@@ -33,6 +33,7 @@ export interface PaginatedTableProps<T, F> {
     containerClassName?: string;
     onDataFetched?: (data: PaginatedTableData<T>) => void;
     keepCache?: boolean;
+    useColumnsIdsInRequest?: boolean;
 }
 
 const DEFAULT_PAGINATION_LIMIT = 20;
@@ -53,6 +54,7 @@ export const PaginatedTable = <T, F>({
     containerClassName,
     onDataFetched,
     keepCache = true,
+    useColumnsIdsInRequest = true,
 }: PaginatedTableProps<T, F>) => {
     // Get state and setters from context
     const {tableState, setSortParams, setTotalEntities, setFoundEntities, setIsInitialLoad} =
@@ -122,6 +124,7 @@ export const PaginatedTable = <T, F>({
                     renderEmptyDataMessage={renderEmptyDataMessage}
                     onDataFetched={handleDataFetched}
                     keepCache={keepCache}
+                    useColumnsIdsInRequest={useColumnsIdsInRequest}
                 />
             </tbody>
         </table>

src/components/PaginatedTable/TableChunk.tsx

@@ -41,6 +41,7 @@ interface TableChunkProps<T, F> {
     onDataFetched: (data?: PaginatedTableData<T>) => void;
 
     keepCache?: boolean;
+    useColumnsIdsInRequest?: boolean;
 }
 
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
@@ -61,13 +62,18 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     shouldFetch,
     shouldRender,
     keepCache,
+    useColumnsIdsInRequest,
 }: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     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 columnsIds = React.useMemo(
+        () =>
+            //sort ids to prevent refetch if only order was changed
+            useColumnsIdsInRequest ? columns.map((column) => column.name).toSorted() : [],
+        [columns, useColumnsIdsInRequest],
+    );
 
     const queryParams = {
         offset: id * chunkSize,

src/components/PaginatedTable/TableChunksRenderer.tsx

@@ -29,6 +29,7 @@ export interface TableChunksRendererProps<T, F> {
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     onDataFetched: (data?: PaginatedTableData<T>) => void;
     keepCache: boolean;
+    useColumnsIdsInRequest?: boolean;
 }
 
 export const TableChunksRenderer = <T, F>({
@@ -47,6 +48,7 @@ export const TableChunksRenderer = <T, F>({
     renderEmptyDataMessage,
     onDataFetched,
     keepCache,
+    useColumnsIdsInRequest,
 }: TableChunksRendererProps<T, F>) => {
     const chunkStates = useScrollBasedChunks({
         scrollContainerRef,
@@ -125,6 +127,7 @@ export const TableChunksRenderer = <T, F>({
                     shouldFetch={chunkState.shouldFetch}
                     shouldRender={chunkState.shouldRender}
                     keepCache={keepCache}
+                    useColumnsIdsInRequest={useColumnsIdsInRequest}
                 />
             );
         },
@@ -143,6 +146,7 @@ export const TableChunksRenderer = <T, F>({
             rowHeight,
             sortParams,
             tableName,
+            useColumnsIdsInRequest,
         ],
     );
 

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

@@ -43,6 +43,7 @@ export function NodeNetworkTable({
             fetchData={getNodePeers}
             filters={filters}
             tableName={i18n('table_node-peers')}
+            useColumnsIdsInRequest={false}
             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 renderSent(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}) => renderSent(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}) => renderSent(row.BytesReceived) || EMPTY_DATA_PLACEHOLDER,
     };
 }
 

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/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)) {