feat(Storage,Nodes): request only needed fields from backend (#1491)

src/components/PaginatedTable/TableChunk.tsx

@@ -47,12 +47,15 @@ export const TableChunk = <T, F>({
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
+    const columnsIds = columns.map((column) => column.name);
+
     const queryParams = {
         offset: id * limit,
         limit,
         fetchData: fetchData as FetchData<T, unknown>,
         filters,
         sortParams,
+        columnsIds,
         tableName,
     };
 

src/components/PaginatedTable/types.ts

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

src/components/nodesColumns/columns.tsx

@@ -7,6 +7,7 @@ import {valueIsDefined} from '../../utils';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 import {getSpaceUsageSeverity} from '../../utils/storage';
+import type {Column} from '../../utils/tableUtils/types';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {NodeHostWrapper} from '../NodeHostWrapper/NodeHostWrapper';
 import type {NodeHostData} from '../NodeHostWrapper/NodeHostWrapper';
@@ -16,7 +17,7 @@ import {TabletsStatistic} from '../TabletsStatistic';
 import {UsageLabel} from '../UsageLabel/UsageLabel';
 
 import {NODES_COLUMNS_IDS, NODES_COLUMNS_TITLES} from './constants';
-import type {Column, GetNodesColumnsParams} from './types';
+import type {GetNodesColumnsParams} from './types';
 
 export function getNodeIdColumn<T extends {NodeId?: string | number}>(): Column<T> {
     return {

src/components/nodesColumns/constants.ts

@@ -1,3 +1,4 @@
+import type {NodesRequiredField} from '../../types/api/nodes';
 import type {ValueOf} from '../../types/common';
 
 import i18n from './i18n';
@@ -21,6 +22,7 @@ export const NODES_COLUMNS_IDS = {
     TotalSessions: 'TotalSessions',
     Missing: 'Missing',
     Tablets: 'Tablets',
+    PDisks: 'PDisks',
 } as const;
 
 export type NodesColumnId = ValueOf<typeof NODES_COLUMNS_IDS>;
@@ -76,4 +78,29 @@ export const NODES_COLUMNS_TITLES = {
     get Tablets() {
         return i18n('tablets');
     },
+    get PDisks() {
+        return i18n('pdisks');
+    },
 } as const satisfies Record<NodesColumnId, string>;
+
+// Although columns ids mostly similar to backend fields, there might be some difference
+// Also for some columns we may use more than one field
+export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredField[]> = {
+    NodeId: ['NodeId'],
+    Host: ['Host', 'Rack', 'Database', 'SystemState'],
+    NodeName: ['NodeName'],
+    DC: ['DC'],
+    Rack: ['Rack'],
+    Version: ['Version'],
+    Uptime: ['Uptime'],
+    Memory: ['Memory'],
+    CPU: ['CPU'],
+    LoadAverage: ['LoadAverage'],
+    Load: ['LoadAverage'],
+    DiskSpaceUsage: ['DiskSpaceUsage'],
+    SharedCacheUsage: ['SystemState'],
+    TotalSessions: ['SystemState'],
+    Missing: ['Missing'],
+    Tablets: ['Tablets', 'Database'],
+    PDisks: ['PDisks'],
+};

src/components/nodesColumns/i18n/en.json

@@ -14,5 +14,6 @@
   "load": "Load",
   "caches": "Caches",
   "sessions": "Sessions",
-  "missing": "Missing"
+  "missing": "Missing",
+  "pdisks": "PDisks"
 }

src/components/nodesColumns/types.ts

@@ -1,9 +1,4 @@
-import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
-
 import type {GetNodeRefFunc} from '../../types/additionalProps';
-import type {Column as PaginatedTableColumn} from '../PaginatedTable';
-
-export type Column<T> = PaginatedTableColumn<T> & DataTableColumn<T>;
 
 export interface GetNodesColumnsParams {
     getNodeRef?: GetNodeRefFunc;

src/containers/Nodes/columns/columns.tsx

@@ -11,9 +11,10 @@ import {
     getUptimeColumn,
     getVersionColumn,
 } from '../../../components/nodesColumns/columns';
-import type {Column, GetNodesColumnsParams} from '../../../components/nodesColumns/types';
+import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
 import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
 import {isSortableNodesProperty} from '../../../utils/nodes';
+import type {Column} from '../../../utils/tableUtils/types';
 
 export function getNodesColumns(params: GetNodesColumnsParams): Column<NodesPreparedEntity>[] {
     const columns = [

src/containers/Nodes/getNodes.ts

@@ -1,4 +1,5 @@
 import type {FetchData} from '../../components/PaginatedTable';
+import {NODES_COLUMNS_TO_DATA_FIELDS} from '../../components/nodesColumns/constants';
 import type {NodesFilters, NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import {prepareNodesData} from '../../store/reducers/nodes/utils';
 import type {NodesRequestParams} from '../../types/api/nodes';
@@ -8,6 +9,7 @@ import {
     getUptimeParamValue,
     isSortableNodesProperty,
 } from '../../utils/nodes';
+import {getRequiredDataFields} from '../../utils/tableUtils/getRequiredDataFields';
 
 const getConcurrentId = (limit?: number, offset?: number) => {
     return `getNodes|offset${offset}|limit${limit}`;
@@ -26,6 +28,7 @@ export const getNodes: FetchData<
         offset,
         sortParams,
         filters,
+        columnsIds,
     } = params;
 
     const {sortOrder, columnId} = sortParams ?? {};
@@ -35,6 +38,8 @@ export const getNodes: FetchData<
         ? prepareSortValue(columnId, sortOrder)
         : undefined;
 
+    const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
+
     const response = await window.api.getNodes(
         {
             type,
@@ -48,6 +53,7 @@ export const getNodes: FetchData<
             filter: searchValue,
             problems_only: getProblemParamValue(problemFilter),
             uptime: getUptimeParamValue(uptimeFilter),
+            fieldsRequired: dataFieldsRequired,
         },
         {concurrentId: getConcurrentId(limit, offset), signal: params.signal},
     );

src/containers/Storage/StorageGroups/columns/constants.ts

@@ -1,7 +1,7 @@
 import type {SelectOption} from '@gravity-ui/uikit';
 import {z} from 'zod';
 
-import type {GroupsGroupByField} from '../../../../types/api/storage';
+import type {GroupsGroupByField, GroupsRequiredField} from '../../../../types/api/storage';
 import type {ValueOf} from '../../../../types/common';
 
 import i18n from './i18n';
@@ -31,7 +31,7 @@ export const STORAGE_GROUPS_COLUMNS_IDS = {
     State: 'State',
 } as const;
 
-type StorageGroupsColumnId = ValueOf<typeof STORAGE_GROUPS_COLUMNS_IDS>;
+export type StorageGroupsColumnId = ValueOf<typeof STORAGE_GROUPS_COLUMNS_IDS>;
 
 export const DEFAULT_STORAGE_GROUPS_COLUMNS: StorageGroupsColumnId[] = [
     'GroupId',
@@ -136,3 +136,29 @@ export const storageGroupsGroupByParamSchema = z
         GroupsGroupByField | undefined
     >((value) => STORAGE_GROUPS_GROUP_BY_PARAMS.includes(value))
     .catch(undefined);
+
+// Although columns ids mostly similar to backend fields, there might be some difference
+// Also for some columns we may use more than one field
+export const GROUPS_COLUMNS_TO_DATA_FIELDS: Record<StorageGroupsColumnId, GroupsRequiredField[]> = {
+    GroupId: ['GroupId'],
+    PoolName: ['PoolName'],
+    // We display MediaType and Encryption in one Type column
+    MediaType: ['MediaType', 'Encryption'],
+    Encryption: ['Encryption'],
+    Erasure: ['Erasure'],
+    Used: ['Used'],
+    Limit: ['Limit'],
+    Usage: ['Usage'],
+    DiskSpaceUsage: ['DiskSpaceUsage'],
+    DiskSpace: ['State'],
+    Read: ['Read'],
+    Write: ['Write'],
+    Latency: ['Latency'],
+    AllocationUnits: ['AllocationUnits'],
+    // Read and Write fields make backend to return Whiteboard data
+    VDisks: ['VDisk', 'PDisk', 'Read', 'Write'],
+    VDisksPDisks: ['VDisk', 'PDisk', 'Read', 'Write'],
+    MissingDisks: ['MissingDisks'],
+    Degraded: ['MissingDisks'],
+    State: ['State'],
+};

src/containers/Storage/StorageGroups/columns/types.ts

@@ -1,11 +1,8 @@
-import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
-
-import type {Column as PaginatedTableColumn} from '../../../../components/PaginatedTable';
 import type {PreparedStorageGroup, VisibleEntities} from '../../../../store/reducers/storage/types';
+import type {Column} from '../../../../utils/tableUtils/types';
 import type {StorageViewContext} from '../../types';
 
-export type StorageGroupsColumn = PaginatedTableColumn<PreparedStorageGroup> &
-    DataTableColumn<PreparedStorageGroup>;
+export type StorageGroupsColumn = Column<PreparedStorageGroup>;
 
 export interface GetStorageColumnsData {
     viewContext: StorageViewContext;

src/containers/Storage/StorageGroups/getGroups.ts

@@ -8,13 +8,16 @@ import type {
 } from '../../../store/reducers/storage/types';
 import {prepareSortValue} from '../../../utils/filters';
 import {isSortableStorageProperty} from '../../../utils/storage';
+import {getRequiredDataFields} from '../../../utils/tableUtils/getRequiredDataFields';
+
+import {GROUPS_COLUMNS_TO_DATA_FIELDS} from './columns/constants';
 
 type GetStorageGroups = FetchData<PreparedStorageGroup, PreparedStorageGroupFilters>;
 
 export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
     const fetchData: GetStorageGroups = React.useCallback(
         async (params) => {
-            const {limit, offset, sortParams, filters} = params;
+            const {limit, offset, sortParams, filters, columnsIds} = params;
             const {sortOrder, columnId} = sortParams ?? {};
             const {
                 searchValue,
@@ -31,6 +34,11 @@ export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
                 ? prepareSortValue(columnId, sortOrder)
                 : undefined;
 
+            const dataFieldsRequired = getRequiredDataFields(
+                columnsIds,
+                GROUPS_COLUMNS_TO_DATA_FIELDS,
+            );
+
             const {groups, found, total} = await requestStorageData({
                 limit,
                 offset,
@@ -43,6 +51,7 @@ export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
                 pDiskId,
                 filter_group: filterGroup,
                 filter_group_by: filterGroupBy,
+                fieldsRequired: dataFieldsRequired,
                 shouldUseGroupsHandler,
             });
 

src/containers/Storage/StorageNodes/columns/columns.tsx

@@ -13,12 +13,15 @@ import {
     getUptimeColumn,
     getVersionColumn,
 } from '../../../../components/nodesColumns/columns';
+import {
+    NODES_COLUMNS_IDS,
+    NODES_COLUMNS_TITLES,
+} from '../../../../components/nodesColumns/constants';
 import type {PreparedStorageNode} from '../../../../store/reducers/storage/types';
 import {cn} from '../../../../utils/cn';
 import {isSortableNodesProperty} from '../../../../utils/nodes';
 import {PDisk} from '../../PDisk/PDisk';
 
-import {STORAGE_NODES_COLUMNS_IDS, STORAGE_NODES_COLUMNS_TITLES} from './constants';
 import type {GetStorageNodesColumnsParams, StorageNodesColumn} from './types';
 
 import './StorageNodesColumns.scss';
@@ -27,8 +30,8 @@ const b = cn('ydb-storage-nodes-columns');
 
 const getPDisksColumn = ({viewContext}: GetStorageNodesColumnsParams): StorageNodesColumn => {
     return {
-        name: STORAGE_NODES_COLUMNS_IDS.PDisks,
-        header: STORAGE_NODES_COLUMNS_TITLES.PDisks,
+        name: NODES_COLUMNS_IDS.PDisks,
+        header: NODES_COLUMNS_TITLES.PDisks,
         className: b('pdisks-column'),
         render: ({row}) => {
             return (

src/containers/Storage/StorageNodes/columns/constants.ts

@@ -1,26 +1,14 @@
 import type {SelectOption} from '@gravity-ui/uikit';
 import {z} from 'zod';
 
-import {
-    NODES_COLUMNS_IDS as BASE_NODES_COLUMNS_IDS,
-    NODES_COLUMNS_TITLES as BASE_NODES_COLUMNS_TITLES,
-} from '../../../../components/nodesColumns/constants';
+import type {NodesColumnId} from '../../../../components/nodesColumns/constants';
+import {NODES_COLUMNS_TITLES} from '../../../../components/nodesColumns/constants';
 import type {NodesGroupByField} from '../../../../types/api/nodes';
-import type {ValueOf} from '../../../../types/common';
-
-import i18n from './i18n';
 
 export const STORAGE_NODES_COLUMNS_WIDTH_LS_KEY = 'storageNodesColumnsWidth';
 export const STORAGE_NODES_SELECTED_COLUMNS_LS_KEY = 'storageNodesSelectedColumns';
 
-export const STORAGE_NODES_COLUMNS_IDS = {
-    ...BASE_NODES_COLUMNS_IDS,
-    PDisks: 'PDisks',
-} as const;
-
-type StorageNodesColumnId = ValueOf<typeof STORAGE_NODES_COLUMNS_IDS>;
-
-export const DEFAULT_STORAGE_NODES_COLUMNS: StorageNodesColumnId[] = [
+export const DEFAULT_STORAGE_NODES_COLUMNS: NodesColumnId[] = [
     'NodeId',
     'Host',
     'DC',
@@ -29,16 +17,7 @@ export const DEFAULT_STORAGE_NODES_COLUMNS: StorageNodesColumnId[] = [
     'Uptime',
     'PDisks',
 ];
-export const REQUIRED_STORAGE_NODES_COLUMNS: StorageNodesColumnId[] = ['NodeId'];
-
-// This code is running when module is initialized and correct language may not be set yet
-// get functions guarantee that i18n fields will be inited on render with current render language
-export const STORAGE_NODES_COLUMNS_TITLES = {
-    ...BASE_NODES_COLUMNS_TITLES,
-    get PDisks() {
-        return i18n('pdisks');
-    },
-} as const satisfies Record<StorageNodesColumnId, string>;
+export const REQUIRED_STORAGE_NODES_COLUMNS: NodesColumnId[] = ['NodeId'];
 
 const STORAGE_NODES_GROUP_BY_PARAMS = [
     'Host',
@@ -54,7 +33,7 @@ export const STORAGE_NODES_GROUP_BY_OPTIONS: SelectOption[] = STORAGE_NODES_GROU
     (param) => {
         return {
             value: param,
-            content: STORAGE_NODES_COLUMNS_TITLES[param],
+            content: NODES_COLUMNS_TITLES[param],
         };
     },
 );

src/containers/Storage/StorageNodes/columns/hooks.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 
+import {
+    NODES_COLUMNS_IDS,
+    NODES_COLUMNS_TITLES,
+} from '../../../../components/nodesColumns/constants';
 import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants';
 import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 
 import {getStorageNodesColumns} from './columns';
 import {
     DEFAULT_STORAGE_NODES_COLUMNS,
     REQUIRED_STORAGE_NODES_COLUMNS,
-    STORAGE_NODES_COLUMNS_IDS,
-    STORAGE_NODES_COLUMNS_TITLES,
     STORAGE_NODES_SELECTED_COLUMNS_LS_KEY,
 } from './constants';
 import type {GetStorageNodesColumnsParams} from './types';
@@ -25,15 +27,15 @@ export function useStorageNodesSelectedColumns({
 
     const requiredColumns = React.useMemo(() => {
         if (visibleEntities === VISIBLE_ENTITIES.missing) {
-            return [...REQUIRED_STORAGE_NODES_COLUMNS, STORAGE_NODES_COLUMNS_IDS.Missing];
+            return [...REQUIRED_STORAGE_NODES_COLUMNS, NODES_COLUMNS_IDS.Missing];
         }
         return REQUIRED_STORAGE_NODES_COLUMNS;
     }, [visibleEntities]);
 
     return useSelectedColumns(
         columns,
         STORAGE_NODES_SELECTED_COLUMNS_LS_KEY,
-        STORAGE_NODES_COLUMNS_TITLES,
+        NODES_COLUMNS_TITLES,
         DEFAULT_STORAGE_NODES_COLUMNS,
         requiredColumns,
     );

src/containers/Storage/StorageNodes/columns/types.ts

@@ -1,6 +1,6 @@
-import type {Column} from '../../../../components/nodesColumns/types';
 import type {PreparedStorageNode, VisibleEntities} from '../../../../store/reducers/storage/types';
 import type {AdditionalNodesProps} from '../../../../types/additionalProps';
+import type {Column} from '../../../../utils/tableUtils/types';
 import type {StorageViewContext} from '../../types';
 
 export type StorageNodesColumn = Column<PreparedStorageNode>;