feat: update breadcrumbs (#432)

Author: artemmufazalov

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -26,6 +26,11 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
 
     const isNodeAvailable = !isUnavailableNode(node);
     const nodeRef = isNodeAvailable && getNodeRef ? getNodeRef(node) + 'internal' : undefined;
+    const nodePath = isNodeAvailable
+        ? getDefaultNodePath(node.NodeId, {
+              tenantName: node.TenantName,
+          })
+        : undefined;
 
     return (
         <div className={b()}>
@@ -39,7 +44,7 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
                     <EntityStatus
                         name={node.Host}
                         status={node.SystemState}
-                        path={isNodeAvailable ? getDefaultNodePath(node.NodeId) : undefined}
+                        path={nodePath}
                         hasClipboardButton
                         className={b('host')}
                     />

src/components/Tablet/Tablet.tsx

@@ -14,18 +14,32 @@ const b = cn('tablet');
 
 interface TabletProps {
     tablet?: TTabletStateInfo;
+    tenantName?: string;
 }
 
-export const Tablet = ({tablet = {}}: TabletProps) => {
-    const {TabletId: id} = tablet;
+export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
+    const {TabletId: id, NodeId, Type, State} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
+    const tabletPath =
+        id &&
+        createHref(
+            routes.tablet,
+            {id},
+            {
+                nodeId: NodeId,
+                type: Type,
+                state: State,
+                tenantName,
+            },
+        );
+
     return (
         <ContentWithPopup
             className={b('wrapper')}
             content={<TabletTooltipContent data={tablet} className={b('popup-content')} />}
         >
-            <InternalLink to={id && createHref(routes.tablet, {id})}>
+            <InternalLink to={tabletPath}>
                 <div className={b({status})}>
                     <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
                 </div>

src/containers/App/Content.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Switch, Route, Redirect, Router} from 'react-router-dom';
+import {Switch, Route, Redirect, Router, useLocation} from 'react-router-dom';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 
@@ -28,6 +28,8 @@ import {clusterTabsIds} from '../Cluster/utils';
 const b = cn('app');
 
 export function Content(props) {
+    const location = useLocation();
+
     const {singleClusterMode} = props;
     const isClustersPage =
         location.pathname.includes('/clusters') ||
@@ -54,7 +56,7 @@ export function Content(props) {
     };
     return (
         <React.Fragment>
-            {!isClustersPage && <Header clusterName={props.clusterName} />}
+            {!isClustersPage && <Header mainPage={props.mainPage} />}
             <main className={b('main')}>{renderRoute()}</main>
             <ReduxTooltip />
             <AppIcons />
@@ -66,6 +68,7 @@ Content.propTypes = {
     singleClusterMode: PropTypes.bool,
     children: PropTypes.node,
     clusterName: PropTypes.string,
+    mainPage: PropTypes.object,
 };
 
 function ContentWrapper(props) {

src/containers/Cluster/Cluster.tsx

@@ -10,7 +10,7 @@ import type {AdditionalClusterProps, AdditionalVersionsProps} from '../../types/
 import type {AdditionalNodesInfo} from '../../utils/nodes';
 import routes from '../../routes';
 
-import {setHeader} from '../../store/reducers/header';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
 import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
@@ -80,14 +80,7 @@ function Cluster({
     );
 
     useEffect(() => {
-        dispatch(
-            setHeader([
-                {
-                    text: Name || 'Cluster',
-                    link: getClusterPath(),
-                },
-            ]),
-        );
+        dispatch(setHeaderBreadcrumbs('cluster', {}));
     }, [dispatch, Name]);
 
     const versionToColor = useMemo(() => {

src/containers/Header/Header.scss

@@ -13,4 +13,13 @@
     border-bottom: 1px solid var(--yc-color-line-generic);
 
     @include body2-typography;
+
+    &__breadcrumb {
+        display: flex;
+        align-items: center;
+
+        &__icon {
+            margin-right: 3px;
+        }
+    }
 }

src/containers/Header/Header.tsx

@@ -1,14 +1,19 @@
+import {useEffect, useMemo} from 'react';
+import {useHistory, useLocation} from 'react-router';
+import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
-import {useHistory} from 'react-router';
 
-import {Breadcrumbs, BreadcrumbsItem} from '@gravity-ui/uikit';
+import {Breadcrumbs, Icon} from '@gravity-ui/uikit';
 
 import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 
 import {backend, customBackend} from '../../store';
-import {HeaderItemType} from '../../store/reducers/header';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {useTypedSelector} from '../../utils/hooks';
 import {DEVELOPER_UI} from '../../utils/constants';
+import {parseQuery} from '../../routes';
+
+import {RawBreadcrumbItem, getBreadcrumbs} from './breadcrumbs';
 
 import './Header.scss';
 
@@ -22,30 +27,80 @@ const getInternalLink = (singleClusterMode: boolean) => {
     return backend + '/internal';
 };
 
-function Header() {
-    const {singleClusterMode, header}: {singleClusterMode: boolean; header: HeaderItemType[]} =
-        useTypedSelector((state) => state);
+interface HeaderProps {
+    mainPage?: RawBreadcrumbItem;
+}
 
+function Header({mainPage}: HeaderProps) {
+    const dispatch = useDispatch();
     const history = useHistory();
+    const location = useLocation();
 
-    const renderHeader = () => {
-        const breadcrumbItems = header.reduce((acc, el) => {
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+    const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
+    const {data} = useTypedSelector((state) => state.cluster);
+
+    const queryParams = parseQuery(location);
+
+    const clusterNameFromQuery = queryParams.clusterName?.toString();
+
+    const clusterNameFinal = data?.Name || clusterNameFromQuery;
+
+    useEffect(() => {
+        dispatch(getClusterInfo(clusterNameFromQuery));
+    }, [dispatch, clusterNameFromQuery]);
+
+    const breadcrumbItems = useMemo(() => {
+        const rawBreadcrumbs: RawBreadcrumbItem[] = [];
+        let options = pageBreadcrumbsOptions;
+
+        if (mainPage) {
+            rawBreadcrumbs.push(mainPage);
+        }
+
+        if (clusterNameFinal) {
+            options = {
+                ...pageBreadcrumbsOptions,
+                clusterName: clusterNameFinal,
+            };
+        }
+
+        const breadcrumbs = getBreadcrumbs(page, options, rawBreadcrumbs, queryParams);
+
+        return breadcrumbs.map((item) => {
             const action = () => {
-                if (el.link) {
-                    history.push(el.link);
+                if (item.link) {
+                    history.push(item.link);
                 }
             };
-            acc.push({text: el.text, action});
-            return acc;
-        }, [] as BreadcrumbsItem[]);
+            return {...item, action};
+        });
+    }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
 
+    const renderHeader = () => {
         return (
             <header className={b()}>
                 <div>
                     <Breadcrumbs
                         items={breadcrumbItems}
                         lastDisplayedItemsCount={1}
                         firstDisplayedItemsCount={1}
+                        renderItemContent={({icon, text}) => {
+                            if (!icon) {
+                                return text;
+                            }
+                            return (
+                                <span className={b('breadcrumb')}>
+                                    <Icon
+                                        width={16}
+                                        height={16}
+                                        data={icon}
+                                        className={b('breadcrumb__icon')}
+                                    />
+                                    {text}
+                                </span>
+                            );
+                        }}
                     />
                 </div>
 

src/containers/Header/breadcrumbs.ts

@@ -0,0 +1,146 @@
+import nodesRightIcon from '@gravity-ui/icons/svgs/nodes-right.svg';
+import databaseIcon from '@gravity-ui/icons/svgs/database.svg';
+
+import type {
+    BreadcrumbsOptions,
+    ClusterBreadcrumbsOptions,
+    NodeBreadcrumbsOptions,
+    Page,
+    TabletBreadcrumbsOptions,
+    TabletsBreadcrumbsOptions,
+    TenantBreadcrumbsOptions,
+} from '../../store/reducers/header/types';
+import routes, {createHref} from '../../routes';
+
+import {getClusterPath} from '../Cluster/utils';
+import {getTenantPath} from '../Tenant/TenantPages';
+import {getDefaultNodePath} from '../Node/NodePages';
+
+const prepareTenantName = (tenantName: string) => {
+    return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;
+};
+
+export interface RawBreadcrumbItem {
+    text: string;
+    link?: string;
+    icon?: SVGIconData;
+}
+
+const getClusterBreadcrumbs = (
+    options: ClusterBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {clusterName, clusterTab} = options;
+
+    return [
+        {
+            text: clusterName || 'Cluster',
+            link: getClusterPath(clusterTab, query),
+            icon: nodesRightIcon,
+        },
+    ];
+};
+
+const getTenantBreadcrumbs = (
+    options: TenantBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tenantName} = options;
+
+    const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
+    const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
+
+    return [...getClusterBreadcrumbs(options, query), {text, link, icon: databaseIcon}];
+};
+
+const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
+    const {tenantName, nodeId} = options;
+
+    let breadcrumbs: RawBreadcrumbItem[];
+
+    // Compute nodes have tenantName, storage nodes doesn't
+    const isStorageNode = !tenantName;
+
+    if (isStorageNode) {
+        breadcrumbs = getClusterBreadcrumbs(options, query);
+    } else {
+        breadcrumbs = getTenantBreadcrumbs(options, query);
+    }
+
+    const text = nodeId ? `Node ${nodeId}` : 'Node';
+    const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
+
+    breadcrumbs.push({text, link});
+
+    return breadcrumbs;
+};
+
+const getTabletsBreadcrubms = (
+    options: TabletsBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tenantName, nodeIds, state, type} = options;
+
+    let breadcrumbs: RawBreadcrumbItem[];
+
+    // Cluster system tablets don't have tenantName
+    if (tenantName) {
+        breadcrumbs = getTenantBreadcrumbs(options, query);
+    } else {
+        breadcrumbs = getClusterBreadcrumbs(options, query);
+    }
+
+    const link = createHref(routes.tabletsFilters, undefined, {
+        nodeIds,
+        state,
+        type,
+        path: tenantName,
+    });
+
+    breadcrumbs.push({text: 'Tablets', link});
+
+    return breadcrumbs;
+};
+
+const getTabletBreadcrubms = (
+    options: TabletBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tabletId} = options;
+
+    const breadcrumbs = getTabletsBreadcrubms(options, query);
+
+    breadcrumbs.push({
+        text: tabletId || 'Tablet',
+    });
+
+    return breadcrumbs;
+};
+
+export const getBreadcrumbs = (
+    page: Page,
+    options: BreadcrumbsOptions,
+    rawBreadcrumbs: RawBreadcrumbItem[] = [],
+    query = {},
+) => {
+    switch (page) {
+        case 'cluster': {
+            return [...rawBreadcrumbs, ...getClusterBreadcrumbs(options, query)];
+        }
+        case 'tenant': {
+            return [...rawBreadcrumbs, ...getTenantBreadcrumbs(options, query)];
+        }
+        case 'node': {
+            return [...rawBreadcrumbs, ...getNodeBreadcrumbs(options, query)];
+        }
+        case 'tablets': {
+            return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
+        }
+        case 'tablet': {
+            return [...rawBreadcrumbs, ...getTabletBreadcrubms(options, query)];
+        }
+        default: {
+            return rawBreadcrumbs;
+        }
+    }
+};