ydb-embedded-ui 4.6.0 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [4.8.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.7.0...v4.8.0) (2023-06-26)
+
+
+### Features
+
+* **Tenant:** transform general tabs into left navigation items ([#431](https://github.com/ydb-platform/ydb-embedded-ui/issues/431)) ([7117b96](https://github.com/ydb-platform/ydb-embedded-ui/commit/7117b9622d5f6469dcc2bcc1c0d5cb71d4f94c0b))
+
+## [4.7.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.6.0...v4.7.0) (2023-06-23)
+
+
+### Features
+
+* **QueryEditor:** transform history and saved to tabs ([#427](https://github.com/ydb-platform/ydb-embedded-ui/issues/427)) ([6378ca7](https://github.com/ydb-platform/ydb-embedded-ui/commit/6378ca7013239b33e55c1f88fdde7cab3a102df6))
+* update breadcrumbs ([#432](https://github.com/ydb-platform/ydb-embedded-ui/issues/432)) ([e583a03](https://github.com/ydb-platform/ydb-embedded-ui/commit/e583a03fe0d77698f29c924e611133f015c3f7ad))
+
+
+### Bug Fixes
+
+* **Cluster:** add icons to tabs ([#430](https://github.com/ydb-platform/ydb-embedded-ui/issues/430)) ([e9e649f](https://github.com/ydb-platform/ydb-embedded-ui/commit/e9e649f614691e44172c9b93dd3119066c145413))
+* **ClusterInfo:** hide by default ([#435](https://github.com/ydb-platform/ydb-embedded-ui/issues/435)) ([ef2b353](https://github.com/ydb-platform/ydb-embedded-ui/commit/ef2b3535f2c6324a34c4386680f5050655a04eb4))
+* **Cluster:** use counter from uikit for tabs ([#428](https://github.com/ydb-platform/ydb-embedded-ui/issues/428)) ([19ca3bd](https://github.com/ydb-platform/ydb-embedded-ui/commit/19ca3bd14b15bdab1a9621939ddceee6d23b08ac))
+* **DetailedOverview:** prevent tenant info scroll on overflow ([#434](https://github.com/ydb-platform/ydb-embedded-ui/issues/434)) ([8ed6076](https://github.com/ydb-platform/ydb-embedded-ui/commit/8ed60760d54913d05f39d35d00a34c8b1d7d9738))
+* rename Internal Viewer to Developer UI ([#423](https://github.com/ydb-platform/ydb-embedded-ui/issues/423)) ([3eb21f3](https://github.com/ydb-platform/ydb-embedded-ui/commit/3eb21f35a230cc591f02ef9b195f99031f832e8a))
+* **Storage:** update columns ([#437](https://github.com/ydb-platform/ydb-embedded-ui/issues/437)) ([264fbc9](https://github.com/ydb-platform/ydb-embedded-ui/commit/264fbc984cd9ef1467110d3e2f5ed9b29a526c2b))
+* **Tablet:** clear tablet data on unmount ([#425](https://github.com/ydb-platform/ydb-embedded-ui/issues/425)) ([5d308cd](https://github.com/ydb-platform/ydb-embedded-ui/commit/5d308cdded342d7a40cbc6a91431d3f286c39b8a))
+* **TabletsStatistic:** use tenant backend ([#429](https://github.com/ydb-platform/ydb-embedded-ui/issues/429)) ([d290684](https://github.com/ydb-platform/ydb-embedded-ui/commit/d290684ba08aec8b66c0492ba571a5337b5b896c))
+
 ## [4.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.2...v4.6.0) (2023-06-13)
 
 

package/dist/assets/icons/versions.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.625 13.0156C8.625 13.2695 8.47266 13.498 8.24414 13.5742C8.04102 13.6758 7.76172 13.6504 7.58398 13.4727L5.55273 11.6445C5.42578 11.543 5.375 11.3652 5.375 11.1875C5.375 11.0352 5.42578 10.8574 5.55273 10.7559L7.58398 8.92773C7.76172 8.75 8.04102 8.72461 8.24414 8.82617C8.47266 8.90234 8.625 9.13086 8.625 9.35938V10.5781H9.03125C10.0215 10.5781 10.8594 9.76562 10.8594 8.75V4.61133C10.0215 4.35742 9.4375 3.57031 9.4375 2.65625C9.4375 1.53906 10.3262 0.625 11.4688 0.625C12.5859 0.625 13.5 1.53906 13.5 2.65625C13.5 3.57031 12.8906 4.35742 12.0781 4.61133V8.75C12.0781 10.4512 10.707 11.7969 9.03125 11.7969H8.625V13.0156ZM12.2812 2.65625C12.2812 2.22461 11.9004 1.84375 11.4688 1.84375C11.0117 1.84375 10.6562 2.22461 10.6562 2.65625C10.6562 3.11328 11.0117 3.46875 11.4688 3.46875C11.9004 3.46875 12.2812 3.11328 12.2812 2.65625ZM5.375 1.23438C5.375 1.00586 5.50195 0.777344 5.73047 0.701172C5.93359 0.599609 6.21289 0.625 6.39062 0.802734L8.42188 2.63086C8.54883 2.73242 8.625 2.91016 8.625 3.0625C8.625 3.24023 8.54883 3.41797 8.42188 3.51953L6.39062 5.34766C6.21289 5.52539 5.93359 5.55078 5.73047 5.44922C5.50195 5.37305 5.375 5.14453 5.375 4.89062V3.67188H4.96875C3.95312 3.67188 3.14062 4.50977 3.14062 5.5V9.66406C3.95312 9.91797 4.5625 10.7051 4.5625 11.5938C4.5625 12.7363 3.64844 13.625 2.53125 13.625C1.38867 13.625 0.5 12.7363 0.5 11.5938C0.5 10.7051 1.08398 9.91797 1.92188 9.66406V5.5C1.92188 3.82422 3.26758 2.45312 4.96875 2.45312H5.375V1.23438ZM1.71875 11.5938C1.71875 12.0508 2.07422 12.4062 2.53125 12.4062C2.96289 12.4062 3.34375 12.0508 3.34375 11.5938C3.34375 11.1621 2.96289 10.7812 2.53125 10.7812C2.07422 10.7812 1.71875 11.1621 1.71875 11.5938Z"/>
+</svg>

package/dist/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')}
                     />

package/dist/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>

package/dist/components/TabletsStatistic/TabletsStatistic.tsx

@@ -12,9 +12,9 @@ import './TabletsStatistic.scss';
 
 const b = cn('tablets-statistic');
 
-type ITablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
+type Tablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
 
-const prepareTablets = (tablets: ITablets) => {
+const prepareTablets = (tablets: Tablets) => {
     const res = tablets.map((tablet) => {
         return {
             label: getTabletLabel(tablet.Type),
@@ -28,25 +28,32 @@ const prepareTablets = (tablets: ITablets) => {
 };
 
 interface TabletsStatisticProps {
-    tablets: ITablets;
+    tablets: Tablets;
     path: string | undefined;
     nodeIds: string[] | number[];
+    backend?: string;
 }
 
-export const TabletsStatistic = ({tablets = [], path, nodeIds}: TabletsStatisticProps) => {
+export const TabletsStatistic = ({tablets = [], path, nodeIds, backend}: TabletsStatisticProps) => {
     const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
-        return (
-            <Link
-                to={createHref(routes.tabletsFilters, undefined, {
-                    nodeIds,
-                    state: item.state,
-                    type: item.type,
-                    path,
-                })}
-                key={index}
-                className={b('tablet', {state: item.state?.toLowerCase()})}
-            >
-                {item.label}: {item.count}
+        const tabletsPath = createHref(routes.tabletsFilters, undefined, {
+            nodeIds,
+            state: item.state,
+            type: item.type,
+            path,
+            backend,
+        });
+
+        const label = `${item.label}: ${item.count}`;
+        const className = b('tablet', {state: item.state?.toLowerCase()});
+
+        return backend ? (
+            <a href={tabletsPath} key={index} className={className}>
+                {label}
+            </a>
+        ) : (
+            <Link to={tabletsPath} key={index} className={className}>
+                {label}
             </Link>
         );
     };

package/dist/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) {

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -7,6 +7,9 @@ import cn from 'bem-cn-lite';
 import {Icon, Button} from '@gravity-ui/uikit';
 import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity-ui/navigation';
 
+import squareChartBarIcon from '@gravity-ui/icons/svgs/square-chart-bar.svg';
+import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
+
 import signOutIcon from '../../assets/icons/signOut.svg';
 import signInIcon from '../../assets/icons/signIn.svg';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
@@ -15,18 +18,20 @@ import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
 import supportIcon from '../../assets/icons/support.svg';
 
-import {UserSettings} from '../UserSettings/UserSettings';
-
-import routes, {createHref} from '../../routes';
-
 import {logout} from '../../store/reducers/authentication';
 import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
+import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
+import routes, {TENANT, createHref, parseQuery} from '../../routes';
+import {useSetting, useTypedSelector} from '../../utils/hooks';
+import {ASIDE_HEADER_COMPACT_KEY, TENANT_INITIAL_PAGE_KEY} from '../../utils/constants';
 
-import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
+import {getTenantPath} from '../Tenant/TenantPages';
+import {UserSettings} from '../UserSettings/UserSettings';
 
 import './AsideNavigation.scss';
 
 const b = cn('kv-navigation');
+
 interface MenuItem {
     id: string;
     title: string;
@@ -111,9 +116,6 @@ interface AsideNavigationProps {
     setSettingValue: (name: string, value: string) => void;
 }
 
-// FIXME: add items or delete
-const items: MenuItem[] = [];
-
 enum Panel {
     UserSettings = 'UserSettings',
 }
@@ -124,19 +126,49 @@ function AsideNavigation(props: AsideNavigationProps) {
 
     const [visiblePanel, setVisiblePanel] = useState<Panel>();
 
+    const [initialTenantPage, setInitialTenantPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
+    const {tenantPage = initialTenantPage} = useTypedSelector((state) => state.tenant);
+
     const setIsCompact = (compact: boolean) => {
         props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
     };
 
+    const {pathname} = location;
+    const queryParams = parseQuery(location);
+
+    const isTenantPage = pathname === `/${TENANT}`;
+
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
-        const {pathname} = location;
-        const menuItems: AsideHeaderMenuItem[] = items.map((item) => {
-            const locationKeysCoincidence = item.locationKeys?.filter((key) =>
-                pathname.startsWith(key),
-            );
-            const current =
-                (locationKeysCoincidence && locationKeysCoincidence.length > 0) ||
-                item.location.startsWith(pathname);
+        if (!isTenantPage) {
+            return [];
+        }
+
+        const items: MenuItem[] = [
+            {
+                id: TENANT_PAGES_IDS.diagnostics,
+                title: 'Diagnostics',
+                icon: squareChartBarIcon,
+                iconSize: 20,
+                location: getTenantPath({
+                    ...queryParams,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+                }),
+            },
+            {
+                id: TENANT_PAGES_IDS.query,
+                title: 'Query',
+                icon: pulseIcon,
+                iconSize: 20,
+                location: getTenantPath({
+                    ...queryParams,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+                }),
+            },
+        ];
+
+        return items.map((item) => {
+            const current = item.id === tenantPage;
+
             return {
                 id: item.id,
                 title: item.title,
@@ -144,12 +176,12 @@ function AsideNavigation(props: AsideNavigationProps) {
                 iconSize: item.iconSize,
                 current,
                 onItemClick: () => {
+                    setInitialTenantPage(item.id);
                     history.push(item.location);
                 },
             };
         });
-        return menuItems;
-    }, [location, history]);
+    }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]);
 
     return (
         <React.Fragment>

package/dist/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(() => {
@@ -124,13 +117,13 @@ function Cluster({
     const getTabEntityCount = (tabId: ClusterTab) => {
         switch (tabId) {
             case clusterTabsIds.tenants: {
-                return cluster?.Tenants;
+                return cluster?.Tenants ? Number(cluster.Tenants) : undefined;
             }
             case clusterTabsIds.nodes: {
-                return cluster?.NodesTotal;
+                return cluster?.NodesTotal ? Number(cluster.NodesTotal) : undefined;
             }
             default: {
-                return null;
+                return undefined;
             }
         }
     };
@@ -153,7 +146,7 @@ function Cluster({
                     items={clusterTabs.map((item) => {
                         return {
                             ...item,
-                            title: `${item.title} ${getTabEntityCount(item.id) || ''}`,
+                            counter: getTabEntityCount(item.id),
                         };
                     })}
                     wrapTo={({id}, node) => {

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -18,7 +18,7 @@ import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
 import {formatStorageValues} from '../../../utils';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
-import {CLUSTER_INFO_HIDDEN_KEY} from '../../../utils/constants';
+import {CLUSTER_INFO_HIDDEN_KEY, DEVELOPER_UI} from '../../../utils/constants';
 
 import {VersionsBar} from '../VersionsBar/VersionsBar';
 import {ClusterInfoSkeleton} from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
@@ -126,7 +126,7 @@ export const ClusterInfo = ({
 }: ClusterInfoProps) => {
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
 
-    const [clusterInfoHidden, setClusterInfoHidden] = useSetting(CLUSTER_INFO_HIDDEN_KEY, false);
+    const [clusterInfoHidden, setClusterInfoHidden] = useSetting<boolean>(CLUSTER_INFO_HIDDEN_KEY);
 
     const togleClusterInfoVisibility = () => {
         setClusterInfoHidden(!clusterInfoHidden);
@@ -141,7 +141,7 @@ export const ClusterInfo = ({
     const {info = [], links = []} = additionalClusterProps;
 
     const clusterInfo = getInfo(cluster, versionsValues, info, [
-        {title: 'Internal Viewer', url: internalLink},
+        {title: DEVELOPER_UI, url: internalLink},
         ...links,
     ]);
 

package/dist/containers/Cluster/{utils.ts → utils.tsx}

@@ -1,3 +1,10 @@
+import {Icon} from '@gravity-ui/uikit';
+import cubes3Icon from '@gravity-ui/icons/svgs/cubes-3.svg';
+import databasesIcon from '@gravity-ui/icons/svgs/databases.svg';
+import hardDriveIcon from '@gravity-ui/icons/svgs/hard-drive.svg';
+
+import versionsIcon from '../../assets/icons/versions.svg';
+
 import type {ValueOf} from '../../types/common';
 import routes, {createHref} from '../../routes';
 
@@ -13,18 +20,22 @@ export type ClusterTab = ValueOf<typeof clusterTabsIds>;
 const tenants = {
     id: clusterTabsIds.tenants,
     title: 'Databases',
+    icon: <Icon data={databasesIcon} />,
 };
 const nodes = {
     id: clusterTabsIds.nodes,
     title: 'Nodes',
+    icon: <Icon data={cubes3Icon} />,
 };
 const storage = {
     id: clusterTabsIds.storage,
     title: 'Storage',
+    icon: <Icon data={hardDriveIcon} />,
 };
 const versions = {
     id: clusterTabsIds.versions,
     title: 'Versions',
+    icon: <Icon data={versionsIcon} />,
 };
 
 export const clusterTabs = [tenants, nodes, storage, versions];

package/dist/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;
+        }
+    }
 }

package/dist/containers/Header/Header.tsx

@@ -1,13 +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';
 
@@ -21,23 +27,57 @@ 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>
@@ -45,11 +85,27 @@ function Header() {
                         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>
 
                 <ExternalLinkWithIcon
-                    title={'Internal Viewer'}
+                    title={DEVELOPER_UI}
                     url={getInternalLink(singleClusterMode)}
                 />
             </header>