ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/containers/Tenant/Diagnostics/Autorefresh/i18n/index.js

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-diagnostics-autorefresh-control';
+export default registerKeysets(COMPONENT, { en });

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

@@ -4,5 +4,5 @@ interface ConsumersProps {
     path: string;
     type?: EPathType;
 }
-export declare const Consumers: ({ path, type }: ConsumersProps) => JSX.Element;
+export declare const Consumers: ({ path, type }: ConsumersProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,36 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
-import block from 'bem-cn-lite';
-import escapeRegExp from 'lodash/escapeRegExp';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
+import escapeRegExp from 'lodash/escapeRegExp';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { Loader } from '../../../../components/Loader';
 import { Search } from '../../../../components/Search';
-import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
+import { selectPreparedConsumersData, selectPreparedTopicStats, topicApi, } from '../../../../store/reducers/topic';
+import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
-import { selectPreparedConsumersData, selectPreparedTopicStats, getTopic, setDataWasNotLoaded, } from '../../../../store/reducers/topic';
+import { useTypedSelector } from '../../../../utils/hooks';
 import { isCdcStreamEntityType } from '../../utils/schema';
 import { ConsumersTopicStats } from './TopicStats';
 import { columns } from './columns';
 import i18n from './i18n';
 import './Consumers.scss';
-const b = block('ydb-diagnostics-consumers');
+const b = cn('ydb-diagnostics-consumers');
 export const Consumers = ({ path, type }) => {
     const isCdcStream = isCdcStreamEntityType(type);
-    const dispatch = useTypedDispatch();
-    const [searchValue, setSearchValue] = useState('');
+    const [searchValue, setSearchValue] = React.useState('');
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error } = useTypedSelector((state) => state.topic);
-    const consumers = useTypedSelector((state) => selectPreparedConsumersData(state));
-    const topic = useTypedSelector((state) => selectPreparedTopicStats(state));
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded);
-        }
-        dispatch(getTopic(path));
-    }, [dispatch, path]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
-    const dataToRender = useMemo(() => {
+    const { currentData, isFetching, error } = topicApi.useGetTopicQuery({ path }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const consumers = useTypedSelector((state) => selectPreparedConsumersData(state, path));
+    const topic = useTypedSelector((state) => selectPreparedTopicStats(state, path));
+    const dataToRender = React.useMemo(() => {
         if (!consumers) {
             return [];
         }
@@ -42,7 +35,7 @@ export const Consumers = ({ path, type }) => {
     const handleSearchChange = (value) => {
         setSearchValue(value);
     };
-    if (loading && !wasLoaded) {
+    if (loading) {
         return _jsx(Loader, { size: "m" });
     }
     if (error) {
@@ -51,5 +44,5 @@ export const Consumers = ({ path, type }) => {
     if (!consumers || !consumers.length) {
         return _jsx("div", { children: i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`) });
     }
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] })), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) })) }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('controls'), children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(DataTable, { theme: "yandex-cloud", data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) }) })] }));
 };

package/dist/containers/Tenant/Diagnostics/Consumers/Headers/Headers.d.ts

@@ -1,2 +1,2 @@
 import './Headers.scss';
-export declare const ReadLagsHeader: () => JSX.Element;
+export declare const ReadLagsHeader: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
 import { LagPopoverContent } from '../../../../../components/LagPopoverContent';
-import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES } from '../utils/constants';
+import { cn } from '../../../../../utils/cn';
 import i18n from '../i18n';
+import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES } from '../utils/constants';
 import './Headers.scss';
-const b = block('ydb-diagnostics-consumers-columns-header');
+const b = cn('ydb-diagnostics-consumers-columns-header');
 export const ReadLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.readLags'), type: "read" }) }));

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.d.ts

@@ -3,5 +3,5 @@ import './ConsumersTopicStats.scss';
 interface ConsumersTopicStatsProps {
     data?: IPreparedTopicStats;
 }
-export declare const ConsumersTopicStats: ({ data }: ConsumersTopicStatsProps) => JSX.Element;
+export declare const ConsumersTopicStats: ({ data }: ConsumersTopicStatsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
+import { cn } from '../../../../../utils/cn';
+import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import './ConsumersTopicStats.scss';
-const b = block('ydb-diagnostics-consumers-topic-stats');
+const b = cn('ydb-diagnostics-consumers-topic-stats');
 export const ConsumersTopicStats = ({ data }) => {
     const { writeSpeed, partitionsWriteLag, partitionsIdleTime } = data || {};
     const values = [
@@ -20,5 +20,5 @@ export const ConsumersTopicStats = ({ data }) => {
             value: formatMsToUptime(partitionsIdleTime || 0),
         },
     ];
-    return (_jsx("div", Object.assign({ className: b('wrapper') }, { children: values.map((value, index) => (_jsxs("div", Object.assign({ className: b('item') }, { children: [_jsx("div", Object.assign({ className: b('label') }, { children: value.label })), _jsx("div", Object.assign({ className: b('value') }, { children: value.value }))] }), index))) })));
+    return (_jsx("div", { className: b('wrapper'), children: values.map((value, index) => (_jsxs("div", { className: b('item'), children: [_jsx("div", { className: b('label'), children: value.label }), _jsx("div", { className: b('value'), children: value.value })] }, index))) }));
 };

package/dist/containers/Tenant/Diagnostics/Consumers/columns/columns.d.ts

@@ -1,4 +1,4 @@
-import { Column } from '@gravity-ui/react-data-table';
+import type { Column } from '@gravity-ui/react-data-table';
 import type { IPreparedConsumerData } from '../../../../../types/store/topic';
 import './Columns.scss';
 export declare const columns: Column<IPreparedConsumerData>[];

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import block from 'bem-cn-lite';
 import qs from 'qs';
-import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
-import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import { InternalLink } from '../../../../../components/InternalLink';
-import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
+import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import routes, { createHref } from '../../../../../routes';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { cn } from '../../../../../utils/cn';
+import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import { TenantTabsGroups } from '../../../TenantPages';
-import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES, CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS, CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES, } from '../utils/constants';
 import { ReadLagsHeader } from '../Headers';
+import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES, CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS, CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES, } from '../utils/constants';
 import './Columns.scss';
-const b = block('ydb-diagnostics-consumers-columns');
+const b = cn('ydb-diagnostics-consumers-columns');
 export const columns = [
     {
         name: CONSUMERS_COLUMNS_IDS.CONSUMER,
@@ -24,7 +24,7 @@ export const columns = [
             const queryParams = qs.parse(location.search, {
                 ignoreQueryPrefix: true,
             });
-            return (_jsx(InternalLink, Object.assign({ to: createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions, selectedConsumer: row.name })) }, { children: row.name })));
+            return (_jsx(InternalLink, { to: createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions, selectedConsumer: row.name })), children: row.name }));
         },
     },
     {

package/dist/containers/Tenant/Diagnostics/Consumers/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: "noConsumersMessage.topic" | "noConsumersMessage.stream" | "lagsPopover.readLags" | "table.emptyDataMessage" | "controls.search", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Diagnostics/Consumers/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-diagnostics-consumers';
-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/Tenant/Diagnostics/Describe/Describe.d.ts

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

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

@@ -1,66 +1,61 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-import { shallowEqual } from 'react-redux';
-import cn from 'bem-cn-lite';
+import { skipToken } from '@reduxjs/toolkit/query';
 import JSONTree from 'react-json-inspector';
-import 'react-json-inspector/json-inspector.css';
-import { Loader } from '../../../../components/Loader';
+import { shallowEqual } from 'react-redux';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
-import { getDescribe, setDataWasNotLoaded, setCurrentDescribePath, getDescribeBatched, } from '../../../../store/reducers/describe';
+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 { 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 dispatch = useTypedDispatch();
-    const { currentDescribe, error, loading, wasLoaded } = useTypedSelector((state) => state.describe);
-    const [preparedDescribeData, setPreparedDescribeData] = useState();
-    useEffect(() => {
-        if (currentDescribe) {
-            const paths = Object.keys(currentDescribe);
-            if (paths.length === 1) {
-                setPreparedDescribeData(currentDescribe[paths[0]]);
-            }
-            else {
-                setPreparedDescribeData(currentDescribe);
-            }
-        }
-    }, [currentDescribe]);
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
     const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type), shallowEqual);
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        const path = currentSchemaPath || tenant;
-        dispatch(setCurrentDescribePath(path));
-        if (!isEntityWithMergedImpl) {
-            dispatch(getDescribe({ path }));
+    const path = currentSchemaPath || tenant;
+    let paths = skipToken;
+    if (!isEntityWithMergedImpl) {
+        paths = [path];
+    }
+    else if (mergedChildrenPaths) {
+        paths = [path, ...mergedChildrenPaths];
+    }
+    const { currentData, isFetching, error } = describeApi.useGetDescribeQuery(paths, {
+        pollingInterval: autorefresh,
+    });
+    const loading = isFetching && currentData === undefined;
+    const currentDescribe = currentData;
+    let preparedDescribeData;
+    if (currentDescribe) {
+        const paths = Object.keys(currentDescribe);
+        if (paths.length === 1) {
+            preparedDescribeData = currentDescribe[paths[0]];
         }
-        else if (mergedChildrenPaths) {
-            dispatch(getDescribeBatched([path, ...mergedChildrenPaths]));
+        else {
+            preparedDescribeData = currentDescribe;
         }
-    }, [currentSchemaPath, tenant, mergedChildrenPaths, isEntityWithMergedImpl, dispatch]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
-    if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
+    }
+    if (loading || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
         return _jsx(Loader, { size: "m" });
     }
     if (error) {
         return _jsx(ResponseError, { error: error, className: b('message-container') });
     }
     if (!loading && !preparedDescribeData) {
-        return _jsx("div", Object.assign({ className: b('message-container') }, { children: "Empty" }));
+        return _jsx("div", { className: b('message-container'), children: "Empty" });
     }
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx("div", Object.assign({ className: b('result') }, { children: _jsx(JSONTree, { data: preparedDescribeData, className: b('tree'), onClick: ({ path }) => {
+    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('result'), children: _jsx(JSONTree, { data: preparedDescribeData, className: b('tree'), onClick: ({ path }) => {
                     const newValue = !(expandMap.get(path) || false);
                     expandMap.set(path, newValue);
                 }, searchOptions: {
                     debounceTime: 300,
                 }, isExpanded: (keypath) => {
                     return expandMap.get(keypath) || false;
-                } }) })) })));
+                } }) }) }));
 };
 export default Describe;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import type { EPathType } from '../../../../types/api/schema';
 import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../../../types/additionalProps';
+import type { EPathType } from '../../../../types/api/schema';
 import './DetailedOverview.scss';
 interface DetailedOverviewProps {
     type?: EPathType;
@@ -9,5 +8,5 @@ interface DetailedOverviewProps {
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function DetailedOverview(props: DetailedOverviewProps): JSX.Element;
+declare function DetailedOverview(props: DetailedOverviewProps): import("react/jsx-runtime").JSX.Element;
 export default DetailedOverview;

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

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

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -1,9 +1,9 @@
 .kv-detailed-overview {
     display: flex;
+    gap: 20px;
 
     width: 100%;
     height: 100%;
-    gap: 20px;
 
     &__section {
         display: flex;
@@ -14,7 +14,7 @@
     }
 
     &__modal {
-        & .yc-modal__content {
+        & .g-modal__content {
             position: relative;
         }
     }

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
+import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../../types/additionalProps';
 import type { EPathType } from '../../../types/api/schema';
-import type { AdditionalTenantsProps, AdditionalNodesProps } from '../../../types/additionalProps';
 import './Diagnostics.scss';
 interface DiagnosticsProps {
     type?: EPathType;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function Diagnostics(props: DiagnosticsProps): JSX.Element;
+declare function Diagnostics(props: DiagnosticsProps): import("react/jsx-runtime").JSX.Element;
 export default Diagnostics;

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

@@ -1,38 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import React from 'react';
+import { Tabs } from '@gravity-ui/uikit';
 import qs from 'qs';
-import cn from 'bem-cn-lite';
-import { Link } from 'react-router-dom';
-import { useLocation } from 'react-router';
 import { Helmet } from 'react-helmet-async';
-import { Switch, Tabs } from '@gravity-ui/uikit';
-import { useTypedSelector, useTypedDispatch } from '../../../utils/hooks';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import { Loader } from '../../../components/Loader';
 import routes, { createHref } from '../../../routes';
-import { enableAutorefresh, disableAutorefresh } from '../../../store/reducers/schema/schema';
-import { setDiagnosticsTab } from '../../../store/reducers/tenant/tenant';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
-import { Loader } from '../../../components/Loader';
+import { setDiagnosticsTab } from '../../../store/reducers/tenant/tenant';
+import { cn } from '../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import { Heatmap } from '../../Heatmap';
 import { NodesWrapper } from '../../Nodes/NodesWrapper';
 import { StorageWrapper } from '../../Storage/StorageWrapper';
 import { Tablets } from '../../Tablets';
+import { SchemaViewer } from '../Schema/SchemaViewer/SchemaViewer';
+import { TenantTabsGroups } from '../TenantPages';
+import { isDatabaseEntityType } from '../utils/schema';
+import { AutorefreshControl } from './Autorefresh/AutorefreshControl';
+import { Consumers } from './Consumers';
 import Describe from './Describe/Describe';
+import DetailedOverview from './DetailedOverview/DetailedOverview';
+import { DATABASE_PAGES, getPagesByType } from './DiagnosticsPages';
 import { HotKeys } from './HotKeys/HotKeys';
-import Network from './Network/Network';
+import { Network } from './Network/Network';
 import { Partitions } from './Partitions/Partitions';
-import { Consumers } from './Consumers';
 import { TopQueries } from './TopQueries';
 import { TopShards } from './TopShards';
-import DetailedOverview from './DetailedOverview/DetailedOverview';
-import { isDatabaseEntityType } from '../utils/schema';
-import { TenantTabsGroups } from '../TenantPages';
-import { DATABASE_PAGES, getPagesByType } from './DiagnosticsPages';
 import './Diagnostics.scss';
 const b = cn('kv-tenant-diagnostics');
 function Diagnostics(props) {
-    const container = useRef(null);
+    const container = React.useRef(null);
     const dispatch = useTypedDispatch();
-    const { currentSchemaPath, autorefresh, wasLoaded } = useTypedSelector((state) => state.schema);
+    const { currentSchemaPath, wasLoaded } = useTypedSelector((state) => state.schema);
     const { diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
@@ -41,7 +42,7 @@ function Diagnostics(props) {
     const { name: rootTenantName } = queryParams;
     const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;
     const isDatabase = isDatabaseEntityType(props.type) || currentSchemaPath === rootTenantName;
-    const pages = useMemo(() => {
+    const pages = React.useMemo(() => {
         if (isDatabase) {
             return DATABASE_PAGES;
         }
@@ -50,7 +51,7 @@ function Diagnostics(props) {
     const forwardToDiagnosticTab = (tab) => {
         dispatch(setDiagnosticsTab(tab));
     };
-    const activeTab = useMemo(() => {
+    const activeTab = React.useMemo(() => {
         if (wasLoaded) {
             let page = pages.find((el) => el.id === diagnosticsTab);
             if (!page) {
@@ -63,14 +64,6 @@ function Diagnostics(props) {
         }
         return undefined;
     }, [pages, diagnosticsTab, wasLoaded]);
-    const onAutorefreshToggle = (value) => {
-        if (value) {
-            dispatch(enableAutorefresh());
-        }
-        else {
-            dispatch(disableAutorefresh());
-        }
-    };
     const renderTabContent = () => {
         const { type } = props;
         const tenantNameString = tenantName;
@@ -78,6 +71,9 @@ function Diagnostics(props) {
             case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
                 return (_jsx(DetailedOverview, { type: type, tenantName: tenantNameString, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps }));
             }
+            case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
+                return _jsx(SchemaViewer, { path: currentSchemaPath, type: type, withFamilies: true });
+            }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
                 return _jsx(TopQueries, { path: tenantNameString, type: type });
             }
@@ -120,10 +116,10 @@ function Diagnostics(props) {
         }
     };
     const renderTabs = () => {
-        return (_jsx("div", Object.assign({ className: b('header-wrapper') }, { children: _jsxs("div", Object.assign({ className: b('tabs') }, { children: [_jsx(Tabs, { size: "l", items: pages, activeTab: activeTab === null || activeTab === void 0 ? void 0 : activeTab.id, wrapTo: ({ id }, node) => {
+        return (_jsx("div", { className: b('header-wrapper'), children: _jsxs("div", { className: b('tabs'), children: [_jsx(Tabs, { size: "l", items: pages, activeTab: activeTab === null || activeTab === void 0 ? void 0 : activeTab.id, wrapTo: ({ id }, node) => {
                             const path = createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.diagnosticsTab]: id }));
-                            return (_jsx(Link, Object.assign({ to: path, className: b('tab') }, { children: node }), id));
-                        }, allowNotSelected: true }), _jsx(Switch, { checked: autorefresh, onUpdate: onAutorefreshToggle, content: "Autorefresh" })] })) })));
+                            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
@@ -131,6 +127,6 @@ function Diagnostics(props) {
     if (!wasLoaded) {
         return _jsx(Loader, { size: "l" });
     }
-    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, renderTabs(), _jsx("div", Object.assign({ className: b('page-wrapper') }, { children: renderTabContent() }))] })));
+    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/Tenant/Diagnostics/Diagnostics.scss

@@ -17,7 +17,7 @@
         align-items: center;
 
         box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
-        & .yc-tabs_direction_horizontal {
+        & .g-tabs_direction_horizontal {
             box-shadow: unset;
         }
     }

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

@@ -32,6 +32,9 @@ export declare const DATABASE_PAGES: ({
 export declare const TABLE_PAGES: ({
     id: "overview";
     title: string;
+} | {
+    id: "schema";
+    title: string;
 } | {
     id: "topShards";
     title: string;
@@ -54,6 +57,9 @@ export declare const TABLE_PAGES: ({
 export declare const COLUMN_TABLE_PAGES: ({
     id: "overview";
     title: string;
+} | {
+    id: "schema";
+    title: string;
 } | {
     id: "topShards";
     title: string;

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

@@ -4,6 +4,10 @@ const overview = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.overview,
     title: 'Info',
 };
+const schema = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.schema,
+    title: 'Schema',
+};
 const topQueries = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
     title: 'Top queries',
@@ -58,8 +62,8 @@ export const DATABASE_PAGES = [
     network,
     describe,
 ];
-export const TABLE_PAGES = [overview, topShards, nodes, graph, tablets, hotKeys, describe];
-export const COLUMN_TABLE_PAGES = [overview, topShards, nodes, graph, tablets, describe];
+export const TABLE_PAGES = [overview, schema, topShards, nodes, graph, tablets, hotKeys, describe];
+export const COLUMN_TABLE_PAGES = [overview, schema, topShards, nodes, graph, tablets, describe];
 export const DIR_PAGES = [overview, topShards, nodes, describe];
 export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, describe];
 export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import './HotKeys.scss';
 interface HotKeysProps {
     path: string;
 }
-export declare function HotKeys({ path }: HotKeysProps): JSX.Element;
+export declare function HotKeys({ path }: HotKeysProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
-import { Icon } from '../../../../components/Icon';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
+import { Icon } from '../../../../components/Icon';
+import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
-import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
-import './HotKeys.scss';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import i18n from './i18n';
+import './HotKeys.scss';
 const b = cn('ydb-hot-keys');
 const tableColumnsIds = {
     accessSample: 'accessSample',
@@ -17,7 +17,7 @@ const tableColumnsIds = {
 const getHotKeysColumns = (keyColumnsIds = []) => {
     const keysColumns = keyColumnsIds.map((col, index) => ({
         name: col,
-        header: (_jsxs("div", Object.assign({ className: b('primary-key-column') }, { children: [_jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }), col] }))),
+        header: (_jsxs("div", { className: b('primary-key-column'), children: [_jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }), col] })),
         render: ({ row }) => row.keyValues[index],
         align: DataTable.RIGHT,
         sortable: false,
@@ -36,14 +36,14 @@ const getHotKeysColumns = (keyColumnsIds = []) => {
 export function HotKeys({ path }) {
     var _a, _b, _c;
     const dispatch = useTypedDispatch();
-    const collectSamplesTimerRef = useRef();
+    const collectSamplesTimerRef = React.useRef();
     const { loading, wasLoaded, data, error } = useTypedSelector((state) => state.hotKeys);
     const { loading: schemaLoading, data: schemaData } = useTypedSelector((state) => state.schema);
     const keyColumnsIds = (_c = (_b = (_a = schemaData[path]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Table) === null || _c === void 0 ? void 0 : _c.KeyColumnNames;
-    const tableColumns = useMemo(() => {
+    const tableColumns = React.useMemo(() => {
         return getHotKeysColumns(keyColumnsIds);
     }, [keyColumnsIds]);
-    useEffect(() => {
+    React.useEffect(() => {
         const fetchHotkeys = async (enableSampling) => {
             // Set hotkeys error, but not data, since data is set conditionally
             try {
@@ -93,8 +93,8 @@ export function HotKeys({ path }) {
     if (!data) {
         return _jsx("div", { children: i18n('no-data') });
     }
-    return (_jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { columns: tableColumns, data: data, settings: DEFAULT_TABLE_SETTINGS, theme: "yandex-cloud", initialSortOrder: {
+    return (_jsx("div", { className: b('table-content'), children: _jsx(DataTable, { columns: tableColumns, data: data, settings: DEFAULT_TABLE_SETTINGS, theme: "yandex-cloud", initialSortOrder: {
                 columnId: tableColumnsIds.accessSample,
                 order: DataTable.DESCENDING,
-            } }) })));
+            } }) }));
 }