fix: move query from redux to url

astandrik · astandrik · commit 424baa6b6459 · 2025-07-24T13:30:31.000+03:00
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 
 import {ArrowRight} from '@gravity-ui/icons';
 import {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_NODES_MODE_IDS,
     TENANT_CPU_TABS_IDS,
     TENANT_DIAGNOSTICS_TABS_IDS,
 } from '../../../../../store/reducers/tenant/constants';
-import {setNodesMode} 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 i18n from '../i18n';
 
@@ -25,6 +20,7 @@ import {TopNodesByLoad} from './TopNodesByLoad';
 import {TopQueries} from './TopQueries';
 import {TopShards} from './TopShards';
 import {cpuDashboardConfig} from './cpuDashboardConfig';
+import {useTenantCpuQueryParams} from './useTenantCpuQueryParams';
 
 import './TenantCpu.scss';
 
@@ -42,20 +38,13 @@ interface TenantCpuProps {
 }
 
 export function TenantCpu({tenantName, additionalNodesProps}: TenantCpuProps) {
-    const dispatch = useTypedDispatch();
-    const location = useLocation();
-    const {cpuTab = TENANT_CPU_TABS_IDS.nodes, nodesMode = TENANT_CPU_NODES_MODE_IDS.load} =
-        useTypedSelector((state) => state.tenant);
+    const {cpuTab, nodesMode, handleCpuTabChange, handleNodesModeChange} =
+        useTenantCpuQueryParams();
     const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
 
-    const queryParams = parseQuery(location);
-
     const renderNodesContent = () => {
         const nodesModeControl = (
-            <SegmentedRadioGroup
-                value={nodesMode}
-                onUpdate={(mode) => dispatch(setNodesMode(mode))}
-            >
+            <SegmentedRadioGroup value={nodesMode} onUpdate={handleNodesModeChange}>
                 <SegmentedRadioGroup.Option value={TENANT_CPU_NODES_MODE_IDS.load}>
                     {i18n('action_by-load')}
                 </SegmentedRadioGroup.Option>
@@ -120,15 +109,9 @@ export function TenantCpu({tenantName, additionalNodesProps}: TenantCpuProps) {
                 <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 key={id} value={id} onClick={() => handleCpuTabChange(id)}>
+                                    {title}
                                 </Tab>
                             );
                         })}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/useTenantCpuQueryParams.ts b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/useTenantCpuQueryParams.ts
@@ -0,0 +1,51 @@
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {
+    TENANT_CPU_NODES_MODE_IDS,
+    TENANT_CPU_TABS_IDS,
+} from '../../../../../store/reducers/tenant/constants';
+import type {TenantCpuTab, TenantNodesMode} from '../../../../../store/reducers/tenant/types';
+
+export function useTenantCpuQueryParams() {
+    const [queryParams, setQueryParams] = useQueryParams({
+        cpuTab: StringParam,
+        nodesMode: StringParam,
+    });
+
+    // Parse and validate cpuTab with fallback to nodes
+    const cpuTab: TenantCpuTab = (() => {
+        if (!queryParams.cpuTab) {
+            return TENANT_CPU_TABS_IDS.nodes;
+        }
+        const validTabs = Object.values(TENANT_CPU_TABS_IDS) as string[];
+        return validTabs.includes(queryParams.cpuTab)
+            ? (queryParams.cpuTab as TenantCpuTab)
+            : TENANT_CPU_TABS_IDS.nodes;
+    })();
+
+    // Parse and validate nodesMode with fallback to load
+    const nodesMode: TenantNodesMode = (() => {
+        if (!queryParams.nodesMode) {
+            return TENANT_CPU_NODES_MODE_IDS.load;
+        }
+        const validModes = Object.values(TENANT_CPU_NODES_MODE_IDS) as string[];
+        return validModes.includes(queryParams.nodesMode)
+            ? (queryParams.nodesMode as TenantNodesMode)
+            : TENANT_CPU_NODES_MODE_IDS.load;
+    })();
+
+    const handleCpuTabChange = (value: TenantCpuTab) => {
+        setQueryParams({cpuTab: value}, 'replaceIn');
+    };
+
+    const handleNodesModeChange = (value: TenantNodesMode) => {
+        setQueryParams({nodesMode: value}, 'replaceIn');
+    };
+
+    return {
+        cpuTab,
+        nodesMode,
+        handleCpuTabChange,
+        handleNodesModeChange,
+    };
+}
diff --git a/src/store/reducers/tenant/tenant.ts b/src/store/reducers/tenant/tenant.ts
@@ -6,13 +6,11 @@ import type {TTenantInfo} from '../../../types/api/tenant';
 import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
 import {api} from '../api';
 
-import {TENANT_CPU_NODES_MODE_IDS, TENANT_CPU_TABS_IDS, TENANT_METRICS_TABS_IDS} from './constants';
+import {TENANT_METRICS_TABS_IDS} from './constants';
 import {tenantPageSchema} from './types';
 import type {
-    TenantCpuTab,
     TenantDiagnosticsTab,
     TenantMetricsTab,
-    TenantNodesMode,
     TenantPage,
     TenantQueryTab,
     TenantState,
@@ -26,8 +24,6 @@ const tenantPage = tenantPageSchema
 export const initialState: TenantState = {
     tenantPage,
     metricsTab: TENANT_METRICS_TABS_IDS.cpu,
-    cpuTab: TENANT_CPU_TABS_IDS.nodes,
-    nodesMode: TENANT_CPU_NODES_MODE_IDS.load,
 };
 
 const slice = createSlice({
@@ -52,31 +48,12 @@ 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>) => {
-            // Ensure we always have a valid cpu tab - fallback to nodes if empty/invalid
-            const validTabs = Object.values(TENANT_CPU_TABS_IDS);
-            const isValidTab = action.payload && validTabs.includes(action.payload as any);
-            state.cpuTab = isValidTab ? action.payload : TENANT_CPU_TABS_IDS.nodes;
-        },
-        setNodesMode: (state, action: PayloadAction<TenantNodesMode>) => {
-            // Ensure we always have a valid nodes mode - fallback to load if empty/invalid
-            const validModes = Object.values(TENANT_CPU_NODES_MODE_IDS);
-            const isValidMode = action.payload && validModes.includes(action.payload as any);
-            state.nodesMode = isValidMode ? action.payload : TENANT_CPU_NODES_MODE_IDS.load;
-        },
     },
 });
 
 export default slice.reducer;
-export const {
-    setTenantPage,
-    setQueryTab,
-    setDiagnosticsTab,
-    setSummaryTab,
-    setMetricsTab,
-    setCpuTab,
-    setNodesMode,
-} = slice.actions;
+export const {setTenantPage, setQueryTab, setDiagnosticsTab, setSummaryTab, setMetricsTab} =
+    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
@@ -28,6 +28,4 @@ export interface TenantState {
     diagnosticsTab?: TenantDiagnosticsTab;
     summaryTab?: TenantSummaryTab;
     metricsTab: TenantMetricsTab;
-    cpuTab?: TenantCpuTab;
-    nodesMode?: TenantNodesMode;
 }
diff --git a/src/store/state-url-mapping.ts b/src/store/state-url-mapping.ts
@@ -53,14 +53,6 @@ export const paramSetup = {
             stateKey: 'tenant.metricsTab',
             initialState: initialTenantState.metricsTab,
         },
-        cpuTab: {
-            stateKey: 'tenant.cpuTab',
-            initialState: initialTenantState.cpuTab,
-        },
-        nodesMode: {
-            stateKey: 'tenant.nodesMode',
-            initialState: initialTenantState.nodesMode,
-        },
         shardsMode: {
             stateKey: 'shardsWorkload.mode',
         },

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,4 @@ export interface TenantState {`
`28`	`28`	`diagnosticsTab?: TenantDiagnosticsTab;`
`29`	`29`	`summaryTab?: TenantSummaryTab;`
`30`	`30`	`metricsTab: TenantMetricsTab;`
`31`		`- cpuTab?: TenantCpuTab;`
`32`		`- nodesMode?: TenantNodesMode;`
`33`	`31`	`}`