fix(Consumers): enable navigation to Partitions tab

Author: artemmufazalov

src/containers/Tenant/Diagnostics/Consumers/columns/columns.tsx

@@ -1,9 +1,15 @@
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 import block from 'bem-cn-lite';
+import qs from 'qs';
 
 import type {IPreparedConsumerData} from '../../../../../types/store/topic';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import {InternalLink} from '../../../../../components/InternalLink';
 import {formatMsToUptime} from '../../../../../utils';
+import routes, {createHref} from '../../../../../routes';
+
+import {TenantTabsGroups} from '../../../TenantPages';
+import {GeneralPagesIds} from '../../DiagnosticsPages';
 
 import {
     CONSUMERS_COLUMNS_IDS,
@@ -23,7 +29,27 @@ export const columns: Column<IPreparedConsumerData>[] = [
         name: CONSUMERS_COLUMNS_IDS.CONSUMER,
         header: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.CONSUMER],
         align: DataTable.LEFT,
-        render: ({row}) => row.name || '-',
+        render: ({row}) => {
+            if (!row.name) {
+                return '–';
+            }
+
+            const queryParams = qs.parse(location.search, {
+                ignoreQueryPrefix: true,
+            });
+
+            return (
+                <InternalLink
+                    to={createHref(routes.tenant, undefined, {
+                        ...queryParams,
+                        [TenantTabsGroups.generalTab]: GeneralPagesIds.partitions,
+                        selectedConsumer: row.name,
+                    })}
+                >
+                    {row.name}
+                </InternalLink>
+            );
+        },
     },
     {
         name: CONSUMERS_COLUMNS_IDS.READ_SPEED,

src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx

@@ -1,5 +1,5 @@
 import block from 'bem-cn-lite';
-import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {escapeRegExp} from 'lodash/fp';
 
@@ -17,6 +17,7 @@ import {
     getConsumer,
     selectPreparedPartitionsData,
     setDataWasNotLoaded,
+    setSelectedConsumer,
 } from '../../../../store/reducers/consumer';
 
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
@@ -52,14 +53,17 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
 
     const dispatch = useDispatch();
 
-    const [selectedConsumer, setSelectedConsumer] = useState<string[]>();
+    const isFirstRenderRef = useRef(true);
+
     const [generalSearchValue, setGeneralSearchValue] = useState('');
     const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
 
     const [componentCurrentPath, setComponentCurrentPath] = useState(path);
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
-    const {loading, wasLoaded, error} = useTypedSelector((state) => state.consumer);
+    const {loading, wasLoaded, error, selectedConsumer} = useTypedSelector(
+        (state) => state.consumer,
+    );
 
     const partitions = useTypedSelector((state) => selectPreparedPartitionsData(state));
 
@@ -70,16 +74,24 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     useEffect(() => {
         // Manual path control to ensure it updates with other values so no request with wrong params will be sent
         setComponentCurrentPath(path);
-    }, [path]);
+
+        // Do not reset selected consumer on first effect call
+        // To enable navigating to specific consumer
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+        } else {
+            dispatch(setSelectedConsumer(undefined));
+        }
+    }, [dispatch, path]);
 
     const fetchConsumerData = useCallback(
         (isBackground: boolean) => {
             if (!isBackground) {
                 dispatch(setDataWasNotLoaded());
             }
 
-            if (selectedConsumer && selectedConsumer.length) {
-                dispatch(getConsumer(componentCurrentPath, selectedConsumer[0]));
+            if (selectedConsumer) {
+                dispatch(getConsumer(componentCurrentPath, selectedConsumer));
             }
         },
         [dispatch, selectedConsumer, componentCurrentPath],
@@ -99,12 +111,10 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     );
 
     useEffect(() => {
-        if (consumersToSelect && consumersToSelect.length) {
-            setSelectedConsumer([consumersToSelect[0].value]);
-        } else {
-            setSelectedConsumer(undefined);
+        if (consumersToSelect && consumersToSelect.length && !selectedConsumer) {
+            dispatch(setSelectedConsumer(consumersToSelect[0].value));
         }
-    }, [consumersToSelect]);
+    }, [dispatch, consumersToSelect, selectedConsumer]);
 
     const selectedColumns: string[] = useMemo(
         () =>
@@ -183,7 +193,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     };
 
     const handleConsumerSelectChange = (value: string[]) => {
-        setSelectedConsumer(value);
+        dispatch(setSelectedConsumer(value[0]));
     };
 
     const handlePartitionIdSearchChange = (value: string) => {
@@ -210,7 +220,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                     placeholder={i18n('controls.consumerSelector.placeholder')}
                     label={i18n('controls.consumerSelector')}
                     options={consumersToSelect}
-                    value={selectedConsumer}
+                    value={[selectedConsumer || '']}
                     onUpdate={handleConsumerSelectChange}
                 />
                 <Search

src/store/reducers/consumer.ts

@@ -20,6 +20,7 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 export const FETCH_CONSUMER = createRequestActionTypes('consumer', 'FETCH_CONSUMER');
 
 const SET_DATA_WAS_NOT_LOADED = 'consumer/SET_DATA_WAS_NOT_LOADED';
+const SET_SELECTED_CONSUMER = 'consumer/SET_SELECTED_CONSUMER';
 
 const initialState = {
     loading: false,
@@ -66,6 +67,12 @@ const consumer: Reducer<IConsumerState, IConsumerAction> = (state = initialState
                 wasLoaded: false,
             };
         }
+        case SET_SELECTED_CONSUMER: {
+            return {
+                ...state,
+                selectedConsumer: action.data,
+            };
+        }
         default:
             return state;
     }
@@ -77,6 +84,13 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
+export const setSelectedConsumer = (value?: string) => {
+    return {
+        type: SET_SELECTED_CONSUMER,
+        data: value,
+    } as const;
+};
+
 export function getConsumer(path?: string, consumerName?: string) {
     return createApiRequest({
         request: window.api.getConsumer({path, consumer: consumerName}),

src/store/state-url-mapping.js

@@ -67,6 +67,9 @@ const paramSetup = {
             stateKey: 'executeTopQueries.filters.to',
             type: 'number',
         },
+        selectedConsumer: {
+            stateKey: 'consumer.selectedConsumer',
+        },
     },
 };
 

src/types/store/consumer.ts

@@ -1,7 +1,11 @@
 import type {IProcessSpeedStats} from '../../utils/bytesParsers';
 import type {ApiRequestAction} from '../../store/utils';
 
-import {FETCH_CONSUMER, setDataWasNotLoaded} from '../../store/reducers/consumer';
+import {
+    FETCH_CONSUMER,
+    setDataWasNotLoaded,
+    setSelectedConsumer,
+} from '../../store/reducers/consumer';
 
 import type {DescribeConsumerResult} from '../api/consumer';
 import type {IResponseError} from '../api/error';
@@ -38,6 +42,7 @@ export interface IPreparedPartitionData {
 export interface IConsumerState {
     loading: boolean;
     wasLoaded: boolean;
+    selectedConsumer?: string;
     data?: DescribeConsumerResult;
     error?: IResponseError;
 }
@@ -48,7 +53,10 @@ type IConsumerApiRequestAction = ApiRequestAction<
     IResponseError
 >;
 
-export type IConsumerAction = IConsumerApiRequestAction | ReturnType<typeof setDataWasNotLoaded>;
+export type IConsumerAction =
+    | IConsumerApiRequestAction
+    | ReturnType<typeof setDataWasNotLoaded>
+    | ReturnType<typeof setSelectedConsumer>;
 
 export interface IConsumerRootStateSlice {
     consumer: IConsumerState;