ydb-embedded-ui 6.6.0 → 6.7.0

package/dist/src/containers/TabletsFilters/TabletsFilters.js

@@ -1,200 +1,90 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Loader, Select } from '@gravity-ui/uikit';
-import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
-import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet-async';
 import ReactList from 'react-list';
-import { connect } from 'react-redux';
+import { ArrayParam, StringParam, useQueryParams } from 'use-query-params';
+import { z } from 'zod';
 import { AccessDenied } from '../../components/Errors/403';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { Tablet } from '../../components/Tablet';
-import { parseQuery } from '../../routes';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { clearWasLoadingFlag, getFilteredTablets, getTablets, getTabletsInfo, setStateFilter, setTypeFilter, } from '../../store/reducers/tabletsFilters';
+import { nodesListApi } from '../../store/reducers/nodesList';
+import { tabletsApi } from '../../store/reducers/tablets';
+import { getFilteredTablets } from '../../store/reducers/tabletsFilters';
 import { cn } from '../../utils/cn';
-import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
+import { AUTO_RELOAD_INTERVAL, CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { tabletColorToTabletState, tabletStates } from '../../utils/tablet';
 import i18n from './i18n';
 import './TabletsFilters.scss';
 const b = cn('tablets-filters');
-export class TabletsFilters extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            nodeFilter: [],
-            tenantPath: '',
-            clusterName: '',
-        };
-        this.reloadDescriptor = -1;
-        this.makeRequest = () => {
-            const { nodeFilter, tenantPath } = this.state;
-            this.props.getTabletsInfo({ nodes: nodeFilter, path: [tenantPath] });
-        };
-        this.getTablets = () => {
-            const { timeoutForRequest } = this.props;
-            clearInterval(this.reloadDescriptor);
-            this.reloadDescriptor = setTimeout(() => {
-                this.makeRequest();
-                this.reloadDescriptor = -1;
-            }, timeoutForRequest);
-        };
-        this.handleNodeFilterChange = (nodeFilter) => {
-            this.setState({ nodeFilter }, () => {
-                this.props.clearWasLoadingFlag();
-                this.makeRequest();
-            });
-        };
-        this.handleStateFilterChange = (stateFilter) => {
-            const { setStateFilter } = this.props;
-            setStateFilter(stateFilter);
-        };
-        this.handleTypeFilterChange = (typeFilter) => {
-            const { setTypeFilter } = this.props;
-            setTypeFilter(typeFilter);
-        };
-        this.renderTablet = (index, key) => {
-            const { filteredTablets, size } = this.props;
-            return (_jsx(Tablet, { tablet: filteredTablets[index], tenantName: this.state.tenantPath, size: size, className: b('tablet') }, key));
-        };
-        this.renderContent = () => {
-            const { nodeFilter, tenantPath } = this.state;
-            const { tablets, filteredTablets, nodes, stateFilter, typeFilter, error } = this.props;
-            const states = tabletStates.map((item) => ({ value: item, content: item }));
-            const types = Array.from(new Set(...[map(tablets, (tblt) => tblt.Type)])).map((item) => ({
-                value: item,
-                content: item,
-            }));
-            const nodesForSelect = map(nodes, (node) => ({
-                content: node.Id,
-                value: node.Id,
-                meta: node.Host,
-            }));
-            return (_jsxs("div", { className: b(), children: [tenantPath ? (_jsx("div", { className: b('tenant'), children: _jsxs(React.Fragment, { children: [_jsx("span", { className: b('label'), children: "Database: " }), " ", tenantPath] }) })) : null, _jsx(MemoizedFilters, { nodesForSelect: nodesForSelect, nodeFilter: nodeFilter, onChangeNodes: this.handleNodeFilterChange, states: states, stateFilter: stateFilter, onChangeStates: this.handleStateFilterChange, types: types, typeFilter: typeFilter, onChangeTypes: this.handleTypeFilterChange }), error && _jsx("div", { className: "error", children: error }), filteredTablets.length > 0 ? (_jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: this.renderTablet, length: filteredTablets.length, type: "uniform" }) })) : (!error && _jsx("div", { className: b('empty-message'), children: "no tablets" }))] }));
-        };
-        this.renderView = () => {
-            const { loading, wasLoaded, error } = this.props;
-            if (loading && !wasLoaded) {
-                return TabletsFilters.renderLoader();
-            }
-            else if (error && typeof error === 'object') {
-                if (error.status === 403) {
-                    return _jsx(AccessDenied, {});
-                }
-                return _jsx("div", { children: error.statusText });
-            }
-            else {
-                return this.renderContent();
-            }
-        };
+const stringArrayParam = z.preprocess((arg) => {
+    if (Array.isArray(arg)) {
+        return arg.filter(Boolean).sort();
     }
-    static renderLoader() {
-        return (_jsx("div", { className: 'loader', children: _jsx(Loader, { size: "l" }) }));
+    return [];
+}, z.string().array());
+const stateArrayParam = z.preprocess((arg) => {
+    if (Array.isArray(arg)) {
+        return arg
+            .flatMap((item) => tabletColorToTabletState[item] || item)
+            .filter(Boolean);
     }
-    componentDidMount() {
-        const { setStateFilter, setTypeFilter, setHeaderBreadcrumbs } = this.props;
-        const queryParams = parseQuery(this.props.location);
-        const { nodeIds, type, path, state, clusterName } = queryParams;
-        const nodes = TabletsFilters.parseNodes(nodeIds);
-        if (state) {
-            const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
-            setStateFilter(stateFilter);
-        }
-        if (type) {
-            setTypeFilter([type]);
-        }
-        this.setState({ nodeFilter: nodes, tenantPath: path, clusterName }, () => {
-            this.makeRequest();
-        });
-        setHeaderBreadcrumbs('tablets', {
+    return [];
+}, z.string().array());
+const CONTROL_WIDTH = 220;
+const POPUP_WIDTH = 300;
+export function TabletsFilters() {
+    var _a;
+    const [params, setParams] = useQueryParams({
+        nodeIds: ArrayParam,
+        type: ArrayParam,
+        state: ArrayParam,
+        path: StringParam,
+        clusterName: StringParam,
+    });
+    const path = (_a = params.path) !== null && _a !== void 0 ? _a : undefined;
+    const dispatch = useTypedDispatch();
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('tablets', {
             tenantName: path,
-        });
-    }
-    componentDidUpdate(prevProps) {
-        const { loading, error } = this.props;
-        if (!error && prevProps.path && this.props.path && prevProps.path !== this.props.path) {
-            this.props.clearWasLoadingFlag();
-            this.getTablets();
+        }));
+    }, [dispatch, path]);
+    const nodeIds = stringArrayParam.parse(params.nodeIds);
+    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery({ nodes: nodeIds, path }, {
+        pollingInterval: AUTO_RELOAD_INTERVAL,
+    });
+    const { data: nodes } = nodesListApi.useGetNodesListQuery({}, { pollingInterval: AUTO_RELOAD_INTERVAL });
+    const loading = isFetching && currentData === undefined;
+    const stateFilter = stateArrayParam.parse(params.state);
+    const states = tabletStates.map((item) => ({ value: item, content: item }));
+    const typeFilter = stringArrayParam.parse(params.type);
+    const types = Array.from(new Set(...[map(currentData === null || currentData === void 0 ? void 0 : currentData.TabletStateInfo, (tblt) => tblt.Type)])).map((item) => ({
+        value: String(item),
+        content: item,
+    }));
+    const filteredTablets = useTypedSelector((state) => getFilteredTablets(state, { nodes: nodeIds, path }, stateFilter, typeFilter));
+    const renderTablet = (index, key) => (_jsx(Tablet, { tablet: filteredTablets[index], tenantName: path }, key));
+    const nodesForSelect = map(nodes, (node) => ({
+        content: node.Id,
+        value: String(node.Id),
+        data: node.Host,
+    }));
+    const renderView = () => {
+        if (loading) {
+            return (_jsx("div", { className: 'loader', children: _jsx(Loader, { size: "l" }) }));
         }
-        if (!error && !loading && this.reloadDescriptor === -1) {
-            this.getTablets();
+        if (error && typeof error === 'object' && 'status' in error && error.status === 403) {
+            return _jsx(AccessDenied, {});
         }
-    }
-    componentWillUnmount() {
-        clearInterval(this.reloadDescriptor);
-    }
-    render() {
-        const { tenantPath, clusterName } = this.state;
-        return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${i18n('page.title')} — ${tenantPath || clusterName || CLUSTER_DEFAULT_TITLE}` }) }), this.renderView()] }));
-    }
-}
-TabletsFilters.propTypes = {
-    wasLoaded: PropTypes.bool,
-    loading: PropTypes.bool,
-    getTabletsInfo: PropTypes.func,
-    timeoutForRequest: PropTypes.number,
-    path: PropTypes.string,
-    clearWasLoadingFlag: PropTypes.func,
-    nodes: PropTypes.array,
-    tablets: PropTypes.array,
-    filteredTablets: PropTypes.array,
-    setStateFilter: PropTypes.func,
-    setTypeFilter: PropTypes.func,
-    stateFilter: PropTypes.array,
-    typeFilter: PropTypes.array,
-    error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
-    setHeader: PropTypes.func,
-};
-TabletsFilters.parseNodes = (nodes) => {
-    if (Array.isArray(nodes)) {
-        return nodes.map(Number).filter(Number.isInteger);
-    }
-};
-TabletsFilters.getStateFiltersFromColor = (color) => {
-    return tabletColorToTabletState[color] || [color];
-};
-TabletsFilters.CONTROL_WIDTH = 220;
-TabletsFilters.POPUP_WIDTH = 300;
-const Filters = ({ nodesForSelect, nodeFilter, onChangeNodes, states, stateFilter, onChangeStates, types, typeFilter, onChangeTypes, }) => {
-    return (_jsxs("div", { className: b('filters'), children: [_jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Node ID", width: TabletsFilters.CONTROL_WIDTH, popupWidth: TabletsFilters.POPUP_WIDTH, placeholder: "All", options: nodesForSelect, value: nodeFilter, onUpdate: onChangeNodes, renderOption: (option) => {
-                        return (_jsxs("div", { className: b('node'), children: [_jsx("div", { children: option.content }), _jsx("div", { className: b('node-meta'), title: option.meta, children: option.meta })] }));
-                    }, getOptionHeight: () => 40 }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "multiple", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: states, value: stateFilter, onUpdate: onChangeStates }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Types", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: types, value: typeFilter, onUpdate: onChangeTypes }) })] }));
-};
-Filters.propTypes = {
-    nodesForSelect: PropTypes.array,
-    nodeFilter: PropTypes.array,
-    onChangeNodes: PropTypes.func,
-    states: PropTypes.array,
-    stateFilter: PropTypes.array,
-    onChangeStates: PropTypes.func,
-    types: PropTypes.array,
-    typeFilter: PropTypes.array,
-    onChangeTypes: PropTypes.func,
-};
-const MemoizedFilters = React.memo(Filters, (prevProps, nextProps) => {
-    return (isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
-        isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
-        isEqual(prevProps.typeFilter, nextProps.typeFilter));
-});
-const mapStateToProps = (state) => {
-    const { nodes, wasLoaded, loading, timeoutForRequest, stateFilter, typeFilter, error } = state.tabletsFilters;
-    return {
-        tablets: getTablets(state),
-        filteredTablets: getFilteredTablets(state),
-        nodes,
-        timeoutForRequest,
-        wasLoaded,
-        loading,
-        stateFilter,
-        typeFilter,
-        error,
+        return (_jsxs("div", { className: b(), children: [path ? (_jsxs("div", { className: b('tenant'), children: [_jsx("span", { className: b('label'), children: "Database: " }), " ", path] })) : null, _jsx(Filters, { nodesForSelect: nodesForSelect, nodeFilter: nodeIds, onChangeNodes: (n) => setParams({ nodeIds: n }), states: states, stateFilter: stateFilter, onChangeStates: (s) => setParams({ state: s }), types: types, typeFilter: typeFilter, onChangeTypes: (t) => setParams({ type: t }) }), error ? _jsx(ResponseError, { error: error }) : null, filteredTablets.length > 0 ? (_jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: renderTablet, length: filteredTablets.length, type: "uniform" }) })) : (!error && _jsx("div", { className: b('empty-message'), children: "no tablets" }))] }));
     };
-};
-const mapDispatchToProps = {
-    getTabletsInfo,
-    clearWasLoadingFlag,
-    setStateFilter,
-    setTypeFilter,
-    setHeaderBreadcrumbs,
-};
-export default connect(mapStateToProps, mapDispatchToProps)(TabletsFilters);
+    return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${i18n('page.title')} — ${path || params.clusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
+}
+function Filters({ nodesForSelect, nodeFilter, onChangeNodes, states, stateFilter, onChangeStates, types, typeFilter, onChangeTypes, }) {
+    return (_jsxs("div", { className: b('filters'), children: [_jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Node ID", width: CONTROL_WIDTH, popupWidth: POPUP_WIDTH, placeholder: "All", options: nodesForSelect, value: nodeFilter, onUpdate: onChangeNodes, renderOption: (option) => {
+                        return (_jsxs("div", { className: b('node'), children: [_jsx("div", { children: option.content }), _jsx("div", { className: b('node-meta'), title: option.data, children: option.data })] }));
+                    }, getOptionHeight: () => 40 }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "multiple", width: CONTROL_WIDTH, placeholder: "All", options: states, value: stateFilter, onUpdate: onChangeStates }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Types", width: CONTROL_WIDTH, placeholder: "All", options: types, value: typeFilter, onUpdate: onChangeTypes }) })] }));
+}

package/dist/src/containers/Tenant/Acl/Acl.d.ts

@@ -1,2 +1,4 @@
 import './Acl.scss';
-export declare const Acl: () => import("react/jsx-runtime").JSX.Element;
+export declare const Acl: ({ path }: {
+    path: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/containers/Tenant/Acl/Acl.js

@@ -3,10 +3,9 @@ import React from 'react';
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import { Loader } from '../../../components/Loader';
 import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
-import { getSchemaAcl, setAclWasNotLoaded } from '../../../store/reducers/schemaAcl/schemaAcl';
+import { schemaAclApi } from '../../../store/reducers/schemaAcl/schemaAcl';
 import { cn } from '../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
-import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import i18n from '../i18n';
 import './Acl.scss';
 const b = cn('ydb-acl');
@@ -57,19 +56,10 @@ const columns = [
         sortable: false,
     },
 ];
-export const Acl = () => {
-    const dispatch = useTypedDispatch();
-    const { currentSchemaPath } = useTypedSelector((state) => state.schema);
-    const { loading, error, acl, owner, wasLoaded } = useTypedSelector((state) => state.schemaAcl);
-    React.useEffect(() => {
-        if (currentSchemaPath) {
-            dispatch(getSchemaAcl({ path: currentSchemaPath }));
-        }
-        return () => {
-            // Ensures correct acl on path change
-            dispatch(setAclWasNotLoaded());
-        };
-    }, [currentSchemaPath, dispatch]);
+export const Acl = ({ path }) => {
+    const { currentData, isFetching, error } = schemaAclApi.useGetSchemaAclQuery({ path });
+    const loading = isFetching && !currentData;
+    const { acl, owner } = currentData || {};
     const renderTable = () => {
         if (!acl || !acl.length) {
             return null;
@@ -82,13 +72,13 @@ export const Acl = () => {
         }
         return (_jsxs("div", { className: b('owner-container'), children: [_jsx("span", { className: b('owner-label'), children: `${i18n('acl.owner')}: ` }), prepareLogin(owner)] }));
     };
-    if (loading && !wasLoaded) {
+    if (loading) {
         return _jsx(Loader, {});
     }
     if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    if (!loading && !acl && !owner) {
+    if (!acl && !owner) {
         return _jsx(React.Fragment, { children: i18n('acl.empty') });
     }
     return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('result'), children: [renderOwner(), renderTable()] }) }));

package/dist/src/containers/Tenant/Diagnostics/Autorefresh/AutorefreshControl.js

@@ -2,18 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowsRotateLeft } from '@gravity-ui/icons';
 import { Button, Select } from '@gravity-ui/uikit';
 import { api } from '../../../../store/reducers/api';
-import { setAutorefreshInterval } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedDispatch } from '../../../../utils/hooks';
 import i18n from './i18n';
 import './AutorefreshControl.scss';
 const b = cn('autorefresh-control');
 export function AutorefreshControl({ className }) {
     const dispatch = useTypedDispatch();
-    const autorefresh = useTypedSelector((state) => state.schema.autorefresh);
+    const [autoRefreshInterval, setAutoRefreshInterval] = useAutoRefreshInterval();
     return (_jsxs("div", { className: b(null, className), children: [_jsx(Button, { view: "flat", onClick: () => {
                     dispatch(api.util.invalidateTags(['All']));
-                }, extraProps: { 'aria-label': i18n('Refresh') }, children: _jsx(Button.Icon, { children: _jsx(ArrowsRotateLeft, {}) }) }), _jsxs(Select, { value: [String(autorefresh)], onUpdate: (v) => {
-                    dispatch(setAutorefreshInterval(Number(v)));
+                }, extraProps: { 'aria-label': i18n('Refresh') }, children: _jsx(Button.Icon, { children: _jsx(ArrowsRotateLeft, {}) }) }), _jsxs(Select, { value: [String(autoRefreshInterval)], onUpdate: (v) => {
+                    setAutoRefreshInterval(Number(v));
                 }, width: 85, children: [_jsx(Select.Option, { value: "0", children: i18n('None') }), _jsx(Select.Option, { value: "15000", children: i18n('15 sec') }), _jsx(Select.Option, { value: "60000", children: i18n('1 min') }), _jsx(Select.Option, { value: "120000", children: i18n('2 min') }), _jsx(Select.Option, { value: "300000", children: i18n('5 min') })] })] }));
 }

package/dist/src/containers/Tenant/Diagnostics/Consumers/Consumers.js

@@ -8,7 +8,7 @@ import { Search } from '../../../../components/Search';
 import { selectPreparedConsumersData, selectPreparedTopicStats, topicApi, } from '../../../../store/reducers/topic';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
-import { useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedSelector } from '../../../../utils/hooks';
 import { isCdcStreamEntityType } from '../../utils/schema';
 import { ConsumersTopicStats } from './TopicStats';
 import { CONSUMERS_COLUMNS_WIDTH_LS_KEY, columns } from './columns';
@@ -18,8 +18,8 @@ const b = cn('ydb-diagnostics-consumers');
 export const Consumers = ({ path, type }) => {
     const isCdcStream = isCdcStreamEntityType(type);
     const [searchValue, setSearchValue] = React.useState('');
-    const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { currentData, isFetching, error } = topicApi.useGetTopicQuery({ path }, { pollingInterval: autorefresh });
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { currentData, isFetching, error } = topicApi.useGetTopicQuery({ path }, { pollingInterval: autoRefreshInterval });
     const loading = isFetching && currentData === undefined;
     const consumers = useTypedSelector((state) => selectPreparedConsumersData(state, path));
     const topic = useTypedSelector((state) => selectPreparedTopicStats(state, path));

package/dist/src/containers/Tenant/Diagnostics/Describe/Describe.d.ts

@@ -2,8 +2,8 @@ import type { EPathType } from '../../../../types/api/schema';
 import './Describe.scss';
 import 'react-json-inspector/json-inspector.css';
 interface IDescribeProps {
-    tenant: string;
+    path: string;
     type?: EPathType;
 }
-declare const Describe: ({ tenant, type }: IDescribeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Describe: ({ path, type }: IDescribeProps) => import("react/jsx-runtime").JSX.Element;
 export default Describe;

package/dist/src/containers/Tenant/Diagnostics/Describe/Describe.js

@@ -7,17 +7,16 @@ import { Loader } from '../../../../components/Loader';
 import { describeApi } from '../../../../store/reducers/describe';
 import { selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
-import { useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedSelector } from '../../../../utils/hooks';
 import { isEntityWithMergedImplementation } from '../../utils/schema';
 import './Describe.scss';
 import 'react-json-inspector/json-inspector.css';
 const b = cn('kv-describe');
 const expandMap = new Map();
-const Describe = ({ tenant, type }) => {
-    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+const Describe = ({ path, type }) => {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
-    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type), shallowEqual);
-    const path = currentSchemaPath || tenant;
+    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, path, type), shallowEqual);
     let paths = skipToken;
     if (!isEntityWithMergedImpl) {
         paths = [path];
@@ -26,7 +25,7 @@ const Describe = ({ tenant, type }) => {
         paths = [path, ...mergedChildrenPaths];
     }
     const { currentData, isFetching, error } = describeApi.useGetDescribeQuery(paths, {
-        pollingInterval: autorefresh,
+        pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;
     const currentDescribe = currentData;

package/dist/src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.d.ts

@@ -5,6 +5,7 @@ interface DetailedOverviewProps {
     type?: EPathType;
     className?: string;
     tenantName: string;
+    path: string;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }

package/dist/src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.js

@@ -1,17 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSelector } from 'react-redux';
 import { cn } from '../../../../utils/cn';
 import Overview from '../Overview/Overview';
 import { TenantOverview } from '../TenantOverview/TenantOverview';
 import './DetailedOverview.scss';
 const b = cn('kv-detailed-overview');
 function DetailedOverview(props) {
-    const { type, tenantName, additionalTenantProps, additionalNodesProps } = props;
-    const { currentSchemaPath } = useSelector((state) => state.schema);
+    const { type, tenantName, path, additionalTenantProps, additionalNodesProps } = props;
     const renderTenantOverview = () => {
         return (_jsx("div", { className: b('section'), children: _jsx(TenantOverview, { tenantName: tenantName, additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }) }));
     };
-    const isTenant = tenantName === currentSchemaPath;
-    return (_jsx("div", { className: b(), children: isTenant ? renderTenantOverview() : _jsx(Overview, { type: type, tenantName: tenantName }) }));
+    const isTenant = tenantName === path;
+    return (_jsx("div", { className: b(), children: isTenant ? renderTenantOverview() : _jsx(Overview, { type: type, path: path }) }));
 }
 export default DetailedOverview;

package/dist/src/containers/Tenant/Diagnostics/Diagnostics.d.ts

@@ -3,6 +3,8 @@ import type { EPathType } from '../../../types/api/schema';
 import './Diagnostics.scss';
 interface DiagnosticsProps {
     type?: EPathType;
+    tenantName: string;
+    path: string;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }

package/dist/src/containers/Tenant/Diagnostics/Diagnostics.js

@@ -4,7 +4,6 @@ import { Tabs } from '@gravity-ui/uikit';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
 import { StringParam, useQueryParams } from 'use-query-params';
-import { Loader } from '../../../components/Loader';
 import routes, { createHref } from '../../../routes';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
 import { setDiagnosticsTab } from '../../../store/reducers/tenant/tenant';
@@ -32,83 +31,66 @@ const b = cn('kv-tenant-diagnostics');
 function Diagnostics(props) {
     const container = React.useRef(null);
     const dispatch = useTypedDispatch();
-    const { currentSchemaPath, wasLoaded } = useTypedSelector((state) => state.schema);
     const { diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
     const [queryParams] = useQueryParams({
         name: StringParam,
+        schema: StringParam,
         backend: StringParam,
         clusterName: StringParam,
     });
-    const { name: rootTenantName } = queryParams;
-    const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;
-    const isDatabase = isDatabaseEntityType(props.type) || currentSchemaPath === rootTenantName;
-    const pages = React.useMemo(() => {
-        if (isDatabase) {
-            return DATABASE_PAGES;
-        }
-        return getPagesByType(props.type);
-    }, [props.type, isDatabase]);
-    const forwardToDiagnosticTab = (tab) => {
-        dispatch(setDiagnosticsTab(tab));
-    };
-    const activeTab = React.useMemo(() => {
-        if (wasLoaded) {
-            let page = pages.find((el) => el.id === diagnosticsTab);
-            if (!page) {
-                page = pages[0];
-            }
-            if (page && page.id !== diagnosticsTab) {
-                forwardToDiagnosticTab(page.id);
-            }
-            return page;
+    const tenantName = isDatabaseEntityType(props.type) ? props.path : props.tenantName;
+    const isDatabase = isDatabaseEntityType(props.type) || props.path === props.tenantName;
+    const pages = isDatabase ? DATABASE_PAGES : getPagesByType(props.type);
+    let activeTab = pages.find((el) => el.id === diagnosticsTab);
+    if (!activeTab) {
+        activeTab = pages[0];
+    }
+    React.useEffect(() => {
+        if (activeTab && activeTab.id !== diagnosticsTab) {
+            dispatch(setDiagnosticsTab(activeTab.id));
         }
-        return undefined;
-    }, [pages, diagnosticsTab, wasLoaded]);
+    }, [activeTab, diagnosticsTab, dispatch]);
     const renderTabContent = () => {
-        const { type } = props;
-        const tenantNameString = tenantName;
+        const { type, path } = props;
         switch (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) {
             case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
-                return (_jsx(DetailedOverview, { type: type, tenantName: tenantNameString, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps }));
+                return (_jsx(DetailedOverview, { type: type, tenantName: tenantName, path: path, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps }));
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
-                return (_jsx(SchemaViewer, { path: currentSchemaPath, tenantName: tenantName, type: type, extended: true }));
+                return _jsx(SchemaViewer, { path: path, tenantName: tenantName, type: type, extended: true });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
-                return _jsx(TopQueries, { path: tenantNameString, type: type });
+                return _jsx(TopQueries, { tenantName: tenantName, type: type });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
-                return _jsx(TopShards, { tenantPath: tenantNameString, type: type });
+                return _jsx(TopShards, { tenantName: tenantName, path: path, type: type });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
-                return (_jsx(NodesWrapper, { path: currentSchemaPath, additionalNodesProps: props.additionalNodesProps, parentContainer: container.current }));
+                return (_jsx(NodesWrapper, { path: path, additionalNodesProps: props.additionalNodesProps, parentContainer: container.current }));
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
-                return _jsx(Tablets, { path: currentSchemaPath });
+                return _jsx(Tablets, { path: path });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
-                return (_jsx(StorageWrapper, { tenant: tenantNameString, parentContainer: container.current }));
+                return _jsx(StorageWrapper, { tenant: tenantName, parentContainer: container.current });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.network: {
-                return _jsx(Network, { path: tenantNameString });
+                return _jsx(Network, { tenantName: tenantName });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
-                return _jsx(Describe, { tenant: tenantNameString, type: type });
+                return _jsx(Describe, { path: path, type: type });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
-                // @ts-expect-error
-                return _jsx(HotKeys, { path: currentSchemaPath });
+                return _jsx(HotKeys, { path: path });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
-                // @ts-expect-error
-                return _jsx(Heatmap, { path: currentSchemaPath });
+                return _jsx(Heatmap, { path: path });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
-                // @ts-expect-error
-                return _jsx(Consumers, { path: currentSchemaPath, type: type });
+                return _jsx(Consumers, { path: path, type: type });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
-                return _jsx(Partitions, { path: currentSchemaPath });
+                return _jsx(Partitions, { path: path });
             }
             default: {
                 return _jsx("div", { children: "No data..." });
@@ -121,12 +103,6 @@ function Diagnostics(props) {
                             return (_jsx(Link, { to: path, className: b('tab'), children: node }, id));
                         }, allowNotSelected: true }), _jsx(AutorefreshControl, {})] }) }));
     };
-    // Loader prevents incorrect loading of tabs
-    // After tabs are initially loaded it is no longer needed
-    // Thus there is no also "loading" check as in other parts of the project
-    if (!wasLoaded) {
-        return _jsx(Loader, { size: "l" });
-    }
     return (_jsxs("div", { className: b(), ref: container, children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, renderTabs(), _jsx("div", { className: b('page-wrapper'), children: renderTabContent() })] }));
 }
 export default Diagnostics;

package/dist/{containers → src/containers}/Tenant/Diagnostics/Diagnostics.scss

@@ -6,7 +6,7 @@
     height: 100%;
 
     &__header-wrapper {
-        padding: 13px 20px 16px;
+        padding: 0 20px 16px;
 
         background-color: var(--g-color-base-background);
     }