fix: refactor metrics storage section (#568)

Author: krosy1337

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -118,4 +118,8 @@
             cursor: pointer;
         }
     }
+
+    &__info {
+        margin-bottom: 36px;
+    }
 }

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss

@@ -4,11 +4,13 @@ import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
 import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
+
+import '../TenantOverview.scss';
+
 import {TopTables} from './TopTables';
 import {TopGroups} from './TopGroups';
-import './TenantStorage.scss';
 
-const b = cn('tenant-overview-storage');
+const b = cn('tenant-overview');
 
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx

@@ -1,25 +1,14 @@
-import cn from 'bem-cn-lite';
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import DataTable from '@gravity-ui/react-data-table';
-
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
-import {
-    TENANT_OVERVIEW_TABLES_LIMIT,
-    TENANT_OVERVIEW_TABLES_SETTINGS,
-} from '../../../../../utils/constants';
 import {
     setDataWasNotLoaded,
     getTopStorageGroups,
     selectTopStorageGroups,
 } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
-import {ResponseError} from '../../../../../components/Errors/ResponseError';
-import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
 import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
-import i18n from '../i18n';
-
-const b = cn('tenant-overview-storage');
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
 interface TopGroupsProps {
     tenant?: string;
@@ -47,30 +36,14 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} />;
-        }
-
-        if (loading && !wasLoaded) {
-            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
-        }
-
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                data={topGroups || []}
-                columns={columns}
-                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
-                emptyDataMessage={i18n('top-groups.empty-data')}
-            />
-        );
-    };
-
     return (
-        <>
-            <div className={b('title')}>Top groups by usage</div>
-            <div className={b('table')}>{renderContent()}</div>
-        </>
+        <TenantOverviewTableLayout
+            data={topGroups || []}
+            columns={columns}
+            title="Top groups by usage"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+        />
     );
 }

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -1,28 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
-import cn from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Popover} from '@gravity-ui/uikit';
 
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {
     fetchTopTables,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
-import {
-    TENANT_OVERVIEW_TABLES_LIMIT,
-    TENANT_OVERVIEW_TABLES_SETTINGS,
-} from '../../../../../utils/constants';
 import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
-import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
-import {ResponseError} from '../../../../../components/Errors/ResponseError';
 import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
-import './TenantStorage.scss';
-
-const b = cn('tenant-overview-storage');
+import '../TenantOverview.scss';
 
 interface TopTablesProps {
     path: string;
@@ -72,42 +64,23 @@ export function TopTables({path}: TopTablesProps) {
             sortable: false,
             render: ({row}) =>
                 row.Path ? (
-                    <LinkToSchemaObject
-                        className={b('cell-with-popover-wrapper')}
-                        path={String(row.Path)}
-                        location={location}
-                    >
-                        <Popover className={b('cell-with-popover')} content={row.Path}>
+                    <CellWithPopover content={row.Path}>
+                        <LinkToSchemaObject path={String(row.Path)} location={location}>
                             {row.Path}
-                        </Popover>
-                    </LinkToSchemaObject>
+                        </LinkToSchemaObject>
+                    </CellWithPopover>
                 ) : null,
         },
     ];
 
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} />;
-        }
-
-        if (loading && !wasLoaded) {
-            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
-        }
-
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                columns={columns}
-                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
-                data={data || []}
-            />
-        );
-    };
-
     return (
-        <>
-            <div className={b('title')}>Top tables by size</div>
-            <div className={b('table')}>{renderContent()}</div>
-        </>
+        <TenantOverviewTableLayout
+            data={data || []}
+            columns={columns}
+            title="Top tables by size"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+        />
     );
 }