feat(TenantOverview): add links to sections titles (#599)

artemmufazalov · web-flow · commit 30401fa354d9 · 2023-12-06T11:10:13.000+03:00
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx
@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     getTopNodesByCpu,
     selectTopNodesByCpu,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByCpuColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByCpuProps {
@@ -21,6 +25,8 @@ interface TopNodesByCpuProps {
 export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByCpu);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByCpu);
@@ -39,11 +45,20 @@ export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps)
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-pools-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by pools usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx
@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     getTopNodesByLoad,
     selectTopNodesByLoad,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByLoadColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByLoadProps {
@@ -21,6 +25,8 @@ interface TopNodesByLoadProps {
 export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByLoad);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByLoad);
@@ -39,11 +45,20 @@ export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-load'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by load"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx
@@ -3,6 +3,7 @@ import {useHistory, useLocation} from 'react-router';
 import {useCallback} from 'react';
 
 import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_PAGE,
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
@@ -14,9 +15,13 @@ import {
 import {changeUserInput} from '../../../../../store/reducers/executeQuery';
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {parseQuery} from '../../../../../routes';
+
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {getTenantOverviewTopQueriesColumns} from '../../TopQueries/getTopQueriesColumns';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopQueriesProps {
     path: string;
@@ -27,6 +32,8 @@ export function TopQueries({path}: TopQueriesProps) {
     const location = useLocation();
     const history = useHistory();
 
+    const query = parseQuery(location);
+
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const {
@@ -68,12 +75,21 @@ export function TopQueries({path}: TopQueriesProps) {
         [dispatch, history, location],
     );
 
+    const title = getSectionTitle({
+        entity: i18n('queries'),
+        postfix: i18n('by-cpu-time'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
             onRowClick={handleRowClick}
-            title="Top queries by cpu time"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx
@@ -2,12 +2,20 @@ import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
 
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {parseQuery} from '../../../../../routes';
+
 import {
     sendTenantOverviewTopShardsQuery,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {getTopShardsColumns} from '../../TopShards/getTopShardsColumns';
+
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopShardsProps {
     path: string;
@@ -17,6 +25,8 @@ export const TopShards = ({path}: TopShardsProps) => {
     const dispatch = useDispatch();
     const location = useLocation();
 
+    const query = parseQuery(location);
+
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
     const {
@@ -39,11 +49,20 @@ export const TopShards = ({path}: TopShardsProps) => {
 
     const columns = getTopShardsColumns(path, location);
 
+    const title = getSectionTitle({
+        entity: i18n('shards'),
+        postfix: i18n('by-cpu-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
-            title="Top shards by cpu usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx
@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useTypedSelector, useSearchQuery} from '../../../../../utils/hooks';
 import {
     getTopNodesByMemory,
     selectTopNodesByMemory,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByMemoryColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByMemoryProps {
@@ -21,6 +25,8 @@ interface TopNodesByMemoryProps {
 export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByMemory);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByMemory);
@@ -41,11 +47,20 @@ export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryP
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-memory'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by memory"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.tsx
@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 
 import DataTable from '@gravity-ui/react-data-table';
@@ -14,7 +15,7 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 const b = cn('tenant-overview');
 
 interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
-    title: string;
+    title: ReactNode;
     loading?: boolean;
     wasLoaded?: boolean;
     error?: IResponseError;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx
@@ -1,14 +1,20 @@
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     setDataWasNotLoaded,
     getTopStorageGroups,
     selectTopStorageGroups,
 } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopGroupsProps {
     tenant?: string;
@@ -17,6 +23,8 @@ interface TopGroupsProps {
 export function TopGroups({tenant}: TopGroupsProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const {loading, wasLoaded, error} = useTypedSelector((state) => state.topStorageGroups);
     const topGroups = useTypedSelector(selectTopStorageGroups);
@@ -36,11 +44,20 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('groups'),
+        postfix: i18n('by-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topGroups || []}
             columns={columns}
-            title="Top groups by usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx
@@ -12,7 +12,10 @@ import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 import '../TenantOverview.scss';
 
@@ -72,12 +75,16 @@ export function TopTables({path}: TopTablesProps) {
                 ) : null,
         },
     ];
+    const title = getSectionTitle({
+        entity: i18n('tables'),
+        postfix: i18n('by-size'),
+    });
 
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
-            title="Top tables by size"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.tsx
@@ -0,0 +1,28 @@
+import {InternalLink} from '../../../../components/InternalLink/InternalLink';
+
+import i18n from './i18n';
+
+interface GetSectionTitleParams {
+    entity: string;
+    postfix: string;
+    prefix?: string;
+    link?: string;
+}
+
+// Titles are formed by the principle "Top entities by parameter"
+export const getSectionTitle = ({
+    prefix = i18n('top'),
+    entity,
+    postfix,
+    link,
+}: GetSectionTitleParams) => {
+    if (link) {
+        return (
+            <>
+                {prefix} <InternalLink to={link}>{entity}</InternalLink> {postfix}
+            </>
+        );
+    }
+
+    return `${prefix} ${entity} ${postfix}`;
+};
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
diff --git a/src/utils/hooks/useSearchQuery.ts b/src/utils/hooks/useSearchQuery.ts
