ydb-embedded-ui 6.4.0 → 6.6.0

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

@@ -0,0 +1,92 @@
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
+import { EPathType } from '../../../types/api/schema';
+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',
+};
+const topShards = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
+    title: 'Top shards',
+};
+const nodes = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+    title: 'Nodes',
+};
+const tablets = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
+    title: 'Tablets',
+};
+const storage = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.storage,
+    title: 'Storage',
+};
+const network = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.network,
+    title: 'Network',
+};
+const describe = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.describe,
+    title: 'Describe',
+};
+const hotKeys = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.hotKeys,
+    title: 'Hot keys',
+};
+const graph = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.graph,
+    title: 'Graph',
+};
+const consumers = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.consumers,
+    title: 'Consumers',
+};
+const partitions = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
+    title: 'Partitions',
+};
+export const ASYNC_REPLICATION_PAGES = [overview, tablets, describe];
+export const DATABASE_PAGES = [
+    overview,
+    topQueries,
+    topShards,
+    nodes,
+    tablets,
+    storage,
+    network,
+    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, tablets, describe];
+export const TOPIC_PAGES = [overview, consumers, partitions, nodes, tablets, describe];
+export const EXTERNAL_DATA_SOURCE_PAGES = [overview, describe];
+export const EXTERNAL_TABLE_PAGES = [overview, describe];
+export const VIEW_PAGES = [overview, describe];
+// verbose mapping to guarantee correct tabs for new path types
+// TS will error when a new type is added but not mapped here
+const pathTypeToPages = {
+    [EPathType.EPathTypeInvalid]: undefined,
+    [EPathType.EPathTypeSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeExtSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeColumnStore]: DATABASE_PAGES,
+    [EPathType.EPathTypeTable]: TABLE_PAGES,
+    [EPathType.EPathTypeColumnTable]: COLUMN_TABLE_PAGES,
+    [EPathType.EPathTypeDir]: DIR_PAGES,
+    [EPathType.EPathTypeTableIndex]: DIR_PAGES,
+    [EPathType.EPathTypeCdcStream]: CDC_STREAM_PAGES,
+    [EPathType.EPathTypePersQueueGroup]: TOPIC_PAGES,
+    [EPathType.EPathTypeExternalDataSource]: EXTERNAL_DATA_SOURCE_PAGES,
+    [EPathType.EPathTypeExternalTable]: EXTERNAL_TABLE_PAGES,
+    [EPathType.EPathTypeView]: VIEW_PAGES,
+    [EPathType.EPathTypeReplication]: ASYNC_REPLICATION_PAGES,
+};
+export const getPagesByType = (type) => (type && pathTypeToPages[type]) || DIR_PAGES;

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import DataTable from '@gravity-ui/react-data-table';
+import { Button, Card, Icon } from '@gravity-ui/uikit';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
+import { cn } from '../../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS, IS_HOTKEYS_HELP_HIDDDEN_KEY } from '../../../../utils/constants';
+import { useSetting, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import i18n from './i18n';
+import keyIcon from '../../../../assets/icons/key.svg';
+import './HotKeys.scss';
+const b = cn('ydb-hot-keys');
+const tableColumnsIds = {
+    accessSample: 'accessSample',
+    keyValues: 'keyValues',
+};
+const getHotKeysColumns = (keyColumnsIds = []) => {
+    const keysColumns = keyColumnsIds.map((col, index) => ({
+        name: col,
+        header: (_jsxs("div", { className: b('primary-key-column'), children: [_jsx(Icon, { data: keyIcon, width: 12, height: 7 }), col] })),
+        render: ({ row }) => row.keyValues[index],
+        align: DataTable.RIGHT,
+        sortable: false,
+    }));
+    return [
+        ...keysColumns,
+        {
+            name: tableColumnsIds.accessSample,
+            header: 'Samples',
+            render: ({ row }) => row.accessSample,
+            align: DataTable.RIGHT,
+            sortable: false,
+        },
+    ];
+};
+export function HotKeys({ path }) {
+    var _a, _b, _c;
+    const dispatch = useTypedDispatch();
+    const [helpHidden, setHelpHidden] = useSetting(IS_HOTKEYS_HELP_HIDDDEN_KEY);
+    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 = React.useMemo(() => {
+        return getHotKeysColumns(keyColumnsIds);
+    }, [keyColumnsIds]);
+    React.useEffect(() => {
+        const fetchHotkeys = async (enableSampling) => {
+            // Set hotkeys error, but not data, since data is set conditionally
+            try {
+                const response = await window.api.getHotKeys(path, enableSampling);
+                return response;
+            }
+            catch (err) {
+                dispatch(setHotKeysError(err));
+                return undefined;
+            }
+        };
+        const fetchData = async () => {
+            // If there is previous pending request for samples, cancel it
+            if (collectSamplesTimerRef.current !== undefined) {
+                window.clearInterval(collectSamplesTimerRef.current);
+            }
+            dispatch(setHotKeysDataWasNotLoaded());
+            dispatch(setHotKeysLoading());
+            // Send request that will trigger hot keys sampling (enable_sampling = true)
+            const initialResponse = await fetchHotkeys(true);
+            // If there are hotkeys in the initial request (hotkeys was collected before)
+            // we could just use colleted samples (collected hotkeys are stored only for 30 seconds)
+            if (initialResponse && initialResponse.hotkeys) {
+                dispatch(setHotKeysData(initialResponse));
+            }
+            else if (initialResponse) {
+                // Else wait for 5 seconds, while hot keys are being collected
+                // And request these samples (enable_sampling = false)
+                const timer = setTimeout(async () => {
+                    const responseWithSamples = await fetchHotkeys(false);
+                    if (responseWithSamples) {
+                        dispatch(setHotKeysData(responseWithSamples));
+                    }
+                }, 5000);
+                collectSamplesTimerRef.current = timer;
+            }
+        };
+        fetchData();
+    }, [dispatch, path]);
+    const renderContent = () => {
+        // It takes a while to collect hot keys. Display explicit status message, while collecting
+        if ((loading && !wasLoaded) || schemaLoading) {
+            return _jsx("div", { children: i18n('hot-keys-collecting') });
+        }
+        if (error) {
+            return _jsx(ResponseError, { error: error });
+        }
+        if (!data) {
+            return _jsx("div", { children: i18n('no-data') });
+        }
+        return (_jsx(ResizeableDataTable, { wrapperClassName: b('table'), columns: tableColumns, data: data, settings: DEFAULT_TABLE_SETTINGS, initialSortOrder: {
+                columnId: tableColumnsIds.accessSample,
+                order: DataTable.DESCENDING,
+            } }));
+    };
+    const renderHelpCard = () => {
+        if (helpHidden) {
+            return null;
+        }
+        return (_jsxs(Card, { theme: "info", view: "filled", type: "container", className: b('help-card'), children: [i18n('help'), _jsx(Button, { className: b('help-card__close-button'), view: "flat", onClick: () => setHelpHidden(true), children: _jsx(Icon, { data: Xmark, size: 18 }) })] }));
+    };
+    return (_jsxs(React.Fragment, { children: [renderHelpCard(), renderContent()] }));
+}

package/dist/src/containers/Tenant/Diagnostics/HotKeys/i18n/en.json

@@ -0,0 +1,5 @@
+{
+    "hot-keys-collecting": "Please wait a little while we are collecting hot keys samples...",
+    "no-data": "No information about hot keys",
+    "help": "Hot keys contains a list of table primary key values that are accessed most often. Sample is collected upon request to the tab during 5s time interval. Samples column indicates how many requests to the particular key value were registered during collection phase."
+}

package/dist/src/containers/Tenant/Diagnostics/HotKeys/i18n/index.d.ts

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

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

@@ -0,0 +1,7 @@
+import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
+interface AsyncReplicationProps {
+    data?: TEvDescribeSchemeResult;
+}
+/** Displays overview for Replication EPathType */
+export declare function AsyncReplicationInfo({ data }: AsyncReplicationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from '@gravity-ui/uikit';
+import { AsyncReplicationState } from '../../../../../components/AsyncReplicationState';
+import { InfoViewer } from '../../../../../components/InfoViewer';
+import { useTypedSelector } from '../../../../../utils/hooks';
+import { getEntityName } from '../../../utils';
+import { AsyncReplicationPaths } from '../AsyncReplicationPaths';
+import { Credentials } from './Credentials';
+import i18n from './i18n';
+/** Displays overview for Replication EPathType */
+export function AsyncReplicationInfo({ data }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
+    const { error: schemaError } = useTypedSelector((state) => state.schema);
+    if (schemaError) {
+        return _jsx("div", { className: "error", children: schemaError.statusText });
+    }
+    if (!data) {
+        return (_jsxs("div", { className: "error", children: [i18n('noData'), " ", entityName] }));
+    }
+    return (_jsxs(Flex, { direction: "column", gap: "4", children: [_jsx(InfoViewer, { title: entityName, info: [
+                    {
+                        label: i18n('state.label'),
+                        value: (_jsx(AsyncReplicationState, { state: (_b = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.ReplicationDescription) === null || _b === void 0 ? void 0 : _b.State })),
+                    },
+                    {
+                        label: i18n('srcConnection.endpoint.label'),
+                        value: (_jsx(Text, { variant: "code-inline-2", children: (_f = (_e = (_d = (_c = data.PathDescription) === null || _c === void 0 ? void 0 : _c.ReplicationDescription) === null || _d === void 0 ? void 0 : _d.Config) === null || _e === void 0 ? void 0 : _e.SrcConnectionParams) === null || _f === void 0 ? void 0 : _f.Endpoint })),
+                    },
+                    {
+                        label: i18n('srcConnection.database.label'),
+                        value: (_jsx(Text, { variant: "code-inline-2", children: (_k = (_j = (_h = (_g = data.PathDescription) === null || _g === void 0 ? void 0 : _g.ReplicationDescription) === null || _h === void 0 ? void 0 : _h.Config) === null || _j === void 0 ? void 0 : _j.SrcConnectionParams) === null || _k === void 0 ? void 0 : _k.Database })),
+                    },
+                    {
+                        label: i18n('credentials.label'),
+                        value: (_jsx(Credentials, { connection: (_o = (_m = (_l = data.PathDescription) === null || _l === void 0 ? void 0 : _l.ReplicationDescription) === null || _m === void 0 ? void 0 : _m.Config) === null || _o === void 0 ? void 0 : _o.SrcConnectionParams })),
+                    },
+                ] }), _jsx(AsyncReplicationPaths, { config: (_q = (_p = data.PathDescription) === null || _p === void 0 ? void 0 : _p.ReplicationDescription) === null || _q === void 0 ? void 0 : _q.Config })] }));
+}

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/Credentials.d.ts

@@ -0,0 +1,6 @@
+import type { TConnectionParams } from '../../../../../types/api/schema/replication';
+interface CredentialsProps {
+    connection?: TConnectionParams;
+}
+export declare function Credentials({ connection }: CredentialsProps): "unknown" | import("react/jsx-runtime").JSX.Element | "OAuth" | null;
+export {};

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/Credentials.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from '@gravity-ui/uikit';
+export function Credentials({ connection }) {
+    if (!connection) {
+        return null;
+    }
+    if (connection.StaticCredentials) {
+        return (_jsx(Label, { value: connection.StaticCredentials.User, theme: "normal", children: "user" }));
+    }
+    if ('OAuthToken' in connection) {
+        return 'OAuth';
+    }
+    return 'unknown';
+}

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/i18n/en.json

@@ -0,0 +1,7 @@
+{
+    "credentials.label": "Credentials",
+    "noData": "No data for entity:",
+    "srcConnection.database.label": "Source Database Path",
+    "srcConnection.endpoint.label": "Source Cluster Endpoint",
+    "state.label": "State"
+}

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "noData" | "credentials.label" | "srcConnection.database.label" | "srcConnection.endpoint.label" | "state.label", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/i18n/index.js

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

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/index.d.ts

@@ -0,0 +1 @@
+export * from './AsyncReplicationInfo';

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/index.js

@@ -0,0 +1 @@
+export * from './AsyncReplicationInfo';

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

@@ -0,0 +1,7 @@
+import type { TReplicationConfig } from '../../../../../types/api/schema/replication';
+import './AsyncReplicationPaths.scss';
+interface AsyncReplicationPathsProps {
+    config?: TReplicationConfig;
+}
+export declare function AsyncReplicationPaths({ config }: AsyncReplicationPathsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { ResizeableDataTable } from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { cn } from '../../../../../utils/cn';
+import { TENANT_OVERVIEW_TABLES_SETTINGS } from '../../../../../utils/constants';
+import i18n from './i18n';
+import './AsyncReplicationPaths.scss';
+const b = cn('ydb-async-replication-paths');
+const columns = [
+    {
+        name: i18n('column.srcPath.name'),
+        render: ({ row }) => row.SrcPath,
+        sortAccessor: (row) => row.SrcPath,
+    },
+    {
+        name: i18n('column.dstPath.name'),
+        render: ({ row }) => row.DstPath,
+        sortAccessor: (row) => row.DstPath,
+    },
+];
+export function AsyncReplicationPaths({ config }) {
+    var _a, _b;
+    if (!config) {
+        return null;
+    }
+    let content = i18n('noData');
+    if (config.Everything) {
+        content = (_jsxs("span", { children: [i18n('everythingWithPrefix'), ' ', _jsx(Text, { variant: "code-inline-2", children: (_b = (_a = config.Everything) === null || _a === void 0 ? void 0 : _a.DstPrefix) !== null && _b !== void 0 ? _b : 'undefined' }), "."] }));
+    }
+    if (config.Specific) {
+        content = (_jsx(ResizeableDataTable, { data: config.Specific.Targets, settings: TENANT_OVERVIEW_TABLES_SETTINGS, columns: columns }));
+    }
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('title'), children: i18n('title') }), content] }));
+}

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/i18n/en.json

@@ -0,0 +1,7 @@
+{
+    "column.dstPath.name": "Dist",
+    "column.srcPath.name": "Source",
+    "everythingWithPrefix": "Everything with prefix:",
+    "noData": "No data.",
+    "title": "Replicated Paths"
+}

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "title" | "column.dstPath.name" | "column.srcPath.name" | "everythingWithPrefix" | "noData", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/i18n/index.js

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

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/index.d.ts

@@ -0,0 +1 @@
+export * from './AsyncReplicationPaths';

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/index.js

@@ -0,0 +1 @@
+export * from './AsyncReplicationPaths';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { EPathType } from '../../../../types/api/schema';
+interface OverviewProps {
+    type?: EPathType;
+    tenantName?: string;
+}
+declare function Overview({ type, tenantName }: OverviewProps): string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+export default Overview;

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { skipToken } from '@reduxjs/toolkit/query';
+import { shallowEqual } from 'react-redux';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { TableIndexInfo } from '../../../../components/InfoViewer/schemaInfo';
+import { Loader } from '../../../../components/Loader';
+import { olapApi } from '../../../../store/reducers/olapStats';
+import { overviewApi } from '../../../../store/reducers/overview/overview';
+import { selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
+import { EPathType } from '../../../../types/api/schema';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { ExternalDataSourceInfo } from '../../Info/ExternalDataSource/ExternalDataSource';
+import { ExternalTableInfo } from '../../Info/ExternalTable/ExternalTable';
+import { ViewInfo } from '../../Info/View/View';
+import { isColumnEntityType, isEntityWithMergedImplementation, isTableType, } from '../../utils/schema';
+import { AsyncReplicationInfo } from './AsyncReplicationInfo';
+import { ChangefeedInfo } from './ChangefeedInfo';
+import { TableInfo } from './TableInfo';
+import { TopicInfo } from './TopicInfo';
+function Overview({ type, tenantName }) {
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const schemaPath = currentSchemaPath || tenantName;
+    const olapParams = isTableType(type) && isColumnEntityType(type) ? { path: schemaPath } : skipToken;
+    const { currentData: olapData, isFetching: olapIsFetching } = olapApi.useGetOlapStatsQuery(olapParams, { pollingInterval: autorefresh });
+    const olapStatsLoading = olapIsFetching && olapData === undefined;
+    const { result: olapStats } = olapData || { result: undefined };
+    const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
+    // shalloEqual prevents rerenders when new schema data is loaded
+    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type), shallowEqual);
+    let paths = skipToken;
+    if (schemaPath) {
+        if (!isEntityWithMergedImpl) {
+            paths = [schemaPath];
+        }
+        else if (mergedChildrenPaths) {
+            paths = [schemaPath, ...mergedChildrenPaths];
+        }
+    }
+    const { currentData, isFetching, error: overviewError, } = overviewApi.useGetOverviewQuery(paths, {
+        pollingInterval: autorefresh,
+    });
+    const overviewLoading = isFetching && currentData === undefined;
+    const { data: rawData, additionalData } = currentData || {};
+    const entityLoading = overviewLoading || olapStatsLoading;
+    const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
+    const renderContent = () => {
+        var _a;
+        const data = rawData !== null && rawData !== void 0 ? rawData : undefined;
+        // verbose mapping to guarantee a correct render for new path types
+        // TS will error when a new type is added but not mapped here
+        const pathTypeToComponent = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeTableIndex]: () => _jsx(TableIndexInfo, { data: data }),
+            [EPathType.EPathTypeExtSubDomain]: undefined,
+            [EPathType.EPathTypeColumnStore]: undefined,
+            [EPathType.EPathTypeColumnTable]: undefined,
+            [EPathType.EPathTypeCdcStream]: () => {
+                var _a;
+                return (_jsx(ChangefeedInfo, { data: data, topic: (_a = additionalData === null || additionalData === void 0 ? void 0 : additionalData[0]) !== null && _a !== void 0 ? _a : undefined }));
+            },
+            [EPathType.EPathTypePersQueueGroup]: () => _jsx(TopicInfo, { data: data }),
+            [EPathType.EPathTypeExternalTable]: () => _jsx(ExternalTableInfo, { data: data }),
+            [EPathType.EPathTypeExternalDataSource]: () => _jsx(ExternalDataSourceInfo, { data: data }),
+            [EPathType.EPathTypeView]: () => _jsx(ViewInfo, { data: data }),
+            [EPathType.EPathTypeReplication]: () => _jsx(AsyncReplicationInfo, { data: data }),
+        };
+        return ((type && ((_a = pathTypeToComponent[type]) === null || _a === void 0 ? void 0 : _a.call(pathTypeToComponent))) || (_jsx(TableInfo, { data: data, type: type, olapStats: olapStats })));
+    };
+    if (entityLoading || entityNotReady) {
+        return _jsx(Loader, { size: "m" });
+    }
+    if (overviewError) {
+        return _jsx(ResponseError, { error: overviewError });
+    }
+    return renderContent();
+}
+export default Overview;

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useHistory, useLocation } from 'react-router';
+import { parseQuery } from '../../../../../routes';
+import { changeUserInput } from '../../../../../store/reducers/executeQuery';
+import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../../store/reducers/tenant/constants';
+import { topQueriesApi } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
+import { useTypedDispatch, useTypedSelector } from '../../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../../utils/query';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, getTenantOverviewTopQueriesColumns, } from '../../TopQueries/getTopQueriesColumns';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+import { b } from '../utils';
+export function TopQueries({ path }) {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const history = useHistory();
+    const query = parseQuery(location);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const columns = getTenantOverviewTopQueriesColumns();
+    const { currentData, isFetching, error } = topQueriesApi.useGetOverviewTopQueriesQuery({ database: path }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const handleRowClick = React.useCallback((row) => {
+        const { QueryText: input } = row;
+        dispatch(changeUserInput({ input }));
+        const queryParams = parseQuery(location);
+        const queryPath = getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.query, [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery }));
+        history.push(queryPath);
+    }, [dispatch, history, location]);
+    const title = getSectionTitle({
+        entity: i18n('queries'),
+        postfix: i18n('by-cpu-time'),
+        link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries })),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, onRowClick: handleRowClick, title: title, loading: loading, error: parseQueryErrorToString(error), rowClassName: () => b('top-queries-row') }));
+}

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocation } from 'react-router';
+import { parseQuery } from '../../../../../routes';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topShardsApi } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import { useTypedSelector } from '../../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../../utils/query';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, getTopShardsColumns, } from '../../TopShards/getTopShardsColumns';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export const TopShards = ({ path }) => {
+    const location = useLocation();
+    const query = parseQuery(location);
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const { currentData, isFetching, error } = topShardsApi.useGetTopShardsQuery({ database: path, path: currentSchemaPath }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const columns = getTopShardsColumns(path, location);
+    const title = getSectionTitle({
+        entity: i18n('shards'),
+        postfix: i18n('by-cpu-usage'),
+        link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards })),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, title: title, loading: loading, error: parseQueryErrorToString(error) }));
+};

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { useLocation } from 'react-router';
+import { CellWithPopover } from '../../../../../components/CellWithPopover/CellWithPopover';
+import { LinkToSchemaObject } from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import { topTablesApi } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
+import { formatBytes, getSizeWithSignificantDigits } from '../../../../../utils/bytesParsers';
+import { useTypedSelector } from '../../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../../utils/query';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+import '../TenantOverview.scss';
+const TOP_TABLES_COLUMNS_WIDTH_LS_KEY = 'topTablesTableColumnsWidth';
+export function TopTables({ path }) {
+    const location = useLocation();
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const { currentData, error, isFetching } = topTablesApi.useGetTopTablesQuery({ path }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const formatSize = (value) => {
+        const size = getSizeWithSignificantDigits((data === null || data === void 0 ? void 0 : data.length) ? Number(data[0].Size) : 0, 0);
+        return formatBytes({ value, size, precision: 1 });
+    };
+    const columns = [
+        {
+            name: 'Size',
+            width: 100,
+            sortable: false,
+            render: ({ row }) => formatSize(Number(row.Size)),
+            align: DataTable.RIGHT,
+        },
+        {
+            name: 'Path',
+            width: 700,
+            sortable: false,
+            render: ({ row }) => row.Path ? (_jsx(CellWithPopover, { content: row.Path, children: _jsx(LinkToSchemaObject, { path: String(row.Path), location: location, children: row.Path }) })) : null,
+        },
+    ];
+    const title = getSectionTitle({
+        entity: i18n('tables'),
+        postfix: i18n('by-size'),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_TABLES_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, title: title, loading: loading, error: parseQueryErrorToString(error) }));
+}

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "nodes" | "queries" | "groups" | "top" | "shards" | "tables" | "no-data" | "no-pools-data" | "top-nodes.empty-data" | "top-groups.empty-data" | "by-pools-usage" | "by-cpu-time" | "by-cpu-usage" | "by-load" | "by-memory" | "by-usage" | "by-size" | "cards.cpu-label" | "cards.storage-label" | "cards.memory-label" | "charts.queries-per-second" | "charts.transaction-latency" | "charts.cpu-usage" | "charts.storage-usage" | "charts.memory-usage" | "storage.tablet-storage-title" | "storage.tablet-storage-description" | "storage.db-storage-title" | "storage.db-storage-description", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;