fix(Header): add icons for nodes and tablets (#500)

Author: krosy1337

src/components/Tablet/Tablet.scss

@@ -1,17 +1,8 @@
 .tablet {
-    display: flex;
-    justify-content: center;
-
-    width: 23px;
-    height: 18px;
-
-    font-size: 10px;
     cursor: pointer;
-    text-transform: uppercase;
 
     color: var(--yc-color-text-complementary);
-    border: 1px solid var(--yc-color-base-generic-medium-hover);
-    border-radius: 4px;
+    border-color: var(--yc-color-base-generic-medium-hover);
 
     &__wrapper {
         margin-right: 2px;
@@ -25,12 +16,6 @@
         padding: 10px;
     }
 
-    &__type {
-        line-height: 17px;
-
-        color: var(--yc-color-text-complementary);
-    }
-
     &_status_gray {
         background-color: var(--yc-color-text-complementary);
     }

src/components/Tablet/Tablet.tsx

@@ -5,6 +5,7 @@ import {getTabletLabel} from '../../utils/constants';
 import routes, {createHref} from '../../routes';
 
 import {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
+import {TabletIcon} from '../TabletIcon/TabletIcon';
 import {InternalLink} from '../InternalLink';
 import {TabletTooltipContent} from '../TooltipsContent';
 
@@ -18,20 +19,19 @@ interface TabletProps {
 }
 
 export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId} = tablet;
+    const {TabletId: id, NodeId, Type} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath = id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName});
+    const tabletPath =
+        id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName, type: Type});
 
     return (
         <ContentWithPopup
             className={b('wrapper')}
             content={<TabletTooltipContent data={tablet} className={b('popup-content')} />}
         >
             <InternalLink to={tabletPath}>
-                <div className={b({status})}>
-                    <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
-                </div>
+                <TabletIcon className={b({status})} text={getTabletLabel(tablet.Type)} />
             </InternalLink>
         </ContentWithPopup>
     );

src/components/TabletIcon/TabletIcon.scss

@@ -0,0 +1,17 @@
+.tablet-icon {
+    display: flex;
+    justify-content: center;
+
+    width: 23px;
+    height: 16px;
+
+    font-size: 10px;
+    text-transform: uppercase;
+
+    border: 1px solid;
+    border-radius: 4px;
+
+    &__type {
+        line-height: 14px;
+    }
+}

src/components/TabletIcon/TabletIcon.tsx

@@ -0,0 +1,18 @@
+import cn from 'bem-cn-lite';
+
+import './TabletIcon.scss';
+
+interface TabletIconProps {
+    text?: string;
+    className?: string;
+}
+
+const b = cn('tablet-icon');
+
+export const TabletIcon = ({text, className}: TabletIconProps) => {
+    return (
+        <div className={b(null, className)}>
+            <div className={b('type')}>{text || 'T'}</div>
+        </div>
+    );
+};

src/containers/Header/Header.scss

@@ -15,6 +15,8 @@
         align-items: center;
 
         &__icon {
+            display: flex;
+
             margin-right: 3px;
         }
     }

src/containers/Header/Header.tsx

@@ -3,7 +3,7 @@ import {useHistory, useLocation} from 'react-router';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
-import {Breadcrumbs, Icon} from '@gravity-ui/uikit';
+import {Breadcrumbs} from '@gravity-ui/uikit';
 
 import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 
@@ -91,12 +91,7 @@ function Header({mainPage}: HeaderProps) {
                             }
                             return (
                                 <span className={b('breadcrumb')}>
-                                    <Icon
-                                        width={16}
-                                        height={16}
-                                        data={icon}
-                                        className={b('breadcrumb__icon')}
-                                    />
+                                    <div className={b('breadcrumb__icon')}>{icon}</div>
                                     {text}
                                 </span>
                             );

src/containers/Header/breadcrumbs.ts renamed to src/containers/Header/breadcrumbs.tsx

@@ -1,5 +1,9 @@
-import nodesRightIcon from '@gravity-ui/icons/svgs/nodes-right.svg';
-import databaseIcon from '@gravity-ui/icons/svgs/database.svg';
+import {
+    NodesRight as ClusterIcon,
+    Database as DatabaseIcon,
+    Cpu as ComputeNodeIcon,
+    HardDrive as StorageNodeIcon,
+} from '@gravity-ui/icons';
 
 import type {
     BreadcrumbsOptions,
@@ -15,8 +19,9 @@ import {
     TENANT_PAGE,
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
+import {TabletIcon} from '../../components/TabletIcon/TabletIcon';
 import routes, {createHref} from '../../routes';
-import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
+import {CLUSTER_DEFAULT_TITLE, getTabletLabel} from '../../utils/constants';
 
 import {getClusterPath} from '../Cluster/utils';
 import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
@@ -29,7 +34,7 @@ const prepareTenantName = (tenantName: string) => {
 export interface RawBreadcrumbItem {
     text: string;
     link?: string;
-    icon?: SVGIconData;
+    icon?: JSX.Element;
 }
 
 const getClusterBreadcrumbs = (
@@ -42,7 +47,7 @@ const getClusterBreadcrumbs = (
         {
             text: clusterName || CLUSTER_DEFAULT_TITLE,
             link: getClusterPath(clusterTab, query),
-            icon: nodesRightIcon,
+            icon: <ClusterIcon />,
         },
     ];
 };
@@ -56,7 +61,7 @@ const getTenantBreadcrumbs = (
     const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
     const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
 
-    return [...getClusterBreadcrumbs(options, query), {text, link, icon: databaseIcon}];
+    return [...getClusterBreadcrumbs(options, query), {text, link, icon: <DatabaseIcon />}];
 };
 
 const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
@@ -81,8 +86,13 @@ const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBre
 
     const text = nodeId ? `Node ${nodeId}` : 'Node';
     const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
+    const icon = isStorageNode ? <StorageNodeIcon /> : <ComputeNodeIcon />;
 
-    breadcrumbs.push({text, link});
+    breadcrumbs.push({
+        text,
+        link,
+        icon,
+    });
 
     return breadcrumbs;
 };
@@ -123,12 +133,13 @@ const getTabletBreadcrubms = (
     options: TabletBreadcrumbsOptions,
     query = {},
 ): RawBreadcrumbItem[] => {
-    const {tabletId} = options;
+    const {tabletId, tabletType} = options;
 
     const breadcrumbs = getTabletsBreadcrubms(options, query);
 
     breadcrumbs.push({
         text: tabletId || 'Tablet',
+        icon: <TabletIcon text={getTabletLabel(tabletType)} />,
     });
 
     return breadcrumbs;

src/containers/Tablet/Tablet.tsx

@@ -13,6 +13,7 @@ import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import '../../services/api';
 import {parseQuery} from '../../routes';
 
+import type {EType} from '../../types/api/tablet';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Tag} from '../../components/Tag';
@@ -48,10 +49,14 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
-    const {nodeId: queryNodeId, tenantName: queryTenantName} = parseQuery(location);
-
+    const {
+        nodeId: queryNodeId,
+        tenantName: queryTenantName,
+        type: queryTabletType,
+    } = parseQuery(location);
     const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
     const tenantName = tenantPath || queryTenantName?.toString();
+    const type = tablet.Type || (queryTabletType?.toString() as EType | undefined);
 
     // NOTE: should be reviewed when migrating to React 18
     useEffect(() => {
@@ -79,9 +84,10 @@ export const Tablet = () => {
                 nodeIds: nodeId ? [nodeId] : [],
                 tenantName,
                 tabletId: id,
+                tabletType: type,
             }),
         );
-    }, [dispatch, tenantName, id, nodeId]);
+    }, [dispatch, tenantName, id, nodeId, type]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (

src/store/reducers/header/types.ts

@@ -1,4 +1,5 @@
 import type {ClusterTab} from '../../../containers/Cluster/utils';
+import type {EType} from '../../../types/api/tablet';
 
 import {setHeaderBreadcrumbs} from './header';
 
@@ -23,6 +24,7 @@ export interface TabletsBreadcrumbsOptions extends TenantBreadcrumbsOptions {
 
 export interface TabletBreadcrumbsOptions extends TabletsBreadcrumbsOptions {
     tabletId?: string;
+    tabletType?: EType;
 }
 
 export type BreadcrumbsOptions =