From 7cd8f7a0c6b6ab915b69c9e512d118032d95d4db Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Thu, 13 Jun 2024 15:00:13 +0300
Subject: [PATCH 01/13] feat(Header): use InternalLink for breadcrumb items

---
 src/containers/Header/Header.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx
index 359057da7b..93508c2921 100644
--- a/src/containers/Header/Header.tsx
+++ b/src/containers/Header/Header.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {Breadcrumbs} from '@gravity-ui/uikit';
 import {useHistory, useLocation} from 'react-router';
 
+import {InternalLink} from '../../components/InternalLink';
 import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
 import {parseQuery} from '../../routes';
 import {backend, customBackend} from '../../store';
@@ -80,15 +81,22 @@ function Header({mainPage}: HeaderProps) {
                         items={breadcrumbItems}
                         lastDisplayedItemsCount={1}
                         firstDisplayedItemsCount={1}
-                        renderItemContent={({icon, text}) => {
-                            if (!icon) {
-                                return text;
-                            }
-                            return (
+                        renderItem={({item, isCurrent}) => {
+                            const {icon, text, link} = item;
+
+                            const content = icon ? (
                                 <span className={b('breadcrumb')}>
                                     <div className={b('breadcrumb__icon')}>{icon}</div>
                                     {text}
                                 </span>
+                            ) : (
+                                text
+                            );
+
+                            return (
+                                <InternalLink to={isCurrent ? undefined : link}>
+                                    {content}
+                                </InternalLink>
                             );
                         }}
                     />

From 91008f00de2134a20e9fac2f990305413a1cdcb3 Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Tue, 18 Jun 2024 16:09:37 +0300
Subject: [PATCH 02/13] chore(Header): use Link as BreadcrumbItem

---
 src/containers/Header/Header.scss | 12 ++++++++++
 src/containers/Header/Header.tsx  | 37 +++++++++++--------------------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/containers/Header/Header.scss b/src/containers/Header/Header.scss
index 5b3e073f0c..252d2b7031 100644
--- a/src/containers/Header/Header.scss
+++ b/src/containers/Header/Header.scss
@@ -20,4 +20,16 @@
             margin-right: 3px;
         }
     }
+
+    .g-breadcrumbs {
+        color: var(--g-color-text-primary);
+
+        .g-link {
+            color: var(--g-color-text-secondary);
+
+            &:hover {
+                color: var(--g-color-text-complementary);
+            }
+        }
+    }
 }
diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx
index 93508c2921..fd822c21bb 100644
--- a/src/containers/Header/Header.tsx
+++ b/src/containers/Header/Header.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {Breadcrumbs} from '@gravity-ui/uikit';
+import _ from 'lodash';
 import {useHistory, useLocation} from 'react-router';
 
 import {InternalLink} from '../../components/InternalLink';
@@ -34,44 +35,32 @@ interface HeaderProps {
 function Header({mainPage}: HeaderProps) {
     const history = useHistory();
     const location = useLocation();
+    const queryParams = parseQuery(location);
 
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
 
-    const queryParams = parseQuery(location);
-
-    const clusterNameFromQuery = queryParams.clusterName?.toString();
-    const {currentData: {clusterData: data} = {}} =
-        clusterApi.useGetClusterInfoQuery(clusterNameFromQuery);
+    const clusterInfo = clusterApi.useGetClusterInfoQuery(queryParams.clusterName);
 
-    const clusterNameFinal = data?.Name || clusterNameFromQuery;
+    const clusterName = _.get(
+        clusterInfo,
+        ['currentData', 'clusterData', 'Name'],
+        queryParams.clusterName,
+    );
 
     const breadcrumbItems = React.useMemo(() => {
         const rawBreadcrumbs: RawBreadcrumbItem[] = [];
-        let options = pageBreadcrumbsOptions;
-
-        if (mainPage) {
-            rawBreadcrumbs.push(mainPage);
-        }
+        const options = pageBreadcrumbsOptions;
 
-        if (clusterNameFinal) {
-            options = {
-                ...pageBreadcrumbsOptions,
-                clusterName: clusterNameFinal,
-            };
-        }
+        if (mainPage) rawBreadcrumbs.push(mainPage);
+        if (clusterName) options.clusterName = clusterName;
 
         const breadcrumbs = getBreadcrumbs(page, options, rawBreadcrumbs, queryParams);
 
         return breadcrumbs.map((item) => {
-            const action = () => {
-                if (item.link) {
-                    history.push(item.link);
-                }
-            };
-            return {...item, action};
+            return {...item, action: () => {}};
         });
-    }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
+    }, [clusterName, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
 
     const renderHeader = () => {
         return (

From 1eb4533e56ffe606f733c6e8b6313381be40e936 Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Tue, 18 Jun 2024 16:11:23 +0300
Subject: [PATCH 03/13] refactor(Header): add global.d.ts, refactor breadcrumbs

---
 src/containers/Header/breadcrumbs.tsx | 178 ++++++++++++--------------
 src/routes.ts                         |   5 +-
 src/types/global.d.ts                 |   1 +
 3 files changed, 81 insertions(+), 103 deletions(-)
 create mode 100644 src/types/global.d.ts

diff --git a/src/containers/Header/breadcrumbs.tsx b/src/containers/Header/breadcrumbs.tsx
index 5aaa876f78..e62cb75821 100644
--- a/src/containers/Header/breadcrumbs.tsx
+++ b/src/containers/Header/breadcrumbs.tsx
@@ -40,10 +40,16 @@ export interface RawBreadcrumbItem {
     icon?: JSX.Element;
 }
 
-const getClusterBreadcrumbs = (
-    options: ClusterBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
+interface GetBreadcrumbs<T, U = AnyRecord> {
+    (options: T, query?: U): RawBreadcrumbItem[];
+}
+
+const getQueryForTenant = (type: 'nodes' | 'tablets') => ({
+    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+    [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS[type],
+});
+
+const getClusterBreadcrumbs: GetBreadcrumbs<ClusterBreadcrumbsOptions> = (options, query = {}) => {
     const {clusterName, clusterTab} = options;
 
     return [
@@ -55,109 +61,91 @@ const getClusterBreadcrumbs = (
     ];
 };
 
-const getTenantBreadcrumbs = (
-    options: TenantBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
+const getTenantBreadcrumbs: GetBreadcrumbs<TenantBreadcrumbsOptions> = (options, query = {}) => {
     const {tenantName} = options;
 
+    const breadcrumbs = getClusterBreadcrumbs(options, query);
+
     const text = tenantName ? prepareTenantName(tenantName) : headerKeyset('breadcrumbs.tenant');
     const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
 
-    return [...getClusterBreadcrumbs(options, query), {text, link, icon: <DatabaseIcon />}];
+    const lastItem = {text, link, icon: <DatabaseIcon />};
+    breadcrumbs.push(lastItem);
+
+    return breadcrumbs;
 };
 
-const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
+const getNodeBreadcrumbs: GetBreadcrumbs<NodeBreadcrumbsOptions> = (options, query = {}) => {
     const {tenantName, nodeId} = options;
-
-    let breadcrumbs: RawBreadcrumbItem[];
-
     // Compute nodes have tenantName, storage nodes doesn't
-    const isStorageNode = !tenantName;
+    const isStorage = !tenantName;
 
-    const newQuery = {
-        ...query,
-        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
-        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
-    };
+    const tenantQuery = getQueryForTenant('nodes');
 
-    if (isStorageNode) {
-        breadcrumbs = getClusterBreadcrumbs(options, query);
-    } else {
-        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
-    }
+    const breadcrumbs = isStorage
+        ? getClusterBreadcrumbs(options, query)
+        : getTenantBreadcrumbs(options, {...query, ...tenantQuery});
 
-    const text = nodeId
-        ? `${headerKeyset('breadcrumbs.node')} ${nodeId}`
-        : headerKeyset('breadcrumbs.node');
-    const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
-    const icon = isStorageNode ? <StorageNodeIcon /> : <ComputeNodeIcon />;
+    let text = headerKeyset('breadcrumbs.node');
+    if (nodeId) text += ` ${nodeId}`;
 
-    breadcrumbs.push({
+    const lastItem = {
         text,
-        link,
-        icon,
-    });
+        link: nodeId ? getDefaultNodePath(nodeId, query) : undefined,
+        icon: isStorage ? <StorageNodeIcon /> : <ComputeNodeIcon />,
+    };
+
+    breadcrumbs.push(lastItem);
 
     return breadcrumbs;
 };
 
-const getPDiskBreadcrumbs = (options: PDiskBreadcrumbsOptions, query = {}) => {
+const getPDiskBreadcrumbs: GetBreadcrumbs<PDiskBreadcrumbsOptions> = (options, query = {}) => {
     const {nodeId, pDiskId} = options;
 
     const breadcrumbs = getNodeBreadcrumbs({
-        // PDisks relate to storage Nodes, they don't have tenant name
-        tenantName: undefined,
-        nodeId: nodeId,
+        nodeId,
     });
 
-    const text = pDiskId
-        ? `${headerKeyset('breadcrumbs.pDisk')} ${pDiskId}`
-        : headerKeyset('breadcrumbs.pDisk');
-    const link = pDiskId && nodeId ? getPDiskPagePath(pDiskId, nodeId, query) : undefined;
+    let text = headerKeyset('breadcrumbs.pDisk');
+    if (pDiskId) text += ` ${pDiskId}`;
 
-    breadcrumbs.push({
+    const hasLink = pDiskId && nodeId;
+    const link = hasLink ? getPDiskPagePath(pDiskId, nodeId, query) : undefined;
+
+    const lastItem = {
         text,
         link,
-    });
+    };
+    breadcrumbs.push(lastItem);
 
     return breadcrumbs;
 };
 
-const getVDiskBreadcrumbs = (options: VDiskBreadcrumbsOptions, query = {}) => {
+const getVDiskBreadcrumbs: GetBreadcrumbs<VDiskBreadcrumbsOptions> = (options, query = {}) => {
     const {vDiskSlotId} = options;
 
     const breadcrumbs = getPDiskBreadcrumbs(options, query);
 
-    const text = vDiskSlotId
-        ? `${headerKeyset('breadcrumbs.vDisk')} ${vDiskSlotId}`
-        : headerKeyset('breadcrumbs.vDisk');
+    let text = headerKeyset('breadcrumbs.vDisk');
+    if (vDiskSlotId) text += ` ${vDiskSlotId}`;
 
-    breadcrumbs.push({text});
+    const lastItem = {
+        text,
+    };
+    breadcrumbs.push(lastItem);
 
     return breadcrumbs;
 };
 
-const getTabletsBreadcrubms = (
-    options: TabletsBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
+const getTabletsBreadcrumbs: GetBreadcrumbs<TabletsBreadcrumbsOptions> = (options, query = {}) => {
     const {tenantName, nodeIds} = options;
 
-    const newQuery = {
-        ...query,
-        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
-        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
-    };
-
-    let breadcrumbs: RawBreadcrumbItem[];
+    const tenantQuery = getQueryForTenant('tablets');
 
-    // Cluster system tablets don't have tenantName
-    if (tenantName) {
-        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
-    } else {
-        breadcrumbs = getClusterBreadcrumbs(options, query);
-    }
+    const breadcrumbs = tenantName
+        ? getTenantBreadcrumbs(options, {...query, ...tenantQuery})
+        : getClusterBreadcrumbs(options, query);
 
     const link = createHref(routes.tabletsFilters, undefined, {
         ...query,
@@ -165,57 +153,49 @@ const getTabletsBreadcrubms = (
         path: tenantName,
     });
 
-    breadcrumbs.push({text: headerKeyset('breadcrumbs.tablets'), link});
+    const lastItem = {text: headerKeyset('breadcrumbs.tablets'), link};
+    breadcrumbs.push(lastItem);
 
     return breadcrumbs;
 };
 
-const getTabletBreadcrubms = (
-    options: TabletBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
+const getTabletBreadcrumbs: GetBreadcrumbs<TabletBreadcrumbsOptions> = (options, query = {}) => {
     const {tabletId, tabletType} = options;
 
-    const breadcrumbs = getTabletsBreadcrubms(options, query);
+    const breadcrumbs = getTabletsBreadcrumbs(options, query);
 
-    breadcrumbs.push({
+    const lastItem = {
         text: tabletId || headerKeyset('breadcrumbs.tablet'),
         icon: <TabletIcon text={getTabletLabel(tabletType)} />,
-    });
+    };
+
+    breadcrumbs.push(lastItem);
 
     return breadcrumbs;
 };
 
+const mapPageToGetter = {
+    cluster: getClusterBreadcrumbs,
+    node: getNodeBreadcrumbs,
+    pDisk: getPDiskBreadcrumbs,
+    tablet: getTabletBreadcrumbs,
+    tablets: getTabletsBreadcrumbs,
+    tenant: getTenantBreadcrumbs,
+    vDisk: getVDiskBreadcrumbs,
+} as const;
+
 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 'pDisk': {
-            return [...rawBreadcrumbs, ...getPDiskBreadcrumbs(options, query)];
-        }
-        case 'vDisk': {
-            return [...rawBreadcrumbs, ...getVDiskBreadcrumbs(options, query)];
-        }
-        case 'tablets': {
-            return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
-        }
-        case 'tablet': {
-            return [...rawBreadcrumbs, ...getTabletBreadcrubms(options, query)];
-        }
-        default: {
-            return rawBreadcrumbs;
-        }
-    }
+    if (!page) return rawBreadcrumbs;
+
+    const getter = mapPageToGetter[page];
+
+    return [...rawBreadcrumbs, ...getter(options, query)].map((item) => ({
+        ...item,
+        action: () => {},
+    }));
 };
diff --git a/src/routes.ts b/src/routes.ts
index a2d3e46b24..6a50d66e25 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -50,10 +50,7 @@ const prepareRoute = (route: string) => {
     return preparedRoute;
 };
 
-export type Query = Record<
-    string | number,
-    string | number | string[] | number[] | undefined | null
->;
+export type Query = AnyRecord;
 
 export function createHref(
     route: string,
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 0000000000..fa4d2d94ac
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1 @@
+declare type AnyRecord = Record<string | number | symbol, unknown>;

From 72b21c290c6aec26be6d15117906052827c2964a Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Tue, 18 Jun 2024 16:13:14 +0300
Subject: [PATCH 04/13] chore(Tablets): show hint for followers

---
 src/containers/Tablets/Tablets.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Tablets/Tablets.tsx b/src/containers/Tablets/Tablets.tsx
index b3b84bd7fe..6fc6fb99fa 100644
--- a/src/containers/Tablets/Tablets.tsx
+++ b/src/containers/Tablets/Tablets.tsx
@@ -34,7 +34,7 @@ const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
         render: ({row}) => {
             return (
                 <span>
-                    {row.Type} {row.Leader ? <Text color="secondary">leader</Text> : ''}
+                    {row.Type} {row.Leader ? '' : <Text color="secondary">follower</Text>}
                 </span>
             );
         },

From d7a7c9ea1342e4b42b59124091dcfb784708f78a Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 08:29:28 +0300
Subject: [PATCH 05/13] feat(Tenant): add diagnostics empty tab to query tabs

---
 src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx | 7 +++++--
 src/containers/Tenant/Query/i18n/en.json            | 1 +
 src/store/reducers/tenant/constants.ts              | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx b/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx
index 047c81cd2d..cb7a250162 100644
--- a/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx
+++ b/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx
@@ -20,8 +20,11 @@ const saved = {
     id: TENANT_QUERY_TABS_ID.saved,
     title: i18n('tabs.saved'),
 };
-
-export const queryEditorTabs = [newQuery, history, saved];
+const diagnostics = {
+    id: TENANT_QUERY_TABS_ID.diagnostics,
+    title: i18n('tabs.diagnostics'),
+};
+export const queryEditorTabs = [newQuery, history, saved, diagnostics];
 
 interface QueryEditorTabsProps {
     className?: string;
diff --git a/src/containers/Tenant/Query/i18n/en.json b/src/containers/Tenant/Query/i18n/en.json
index 8d2c29cf8e..d8da9c46f2 100644
--- a/src/containers/Tenant/Query/i18n/en.json
+++ b/src/containers/Tenant/Query/i18n/en.json
@@ -4,6 +4,7 @@
   "tabs.newQuery": "Query",
   "tabs.history": "History",
   "tabs.saved": "Saved",
+  "tabs.diagnostics": "Diagnostics",
 
   "history.empty": "History is empty",
   "saved.empty": "There are no saved queries",
diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts
index d7818309a2..1c817c4413 100644
--- a/src/store/reducers/tenant/constants.ts
+++ b/src/store/reducers/tenant/constants.ts
@@ -9,6 +9,7 @@ export const TENANT_QUERY_TABS_ID = {
     newQuery: 'newQuery',
     history: 'history',
     saved: 'saved',
+    diagnostics: 'diagnostics',
 } as const;
 
 export const TENANT_DIAGNOSTICS_TABS_IDS = {

From fe608b92c63638e53982b282159d90f71ad6ed7b Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 14:49:27 +0300
Subject: [PATCH 06/13] chore(Header): remove override uikit styles

---
 src/containers/Header/Header.scss | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/containers/Header/Header.scss b/src/containers/Header/Header.scss
index 252d2b7031..9df971afe7 100644
--- a/src/containers/Header/Header.scss
+++ b/src/containers/Header/Header.scss
@@ -8,8 +8,17 @@
 
     padding: 0 20px 0 12px;
 
+    color: var(--g-color-text-primary);
     border-bottom: 1px solid var(--g-color-line-generic);
 
+    a {
+        color: var(--g-color-text-secondary);
+
+        &:hover {
+            color: var(--g-color-text-complementary);
+        }
+    }
+
     &__breadcrumb {
         display: flex;
         align-items: center;
@@ -20,16 +29,4 @@
             margin-right: 3px;
         }
     }
-
-    .g-breadcrumbs {
-        color: var(--g-color-text-primary);
-
-        .g-link {
-            color: var(--g-color-text-secondary);
-
-            &:hover {
-                color: var(--g-color-text-complementary);
-            }
-        }
-    }
 }

From edc3e77aac6ca554ea2aeffc1994b70a78f449fd Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 14:52:56 +0300
Subject: [PATCH 07/13] perf(): import only part of library

---
 src/containers/Header/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx
index fd822c21bb..e5b31bccb2 100644
--- a/src/containers/Header/Header.tsx
+++ b/src/containers/Header/Header.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Breadcrumbs} from '@gravity-ui/uikit';
-import _ from 'lodash';
+import {get} from 'lodash';
 import {useHistory, useLocation} from 'react-router';
 
 import {InternalLink} from '../../components/InternalLink';
@@ -42,7 +42,7 @@ function Header({mainPage}: HeaderProps) {
 
     const clusterInfo = clusterApi.useGetClusterInfoQuery(queryParams.clusterName);
 
-    const clusterName = _.get(
+    const clusterName = get(
         clusterInfo,
         ['currentData', 'clusterData', 'Name'],
         queryParams.clusterName,

From b8bc9b60eb5c889174a252384c39df543194b060 Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 14:57:25 +0300
Subject: [PATCH 08/13] chore(): use curly braces for if statements (no
 one-liners)

---
 src/containers/Header/Header.tsx      |  9 +++++++--
 src/containers/Header/breadcrumbs.tsx | 16 ++++++++++++----
 src/utils/utils.js                    |  4 +++-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx
index e5b31bccb2..faeb0b80be 100644
--- a/src/containers/Header/Header.tsx
+++ b/src/containers/Header/Header.tsx
@@ -52,8 +52,13 @@ function Header({mainPage}: HeaderProps) {
         const rawBreadcrumbs: RawBreadcrumbItem[] = [];
         const options = pageBreadcrumbsOptions;
 
-        if (mainPage) rawBreadcrumbs.push(mainPage);
-        if (clusterName) options.clusterName = clusterName;
+        if (mainPage) {
+            rawBreadcrumbs.push(mainPage);
+        }
+
+        if (clusterName) {
+            options.clusterName = clusterName;
+        }
 
         const breadcrumbs = getBreadcrumbs(page, options, rawBreadcrumbs, queryParams);
 
diff --git a/src/containers/Header/breadcrumbs.tsx b/src/containers/Header/breadcrumbs.tsx
index e62cb75821..bf16dcc9c5 100644
--- a/src/containers/Header/breadcrumbs.tsx
+++ b/src/containers/Header/breadcrumbs.tsx
@@ -87,7 +87,9 @@ const getNodeBreadcrumbs: GetBreadcrumbs<NodeBreadcrumbsOptions> = (options, que
         : getTenantBreadcrumbs(options, {...query, ...tenantQuery});
 
     let text = headerKeyset('breadcrumbs.node');
-    if (nodeId) text += ` ${nodeId}`;
+    if (nodeId) {
+        text += ` ${nodeId}`;
+    }
 
     const lastItem = {
         text,
@@ -108,7 +110,9 @@ const getPDiskBreadcrumbs: GetBreadcrumbs<PDiskBreadcrumbsOptions> = (options, q
     });
 
     let text = headerKeyset('breadcrumbs.pDisk');
-    if (pDiskId) text += ` ${pDiskId}`;
+    if (pDiskId) {
+        text += ` ${pDiskId}`;
+    }
 
     const hasLink = pDiskId && nodeId;
     const link = hasLink ? getPDiskPagePath(pDiskId, nodeId, query) : undefined;
@@ -128,7 +132,9 @@ const getVDiskBreadcrumbs: GetBreadcrumbs<VDiskBreadcrumbsOptions> = (options, q
     const breadcrumbs = getPDiskBreadcrumbs(options, query);
 
     let text = headerKeyset('breadcrumbs.vDisk');
-    if (vDiskSlotId) text += ` ${vDiskSlotId}`;
+    if (vDiskSlotId) {
+        text += ` ${vDiskSlotId}`;
+    }
 
     const lastItem = {
         text,
@@ -190,7 +196,9 @@ export const getBreadcrumbs = (
     rawBreadcrumbs: RawBreadcrumbItem[] = [],
     query = {},
 ) => {
-    if (!page) return rawBreadcrumbs;
+    if (!page) {
+        return rawBreadcrumbs;
+    }
 
     const getter = mapPageToGetter[page];
 
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 7d80784e15..d893a3a1cf 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -25,7 +25,9 @@ export function bytesToSize(bytes) {
     if (isNaN(bytes)) {
         return '';
     }
-    if (bytes < base) return String(bytes);
+    if (bytes < base) {
+        return String(bytes);
+    }
     let i = parseInt(Math.floor(Math.log(bytes) / Math.log(base)), 10);
     if (i >= sizes.length) {
         i = sizes.length - 1;

From 0ca4fcee2e2e2e79bd00dff05850375b11d4a4e6 Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 15:00:12 +0300
Subject: [PATCH 09/13] revert: undo non-related changes

---
 src/containers/Tablets/Tablets.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Tablets/Tablets.tsx b/src/containers/Tablets/Tablets.tsx
index 6fc6fb99fa..b3b84bd7fe 100644
--- a/src/containers/Tablets/Tablets.tsx
+++ b/src/containers/Tablets/Tablets.tsx
@@ -34,7 +34,7 @@ const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
         render: ({row}) => {
             return (
                 <span>
-                    {row.Type} {row.Leader ? '' : <Text color="secondary">follower</Text>}
+                    {row.Type} {row.Leader ? <Text color="secondary">leader</Text> : ''}
                 </span>
             );
         },

From 70436d1289f7f223162f7330c6909bdcea1b4a66 Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 15:07:34 +0300
Subject: [PATCH 10/13] chore(Breadcrumbs): remove redundant code

---
 src/containers/Header/breadcrumbs.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/containers/Header/breadcrumbs.tsx b/src/containers/Header/breadcrumbs.tsx
index bf16dcc9c5..0ae9d4eda4 100644
--- a/src/containers/Header/breadcrumbs.tsx
+++ b/src/containers/Header/breadcrumbs.tsx
@@ -202,8 +202,7 @@ export const getBreadcrumbs = (
 
     const getter = mapPageToGetter[page];
 
-    return [...rawBreadcrumbs, ...getter(options, query)].map((item) => ({
-        ...item,
-        action: () => {},
-    }));
+    const pageBreadcrumbs = getter(options, query);
+
+    return [...rawBreadcrumbs, ...pageBreadcrumbs];
 };

From 73b565a63e5888a9827884cf36c33d2156a62bbd Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 15:22:05 +0300
Subject: [PATCH 11/13] Revert "feat(Tenant): add diagnostics empty tab to
 query tabs"

This reverts commit d7a7c9ea1342e4b42b59124091dcfb784708f78a.
---
 src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx | 7 ++-----
 src/containers/Tenant/Query/i18n/en.json            | 1 -
 src/store/reducers/tenant/constants.ts              | 1 -
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx b/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx
index cb7a250162..047c81cd2d 100644
--- a/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx
+++ b/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx
@@ -20,11 +20,8 @@ const saved = {
     id: TENANT_QUERY_TABS_ID.saved,
     title: i18n('tabs.saved'),
 };
-const diagnostics = {
-    id: TENANT_QUERY_TABS_ID.diagnostics,
-    title: i18n('tabs.diagnostics'),
-};
-export const queryEditorTabs = [newQuery, history, saved, diagnostics];
+
+export const queryEditorTabs = [newQuery, history, saved];
 
 interface QueryEditorTabsProps {
     className?: string;
diff --git a/src/containers/Tenant/Query/i18n/en.json b/src/containers/Tenant/Query/i18n/en.json
index d8da9c46f2..8d2c29cf8e 100644
--- a/src/containers/Tenant/Query/i18n/en.json
+++ b/src/containers/Tenant/Query/i18n/en.json
@@ -4,7 +4,6 @@
   "tabs.newQuery": "Query",
   "tabs.history": "History",
   "tabs.saved": "Saved",
-  "tabs.diagnostics": "Diagnostics",
 
   "history.empty": "History is empty",
   "saved.empty": "There are no saved queries",
diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts
index 1c817c4413..d7818309a2 100644
--- a/src/store/reducers/tenant/constants.ts
+++ b/src/store/reducers/tenant/constants.ts
@@ -9,7 +9,6 @@ export const TENANT_QUERY_TABS_ID = {
     newQuery: 'newQuery',
     history: 'history',
     saved: 'saved',
-    diagnostics: 'diagnostics',
 } as const;
 
 export const TENANT_DIAGNOSTICS_TABS_IDS = {

From a4f701325a755924a893930deb50e547f3bbda74 Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 16:46:58 +0300
Subject: [PATCH 12/13] chore(Header): add classNames to breadcrumb elements

---
 src/containers/Header/Header.scss | 27 +++++++++---------
 src/containers/Header/Header.tsx  | 46 ++++++++++++++-----------------
 2 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/src/containers/Header/Header.scss b/src/containers/Header/Header.scss
index 9df971afe7..d797823da2 100644
--- a/src/containers/Header/Header.scss
+++ b/src/containers/Header/Header.scss
@@ -8,25 +8,24 @@
 
     padding: 0 20px 0 12px;
 
-    color: var(--g-color-text-primary);
     border-bottom: 1px solid var(--g-color-line-generic);
 
-    a {
-        color: var(--g-color-text-secondary);
-
-        &:hover {
-            color: var(--g-color-text-complementary);
-        }
-    }
+    &__breadcrumbs {
+        &_item {
+            display: flex;
+            align-items: flex-start;
+            gap: 3px;
 
-    &__breadcrumb {
-        display: flex;
-        align-items: center;
+            color: var(--g-color-text-secondary);
 
-        &__icon {
-            display: flex;
+            &_icon {
+                display: flex;
+                align-items: center;
+            }
 
-            margin-right: 3px;
+            &_current {
+                color: var(--g-color-text-primary);
+            }
         }
     }
 }
diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx
index faeb0b80be..0bace94c5c 100644
--- a/src/containers/Header/Header.tsx
+++ b/src/containers/Header/Header.tsx
@@ -70,31 +70,27 @@ function Header({mainPage}: HeaderProps) {
     const renderHeader = () => {
         return (
             <header className={b()}>
-                <div>
-                    <Breadcrumbs
-                        items={breadcrumbItems}
-                        lastDisplayedItemsCount={1}
-                        firstDisplayedItemsCount={1}
-                        renderItem={({item, isCurrent}) => {
-                            const {icon, text, link} = item;
-
-                            const content = icon ? (
-                                <span className={b('breadcrumb')}>
-                                    <div className={b('breadcrumb__icon')}>{icon}</div>
-                                    {text}
-                                </span>
-                            ) : (
-                                text
-                            );
-
-                            return (
-                                <InternalLink to={isCurrent ? undefined : link}>
-                                    {content}
-                                </InternalLink>
-                            );
-                        }}
-                    />
-                </div>
+                <Breadcrumbs
+                    items={breadcrumbItems}
+                    lastDisplayedItemsCount={1}
+                    firstDisplayedItemsCount={1}
+                    className={b('breadcrumbs')}
+                    renderItem={({item, isCurrent}) => {
+                        const {icon, text, link} = item;
+
+                        return (
+                            <InternalLink
+                                className={b('breadcrumbs_item', {current: isCurrent})}
+                                to={isCurrent ? undefined : link}
+                            >
+                                {icon ? (
+                                    <span className={b('breadcrumbs_item_icon')}>{icon}</span>
+                                ) : null}
+                                <span className={b('breadcrumbs_item_text')}>{text}</span>
+                            </InternalLink>
+                        );
+                    }}
+                />
 
                 <LinkWithIcon title={DEVELOPER_UI_TITLE} url={getInternalLink(singleClusterMode)} />
             </header>

From 0f5d48feb253c126c845b7f0551fe9e776e05ef8 Mon Sep 17 00:00:00 2001
From: Ivan Samarin <adsidera@yandex-team.ru>
Date: Wed, 19 Jun 2024 17:31:56 +0300
Subject: [PATCH 13/13] chore: fix classnames according to bem

---
 src/containers/Header/Header.scss | 33 ++++++++++++++++---------------
 src/containers/Header/Header.tsx  |  9 ++++++---
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/containers/Header/Header.scss b/src/containers/Header/Header.scss
index d797823da2..c0af72f01b 100644
--- a/src/containers/Header/Header.scss
+++ b/src/containers/Header/Header.scss
@@ -10,22 +10,23 @@
 
     border-bottom: 1px solid var(--g-color-line-generic);
 
-    &__breadcrumbs {
-        &_item {
-            display: flex;
-            align-items: flex-start;
-            gap: 3px;
-
-            color: var(--g-color-text-secondary);
-
-            &_icon {
-                display: flex;
-                align-items: center;
-            }
-
-            &_current {
-                color: var(--g-color-text-primary);
-            }
+    &__breadcrumbs-item {
+        display: flex;
+        gap: 3px;
+
+        color: var(--g-color-text-secondary);
+
+        &_link:hover {
+            color: var(--g-color-text-complementary);
+        }
+
+        &_active {
+            color: var(--g-color-text-primary);
         }
     }
+
+    &__breadcrumbs-icon {
+        display: flex;
+        align-items: center;
+    }
 }
diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx
index 0bace94c5c..0fc1803611 100644
--- a/src/containers/Header/Header.tsx
+++ b/src/containers/Header/Header.tsx
@@ -80,13 +80,16 @@ function Header({mainPage}: HeaderProps) {
 
                         return (
                             <InternalLink
-                                className={b('breadcrumbs_item', {current: isCurrent})}
+                                className={b('breadcrumbs-item', {
+                                    active: isCurrent,
+                                    link: !isCurrent,
+                                })}
                                 to={isCurrent ? undefined : link}
                             >
                                 {icon ? (
-                                    <span className={b('breadcrumbs_item_icon')}>{icon}</span>
+                                    <span className={b('breadcrumbs-icon')}>{icon}</span>
                                 ) : null}
-                                <span className={b('breadcrumbs_item_text')}>{text}</span>
+                                <span>{text}</span>
                             </InternalLink>
                         );
                     }}