feat: redesign CPU section

astandrik · astandrik · commit 7255bfdd5654 · 2025-07-22T16:09:53.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,7 @@ playwright-artifacts
 .env.test.local
 .env.production.local
 .vscode
+.cursor
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.scss
@@ -0,0 +1,9 @@
+.tenant-cpu {
+    &__tabs-container {
+        margin-top: var(--g-spacing-3);
+    }
+
+    &__tab-content {
+        margin-top: var(--g-spacing-3);
+    }
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx
@@ -1,6 +1,29 @@
 import React from 'react';
 
+import {ChevronRight} from '@gravity-ui/icons';
+import {
+    Button,
+    Flex,
+    Icon,
+    SegmentedRadioGroup,
+    Tab,
+    TabList,
+    TabProvider,
+} from '@gravity-ui/uikit';
+import {useLocation} from 'react-router-dom';
+
+import {InternalLink} from '../../../../../components/InternalLink';
+import {parseQuery} from '../../../../../routes';
+import {
+    TENANT_CPU_TABS_IDS,
+    TENANT_DIAGNOSTICS_TABS_IDS,
+} from '../../../../../store/reducers/tenant/constants';
+import {setCpuTab} from '../../../../../store/reducers/tenant/tenant';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {cn} from '../../../../../utils/cn';
+import {useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks';
+import {useDiagnosticsPageLinkGetter} from '../../../Diagnostics/DiagnosticsPages';
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
 
 import {TopNodesByCpu} from './TopNodesByCpu';
@@ -9,19 +32,127 @@ import {TopQueries} from './TopQueries';
 import {TopShards} from './TopShards';
 import {cpuDashboardConfig} from './cpuDashboardConfig';
 
+import './TenantCpu.scss';
+
+const b = cn('tenant-cpu');
+
+const cpuTabs = [
+    {id: TENANT_CPU_TABS_IDS.nodes, title: 'Top Nodes'},
+    {id: TENANT_CPU_TABS_IDS.shards, title: 'Top Shards'},
+    {id: TENANT_CPU_TABS_IDS.queries, title: 'Top Queries'},
+];
+
+const NodesModeIds = {
+    load: 'load',
+    pools: 'pools',
+} as const;
+
 interface TenantCpuProps {
     tenantName: string;
     additionalNodesProps?: AdditionalNodesProps;
 }
 
 export function TenantCpu({tenantName, additionalNodesProps}: TenantCpuProps) {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const {cpuTab = TENANT_CPU_TABS_IDS.nodes} = useTypedSelector((state) => state.tenant);
+    const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
+
+    const [nodesMode, setNodesMode] = React.useState(NodesModeIds.load);
+
+    const queryParams = parseQuery(location);
+
+    React.useEffect(() => {
+        if (!cpuTab) {
+            dispatch(setCpuTab(TENANT_CPU_TABS_IDS.nodes));
+        }
+    }, [cpuTab, dispatch]);
+
+    const renderNodesContent = () => {
+        const nodesModeControl = (
+            <SegmentedRadioGroup value={nodesMode} onUpdate={setNodesMode}>
+                <SegmentedRadioGroup.Option value={NodesModeIds.load}>
+                    By Load
+                </SegmentedRadioGroup.Option>
+                <SegmentedRadioGroup.Option value={NodesModeIds.pools}>
+                    By Pool Usage
+                </SegmentedRadioGroup.Option>
+            </SegmentedRadioGroup>
+        );
+
+        const allNodesButton = (
+            <Button
+                view="flat-secondary"
+                size="s"
+                href={getDiagnosticsPageLink(TENANT_DIAGNOSTICS_TABS_IDS.nodes)}
+            >
+                All Nodes
+                <Icon data={ChevronRight} size={16} />
+            </Button>
+        );
+
+        const nodesComponent =
+            nodesMode === NodesModeIds.load ? (
+                <TopNodesByLoad
+                    tenantName={tenantName}
+                    additionalNodesProps={additionalNodesProps}
+                />
+            ) : (
+                <TopNodesByCpu
+                    tenantName={tenantName}
+                    additionalNodesProps={additionalNodesProps}
+                />
+            );
+
+        return (
+            <Flex direction="column" gap={3}>
+                <Flex justifyContent="space-between" alignItems="center">
+                    {nodesModeControl}
+                    {allNodesButton}
+                </Flex>
+                {nodesComponent}
+            </Flex>
+        );
+    };
+
+    const renderTabContent = () => {
+        switch (cpuTab) {
+            case TENANT_CPU_TABS_IDS.nodes:
+                return renderNodesContent();
+            case TENANT_CPU_TABS_IDS.shards:
+                return <TopShards tenantName={tenantName} path={tenantName} />;
+            case TENANT_CPU_TABS_IDS.queries:
+                return <TopQueries tenantName={tenantName} />;
+            default:
+                return null;
+        }
+    };
+
     return (
         <React.Fragment>
             <TenantDashboard database={tenantName} charts={cpuDashboardConfig} />
-            <TopNodesByLoad tenantName={tenantName} additionalNodesProps={additionalNodesProps} />
-            <TopNodesByCpu tenantName={tenantName} additionalNodesProps={additionalNodesProps} />
-            <TopShards tenantName={tenantName} path={tenantName} />
-            <TopQueries tenantName={tenantName} />
+
+            <div className={b('tabs-container')}>
+                <TabProvider value={cpuTab}>
+                    <TabList size="m">
+                        {cpuTabs.map(({id, title}) => {
+                            const path = getTenantPath({
+                                ...queryParams,
+                                [TenantTabsGroups.cpuTab]: id,
+                            });
+                            return (
+                                <Tab key={id} value={id}>
+                                    <InternalLink to={path} as="tab">
+                                        {title}
+                                    </InternalLink>
+                                </Tab>
+                            );
+                        })}
+                    </TabList>
+                </TabProvider>
+
+                <div className={b('tab-content')}>{renderTabContent()}</div>
+            </div>
         </React.Fragment>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx
@@ -13,18 +13,15 @@ import {
 import type {GetNodesColumnsParams} from '../../../../../components/nodesColumns/types';
 import {nodesApi} from '../../../../../store/reducers/nodes/nodes';
 import type {NodesPreparedEntity} from '../../../../../store/reducers/nodes/types';
-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,
     TENANT_OVERVIEW_TABLES_SETTINGS,
 } from '../../../../../utils/constants';
-import {useAutoRefreshInterval, useSearchQuery} from '../../../../../utils/hooks';
+import {useAutoRefreshInterval} from '../../../../../utils/hooks';
 import {getRequiredDataFields} from '../../../../../utils/tableUtils/getRequiredDataFields';
-import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
-import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 function getTopNodesByCpuColumns(
@@ -50,8 +47,6 @@ interface TopNodesByCpuProps {
 }
 
 export function TopNodesByCpu({tenantName, additionalNodesProps}: TopNodesByCpuProps) {
-    const query = useSearchQuery();
-
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const [columns, fieldsRequired] = getTopNodesByCpuColumns({
         getNodeRef: additionalNodesProps?.getNodeRef,
@@ -74,22 +69,8 @@ export function TopNodesByCpu({tenantName, additionalNodesProps}: TopNodesByCpuP
 
     const topNodes = currentData?.Nodes || [];
 
-    const title = getSectionTitle({
-        entity: i18n('nodes'),
-        postfix: i18n('by-pools-usage'),
-        link: getTenantPath({
-            ...query,
-            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
-        }),
-    });
-
     return (
-        <TenantOverviewTableLayout
-            title={title}
-            loading={loading}
-            error={error}
-            withData={Boolean(currentData)}
-        >
+        <TenantOverviewTableLayout loading={loading} error={error} withData={Boolean(currentData)}>
             <ResizeableDataTable
                 columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
                 data={topNodes}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx
@@ -14,18 +14,15 @@ import {
 import type {GetNodesColumnsParams} from '../../../../../components/nodesColumns/types';
 import {nodesApi} from '../../../../../store/reducers/nodes/nodes';
 import type {NodesPreparedEntity} from '../../../../../store/reducers/nodes/types';
-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,
     TENANT_OVERVIEW_TABLES_SETTINGS,
 } from '../../../../../utils/constants';
-import {useAutoRefreshInterval, useSearchQuery} from '../../../../../utils/hooks';
+import {useAutoRefreshInterval} from '../../../../../utils/hooks';
 import {getRequiredDataFields} from '../../../../../utils/tableUtils/getRequiredDataFields';
-import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
-import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 function getTopNodesByLoadColumns(
@@ -55,8 +52,6 @@ interface TopNodesByLoadProps {
 }
 
 export function TopNodesByLoad({tenantName, additionalNodesProps}: TopNodesByLoadProps) {
-    const query = useSearchQuery();
-
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const [columns, fieldsRequired] = getTopNodesByLoadColumns({
         getNodeRef: additionalNodesProps?.getNodeRef,
@@ -79,22 +74,8 @@ export function TopNodesByLoad({tenantName, additionalNodesProps}: TopNodesByLoa
 
     const topNodes = currentData?.Nodes || [];
 
-    const title = getSectionTitle({
-        entity: i18n('nodes'),
-        postfix: i18n('by-load'),
-        link: getTenantPath({
-            ...query,
-            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
-        }),
-    });
-
     return (
-        <TenantOverviewTableLayout
-            title={title}
-            loading={loading}
-            error={error}
-            withData={Boolean(currentData)}
-        >
+        <TenantOverviewTableLayout loading={loading} error={error} withData={Boolean(currentData)}>
             <ResizeableDataTable
                 columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
                 data={topNodes}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
@@ -4,10 +4,9 @@
     height: 100%;
     padding-bottom: 20px;
 
-    &__tenant-name-wrapper {
-        display: flex;
-        overflow: hidden;
-        align-items: center;
+    // Make header font size smaller using project typography
+    .data-table__th {
+        @include mixins.subheader-1-typography();
     }
 
     &__top {
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
@@ -99,15 +99,15 @@ export function TenantOverview({
 
     const renderName = () => {
         return (
-            <div className={b('tenant-name-wrapper')}>
+            <Flex alignItems="center" style={{overflow: 'hidden'}}>
                 <EntityStatus
                     status={Overall}
                     name={Name || TENANT_DEFAULT_TITLE}
                     withLeftTrim
                     hasClipboardButton={Boolean(tenant)}
                     clipboardButtonAlwaysVisible
                 />
-            </div>
+            </Flex>
         );
     };
 
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.tsx
@@ -9,7 +9,7 @@ import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants';
 import {b} from './utils';
 
 interface TenantOverviewTableLayoutProps {
-    title: React.ReactNode;
+    title?: React.ReactNode;
     loading?: boolean;
     error?: unknown;
     tableClassNameModifiers?: NoStrictEntityMods;
@@ -38,7 +38,7 @@ export function TenantOverviewTableLayout({
     };
     return (
         <React.Fragment>
-            <div className={b('title')}>{title}</div>
+            {title && <div className={b('title')}>{title}</div>}
             {error ? <ResponseError error={error} /> : null}
             <div className={b('table', tableClassNameModifiers)}>{renderContent()}</div>
         </React.Fragment>
diff --git a/src/containers/Tenant/TenantPages.tsx b/src/containers/Tenant/TenantPages.tsx
@@ -26,6 +26,7 @@ export const TenantTabsGroups = {
     queryTab: 'queryTab',
     diagnosticsTab: 'diagnosticsTab',
     metricsTab: 'metricsTab',
+    cpuTab: 'cpuTab',
 } as const;
 
 export const TENANT_INFO_TABS = [
diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts
@@ -43,3 +43,9 @@ export const TENANT_METRICS_TABS_IDS = {
     storage: 'storage',
     memory: 'memory',
 } as const;
+
+export const TENANT_CPU_TABS_IDS = {
+    nodes: 'nodes',
+    shards: 'shards',
+    queries: 'queries',
+} as const;
diff --git a/src/store/reducers/tenant/tenant.ts b/src/store/reducers/tenant/tenant.ts
@@ -6,9 +6,10 @@ import type {TTenantInfo} from '../../../types/api/tenant';
 import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
 import {api} from '../api';
 
-import {TENANT_METRICS_TABS_IDS} from './constants';
+import {TENANT_CPU_TABS_IDS, TENANT_METRICS_TABS_IDS} from './constants';
 import {tenantPageSchema} from './types';
 import type {
+    TenantCpuTab,
     TenantDiagnosticsTab,
     TenantMetricsTab,
     TenantPage,
@@ -24,6 +25,7 @@ const tenantPage = tenantPageSchema
 export const initialState: TenantState = {
     tenantPage,
     metricsTab: TENANT_METRICS_TABS_IDS.cpu,
+    cpuTab: TENANT_CPU_TABS_IDS.nodes,
 };
 
 const slice = createSlice({
@@ -48,12 +50,21 @@ const slice = createSlice({
             const isValidTab = action.payload && validTabs.includes(action.payload as any);
             state.metricsTab = isValidTab ? action.payload : TENANT_METRICS_TABS_IDS.cpu;
         },
+        setCpuTab: (state, action: PayloadAction<TenantCpuTab>) => {
+            state.cpuTab = action.payload;
+        },
     },
 });
 
 export default slice.reducer;
-export const {setTenantPage, setQueryTab, setDiagnosticsTab, setSummaryTab, setMetricsTab} =
-    slice.actions;
+export const {
+    setTenantPage,
+    setQueryTab,
+    setDiagnosticsTab,
+    setSummaryTab,
+    setMetricsTab,
+    setCpuTab,
+} = slice.actions;
 
 export const tenantApi = api.injectEndpoints({
     endpoints: (builder) => ({
diff --git a/src/store/reducers/tenant/types.ts b/src/store/reducers/tenant/types.ts
diff --git a/src/store/state-url-mapping.ts b/src/store/state-url-mapping.ts
