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

Author: artemmufazalov

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;