ydb-embedded-ui 6.6.1 → 6.8.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ydb-embedded-ui",
-    "version": "6.6.1",
+    "version": "6.8.0",
     "files": [
         "dist"
     ],
@@ -12,18 +12,19 @@
     "dependencies": {
         "@bem-react/classname": "^1.6.0",
         "@gravity-ui/axios-wrapper": "^1.4.1",
-        "@gravity-ui/chartkit": "^5.5.0",
-        "@gravity-ui/components": "^3.6.2",
-        "@gravity-ui/date-utils": "^2.4.0",
-        "@gravity-ui/i18n": "^1.5.0",
-        "@gravity-ui/icons": "^2.9.1",
-        "@gravity-ui/navigation": "^2.10.0",
+        "@gravity-ui/chartkit": "^5.9.0",
+        "@gravity-ui/components": "^3.7.0",
+        "@gravity-ui/date-utils": "^2.5.3",
+        "@gravity-ui/i18n": "^1.5.1",
+        "@gravity-ui/icons": "^2.10.0",
+        "@gravity-ui/navigation": "^2.16.0",
         "@gravity-ui/paranoid": "^2.0.1",
         "@gravity-ui/react-data-table": "^2.1.1",
-        "@gravity-ui/uikit": "^6.15.0",
+        "@gravity-ui/uikit": "^6.20.1",
         "@gravity-ui/websql-autocomplete": "^9.1.0",
         "@reduxjs/toolkit": "^2.2.3",
-        "axios": "^1.6.8",
+        "axios": "^1.7.2",
+        "axios-retry": "^4.4.0",
         "colord": "^2.9.3",
         "copy-to-clipboard": "^3.3.3",
         "crc-32": "^1.2.2",
@@ -34,17 +35,17 @@
         "path-to-regexp": "^3.0.0",
         "qs": "^6.12.0",
         "react-error-boundary": "^4.0.13",
-        "react-helmet-async": "2.0.4",
+        "react-helmet-async": "^2.0.5",
         "react-json-inspector": "^7.1.1",
         "react-list": "^0.8.17",
         "react-monaco-editor": "^0.55.0",
-        "react-redux": "^9.1.0",
+        "react-redux": "^9.1.2",
         "react-router": "^5.3.4",
         "react-router-dom": "^5.3.4",
         "react-split": "^2.0.14",
         "redux": "^5.0.1",
         "redux-location-state": "^2.8.2",
-        "tslib": "^2.6.2",
+        "tslib": "^2.6.3",
         "url": "^0.11.3",
         "use-query-params": "^2.2.1",
         "web-vitals": "^1.1.2",
@@ -121,54 +122,54 @@
         ]
     },
     "devDependencies": {
-        "@commitlint/cli": "^19.2.1",
-        "@commitlint/config-conventional": "^19.1.0",
+        "@commitlint/cli": "^19.3.0",
+        "@commitlint/config-conventional": "^19.2.2",
         "@gravity-ui/eslint-config": "^3.2.0",
         "@gravity-ui/prettier-config": "^1.1.0",
         "@gravity-ui/stylelint-config": "^4.0.1",
         "@gravity-ui/tsconfig": "^1.0.0",
         "@playwright/test": "^1.42.1",
-        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^14.2.2",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.17.0",
         "@types/numeral": "^2.0.5",
-        "@types/qs": "^6.9.14",
-        "@types/react": "^18.2.73",
-        "@types/react-dom": "^18.2.23",
+        "@types/qs": "^6.9.15",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.3.3",
         "copyfiles": "^2.4.1",
         "http-proxy-middleware": "^2.0.6",
         "husky": "^9.0.11",
         "jest-transform-css": "^6.0.1",
-        "lint-staged": "^15.2.2",
+        "lint-staged": "^15.2.7",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "prop-types": "^15.8.1",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
         "react-app-rewired": "^2.2.1",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-scripts": "^5.0.1",
         "sass": "^1.72.0",
         "source-map-explorer": "^2.5.3",
-        "stylelint": "^15.0.0",
-        "ts-jest": "^29.1.2",
+        "stylelint": "^15.11.0",
+        "ts-jest": "^29.1.5",
         "typescript": "^5.4.3"
     },
     "peerDependencies": {
         "prop-types": "^15.8.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
     },
     "overrides": {
         "fork-ts-checker-webpack-plugin": "^9.0.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "redux": "^5.0.1",
-        "typescript": "^5.4.3",
-        "monaco-editor": "^0.48.0"
+        "react": "$react",
+        "react-dom": "$react-dom",
+        "redux": "$redux",
+        "typescript": "$typescript",
+        "monaco-editor": "$monaco-editor"
     }
 }

package/dist/src/components/InfoViewer/InfoViewer.d.ts

@@ -5,7 +5,7 @@ export interface InfoViewerItem {
     value: React.ReactNode;
 }
 export interface InfoViewerProps {
-    title?: string;
+    title?: React.ReactNode;
     info?: InfoViewerItem[];
     dots?: boolean;
     size?: 's';

package/dist/src/components/InfoViewer/InfoViewer.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cn } from '../../utils/cn';
+import i18n from './i18n';
 import './InfoViewer.scss';
 const b = cn('info-viewer');
 export const InfoViewer = ({ title, info, dots = true, size, className, multilineLabels, renderEmptyState, }) => {
     if ((!info || !info.length) && renderEmptyState) {
         return _jsx(React.Fragment, { children: renderEmptyState({ title, size }) });
     }
-    return (_jsxs("div", { className: b({ size }, className), children: [title && _jsx("div", { className: b('title'), children: title }), info && info.length > 0 ? (_jsx("div", { className: b('items'), children: info.map((data, infoIndex) => (_jsxs("div", { className: b('row'), children: [_jsxs("div", { className: b('label'), children: [_jsx("div", { className: b('label-text', { multiline: multilineLabels }), children: data.label }), dots && _jsx("div", { className: b('dots') })] }), _jsx("div", { className: b('value'), children: data.value })] }, infoIndex))) })) : (_jsxs(React.Fragment, { children: ["No ", title, " data"] }))] }));
+    return (_jsxs("div", { className: b({ size }, className), children: [title && _jsx("div", { className: b('title'), children: title }), info && info.length > 0 ? (_jsx("div", { className: b('items'), children: info.map((data, infoIndex) => (_jsxs("div", { className: b('row'), children: [_jsxs("div", { className: b('label'), children: [_jsx("div", { className: b('label-text', { multiline: multilineLabels }), children: data.label }), dots && _jsx("div", { className: b('dots') })] }), _jsx("div", { className: b('value'), children: data.value })] }, infoIndex))) })) : (i18n('no-data'))] }));
 };
 export default InfoViewer;

package/dist/src/components/InfoViewer/i18n/en.json

@@ -1,4 +1,5 @@
 {
     "common.created": "Created",
-    "common.type": "Type"
+    "common.type": "Type",
+    "no-data": "No data"
 }

package/dist/src/components/InfoViewer/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "common.created" | "common.type", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "common.created" | "common.type" | "no-data", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/src/components/InfoViewer/i18n/index.js

@@ -1,5 +1,4 @@
 import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
-import ru from './ru.json';
 const COMPONENT = 'ydb-components-info-viewer';
-export default registerKeysets(COMPONENT, { ru, en });
+export default registerKeysets(COMPONENT, { en });

package/dist/src/containers/App/App.d.ts

@@ -13,9 +13,9 @@ export interface AppProps {
 declare function App({ store, history, singleClusterMode, children, userSettings }: AppProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react-redux").ConnectedComponent<typeof App, {
     history: History<unknown>;
+    userSettings?: YDBEmbeddedUISettings | undefined;
     store: Store<any, import("redux").UnknownAction, unknown>;
     children?: React.ReactNode;
-    userSettings?: YDBEmbeddedUISettings | undefined;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
 }>;
 export default _default;

package/dist/src/containers/App/Content.js

@@ -16,7 +16,7 @@ import Header from '../Header/Header';
 import Node from '../Node/Node';
 import { PDiskPage } from '../PDiskPage/PDiskPage';
 import { Tablet } from '../Tablet';
-import TabletsFilters from '../TabletsFilters/TabletsFilters';
+import { TabletsFilters } from '../TabletsFilters/TabletsFilters';
 import Tenant from '../Tenant/Tenant';
 import { VDiskPage } from '../VDiskPage/VDiskPage';
 import { ClusterSlot, ClustersSlot, NodeSlot, PDiskPageSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, VDiskPageSlot, } from './appSlots';

package/dist/src/containers/App/appSlots.d.ts

@@ -5,7 +5,7 @@ import type { Clusters } from '../Clusters/Clusters';
 import type Node from '../Node/Node';
 import type { PDiskPage } from '../PDiskPage/PDiskPage';
 import type { Tablet } from '../Tablet';
-import type TabletsFilters from '../TabletsFilters/TabletsFilters';
+import type { TabletsFilters } from '../TabletsFilters/TabletsFilters';
 import type Tenant from '../Tenant/Tenant';
 import type { VDiskPage } from '../VDiskPage/VDiskPage';
 export declare const ClustersSlot: import("../../components/slots/types").SlotComponent<{

package/dist/src/containers/AppWithClusters/AppWithClusters.js

@@ -10,7 +10,7 @@ import i18n from './i18n';
 const defaultUserSettings = settings;
 defaultUserSettings[2].sections[0].settings.push({
     title: i18n('settings.useClusterBalancerAsBackend.title'),
-    helpPopoverContent: i18n('settings.useClusterBalancerAsBackend.popover'),
+    description: i18n('settings.useClusterBalancerAsBackend.popover'),
     settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
 });
 export function AppWithClusters({ store, history, getMonitoringLink = getMonitoringLinkDefault, getMonitoringClusterLink = getMonitoringClusterLinkDefault, userSettings = defaultUserSettings, children, }) {

package/dist/src/containers/AsideNavigation/Navigation.js

@@ -2,9 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useComponent } from '../../components/ComponentsProvider/ComponentsProvider';
 import { UserSettings } from '../UserSettings/UserSettings';
 import { YdbInternalUser } from './YdbInternalUser/YdbInternalUser';
-import { useNavigationMenuItems } from './useNavigationMenuItems';
 export function Navigation({ children, userSettings }) {
     const AsideNavigation = useComponent('AsideNavigation');
-    const menuItems = useNavigationMenuItems();
-    return (_jsx(AsideNavigation, { settings: _jsx(UserSettings, { settings: userSettings }), menuItems: menuItems, ydbInternalUser: _jsx(YdbInternalUser, {}), content: children }));
+    return (_jsx(AsideNavigation, { settings: _jsx(UserSettings, { settings: userSettings }), ydbInternalUser: _jsx(YdbInternalUser, {}), content: children }));
 }

package/dist/src/containers/AsideNavigation/i18n/en.json

@@ -1,6 +1,4 @@
 {
-    "pages.query": "Query",
-    "pages.diagnostics": "Diagnostics",
     "navigation-item.documentation": "Documentation",
     "navigation-item.settings": "Settings",
     "navigation-item.account": "Account",

package/dist/src/containers/AsideNavigation/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "pages.query" | "pages.diagnostics" | "navigation-item.documentation" | "navigation-item.settings" | "navigation-item.account" | "account.user" | "account.login" | "account.logout", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "navigation-item.documentation" | "navigation-item.settings" | "navigation-item.account" | "account.user" | "account.login" | "account.logout", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/src/containers/AsideNavigation/i18n/index.js

@@ -1,5 +1,4 @@
 import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
-import ru from './ru.json';
 const COMPONENT = 'ydb-aside-navigation';
-export default registerKeysets(COMPONENT, { ru, en });
+export default registerKeysets(COMPONENT, { en });

package/dist/src/containers/Cluster/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "nodes" | "tablets" | "versions" | "links" | "load" | "disk-type" | "erasure" | "allocated" | "available" | "usage" | "dc" | "databases" | "storage-size" | "storage-groups", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "nodes" | "tablets" | "versions" | "load" | "links" | "disk-type" | "erasure" | "allocated" | "available" | "usage" | "dc" | "databases" | "storage-size" | "storage-groups", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/src/containers/Clusters/constants.d.ts

@@ -14,7 +14,7 @@ export declare const COLUMNS_NAMES: {
     readonly DESCRIPTION: "description";
     readonly BALANCER: "balancer";
 };
-export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "status" | "tenants" | "versions" | "service" | "hosts" | "balancer" | "title" | "owner" | "load")[];
+export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "status" | "tenants" | "versions" | "service" | "load" | "hosts" | "balancer" | "title" | "owner")[];
 export declare const COLUMNS_TITLES: {
     readonly title: "Cluster";
     readonly versions: "Versions";

package/dist/src/containers/Header/Header.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Breadcrumbs } from '@gravity-ui/uikit';
+import { get } from 'lodash';
 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';
@@ -19,41 +21,35 @@ const getInternalLink = (singleClusterMode) => {
     return backend + '/internal';
 };
 function Header({ mainPage }) {
-    var _a;
     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 = (_a = queryParams.clusterName) === null || _a === void 0 ? void 0 : _a.toString();
-    const { currentData: { clusterData: data } = {} } = clusterApi.useGetClusterInfoQuery(clusterNameFromQuery);
-    const clusterNameFinal = (data === null || data === void 0 ? void 0 : data.Name) || clusterNameFromQuery;
+    const clusterInfo = clusterApi.useGetClusterInfoQuery(queryParams.clusterName);
+    const clusterName = get(clusterInfo, ['currentData', 'clusterData', 'Name'], queryParams.clusterName);
     const breadcrumbItems = React.useMemo(() => {
         const rawBreadcrumbs = [];
-        let options = pageBreadcrumbsOptions;
+        const options = pageBreadcrumbsOptions;
         if (mainPage) {
             rawBreadcrumbs.push(mainPage);
         }
-        if (clusterNameFinal) {
-            options = Object.assign(Object.assign({}, pageBreadcrumbsOptions), { clusterName: clusterNameFinal });
+        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 Object.assign(Object.assign({}, item), { action });
+            return Object.assign(Object.assign({}, item), { action: () => { } });
         });
-    }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
+    }, [clusterName, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
     const renderHeader = () => {
-        return (_jsxs("header", { className: b(), children: [_jsx("div", { children: _jsx(Breadcrumbs, { items: breadcrumbItems, lastDisplayedItemsCount: 1, firstDisplayedItemsCount: 1, renderItemContent: ({ icon, text }) => {
-                            if (!icon) {
-                                return text;
-                            }
-                            return (_jsxs("span", { className: b('breadcrumb'), children: [_jsx("div", { className: b('breadcrumb__icon'), children: icon }), text] }));
-                        } }) }), _jsx(LinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] }));
+        return (_jsxs("header", { className: b(), children: [_jsx(Breadcrumbs, { items: breadcrumbItems, lastDisplayedItemsCount: 1, firstDisplayedItemsCount: 1, className: b('breadcrumbs'), renderItem: ({ item, isCurrent }) => {
+                        const { icon, text, link } = item;
+                        return (_jsxs(InternalLink, { className: b('breadcrumbs-item', {
+                                active: isCurrent,
+                                link: !isCurrent,
+                            }), to: isCurrent ? undefined : link, children: [icon ? (_jsx("span", { className: b('breadcrumbs-icon'), children: icon })) : null, _jsx("span", { children: text })] }));
+                    } }), _jsx(LinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] }));
     };
     return renderHeader();
 }

package/dist/src/containers/Header/Header.scss

@@ -10,14 +10,23 @@
 
     border-bottom: 1px solid var(--g-color-line-generic);
 
-    &__breadcrumb {
+    &__breadcrumbs-item {
         display: flex;
-        align-items: center;
+        gap: 3px;
+
+        color: var(--g-color-text-secondary);
 
-        &__icon {
-            display: flex;
+        &_link:hover {
+            color: var(--g-color-text-complementary);
+        }
 
-            margin-right: 3px;
+        &_active {
+            color: var(--g-color-text-primary);
         }
     }
+
+    &__breadcrumbs-icon {
+        display: flex;
+        align-items: center;
+    }
 }

package/dist/src/containers/Header/breadcrumbs.js

@@ -11,6 +11,10 @@ import { headerKeyset } from './i18n';
 const prepareTenantName = (tenantName) => {
     return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;
 };
+const getQueryForTenant = (type) => ({
+    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+    [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS[type],
+});
 const getClusterBreadcrumbs = (options, query = {}) => {
     const { clusterName, clusterTab } = options;
     return [
@@ -23,109 +27,99 @@ const getClusterBreadcrumbs = (options, query = {}) => {
 };
 const getTenantBreadcrumbs = (options, query = {}) => {
     const { tenantName } = options;
+    const breadcrumbs = getClusterBreadcrumbs(options, query);
     const text = tenantName ? prepareTenantName(tenantName) : headerKeyset('breadcrumbs.tenant');
     const link = tenantName ? getTenantPath(Object.assign(Object.assign({}, query), { name: tenantName })) : undefined;
-    return [...getClusterBreadcrumbs(options, query), { text, link, icon: _jsx(DatabaseIcon, {}) }];
+    const lastItem = { text, link, icon: _jsx(DatabaseIcon, {}) };
+    breadcrumbs.push(lastItem);
+    return breadcrumbs;
 };
 const getNodeBreadcrumbs = (options, query = {}) => {
     const { tenantName, nodeId } = options;
-    let breadcrumbs;
     // Compute nodes have tenantName, storage nodes doesn't
-    const isStorageNode = !tenantName;
-    const newQuery = Object.assign(Object.assign({}, query), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes });
-    if (isStorageNode) {
-        breadcrumbs = getClusterBreadcrumbs(options, query);
-    }
-    else {
-        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
+    const isStorage = !tenantName;
+    const tenantQuery = getQueryForTenant('nodes');
+    const breadcrumbs = isStorage
+        ? getClusterBreadcrumbs(options, query)
+        : getTenantBreadcrumbs(options, Object.assign(Object.assign({}, query), tenantQuery));
+    let text = headerKeyset('breadcrumbs.node');
+    if (nodeId) {
+        text += ` ${nodeId}`;
     }
-    const text = nodeId
-        ? `${headerKeyset('breadcrumbs.node')} ${nodeId}`
-        : headerKeyset('breadcrumbs.node');
-    const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
-    const icon = isStorageNode ? _jsx(StorageNodeIcon, {}) : _jsx(ComputeNodeIcon, {});
-    breadcrumbs.push({
+    const lastItem = {
         text,
-        link,
-        icon,
-    });
+        link: nodeId ? getDefaultNodePath(nodeId, query) : undefined,
+        icon: isStorage ? _jsx(StorageNodeIcon, {}) : _jsx(ComputeNodeIcon, {}),
+    };
+    breadcrumbs.push(lastItem);
     return breadcrumbs;
 };
 const getPDiskBreadcrumbs = (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;
-    breadcrumbs.push({
+    let text = headerKeyset('breadcrumbs.pDisk');
+    if (pDiskId) {
+        text += ` ${pDiskId}`;
+    }
+    const hasLink = pDiskId && nodeId;
+    const link = hasLink ? getPDiskPagePath(pDiskId, nodeId, query) : undefined;
+    const lastItem = {
         text,
         link,
-    });
+    };
+    breadcrumbs.push(lastItem);
     return breadcrumbs;
 };
 const getVDiskBreadcrumbs = (options, query = {}) => {
     const { vDiskSlotId } = options;
     const breadcrumbs = getPDiskBreadcrumbs(options, query);
-    const text = vDiskSlotId
-        ? `${headerKeyset('breadcrumbs.vDisk')} ${vDiskSlotId}`
-        : headerKeyset('breadcrumbs.vDisk');
-    breadcrumbs.push({ text });
+    let text = headerKeyset('breadcrumbs.vDisk');
+    if (vDiskSlotId) {
+        text += ` ${vDiskSlotId}`;
+    }
+    const lastItem = {
+        text,
+    };
+    breadcrumbs.push(lastItem);
     return breadcrumbs;
 };
-const getTabletsBreadcrubms = (options, query = {}) => {
+const getTabletsBreadcrumbs = (options, query = {}) => {
     const { tenantName, nodeIds } = options;
-    const newQuery = Object.assign(Object.assign({}, query), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets });
-    let breadcrumbs;
-    // Cluster system tablets don't have tenantName
-    if (tenantName) {
-        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
-    }
-    else {
-        breadcrumbs = getClusterBreadcrumbs(options, query);
-    }
+    const tenantQuery = getQueryForTenant('tablets');
+    const breadcrumbs = tenantName
+        ? getTenantBreadcrumbs(options, Object.assign(Object.assign({}, query), tenantQuery))
+        : getClusterBreadcrumbs(options, query);
     const link = createHref(routes.tabletsFilters, undefined, Object.assign(Object.assign({}, query), { nodeIds, path: tenantName }));
-    breadcrumbs.push({ text: headerKeyset('breadcrumbs.tablets'), link });
+    const lastItem = { text: headerKeyset('breadcrumbs.tablets'), link };
+    breadcrumbs.push(lastItem);
     return breadcrumbs;
 };
-const getTabletBreadcrubms = (options, query = {}) => {
+const getTabletBreadcrumbs = (options, query = {}) => {
     const { tabletId, tabletType } = options;
-    const breadcrumbs = getTabletsBreadcrubms(options, query);
-    breadcrumbs.push({
+    const breadcrumbs = getTabletsBreadcrumbs(options, query);
+    const lastItem = {
         text: tabletId || headerKeyset('breadcrumbs.tablet'),
         icon: _jsx(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,
+};
 export const getBreadcrumbs = (page, options, rawBreadcrumbs = [], 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];
+    const pageBreadcrumbs = getter(options, query);
+    return [...rawBreadcrumbs, ...pageBreadcrumbs];
 };

package/dist/src/containers/Heatmap/Heatmap.js

@@ -7,7 +7,7 @@ import { heatmapApi, setHeatmapOptions } from '../../store/reducers/heatmap';
 import { hideTooltip, showTooltip } from '../../store/reducers/tooltip';
 import { cn } from '../../utils/cn';
 import { formatNumber } from '../../utils/dataFormatters/dataFormatters';
-import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { HeatmapCanvas } from './HeatmapCanvas/HeatmapCanvas';
 import { Histogram } from './Histogram/Histogram';
 import { COLORS_RANGE_SIZE, getColorIndex, getColorRange, getCurrentMetricLimits } from './util';
@@ -17,8 +17,8 @@ const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
 export const Heatmap = ({ path }) => {
     const dispatch = useTypedDispatch();
     const itemsContainer = React.createRef();
-    const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { currentData, isFetching, error } = heatmapApi.useGetHeatmapTabletsInfoQuery({ path }, { pollingInterval: autorefresh });
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { currentData, isFetching, error } = heatmapApi.useGetHeatmapTabletsInfoQuery({ path }, { pollingInterval: autoRefreshInterval });
     const loading = isFetching && currentData === undefined;
     const { tablets = [], metrics } = currentData || {};
     const { sort, heatmap, currentMetric } = useTypedSelector((state) => state.heatmap);

package/dist/src/containers/Nodes/Nodes.js

@@ -14,10 +14,10 @@ import { TableWithControlsLayout } from '../../components/TableWithControlsLayou
 import { UptimeFilter } from '../../components/UptimeFIlter';
 import { nodesApi } from '../../store/reducers/nodes/nodes';
 import { filterNodes } from '../../store/reducers/nodes/selectors';
-import { ProblemFilterValues, changeFilter } from '../../store/reducers/settings/settings';
+import { ProblemFilterValues, changeFilter, selectProblemFilter, } from '../../store/reducers/settings/settings';
 import { cn } from '../../utils/cn';
 import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../../utils/constants';
-import { useSetting, useTableSort, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { useAutoRefreshInterval, useSetting, useTableSort, useTypedDispatch, useTypedSelector, } from '../../utils/hooks';
 import { NodesUptimeFilterValues, isSortableNodesProperty, isUnavailableNode, nodesUptimeFilterValuesSchema, } from '../../utils/nodes';
 import { NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns } from './getNodesColumns';
 import i18n from './i18n';
@@ -33,8 +33,8 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
     const searchValue = (_a = queryParams.search) !== null && _a !== void 0 ? _a : '';
     const dispatch = useTypedDispatch();
     const isClusterNodes = !path;
-    const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
-    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const problemFilter = useTypedSelector(selectProblemFilter);
+    const [autorefresh] = useAutoRefreshInterval();
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
     const autoRefreshInterval = isClusterNodes ? DEFAULT_POLLING_INTERVAL : autorefresh;
     // If there is no path, it's cluster Nodes tab

package/dist/src/containers/Nodes/VirtualNodes.js

@@ -9,7 +9,7 @@ import { ProblemFilter } from '../../components/ProblemFilter';
 import { Search } from '../../components/Search';
 import { UptimeFilter } from '../../components/UptimeFIlter';
 import { ResizeableVirtualTable } from '../../components/VirtualTable/ResizeableVirtualTable';
-import { ProblemFilterValues, changeFilter } from '../../store/reducers/settings/settings';
+import { ProblemFilterValues, changeFilter, selectProblemFilter, } from '../../store/reducers/settings/settings';
 import { cn } from '../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue, isSortableNodesProperty, isUnavailableNode, nodesUptimeFilterValuesSchema, } from '../../utils/nodes';
@@ -27,7 +27,7 @@ export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) =>
     const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
     const searchValue = (_a = queryParams.search) !== null && _a !== void 0 ? _a : '';
     const dispatch = useTypedDispatch();
-    const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
+    const problemFilter = useTypedSelector(selectProblemFilter);
     const filters = React.useMemo(() => {
         return [path, searchValue, problemFilter, uptimeFilter];
     }, [path, searchValue, problemFilter, uptimeFilter]);