ydb-embedded-ui 6.6.1 → 6.7.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ydb-embedded-ui",
-    "version": "6.6.1",
+    "version": "6.7.0",
     "files": [
         "dist"
     ],
@@ -24,6 +24,7 @@
         "@gravity-ui/websql-autocomplete": "^9.1.0",
         "@reduxjs/toolkit": "^2.2.3",
         "axios": "^1.6.8",
+        "axios-retry": "^4.4.0",
         "colord": "^2.9.3",
         "copy-to-clipboard": "^3.3.3",
         "crc-32": "^1.2.2",

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/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]);

package/dist/src/containers/Storage/Storage.js

@@ -11,7 +11,7 @@ import { filterGroups, filterNodes, getUsageFilterOptions, } from '../../store/r
 import { storageApi } from '../../store/reducers/storage/storage';
 import { storageTypeSchema, visibleEntitiesSchema } from '../../store/reducers/storage/types';
 import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
+import { useAutoRefreshInterval, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
 import { NodesUptimeFilterValues, nodesUptimeFilterValuesSchema } from '../../utils/nodes';
 import { StorageControls } from './StorageControls/StorageControls';
 import { StorageGroups } from './StorageGroups/StorageGroups';
@@ -33,7 +33,7 @@ const UsageFilterParam = withDefault({
 }, []);
 export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     var _a;
-    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const [autorefresh] = useAutoRefreshInterval();
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
         visible: StringParam,

package/dist/src/containers/Tablets/Tablets.js

@@ -14,7 +14,7 @@ import { ETabletState } from '../../types/api/tablet';
 import { cn } from '../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { calcUptime } from '../../utils/dataFormatters/dataFormatters';
-import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { mapTabletStateToLabelTheme } from '../../utils/tablet';
 import { getDefaultNodePath } from '../Node/NodePages';
 import i18n from './i18n';
@@ -26,7 +26,7 @@ const columns = [
             return i18n('Type');
         },
         render: ({ row }) => {
-            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? _jsx(Text, { color: "secondary", children: "leader" }) : ''] }));
+            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? '' : _jsx(Text, { color: "secondary", children: "follower" })] }));
         },
     },
     {
@@ -61,7 +61,7 @@ const columns = [
         align: 'right',
     },
     {
-        name: 'FQDN',
+        name: 'fqdn',
         get header() {
             return i18n('Node FQDN');
         },
@@ -111,8 +111,8 @@ function TabletActions(tablet) {
         }, buttonDisabled: isDisabledRestart || !isUserAllowedToMakeChanges, withPopover: true, popoverContent: i18n('controls.kill-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: _jsx(Icon, { data: ArrowsRotateRight }) }));
 }
 export function Tablets({ nodeId, path, className }) {
-    const { autorefresh } = useTypedSelector((state) => state.schema);
-    let params = skipToken;
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    let params = {};
     const node = nodeId === undefined ? undefined : String(nodeId);
     if (node !== undefined) {
         params = { nodes: [String(node)] };
@@ -120,11 +120,11 @@ export function Tablets({ nodeId, path, className }) {
     else if (path) {
         params = { path };
     }
-    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery(params, {
-        pollingInterval: autorefresh,
+    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery(Object.keys(params).length === 0 ? skipToken : params, {
+        pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;
-    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, node, path));
+    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, params));
     if (loading) {
         return _jsx(TableSkeleton, {});
     }

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

@@ -1,57 +1,2 @@
-export class TabletsFilters extends React.Component<any, any, any> {
-    static propTypes: {
-        wasLoaded: PropTypes.Requireable<boolean>;
-        loading: PropTypes.Requireable<boolean>;
-        getTabletsInfo: PropTypes.Requireable<(...args: any[]) => any>;
-        timeoutForRequest: PropTypes.Requireable<number>;
-        path: PropTypes.Requireable<string>;
-        clearWasLoadingFlag: PropTypes.Requireable<(...args: any[]) => any>;
-        nodes: PropTypes.Requireable<any[]>;
-        tablets: PropTypes.Requireable<any[]>;
-        filteredTablets: PropTypes.Requireable<any[]>;
-        setStateFilter: PropTypes.Requireable<(...args: any[]) => any>;
-        setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
-        stateFilter: PropTypes.Requireable<any[]>;
-        typeFilter: PropTypes.Requireable<any[]>;
-        error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
-        setHeader: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static renderLoader(): import("react/jsx-runtime").JSX.Element;
-    static parseNodes: (nodes: any) => number[] | undefined;
-    static getStateFiltersFromColor: (color: any) => any;
-    static CONTROL_WIDTH: number;
-    static POPUP_WIDTH: number;
-    constructor(props: any);
-    constructor(props: any, context: any);
-    state: {
-        nodeFilter: never[];
-        tenantPath: string;
-        clusterName: string;
-    };
-    reloadDescriptor: number;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    componentWillUnmount(): void;
-    makeRequest: () => void;
-    getTablets: () => void;
-    handleNodeFilterChange: (nodeFilter: any) => void;
-    handleStateFilterChange: (stateFilter: any) => void;
-    handleTypeFilterChange: (typeFilter: any) => void;
-    renderTablet: (index: any, key: any) => import("react/jsx-runtime").JSX.Element;
-    renderContent: () => import("react/jsx-runtime").JSX.Element;
-    renderView: () => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-declare const _default: import("react-redux").ConnectedComponent<typeof TabletsFilters, {
-    path?: string | null | undefined;
-    setHeader?: ((...args: any[]) => any) | null | undefined;
-    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
-} | {
-    path?: string | null | undefined;
-    setHeader?: ((...args: any[]) => any) | null | undefined;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
-}>;
-export default _default;
-import React from 'react';
-import PropTypes from 'prop-types';
+import './TabletsFilters.scss';
+export declare function TabletsFilters(): import("react/jsx-runtime").JSX.Element;