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() : undefined,
+        [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/PaginatedTable/requestBatcher.ts

@@ -6,7 +6,7 @@ interface PaginatedTableParams<T, F> {
     filters: F;
     limit: number;
     sortParams?: SortParams;
-    columnsIds: string[];
+    columnsIds?: string[];
     tableName: string;
 }
 

src/components/PaginatedTable/types.ts

@@ -48,7 +48,7 @@ type FetchDataParams<F, E = {}> = {
     offset: number;
     filters?: F;
     sortParams?: SortParams;
-    columnsIds: string[];
+    columnsIds?: string[];
     signal?: AbortSignal;
 } & E;
 

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

@@ -43,7 +43,7 @@ function getPeerSentBytesColumn<T extends {BytesSend?: string | number}>(): Colu
         width: 140,
         resizeMinWidth: 120,
         render: ({row}) =>
-            isNumeric(row.BytesSend) ? bytesToMB(row.BytesSend, 0) : EMPTY_DATA_PLACEHOLDER,
+            isNumeric(row.BytesSend) ? bytesToMB(row.BytesSend, 0, true) : EMPTY_DATA_PLACEHOLDER,
     };
 }
 
@@ -55,7 +55,9 @@ function getPeerReceivedBytesColumn<T extends {BytesReceived?: string | number}>
         width: 160,
         resizeMinWidth: 130,
         render: ({row}) =>
-            isNumeric(row.BytesReceived) ? bytesToMB(row.BytesReceived, 0) : EMPTY_DATA_PLACEHOLDER,
+            isNumeric(row.BytesReceived)
+                ? bytesToMB(row.BytesReceived, 0, true)
+                : EMPTY_DATA_PLACEHOLDER,
     };
 }
 

src/containers/Nodes/getNodes.ts

@@ -36,7 +36,10 @@ export const getNodes: FetchData<
     const sortField = getNodesColumnSortField(columnId);
     const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
 
-    const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
+    const dataFieldsRequired = getRequiredDataFields(
+        columnsIds ?? Object.keys(NODES_COLUMNS_TO_DATA_FIELDS),
+        NODES_COLUMNS_TO_DATA_FIELDS,
+    );
 
     const schemePathParam =
         !isNil(path) && !isNil(databaseFullPath) ? {path, databaseFullPath} : undefined;

src/containers/Storage/PaginatedStorageGroupsTable/getGroups.ts

@@ -33,7 +33,7 @@ export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
             const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
 
             const dataFieldsRequired = getRequiredDataFields(
-                columnsIds,
+                columnsIds ?? Object.keys(GROUPS_COLUMNS_TO_DATA_FIELDS),
                 GROUPS_COLUMNS_TO_DATA_FIELDS,
             );
 

src/containers/Storage/PaginatedStorageNodesTable/getNodes.ts

@@ -42,7 +42,10 @@ export const getStorageNodes: FetchData<
     const sortField = getNodesColumnSortField(columnId);
     const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
 
-    const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
+    const dataFieldsRequired = getRequiredDataFields(
+        columnsIds ?? Object.keys(NODES_COLUMNS_TO_DATA_FIELDS),
+        NODES_COLUMNS_TO_DATA_FIELDS,
+    );
 
     const response = await window.api.viewer.getNodes({
         type,

src/store/reducers/tableData.ts

@@ -11,7 +11,7 @@ interface PaginatedTableParams<T, F> {
     filters: F;
     limit: number;
     sortParams?: SortParams;
-    columnsIds: string[];
+    columnsIds?: string[];
     tableName: string;
     noBatching?: boolean;
 }

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

@@ -22,6 +22,8 @@ export const MS_IN_NANOSECONDS = 1000000;
 export const DEFAULT_WARNING_THRESHOLD = 85;
 export const DEFAULT_DANGER_THRESHOLD = 95;
 
+export const UNBREAKABLE_GAP = '\xa0';
+
 const TABLET_SYMBOLS = {
     [EType.OldTxProxy]: 'P',
     [EType.TxProxy]: 'P',

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

@@ -1,3 +1,5 @@
+import {formatNumber} from './dataFormatters/dataFormatters';
+
 export function parseJson(value?: string | null) {
     if (!value) {
         return undefined;
@@ -31,27 +33,33 @@ export function bytesToSize(bytes: number) {
     return val.toPrecision(3) + sizes[i];
 }
 
-export function bytesToMB(bytes?: number | string, fractionDigits?: number) {
+export function bytesToMB(
+    bytes?: number | string,
+    fractionDigits?: number,
+    withThousandsGrouping?: boolean,
+) {
     const bytesNumber = Number(bytes);
     if (isNaN(bytesNumber)) {
         return '';
     }
 
     const val = bytesNumber / base ** 2;
 
-    if (isNumeric(fractionDigits)) {
-        const rounded = Number(val.toFixed(fractionDigits));
+    let rounded;
 
-        return String(rounded) + sizes[2];
-    }
-
-    if (val < 10) {
-        return val.toFixed(2) + sizes[2];
+    if (isNumeric(fractionDigits)) {
+        rounded = val.toFixed(fractionDigits);
+    } else if (val < 10) {
+        rounded = val.toFixed(2);
     } else if (val < 100) {
-        return val.toFixed(1) + sizes[2];
+        rounded = val.toFixed(1);
     } else {
-        return val.toFixed() + sizes[2];
+        rounded = val.toFixed();
     }
+
+    const result = withThousandsGrouping ? formatNumber(rounded) : rounded;
+
+    return `${result}${sizes[2]}`;
 }
 
 export function bytesToSpeed(bytes?: number | string, fractionDigits?: number) {
@@ -104,8 +112,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)) {