refactor(TenantOverviewTableLayout): pass table as child (#2001)

artemmufazalov · web-flow · commit 259695adf1a9 · 2025-03-07T09:00:54.000Z
diff --git a/src/containers/Storage/StorageGroups/columns/columns.tsx b/src/containers/Storage/StorageGroups/columns/columns.tsx
@@ -265,21 +265,7 @@ const getDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => ({
 });
 
 export const getStorageTopGroupsColumns: StorageColumnsGetter = () => {
-    const columns = [
-        groupIdColumn,
-        typeColumn,
-        erasureColumn,
-        usageColumn,
-        usedColumn,
-        limitColumn,
-    ];
-
-    return columns.map((column) => {
-        return {
-            ...column,
-            sortable: false,
-        };
-    });
+    return [groupIdColumn, typeColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
 };
 
 export const getStorageGroupsColumns: StorageColumnsGetter = (data) => {
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx
@@ -1,5 +1,6 @@
 import type {Column} from '@gravity-ui/react-data-table';
 
+import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {
     getHostColumn,
     getNodeIdColumn,
@@ -15,7 +16,10 @@ import type {NodesPreparedEntity} from '../../../../../store/reducers/nodes/type
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import type {NodesRequiredField} from '../../../../../types/api/nodes';
-import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../../utils/constants';
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../../utils/constants';
 import {useAutoRefreshInterval, useSearchQuery} from '../../../../../utils/hooks';
 import {getRequiredDataFields} from '../../../../../utils/tableUtils/getRequiredDataFields';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
@@ -34,15 +38,10 @@ function getTopNodesByCpuColumns(
         hostColumn,
     ];
 
-    const preparedColumns = columns.map((column) => ({
-        ...column,
-        sortable: false,
-    }));
-
-    const columnsIds = preparedColumns.map((column) => column.name);
+    const columnsIds = columns.map((column) => column.name);
     const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
 
-    return [preparedColumns, dataFieldsRequired];
+    return [columns, dataFieldsRequired];
 }
 
 interface TopNodesByCpuProps {
@@ -86,13 +85,18 @@ export function TopNodesByCpu({tenantName, additionalNodesProps}: TopNodesByCpuP
 
     return (
         <TenantOverviewTableLayout
-            columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
-            data={topNodes}
-            columns={columns}
             title={title}
             loading={loading}
             error={error}
-            emptyDataMessage={i18n('top-nodes.empty-data')}
-        />
+            withData={Boolean(currentData)}
+        >
+            <ResizeableDataTable
+                columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
+                data={topNodes}
+                columns={columns}
+                emptyDataMessage={i18n('top-nodes.empty-data')}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+            />
+        </TenantOverviewTableLayout>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx
@@ -1,5 +1,6 @@
 import type {Column} from '@gravity-ui/react-data-table';
 
+import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {
     getHostColumn,
     getLoadColumn,
@@ -16,7 +17,10 @@ import type {NodesPreparedEntity} from '../../../../../store/reducers/nodes/type
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import type {NodesRequiredField} from '../../../../../types/api/nodes';
-import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../../utils/constants';
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../../utils/constants';
 import {useAutoRefreshInterval, useSearchQuery} from '../../../../../utils/hooks';
 import {getRequiredDataFields} from '../../../../../utils/tableUtils/getRequiredDataFields';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
@@ -39,15 +43,10 @@ function getTopNodesByLoadColumns(
         getVersionColumn<NodesPreparedEntity>(),
     ];
 
-    const preparedColumns = columns.map((column) => ({
-        ...column,
-        sortable: false,
-    }));
-
-    const columnsIds = preparedColumns.map((column) => column.name);
+    const columnsIds = columns.map((column) => column.name);
     const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
 
-    return [preparedColumns, dataFieldsRequired];
+    return [columns, dataFieldsRequired];
 }
 
 interface TopNodesByLoadProps {
@@ -91,13 +90,18 @@ export function TopNodesByLoad({tenantName, additionalNodesProps}: TopNodesByLoa
 
     return (
         <TenantOverviewTableLayout
-            columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
-            data={topNodes}
-            columns={columns}
             title={title}
             loading={loading}
             error={error}
-            emptyDataMessage={i18n('top-nodes.empty-data')}
-        />
+            withData={Boolean(currentData)}
+        >
+            <ResizeableDataTable
+                columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
+                data={topNodes}
+                columns={columns}
+                emptyDataMessage={i18n('top-nodes.empty-data')}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+            />
+        </TenantOverviewTableLayout>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {useHistory, useLocation} from 'react-router-dom';
 
+import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {parseQuery} from '../../../../../routes';
 import {
     setTopQueriesFilters,
@@ -14,6 +15,7 @@ import {
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../../../store/reducers/tenant/constants';
+import {TENANT_OVERVIEW_TABLES_SETTINGS} from '../../../../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../../../../utils/hooks';
 import {useChangeInputWithConfirmation} from '../../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {parseQueryErrorToString} from '../../../../../utils/query';
@@ -85,14 +87,19 @@ export function TopQueries({tenantName}: TopQueriesProps) {
 
     return (
         <TenantOverviewTableLayout
-            columnsWidthLSKey={TOP_QUERIES_COLUMNS_WIDTH_LS_KEY}
-            data={data || []}
-            columns={columns}
-            onRowClick={handleRowClick}
             title={title}
             loading={loading}
             error={parseQueryErrorToString(error)}
-            rowClassName={() => b('top-queries-row')}
-        />
+            withData={Boolean(currentData)}
+        >
+            <ResizeableDataTable
+                columnsWidthLSKey={TOP_QUERIES_COLUMNS_WIDTH_LS_KEY}
+                data={data}
+                columns={columns}
+                onRowClick={handleRowClick}
+                rowClassName={() => b('top-queries-row')}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+            />
+        </TenantOverviewTableLayout>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx
@@ -1,8 +1,10 @@
 import {useLocation} from 'react-router-dom';
 
+import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {parseQuery} from '../../../../../routes';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {topShardsApi} from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import {TENANT_OVERVIEW_TABLES_SETTINGS} from '../../../../../utils/constants';
 import {useAutoRefreshInterval} from '../../../../../utils/hooks';
 import {parseQueryErrorToString} from '../../../../../utils/query';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
@@ -45,12 +47,17 @@ export const TopShards = ({tenantName, path}: TopShardsProps) => {
 
     return (
         <TenantOverviewTableLayout
-            columnsWidthLSKey={TOP_SHARDS_COLUMNS_WIDTH_LS_KEY}
-            data={data || []}
-            columns={columns}
             title={title}
             loading={loading}
             error={parseQueryErrorToString(error)}
-        />
+            withData={Boolean(currentData)}
+        >
+            <ResizeableDataTable
+                columnsWidthLSKey={TOP_SHARDS_COLUMNS_WIDTH_LS_KEY}
+                data={data}
+                columns={columns}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+            />
+        </TenantOverviewTableLayout>
     );
 };
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx
@@ -1,5 +1,6 @@
 import type {Column} from '@gravity-ui/react-data-table';
 
+import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {
     getHostColumn,
     getLoadColumn,
@@ -19,7 +20,10 @@ import type {NodesPreparedEntity} from '../../../../../store/reducers/nodes/type
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import type {NodesRequiredField} from '../../../../../types/api/nodes';
-import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../../utils/constants';
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../../utils/constants';
 import {useAutoRefreshInterval, useSearchQuery} from '../../../../../utils/hooks';
 import {getRequiredDataFields} from '../../../../../utils/tableUtils/getRequiredDataFields';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
@@ -40,15 +44,10 @@ function getTopNodesByMemoryColumns(
         getTabletsColumn<NodesPreparedEntity>(params),
     ];
 
-    const preparedColumns = columns.map((column) => ({
-        ...column,
-        sortable: false,
-    }));
-
-    const columnsIds = preparedColumns.map((column) => column.name);
+    const columnsIds = columns.map((column) => column.name);
     const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
 
-    return [preparedColumns, dataFieldsRequired];
+    return [columns, dataFieldsRequired];
 }
 
 interface TopNodesByMemoryProps {
@@ -92,13 +91,18 @@ export function TopNodesByMemory({tenantName, additionalNodesProps}: TopNodesByM
 
     return (
         <TenantOverviewTableLayout
-            columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
-            data={topNodes}
-            columns={columns}
             title={title}
             loading={loading}
             error={error}
-            emptyDataMessage={i18n('top-nodes.empty-data')}
-        />
+            withData={Boolean(currentData)}
+        >
+            <ResizeableDataTable
+                columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
+                data={topNodes}
+                columns={columns}
+                emptyDataMessage={i18n('top-nodes.empty-data')}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+            />
+        </TenantOverviewTableLayout>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.tsx
@@ -1,42 +1,40 @@
 import React from 'react';
 
+import type {NoStrictEntityMods} from '@bem-react/classname';
+
 import {ResponseError} from '../../../../components/Errors/ResponseError';
-import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
-import type {ResizeableDataTableProps} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
-import {
-    TENANT_OVERVIEW_TABLES_LIMIT,
-    TENANT_OVERVIEW_TABLES_SETTINGS,
-} from '../../../../utils/constants';
+import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants';
 
 import {b} from './utils';
 
-interface TenantOverviewTableLayoutProps<T> extends ResizeableDataTableProps<T> {
+interface TenantOverviewTableLayoutProps {
     title: React.ReactNode;
     loading?: boolean;
     error?: unknown;
-    tableClassNameModifiers?: {
-        [name: string]: string | boolean | undefined;
-    };
+    tableClassNameModifiers?: NoStrictEntityMods;
+    withData?: boolean;
+    children?: React.ReactNode;
 }
 
-export function TenantOverviewTableLayout<T>({
+export function TenantOverviewTableLayout({
     title,
     error,
     loading,
     tableClassNameModifiers = {},
-    ...props
-}: TenantOverviewTableLayoutProps<T>) {
+    withData,
+    children,
+}: TenantOverviewTableLayoutProps) {
     const renderContent = () => {
-        if (error && props.data.length === 0) {
+        if (error && !withData) {
             return null;
         }
 
         if (loading) {
             return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
         }
 
-        return <ResizeableDataTable settings={TENANT_OVERVIEW_TABLES_SETTINGS} {...props} />;
+        return children;
     };
     return (
         <React.Fragment>
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx
@@ -1,11 +1,15 @@
+import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {
     useCapabilitiesLoaded,
     useStorageGroupsHandlerAvailable,
 } from '../../../../../store/reducers/capabilities/hooks';
 import {storageApi} from '../../../../../store/reducers/storage/storage';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {GroupsRequiredField} from '../../../../../types/api/storage';
-import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../../utils/constants';
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../../utils/constants';
 import {useAutoRefreshInterval, useSearchQuery} from '../../../../../utils/hooks';
 import {getRequiredDataFields} from '../../../../../utils/tableUtils/getRequiredDataFields';
 import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/columns/columns';
@@ -71,12 +75,17 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     return (
         <TenantOverviewTableLayout
-            columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
-            data={groups}
-            columns={columns}
             title={title}
             loading={loading || !capabilitiesLoaded}
             error={error}
-        />
+            withData={Boolean(currentData)}
+        >
+            <ResizeableDataTable
+                columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
+                data={groups}
+                columns={columns}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+            />
+        </TenantOverviewTableLayout>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx b/src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
