ydb-embedded-ui 5.0.0 → 5.1.0

package/dist/containers/Cluster/Cluster.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
-import { useLocation, useRouteMatch } from 'react-router';
+import { Redirect, Switch, Route, useLocation, useRouteMatch } from 'react-router';
 import { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet-async';
 import cn from 'bem-cn-lite';
 import qs from 'qs';
-import { Tabs } from '@gravity-ui/uikit';
-import routes from '../../routes';
+import { Skeleton, Tabs } from '@gravity-ui/uikit';
+import routes, { getLocationObjectFromHref } from '../../routes';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { getClusterInfo } from '../../store/reducers/cluster/cluster';
+import { getClusterInfo, updateDefaultClusterTab } from '../../store/reducers/cluster/cluster';
 import { getClusterNodes } from '../../store/reducers/clusterNodes/clusterNodes';
 import { parseNodesToVersionsValues, parseVersionsToVersionToColorMap } from '../../utils/versions';
 import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
@@ -16,15 +17,17 @@ import { Tenants } from '../Tenants/Tenants';
 import { StorageWrapper } from '../Storage/StorageWrapper';
 import { NodesWrapper } from '../Nodes/NodesWrapper';
 import { Versions } from '../Versions/Versions';
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
 import { ClusterInfo } from './ClusterInfo/ClusterInfo';
-import { clusterTabs, clusterTabsIds, getClusterPath } from './utils';
+import { clusterTabs, clusterTabsIds, getClusterPath, isClusterTab } from './utils';
 import './Cluster.scss';
 const b = cn('cluster');
 function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }) {
+    var _a, _b;
     const container = useRef(null);
     const dispatch = useDispatch();
-    const match = useRouteMatch(routes.cluster);
-    const { activeTab = clusterTabsIds.tenants } = (match === null || match === void 0 ? void 0 : match.params) || {};
+    const activeTabId = useClusterTab();
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
@@ -50,28 +53,43 @@ function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNod
     const versionsValues = useMemo(() => {
         return parseNodesToVersionsValues(nodes, versionToColor);
     }, [nodes, versionToColor]);
-    const renderTab = () => {
-        switch (activeTab) {
-            case clusterTabsIds.tenants: {
-                return _jsx(Tenants, { additionalTenantsProps: additionalTenantsProps });
-            }
-            case clusterTabsIds.nodes: {
-                return (_jsx(NodesWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }));
-            }
-            case clusterTabsIds.storage: {
-                return (_jsx(StorageWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }));
-            }
-            case clusterTabsIds.versions: {
-                return _jsx(Versions, { versionToColor: versionToColor });
-            }
-            default: {
-                return null;
-            }
+    const getClusterTitle = () => {
+        var _a;
+        if (infoLoading) {
+            return _jsx(Skeleton, { className: b('title-skeleton') });
         }
+        return (_jsx(EntityStatus, { size: "m", status: cluster === null || cluster === void 0 ? void 0 : cluster.Overall, name: (_a = cluster === null || cluster === void 0 ? void 0 : cluster.Name) !== null && _a !== void 0 ? _a : CLUSTER_DEFAULT_TITLE, className: b('title') }));
     };
-    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [_jsx(ClusterInfo, { cluster: cluster, groupsStats: groupsStats, versionsValues: versionsValues, loading: infoLoading, error: clusterError, additionalClusterProps: additionalClusterProps }), _jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTab, items: clusterTabs, wrapTo: ({ id }, node) => {
+    const clusterTitle = (_b = (_a = cluster === null || cluster === void 0 ? void 0 : cluster.Name) !== null && _a !== void 0 ? _a : clusterName) !== null && _b !== void 0 ? _b : CLUSTER_DEFAULT_TITLE;
+    const activeTab = useMemo(() => clusterTabs.find(({ id }) => id === activeTabId), [activeTabId]);
+    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [_jsx(Helmet, Object.assign({ defaultTitle: `${clusterTitle} — YDB Monitoring`, titleTemplate: `%s — ${clusterTitle} — YDB Monitoring` }, { children: activeTab ? _jsx("title", { children: activeTab.title }) : null })), _jsx("div", Object.assign({ className: b('header') }, { children: getClusterTitle() })), _jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTabId, items: clusterTabs, wrapTo: ({ id }, node) => {
                         const path = getClusterPath(id, queryParams);
-                        return (_jsx(InternalLink, Object.assign({ to: path }, { children: node }), id));
-                    } }) })), _jsx("div", { children: renderTab() })] })));
+                        return (_jsx(InternalLink, Object.assign({ to: path, onClick: () => {
+                                dispatch(updateDefaultClusterTab(id));
+                            } }, { children: node }), id));
+                    } }) })), _jsx("div", { children: _jsxs(Switch, { children: [_jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.overview))
+                                .pathname }, { children: _jsx(ClusterInfo, { cluster: cluster, groupsStats: groupsStats, versionsValues: versionsValues, loading: infoLoading, error: clusterError, additionalClusterProps: additionalClusterProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
+                                .pathname }, { children: _jsx(Tenants, { additionalTenantsProps: additionalTenantsProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname }, { children: _jsx(NodesWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
+                                .pathname }, { children: _jsx(StorageWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
+                                .pathname }, { children: _jsx(Versions, { versionToColor: versionToColor }) })), _jsx(Redirect, { to: getLocationObjectFromHref(getClusterPath(activeTabId)) })] }) })] })));
+}
+function useClusterTab() {
+    const dispatch = useDispatch();
+    const defaultTab = useTypedSelector((state) => state.cluster.defaultClusterTab);
+    const match = useRouteMatch(routes.cluster);
+    const { activeTab: activeTabFromParams } = (match === null || match === void 0 ? void 0 : match.params) || {};
+    let activeTab;
+    if (isClusterTab(activeTabFromParams)) {
+        activeTab = activeTabFromParams;
+    }
+    else {
+        activeTab = defaultTab;
+    }
+    useEffect(() => {
+        if (activeTab !== defaultTab) {
+            dispatch(updateDefaultClusterTab(activeTab));
+        }
+    }, [activeTab, defaultTab, dispatch]);
+    return activeTab;
 }
 export default Cluster;

package/dist/containers/Cluster/Cluster.scss

@@ -9,6 +9,21 @@
 
     @include flex-container();
 
+    &__header {
+        padding: 20px 0;
+    }
+
+    &__title {
+        font-weight: var(--g-text-header-font-weight);
+        @include header-1-typography();
+    }
+
+    &__title-skeleton {
+        width: 20%;
+        min-width: 200px;
+        height: var(--g-text-header-1-line-height);
+    }
+
     &__tabs {
         position: sticky;
         left: 0;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.js

@@ -1,20 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import block from 'bem-cn-lite';
-import { Skeleton } from '@gravity-ui/uikit';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import { Tags } from '../../../components/Tags';
 import { Tablet } from '../../../components/Tablet';
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import { ExternalLinkWithIcon } from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
-import { Icon } from '../../../components/Icon/Icon';
 import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup';
 import { backend, customBackend } from '../../../store';
 import { formatStorageValues } from '../../../utils/dataFormatters/dataFormatters';
-import { useSetting, useTypedSelector } from '../../../utils/hooks';
+import { useTypedSelector } from '../../../utils/hooks';
 import { formatBytes, getSizeWithSignificantDigits } from '../../../utils/bytesParsers';
-import { CLUSTER_DEFAULT_TITLE, CLUSTER_INFO_HIDDEN_KEY, DEVELOPER_UI_TITLE, } from '../../../utils/constants';
+import { DEVELOPER_UI_TITLE } from '../../../utils/constants';
 import { VersionsBar } from '../VersionsBar/VersionsBar';
 import { ClusterInfoSkeleton } from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
 import i18n from '../i18n';
@@ -106,10 +103,6 @@ const getInfo = (cluster, versionsValues, groupsStats, additionalInfo, links) =>
 };
 export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {}, loading, error, additionalClusterProps = {}, }) => {
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
-    const [clusterInfoHidden, setClusterInfoHidden] = useSetting(CLUSTER_INFO_HIDDEN_KEY);
-    const togleClusterInfoVisibility = () => {
-        setClusterInfoHidden(!clusterInfoHidden);
-    };
     let internalLink = backend + '/internal';
     if (singleClusterMode && !customBackend) {
         internalLink = `/internal`;
@@ -128,12 +121,5 @@ export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {
         }
         return _jsx(InfoViewer, { dots: true, info: clusterInfo });
     };
-    const getClusterTitle = () => {
-        var _a;
-        if (loading) {
-            return _jsx(Skeleton, { className: b('title-skeleton') });
-        }
-        return (_jsx(EntityStatus, { size: "m", status: cluster === null || cluster === void 0 ? void 0 : cluster.Overall, name: (_a = cluster === null || cluster === void 0 ? void 0 : cluster.Name) !== null && _a !== void 0 ? _a : CLUSTER_DEFAULT_TITLE, className: b('title') }));
-    };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('header'), onClick: togleClusterInfoVisibility }, { children: [getClusterTitle(), _jsx(Icon, { name: "chevron-down", width: 24, height: 24, className: b('header__expand-button', { rotate: clusterInfoHidden }) })] })), _jsx("div", Object.assign({ className: b('info', { hidden: clusterInfoHidden }) }, { children: getContent() }))] })));
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx("div", Object.assign({ className: b('info') }, { children: getContent() })) })));
 };

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -1,52 +1,12 @@
 @import '../../../styles/mixins';
 
 .cluster-info {
-    position: sticky;
-    left: 0;
-
-    width: 100%;
     padding-top: 20px;
 
-    &__header {
-        display: flex;
-
-        width: fit-content;
-        margin-bottom: 20px;
-
-        cursor: pointer;
-
-        &__expand-button {
-            margin-left: 6px;
-
-            &_rotate {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    &__title .entity-status__name {
-        font-weight: var(--g-text-header-font-weight);
-        @include header-1-typography();
-    }
-
-    &__title-skeleton {
-        width: 20%;
-        min-width: 200px;
-        height: var(--g-text-header-1-line-height);
-    }
-
     &__error {
         @include body-2-typography();
     }
 
-    &__info {
-        margin-bottom: 20px;
-
-        &_hidden {
-            display: none;
-        }
-    }
-
     &__system-tablets {
         display: flex;
         flex-wrap: wrap;

package/dist/containers/Cluster/utils.d.ts

@@ -1,5 +1,6 @@
 import type { ValueOf } from '../../types/common';
 export declare const clusterTabsIds: {
+    readonly overview: "overview";
     readonly tenants: "tenants";
     readonly nodes: "nodes";
     readonly storage: "storage";
@@ -7,6 +8,9 @@ export declare const clusterTabsIds: {
 };
 export declare type ClusterTab = ValueOf<typeof clusterTabsIds>;
 export declare const clusterTabs: ({
+    id: "overview";
+    title: string;
+} | {
     id: "tenants";
     title: string;
 } | {
@@ -19,4 +23,5 @@ export declare const clusterTabs: ({
     id: "versions";
     title: string;
 })[];
-export declare const getClusterPath: (activeTab?: ClusterTab, query?: {}) => string;
+export declare function isClusterTab(tab: any): tab is ClusterTab;
+export declare const getClusterPath: (activeTab?: ClusterTab | undefined, query?: {}) => string;

package/dist/containers/Cluster/utils.js

@@ -1,10 +1,15 @@
 import routes, { createHref } from '../../routes';
 export const clusterTabsIds = {
+    overview: 'overview',
     tenants: 'tenants',
     nodes: 'nodes',
     storage: 'storage',
     versions: 'versions',
 };
+const overview = {
+    id: clusterTabsIds.overview,
+    title: 'Overview',
+};
 const tenants = {
     id: clusterTabsIds.tenants,
     title: 'Databases',
@@ -21,7 +26,10 @@ const versions = {
     id: clusterTabsIds.versions,
     title: 'Versions',
 };
-export const clusterTabs = [tenants, nodes, storage, versions];
-export const getClusterPath = (activeTab = clusterTabsIds.tenants, query = {}) => {
-    return createHref(routes.cluster, { activeTab }, query);
+export const clusterTabs = [overview, tenants, nodes, storage, versions];
+export function isClusterTab(tab) {
+    return Object.values(clusterTabsIds).includes(tab);
+}
+export const getClusterPath = (activeTab, query = {}) => {
+    return createHref(routes.cluster, activeTab ? { activeTab } : undefined, query);
 };

package/dist/containers/Clusters/Clusters.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet-async';
 import DataTable from '@gravity-ui/react-data-table';
 import { TableColumnSetup, Select } from '@gravity-ui/uikit';
 import { Search } from '../../components/Search';
+import { Loader } from '../../components/Loader';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { useAutofetcher } from '../../utils/hooks';
 import { useTypedSelector } from '../../utils/hooks/useTypedSelector';
@@ -14,9 +16,8 @@ import { ClustersStatistics } from './ClustersStatistics';
 import { CLUSTERS_COLUMNS } from './columns';
 import { useSelectedColumns } from './useSelectedColumns';
 import { b } from './shared';
-import './Clusters.scss';
-import { Loader } from '../../components/Loader';
 import i18n from './i18n';
+import './Clusters.scss';
 export function Clusters() {
     const dispatch = useDispatch();
     const loading = useTypedSelector(selectLoadingFlag);
@@ -62,7 +63,7 @@ export function Clusters() {
     if (loading && !clusters.length) {
         return _jsx(Loader, { size: "l" });
     }
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx("div", Object.assign({ className: b('control', { wide: true }) }, { children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx("div", { children: _jsx(TableColumnSetup, { popupWidth: "242px", items: columnsToSelect, showStatus: true, onUpdate: setColumns, className: b('table-settings') }, "TableColumnSetup") }) }))] })), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx("div", Object.assign({ className: b('control', { wide: true }) }, { children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx("div", { children: _jsx(TableColumnSetup, { popupWidth: "242px", items: columnsToSelect, showStatus: true, onUpdate: setColumns, className: b('table-settings') }, "TableColumnSetup") }) }))] })), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
                             columnId: COLUMNS_NAMES.TITLE,
                             order: DataTable.ASCENDING,
                         } }) })) }))] })));

package/dist/containers/Clusters/columns.js

@@ -20,7 +20,7 @@ export const CLUSTERS_COLUMNS = [
             var _a, _b;
             const { balancer, name: clusterName } = row;
             const backend = balancer && removeViewerPathname(balancer);
-            const clusterPath = getClusterPath(clusterTabsIds.tenants, { backend, clusterName });
+            const clusterPath = getClusterPath(undefined, { backend, clusterName });
             const clusterStatus = (_a = row.cluster) === null || _a === void 0 ? void 0 : _a.Overall;
             return (_jsxs("div", Object.assign({ className: b('cluster') }, { children: [clusterStatus ? (_jsx(ExternalLink, Object.assign({ href: clusterPath }, { children: _jsx("div", { className: b('cluster-status', {
                                 type: clusterStatus && clusterStatus.toLowerCase(),

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

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

package/dist/containers/Clusters/i18n/en.json

@@ -10,5 +10,6 @@
     "statistics_nodes": "Nodes",
     "statistics_load": "Load",
     "statistics_storage": "Storage",
-    "tooltip_no-cluster-data": "No cluster data"
+    "tooltip_no-cluster-data": "No cluster data",
+    "page_title": "Clusters"
 }

package/dist/containers/Clusters/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "controls_status-select-label" | "controls_service-select-label" | "controls_version-select-label" | "controls_search-placeholder" | "controls_select-placeholder" | "statistics_clusters" | "statistics_hosts" | "statistics_tenants" | "statistics_nodes" | "statistics_load" | "statistics_storage" | "tooltip_no-cluster-data" | "page_title", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Clusters/i18n/index.js

@@ -1,7 +1,5 @@
-import { Lang, i18n } from '../../../utils/i18n';
+import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-clusters-page';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/Clusters/i18n/ru.json

@@ -10,5 +10,6 @@
     "statistics_nodes": "Узлы",
     "statistics_load": "Нагрузка",
     "statistics_storage": "Хранилище",
-    "tooltip_no-cluster-data": "Нет данных кластера"
+    "tooltip_no-cluster-data": "Нет данных кластера",
+    "page_title": "Кластеры"
 }

package/dist/containers/Node/Node.js

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import { useLocation, useRouteMatch } from 'react-router';
 import cn from 'bem-cn-lite';
 import { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet-async';
 import { Tabs } from '@gravity-ui/uikit';
 import { Link } from 'react-router-dom';
 import { TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE } from './NodePages';
@@ -17,39 +18,36 @@ import routes, { createHref, parseQuery } from '../../routes';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { AutoFetcher } from '../../utils/autofetcher';
 import { useTypedSelector } from '../../utils/hooks';
-import { clusterTabsIds } from '../Cluster/utils';
 import './Node.scss';
 const b = cn('node');
 export const STORAGE_ROLE = 'Storage';
 const autofetcher = new AutoFetcher();
 function Node(props) {
-    var _a, _b;
+    var _a;
     const container = useRef(null);
     const dispatch = useDispatch();
     const location = useLocation();
-    const { loading, wasLoaded, error, data } = useTypedSelector((state) => state.node);
-    const node = (_a = data === null || data === void 0 ? void 0 : data.SystemStateInfo) === null || _a === void 0 ? void 0 : _a[0];
-    const match = (_b = useRouteMatch(routes.node)) !== null && _b !== void 0 ? _b : Object.create(null);
+    const { loading, wasLoaded, error, data: node } = useTypedSelector((state) => state.node);
+    const match = (_a = useRouteMatch(routes.node)) !== null && _a !== void 0 ? _a : Object.create(null);
     const { id: nodeId, activeTab } = match.params;
     const { tenantName: tenantNameFromQuery } = parseQuery(location);
     const { activeTabVerified, nodeTabs } = useMemo(() => {
         var _a;
         const hasStorage = (_a = node === null || node === void 0 ? void 0 : node.Roles) === null || _a === void 0 ? void 0 : _a.find((el) => el === STORAGE_ROLE);
-        let actualActiveTab = activeTab;
-        if (!hasStorage && activeTab === STORAGE) {
-            actualActiveTab = OVERVIEW;
-        }
         const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
         const actualNodeTabs = nodePages.map((page) => {
             return Object.assign(Object.assign({}, page), { title: page.name });
         });
+        let actualActiveTab = actualNodeTabs.find(({ id }) => id === activeTab);
+        if (!actualActiveTab) {
+            actualActiveTab = actualNodeTabs[0];
+        }
         return { activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs };
     }, [activeTab, node]);
     useEffect(() => {
         var _a;
         const tenantName = ((_a = node === null || node === void 0 ? void 0 : node.Tenants) === null || _a === void 0 ? void 0 : _a[0]) || (tenantNameFromQuery === null || tenantNameFromQuery === void 0 ? void 0 : tenantNameFromQuery.toString());
         dispatch(setHeaderBreadcrumbs('node', {
-            clusterTab: clusterTabsIds.nodes,
             tenantName,
             nodeId,
         }));
@@ -65,10 +63,10 @@ function Node(props) {
         };
     }, [dispatch, nodeId]);
     const renderTabs = () => {
-        return (_jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", items: nodeTabs, activeTab: activeTabVerified, wrapTo: ({ id }, tabNode) => (_jsx(Link, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: id }), className: b('tab') }, { children: tabNode }), id)), allowNotSelected: true }) })));
+        return (_jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", items: nodeTabs, activeTab: activeTabVerified.id, wrapTo: ({ id }, tabNode) => (_jsx(Link, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: id }), className: b('tab') }, { children: tabNode }), id)), allowNotSelected: true }) })));
     };
     const renderTabContent = () => {
-        switch (activeTab) {
+        switch (activeTabVerified.id) {
             case STORAGE: {
                 return (_jsx("div", Object.assign({ className: b('storage') }, { children: _jsx(StorageWrapper, { nodeId: nodeId, parentContainer: container.current }) })));
             }
@@ -93,7 +91,7 @@ function Node(props) {
     }
     else {
         if (node) {
-            return (_jsxs("div", Object.assign({ className: b(null, props.className), ref: container }, { children: [_jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", Object.assign({ className: b('content') }, { children: renderTabContent() }))] })));
+            return (_jsxs("div", Object.assign({ className: b(null, props.className), ref: container }, { children: [_jsx(Helmet, Object.assign({ titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring` }, { children: _jsx("title", { children: activeTabVerified.title }) })), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", Object.assign({ className: b('content') }, { children: renderTabContent() }))] })));
         }
         return _jsx("div", Object.assign({ className: "error" }, { children: "no node data" }));
     }

package/dist/containers/Node/NodePages.js

@@ -12,7 +12,10 @@ export const NODE_PAGES = [
         id: STORAGE,
         name: 'Storage',
     },
-    { id: STRUCTURE, name: 'Structure' },
+    {
+        id: STRUCTURE,
+        name: 'Structure',
+    },
     {
         id: TABLETS,
         name: 'Tablets',

package/dist/containers/Node/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "pdisk.developer-ui-button-title" | "vdisk.developer-ui-button-title", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Node/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../utils/i18n';
+import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-node-page';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { en, ru });

package/dist/containers/Nodes/getNodesColumns.js

@@ -8,6 +8,7 @@ import { formatBytesToGigabyte, formatStorageValuesToGb, } from '../../utils/dat
 import { getLoadSeverityForNode } from '../../store/reducers/nodes/utils';
 import { UsageLabel } from '../../components/UsageLabel/UsageLabel';
 import { CellWithPopover } from '../../components/CellWithPopover/CellWithPopover';
+import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
     Host: 'Host',
@@ -49,7 +50,7 @@ const dataCenterColumn = {
     name: NODES_COLUMNS_IDS.DC,
     header: 'DC',
     align: DataTable.LEFT,
-    render: ({ row }) => (row.DataCenter ? row.DataCenter : '—'),
+    render: ({ row }) => row.DC || EMPTY_DATA_PLACEHOLDER,
     width: 60,
 };
 const rackColumn = {

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.d.ts

@@ -46,7 +46,7 @@ export declare const getPreparedStorageGroupsColumns: (nodesMap: NodesMap | unde
         index: number;
         footer?: boolean | undefined;
         headerData?: boolean | undefined;
-    }, column: DataTableColumn<PreparedStorageGroup>) => void) | undefined;
+    }, column: DataTableColumn<PreparedStorageGroup>, event: import("react").MouseEvent<HTMLTableCellElement, MouseEvent>) => void) | undefined;
     defaultOrder?: import("@gravity-ui/react-data-table").OrderType | undefined;
     sortAccessor?: string | ((row: PreparedStorageGroup) => any) | undefined;
     sortAscending?: import("@gravity-ui/react-data-table").Comparator<PreparedStorageGroup> | undefined;

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.d.ts

@@ -37,7 +37,7 @@ export declare const getPreparedStorageNodesColumns: (additionalNodesProps: Addi
         index: number;
         footer?: boolean | undefined;
         headerData?: boolean | undefined;
-    }, column: DataTableColumn<PreparedStorageNode>) => void) | undefined;
+    }, column: DataTableColumn<PreparedStorageNode>, event: import("react").MouseEvent<HTMLTableCellElement, MouseEvent>) => void) | undefined;
     defaultOrder?: import("@gravity-ui/react-data-table").OrderType | undefined;
     sortAccessor?: string | ((row: PreparedStorageNode) => any) | undefined;
     sortAscending?: import("@gravity-ui/react-data-table").Comparator<PreparedStorageNode> | undefined;

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.js

@@ -3,6 +3,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { NodeHostWrapper } from '../../../components/NodeHostWrapper/NodeHostWrapper';
 import { isSortableNodesProperty } from '../../../utils/nodes';
+import { EMPTY_DATA_PLACEHOLDER } from '../../../utils/constants';
 import { PDisk } from '../PDisk/PDisk';
 import { b } from './shared';
 export const STORAGE_NODES_COLUMNS_IDS = {
@@ -37,7 +38,7 @@ const getStorageNodesColumns = (additionalNodesProps) => {
             name: STORAGE_NODES_COLUMNS_IDS.DC,
             header: 'DC',
             width: 100,
-            render: ({ row }) => row.DataCenter || '—',
+            render: ({ row }) => row.DC || EMPTY_DATA_PLACEHOLDER,
             align: DataTable.LEFT,
         },
         {

package/dist/containers/Tablet/Tablet.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import { useLocation, useParams } from 'react-router';
 import { useDispatch } from 'react-redux';
 import cn from 'bem-cn-lite';
 import { Link as ExternalLink } from '@gravity-ui/uikit';
+import { Helmet } from 'react-helmet-async';
 import { backend } from '../../store';
 import { getTablet, getTabletDescribe, clearTabletData } from '../../store/reducers/tablet';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
-import { DEVELOPER_UI_TITLE } from '../../utils/constants';
+import { CLUSTER_DEFAULT_TITLE, DEVELOPER_UI_TITLE } from '../../utils/constants';
 import { parseQuery } from '../../routes';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../components/Errors/ResponseError';
@@ -30,7 +31,7 @@ export const Tablet = () => {
     const params = useParams();
     const { id } = params;
     const { data: tablet = {}, loading, id: tabletId, history = [], tenantPath, error, } = useTypedSelector((state) => state.tablet);
-    const { nodeId: queryNodeId, tenantName: queryTenantName, type: queryTabletType, } = parseQuery(location);
+    const { nodeId: queryNodeId, tenantName: queryTenantName, type: queryTabletType, clusterName: queryClusterName, } = parseQuery(location);
     const nodeId = ((_a = tablet.NodeId) === null || _a === void 0 ? void 0 : _a.toString()) || (queryNodeId === null || queryNodeId === void 0 ? void 0 : queryNodeId.toString());
     const tenantName = tenantPath || (queryTenantName === null || queryTenantName === void 0 ? void 0 : queryTenantName.toString());
     const type = tablet.Type || (queryTabletType === null || queryTabletType === void 0 ? void 0 : queryTabletType.toString());
@@ -61,21 +62,24 @@ export const Tablet = () => {
     const renderExternalLinks = (link, index) => {
         return (_jsx("li", Object.assign({ className: b('link', { external: true }) }, { children: _jsx(ExternalLink, Object.assign({ href: `${backend}${link.path}`, target: "_blank" }, { children: link.name })) }), index));
     };
-    if (loading && id !== tabletId && isFirstDataFetchRef.current) {
-        return _jsx(Loader, { size: "l" });
-    }
-    if (error) {
-        return _jsx(ResponseError, { error: error });
-    }
-    if (!tablet || !Object.keys(tablet).length) {
-        return (_jsx("div", Object.assign({ className: b('placeholder') }, { children: _jsx(EmptyState, { title: i18n('emptyState') }) })));
-    }
-    const { TabletId, Overall, Leader } = tablet;
-    const externalLinks = [
-        {
-            name: `${DEVELOPER_UI_TITLE} - tablet`,
-            path: `/tablets?TabletID=${TabletId}`,
-        },
-    ];
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('pane-wrapper') }, { children: [_jsxs("div", Object.assign({ className: b('left-pane') }, { children: [_jsx("ul", Object.assign({ className: b('links') }, { children: externalLinks.map(renderExternalLinks) })), _jsxs("div", Object.assign({ className: b('row', { header: true }) }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: i18n('tablet.header') })), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", Object.assign({ rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank" }, { children: _jsx(Icon, { name: "external" }) })), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", Object.assign({ className: b('loader') }, { children: loading && _jsx(Loader, { size: "s" }) }))] })), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: fetchData })] })), _jsx("div", Object.assign({ className: b('rigth-pane') }, { children: _jsx(TabletTable, { history: history }) }))] })) })));
+    const renderView = () => {
+        if (loading && id !== tabletId && isFirstDataFetchRef.current) {
+            return _jsx(Loader, { size: "l" });
+        }
+        if (error) {
+            return _jsx(ResponseError, { error: error });
+        }
+        if (!tablet || !Object.keys(tablet).length) {
+            return (_jsx("div", Object.assign({ className: b('placeholder') }, { children: _jsx(EmptyState, { title: i18n('emptyState') }) })));
+        }
+        const { TabletId, Overall, Leader } = tablet;
+        const externalLinks = [
+            {
+                name: `${DEVELOPER_UI_TITLE} - tablet`,
+                path: `/tablets?TabletID=${TabletId}`,
+            },
+        ];
+        return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('pane-wrapper') }, { children: [_jsxs("div", Object.assign({ className: b('left-pane') }, { children: [_jsx("ul", Object.assign({ className: b('links') }, { children: externalLinks.map(renderExternalLinks) })), _jsxs("div", Object.assign({ className: b('row', { header: true }) }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: i18n('tablet.header') })), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", Object.assign({ rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank" }, { children: _jsx(Icon, { name: "external" }) })), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", Object.assign({ className: b('loader') }, { children: loading && _jsx(Loader, { size: "s" }) }))] })), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: fetchData })] })), _jsx("div", Object.assign({ className: b('rigth-pane') }, { children: _jsx(TabletTable, { history: history }) }))] })) })));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${id} — ${i18n('tablet.header')} — ${tenantName || queryClusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
 };

package/dist/containers/Tablet/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "emptyState" | "tablet.header" | "controls.kill" | "controls.stop" | "controls.resume" | "dialog.kill" | "dialog.stop" | "dialog.resume", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;