fix(breadcrumbs): update tenant and tablet params (#443)

* fix(TabletsFilters): fix filters on empty values

* fix(Tablet): delete type and state from breadcrumbs params

Author: artemmufazalov

src/components/Tablet/Tablet.tsx

@@ -18,21 +18,10 @@ interface TabletProps {
 }
 
 export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId, Type, State} = tablet;
+    const {TabletId: id, NodeId} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath =
-        id &&
-        createHref(
-            routes.tablet,
-            {id},
-            {
-                nodeId: NodeId,
-                type: Type,
-                state: State,
-                tenantName,
-            },
-        );
+    const tabletPath = id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName});
 
     return (
         <ContentWithPopup

src/containers/Header/breadcrumbs.ts

@@ -10,10 +10,15 @@ import type {
     TabletsBreadcrumbsOptions,
     TenantBreadcrumbsOptions,
 } from '../../store/reducers/header/types';
+import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+} from '../../store/reducers/tenant/constants';
 import routes, {createHref} from '../../routes';
 
 import {getClusterPath} from '../Cluster/utils';
-import {getTenantPath} from '../Tenant/TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
 import {getDefaultNodePath} from '../Node/NodePages';
 
 const prepareTenantName = (tenantName: string) => {
@@ -61,10 +66,16 @@ const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBre
     // Compute nodes have tenantName, storage nodes doesn't
     const isStorageNode = !tenantName;
 
+    const newQuery = {
+        ...query,
+        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+    };
+
     if (isStorageNode) {
         breadcrumbs = getClusterBreadcrumbs(options, query);
     } else {
-        breadcrumbs = getTenantBreadcrumbs(options, query);
+        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
     }
 
     const text = nodeId ? `Node ${nodeId}` : 'Node';
@@ -79,21 +90,26 @@ const getTabletsBreadcrubms = (
     options: TabletsBreadcrumbsOptions,
     query = {},
 ): RawBreadcrumbItem[] => {
-    const {tenantName, nodeIds, state, type} = options;
+    const {tenantName, nodeIds} = options;
+
+    const newQuery = {
+        ...query,
+        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
+    };
 
     let breadcrumbs: RawBreadcrumbItem[];
 
     // Cluster system tablets don't have tenantName
     if (tenantName) {
-        breadcrumbs = getTenantBreadcrumbs(options, query);
+        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
     } else {
         breadcrumbs = getClusterBreadcrumbs(options, query);
     }
 
     const link = createHref(routes.tabletsFilters, undefined, {
+        ...query,
         nodeIds,
-        state,
-        type,
         path: tenantName,
     });
 

src/containers/Tablet/Tablet.tsx

@@ -48,16 +48,9 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
-    const {
-        nodeId: queryNodeId,
-        type: queryType,
-        state: queryState,
-        tenantName: queryTenantName,
-    } = parseQuery(location);
+    const {nodeId: queryNodeId, tenantName: queryTenantName} = parseQuery(location);
 
     const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
-    const tabletState = tablet.State || queryState?.toString();
-    const tabletType = tablet.Type || queryType?.toString();
     const tenantName = tenantPath || queryTenantName?.toString();
 
     // NOTE: should be reviewed when migrating to React 18
@@ -84,13 +77,11 @@ export const Tablet = () => {
         dispatch(
             setHeaderBreadcrumbs('tablet', {
                 nodeIds: nodeId ? [nodeId] : [],
-                state: tabletState,
-                type: tabletType,
                 tenantName,
                 tabletId: id,
             }),
         );
-    }, [dispatch, tenantName, id, nodeId, tabletState, tabletType]);
+    }, [dispatch, tenantName, id, nodeId]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (

src/containers/TabletsFilters/TabletsFilters.js

@@ -81,10 +81,15 @@ class TabletsFilters extends React.Component {
         });
         const {nodeIds, type, path, state} = queryParams;
         const nodes = TabletsFilters.parseNodes(nodeIds);
-        const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
 
-        setStateFilter(stateFilter);
-        setTypeFilter([type]);
+        if (state) {
+            const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
+            setStateFilter(stateFilter);
+        }
+
+        if (type) {
+            setTypeFilter([type]);
+        }
 
         this.setState({nodeFilter: nodes, tenantPath: path}, () => {
             this.makeRequest();

src/store/reducers/header/types.ts

@@ -19,8 +19,6 @@ export interface NodeBreadcrumbsOptions extends TenantBreadcrumbsOptions {
 
 export interface TabletsBreadcrumbsOptions extends TenantBreadcrumbsOptions {
     nodeIds?: string[] | number[];
-    state?: string;
-    type?: string;
 }
 
 export interface TabletBreadcrumbsOptions extends TabletsBreadcrumbsOptions {