ydb-embedded-ui 6.8.0 → 6.9.1

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "nodes" | "groups" | "controls_groups-search-placeholder" | "controls_nodes-search-placeholder", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tablet/Tablet.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
+import { Link as ExternalLink, Icon } from '@gravity-ui/uikit';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { Helmet } from 'react-helmet-async';
+import { useLocation, useParams } from 'react-router-dom';
+import { EmptyState } from '../../components/EmptyState';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { Loader } from '../../components/Loader';
+import { Tag } from '../../components/Tag';
+import { parseQuery } from '../../routes';
+import { backend } from '../../store';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { tabletApi } from '../../store/reducers/tablet';
+import { cn } from '../../utils/cn';
+import { CLUSTER_DEFAULT_TITLE, DEVELOPER_UI_TITLE } from '../../utils/constants';
+import { useAutoRefreshInterval, useTypedDispatch } from '../../utils/hooks';
+import { TabletControls } from './TabletControls';
+import { TabletInfo } from './TabletInfo';
+import { TabletTable } from './TabletTable';
+import i18n from './i18n';
+import './Tablet.scss';
+export const b = cn('tablet-page');
+export const Tablet = () => {
+    var _a;
+    const isFirstDataFetchRef = React.useRef(true);
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const params = useParams();
+    const { id } = params;
+    const { nodeId: queryNodeId, tenantName: queryTenantName, type: queryTabletType, clusterName: queryClusterName, } = parseQuery(location);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { currentData, isFetching, error, refetch } = tabletApi.useGetTabletQuery({ id }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const { id: tabletId, data: tablet = {}, history = [] } = currentData || {};
+    const { currentData: tenantPath } = tabletApi.useGetTabletDescribeQuery(tablet.TenantId ? { tenantId: tablet.TenantId } : skipToken);
+    const nodeId = ((_a = tablet.NodeId) === null || _a === void 0 ? void 0 : _a.toString()) || (queryNodeId === null || queryNodeId === void 0 ? void 0 : queryNodeId.toString());
+    const tenantName = tenantPath || (queryTenantName === null || queryTenantName === void 0 ? void 0 : queryTenantName.toString());
+    const type = tablet.Type || (queryTabletType === null || queryTabletType === void 0 ? void 0 : queryTabletType.toString());
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('tablet', {
+            nodeIds: nodeId ? [nodeId] : [],
+            tenantName,
+            tabletId: id,
+            tabletType: type,
+        }));
+    }, [dispatch, tenantName, id, nodeId, type]);
+    const renderExternalLinks = (link, index) => {
+        return (_jsx("li", { className: b('link', { external: true }), children: _jsx(ExternalLink, { href: `${backend}${link.path}`, target: "_blank", children: link.name }) }, index));
+    };
+    const renderView = () => {
+        if (loading && id !== tabletId && isFirstDataFetchRef.current) {
+            return _jsx(Loader, { size: "l" });
+        }
+        if (error) {
+            return _jsx(ResponseError, { error: error });
+        }
+        if (!tablet || !Object.keys(tablet).length) {
+            return (_jsx("div", { className: b('placeholder'), children: _jsx(EmptyState, { title: i18n('emptyState') }) }));
+        }
+        const { TabletId, Overall, Leader } = tablet;
+        const externalLinks = [
+            {
+                name: `${DEVELOPER_UI_TITLE} - tablet`,
+                path: `/tablets?TabletID=${TabletId}`,
+            },
+        ];
+        return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('pane-wrapper'), children: [_jsxs("div", { className: b('left-pane'), children: [_jsx("ul", { className: b('links'), children: externalLinks.map(renderExternalLinks) }), _jsxs("div", { className: b('row', { header: true }), children: [_jsx("span", { className: b('title'), children: i18n('tablet.header') }), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) }), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", { className: b('loader'), children: loading && _jsx(Loader, { size: "s" }) })] }), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: refetch })] }), _jsx("div", { className: b('rigth-pane'), children: _jsx(TabletTable, { history: history }) })] }) }));
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${id} — ${i18n('tablet.header')} — ${tenantName || queryClusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
+};

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

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

package/dist/containers/Tablets/Tablets.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowsRotateRight } from '@gravity-ui/icons';
+import { Icon, Label, Text } from '@gravity-ui/uikit';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { InternalLink } from '../../components/InternalLink';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
+import routes, { createHref } from '../../routes';
+import { selectTabletsWithFqdn, tabletsApi } from '../../store/reducers/tablets';
+import { ETabletState } from '../../types/api/tablet';
+import { cn } from '../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { calcUptime } from '../../utils/dataFormatters/dataFormatters';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { mapTabletStateToLabelTheme } from '../../utils/tablet';
+import { getDefaultNodePath } from '../Node/NodePages';
+import i18n from './i18n';
+const b = cn('tablets');
+const columns = [
+    {
+        name: 'Type',
+        get header() {
+            return i18n('Type');
+        },
+        render: ({ row }) => {
+            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? '' : _jsx(Text, { color: "secondary", children: "follower" })] }));
+        },
+    },
+    {
+        name: 'TabletId',
+        get header() {
+            return i18n('Tablet');
+        },
+        render: ({ row }) => {
+            const tabletPath = row.TabletId &&
+                createHref(routes.tablet, { id: row.TabletId }, { nodeId: row.NodeId, type: row.Type });
+            return _jsx(InternalLink, { to: tabletPath, children: row.TabletId });
+        },
+    },
+    {
+        name: 'State',
+        get header() {
+            return i18n('State');
+        },
+        render: ({ row }) => {
+            return _jsx(Label, { theme: mapTabletStateToLabelTheme(row.State), children: row.State });
+        },
+    },
+    {
+        name: 'NodeId',
+        get header() {
+            return i18n('Node ID');
+        },
+        render: ({ row }) => {
+            const nodePath = row.NodeId === undefined ? undefined : getDefaultNodePath(row.NodeId);
+            return _jsx(InternalLink, { to: nodePath, children: row.NodeId });
+        },
+        align: 'right',
+    },
+    {
+        name: 'fqdn',
+        get header() {
+            return i18n('Node FQDN');
+        },
+        render: ({ row }) => {
+            if (!row.fqdn) {
+                return _jsx("span", { children: "\u2014" });
+            }
+            return _jsx(EntityStatus, { name: row.fqdn, showStatus: false, hasClipboardButton: true });
+        },
+    },
+    {
+        name: 'Generation',
+        get header() {
+            return i18n('Generation');
+        },
+        align: 'right',
+    },
+    {
+        name: 'Uptime',
+        get header() {
+            return i18n('Uptime');
+        },
+        render: ({ row }) => {
+            return calcUptime(row.ChangeTime);
+        },
+        sortAccessor: (row) => -Number(row.ChangeTime),
+        align: 'right',
+    },
+    {
+        name: 'Actions',
+        sortable: false,
+        resizeable: false,
+        header: '',
+        render: ({ row }) => {
+            return _jsx(TabletActions, { ...row });
+        },
+    },
+];
+function TabletActions(tablet) {
+    const isDisabledRestart = tablet.State === ETabletState.Stopped;
+    const dispatch = useTypedDispatch();
+    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
+    return (_jsx(ButtonWithConfirmDialog, { buttonView: "outlined", dialogContent: i18n('dialog.kill'), onConfirmAction: () => {
+            return window.api.killTablet(tablet.TabletId);
+        }, onConfirmActionSuccess: () => {
+            dispatch(tabletsApi.util.invalidateTags(['All']));
+        }, buttonDisabled: isDisabledRestart || !isUserAllowedToMakeChanges, withPopover: true, popoverContent: i18n('controls.kill-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: _jsx(Icon, { data: ArrowsRotateRight }) }));
+}
+export function Tablets({ nodeId, path, className }) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    let params = {};
+    const node = nodeId === undefined ? undefined : String(nodeId);
+    if (node !== undefined) {
+        params = { nodes: [String(node)] };
+    }
+    else if (path) {
+        params = { path };
+    }
+    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery(Object.keys(params).length === 0 ? skipToken : params, {
+        pollingInterval: autoRefreshInterval,
+    });
+    const loading = isFetching && currentData === undefined;
+    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, params));
+    if (loading) {
+        return _jsx(TableSkeleton, {});
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    return (_jsx("div", { className: b(null, className), children: _jsx(ResizeableDataTable, { columns: columns, data: tablets, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('noTabletsData') }) }));
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "Uptime" | "Type" | "State" | "Generation" | "Tablet" | "Node ID" | "Node FQDN" | "noTabletsData" | "dialog.kill" | "controls.kill-not-allowed", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "page.title", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { DefinitionList } from '@gravity-ui/components';
+import { ResponseError } from '../../../components/Errors/ResponseError';
+import { Loader } from '../../../components/Loader';
+import { schemaAclApi } from '../../../store/reducers/schemaAcl/schemaAcl';
+import { valueIsDefined } from '../../../utils';
+import { cn } from '../../../utils/cn';
+import i18n from '../i18n';
+import './Acl.scss';
+const b = cn('ydb-acl');
+const prepareLogin = (value) => {
+    if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
+        const login = value.split('@')[0];
+        return login;
+    }
+    return value;
+};
+const aclParams = ['access', 'type', 'inheritance'];
+const aclParamToName = {
+    access: 'Access',
+    type: 'Access type',
+    inheritance: 'Inheritance type',
+};
+const defaultInheritanceType = ['Object', 'Container'];
+const defaultAccessType = 'Allow';
+const defaultInheritanceTypeSet = new Set(defaultInheritanceType);
+function normalizeAcl(acl) {
+    return acl.map((ace) => {
+        const { AccessRules = [], AccessRights = [], AccessType, InheritanceType, Subject } = ace;
+        const access = AccessRules.concat(AccessRights);
+        //"Allow" is default access type. We want to show it only if it isn't default
+        const type = AccessType === defaultAccessType ? undefined : AccessType;
+        let inheritance;
+        // ['Object', 'Container'] - is default inheritance type. We want to show it only if it isn't default
+        if ((InheritanceType === null || InheritanceType === void 0 ? void 0 : InheritanceType.length) !== defaultInheritanceTypeSet.size ||
+            InheritanceType.some((t) => !defaultInheritanceTypeSet.has(t))) {
+            inheritance = InheritanceType;
+        }
+        return {
+            access: access.length ? access : undefined,
+            type,
+            inheritance,
+            Subject,
+        };
+    });
+}
+function DefinitionValue({ value }) {
+    const normalizedValue = typeof value === 'string' ? [value] : value;
+    return (_jsx("div", { className: b('definition-content'), children: normalizedValue.map((el) => (_jsx("span", { children: el }, el))) }));
+}
+function getAclListItems(acl) {
+    if (!acl || !acl.length) {
+        return [];
+    }
+    const normalizedAcl = normalizeAcl(acl);
+    return normalizedAcl.map(({ Subject, ...data }) => {
+        const definedDataEntries = Object.entries(data).filter(([_key, value]) => Boolean(value));
+        if (definedDataEntries.length === 1 && definedDataEntries[0][0] === 'access') {
+            return {
+                name: Subject,
+                content: _jsx(DefinitionValue, { value: definedDataEntries[0][1] }),
+            };
+        }
+        return {
+            label: _jsx("span", { className: b('group-label'), children: Subject }),
+            items: aclParams
+                .map((key) => {
+                const value = data[key];
+                if (value) {
+                    return {
+                        name: aclParamToName[key],
+                        content: _jsx(DefinitionValue, { value: value }),
+                    };
+                }
+                return undefined;
+            })
+                .filter(valueIsDefined),
+        };
+    });
+}
+function getOwnerItem(owner) {
+    const preparedOwner = prepareLogin(owner);
+    if (!preparedOwner) {
+        return [];
+    }
+    return [
+        {
+            name: _jsx("span", { className: b('owner'), children: preparedOwner }),
+            content: _jsx("span", { className: b('owner'), children: i18n('acl.owner') }),
+        },
+    ];
+}
+export const Acl = ({ path }) => {
+    const { currentData, isFetching, error } = schemaAclApi.useGetSchemaAclQuery({ path });
+    const loading = isFetching && !currentData;
+    const { acl, owner } = currentData || {};
+    const aclListItems = getAclListItems(acl);
+    const ownerItem = getOwnerItem(owner);
+    if (loading) {
+        return _jsx(Loader, {});
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    if (!acl && !owner) {
+        return _jsx(React.Fragment, { children: i18n('acl.empty') });
+    }
+    return (_jsxs("div", { className: b(), children: [ownerItem.length ? (_jsx(DefinitionList, { items: ownerItem, nameMaxWidth: 200, className: b('owner-container') })) : null, aclListItems.length ? (_jsx(DefinitionList, { items: aclListItems, nameMaxWidth: 200, className: b('result') })) : null] }));
+};

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import qs from 'qs';
+import { InternalLink } from '../../../../../components/InternalLink';
+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 { 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 = cn('ydb-diagnostics-consumers-columns');
+export const CONSUMERS_COLUMNS_WIDTH_LS_KEY = 'consumersColumnsWidth';
+export const columns = [
+    {
+        name: CONSUMERS_COLUMNS_IDS.CONSUMER,
+        header: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.CONSUMER],
+        align: DataTable.LEFT,
+        render: ({ row }) => {
+            if (!row.name) {
+                return '–';
+            }
+            const queryParams = qs.parse(location.search, {
+                ignoreQueryPrefix: true,
+            });
+            return (_jsx(InternalLink, { to: createHref(routes.tenant, undefined, {
+                    ...queryParams,
+                    [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
+                    selectedConsumer: row.name,
+                }), children: row.name }));
+        },
+    },
+    {
+        name: CONSUMERS_COLUMNS_IDS.READ_SPEED,
+        header: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_SPEED],
+        align: DataTable.RIGHT,
+        resizeMinWidth: 140,
+        sortAccessor: (row) => row.readSpeed.perMinute,
+        render: ({ row }) => _jsx(SpeedMultiMeter, { data: row.readSpeed }),
+    },
+    {
+        name: CONSUMERS_COLUMNS_IDS.READ_LAGS,
+        header: _jsx(ReadLagsHeader, {}),
+        className: b('lags-header'),
+        sub: [
+            {
+                name: CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.WRITE_LAG,
+                header: CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES[CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.WRITE_LAG],
+                align: DataTable.RIGHT,
+                render: ({ row }) => formatMsToUptime(row.writeLag),
+            },
+            {
+                name: CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_LAG,
+                header: CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES[CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_LAG],
+                align: DataTable.RIGHT,
+                render: ({ row }) => formatMsToUptime(row.readLag),
+            },
+            {
+                name: CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_IDLE_TIME,
+                header: CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES[CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_IDLE_TIME],
+                align: DataTable.RIGHT,
+                render: ({ row }) => formatMsToUptime(row.readIdleTime),
+            },
+        ],
+    },
+];

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "noConsumersMessage.topic" | "noConsumersMessage.stream" | "lagsPopover.readLags" | "table.emptyDataMessage" | "controls.search", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+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 { AutoRefreshControl } from '../../../components/AutoRefreshControl/AutoRefreshControl';
+import routes, { createHref } from '../../../routes';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
+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 { 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 { Partitions } from './Partitions/Partitions';
+import { TopQueries } from './TopQueries';
+import { TopShards } from './TopShards';
+import './Diagnostics.scss';
+const b = cn('kv-tenant-diagnostics');
+function Diagnostics(props) {
+    const container = React.useRef(null);
+    const dispatch = useTypedDispatch();
+    const { diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
+    const [queryParams] = useQueryParams({
+        name: StringParam,
+        schema: StringParam,
+        backend: StringParam,
+        clusterName: StringParam,
+    });
+    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));
+        }
+    }, [activeTab, diagnosticsTab, dispatch]);
+    const renderTabContent = () => {
+        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: tenantName, path: path, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps }));
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
+                return _jsx(SchemaViewer, { path: path, tenantName: tenantName, type: type, extended: true });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
+                return _jsx(TopQueries, { tenantName: tenantName, type: type });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
+                return _jsx(TopShards, { tenantName: tenantName, path: path, type: type });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
+                return (_jsx(NodesWrapper, { path: path, additionalNodesProps: props.additionalNodesProps, parentContainer: container.current }));
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
+                return _jsx(Tablets, { path: path });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
+                return _jsx(StorageWrapper, { tenant: tenantName, parentContainer: container.current });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.network: {
+                return _jsx(Network, { tenantName: tenantName });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
+                return _jsx(Describe, { path: path, type: type });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
+                return _jsx(HotKeys, { path: path });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
+                return _jsx(Heatmap, { path: path });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
+                return _jsx(Consumers, { path: path, type: type });
+            }
+            case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
+                return _jsx(Partitions, { path: path });
+            }
+            default: {
+                return _jsx("div", { children: "No data..." });
+            }
+        }
+    };
+    const renderTabs = () => {
+        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, {
+                                ...queryParams,
+                                [TenantTabsGroups.diagnosticsTab]: id,
+                            });
+                            return (_jsx(Link, { to: path, className: b('tab'), children: node }, id));
+                        }, allowNotSelected: true }), _jsx(AutoRefreshControl, {})] }) }));
+    };
+    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/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) => string;
+export default _default;

package/dist/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) => string;
+export default _default;

package/dist/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) => string;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "tableStats" | "tabletMetrics" | "partitionConfig", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "writeLagPopover" | "writeIdleTimePopover", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/Partitions/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "noConsumersMessage.topic" | "noConsumersMessage.stream" | "lagsPopover.readLags" | "table.emptyDataMessage" | "lagsPopover.writeLags" | "headers.unread" | "headers.uncommited" | "controls.consumerSelector" | "controls.consumerSelector.emptyOption" | "controls.partitionSearch" | "controls.generalSearch", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/Partitions/utils/index.js

@@ -0,0 +1,15 @@
+export const addHostToPartitions = (partitions = [], nodesMap) => {
+    return partitions === null || partitions === void 0 ? void 0 : partitions.map((partition) => {
+        const partitionHost = partition.partitionNodeId && nodesMap
+            ? nodesMap.get(partition.partitionNodeId)
+            : undefined;
+        const connectionHost = partition.connectionNodeId && nodesMap
+            ? nodesMap.get(partition.connectionNodeId)
+            : undefined;
+        return {
+            ...partition,
+            partitionHost,
+            connectionHost,
+        };
+    });
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import _omit from 'lodash/omit';
+import JSONTree from 'react-json-inspector';
+import { TreeView } from 'ydb-ui-components';
+import { hcStatusToColorFlag } from '../../../../../../store/reducers/healthcheckInfo/utils';
+import { cn } from '../../../../../../utils/cn';
+import { IssueTreeItem } from './IssueTreeItem';
+import './IssueTree.scss';
+const b = cn('issue-tree');
+const IssueTree = ({ issueTree }) => {
+    const [collapsedIssues, setCollapsedIssues] = React.useState({});
+    const renderInfoPanel = React.useCallback((info) => {
+        if (!info) {
+            return null;
+        }
+        return (_jsx("div", { className: b('info-panel'), children: _jsx(JSONTree, { data: info, search: false, isExpanded: () => true, className: b('inspector') }) }));
+    }, []);
+    const renderTree = React.useCallback((data) => {
+        return data.map((item) => {
+            const { id } = item;
+            const { status, message, type, reasonsItems, level, ...rest } = item;
+            const isCollapsed = typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id];
+            const toggleCollapsed = () => {
+                setCollapsedIssues((collapsedIssues) => ({
+                    ...collapsedIssues,
+                    [id]: !isCollapsed,
+                }));
+            };
+            return (_jsxs(TreeView, { name: _jsx(IssueTreeItem, { status: hcStatusToColorFlag[status], message: message, type: type }), collapsed: isCollapsed, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed, level: level - 1, children: [renderInfoPanel(_omit(rest, ['reason'])), renderTree(reasonsItems || [])] }, id));
+        });
+    }, [collapsedIssues, renderInfoPanel]);
+    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('block'), children: renderTree([issueTree]) }) }));
+};
+export default IssueTree;

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "no-data" | "title.healthcheck" | "label.update" | "label.show-details" | "label.issues" | "status_message.ok", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.d.ts

@@ -0,0 +1,14 @@
+import type { ProgressViewerProps } from '../../../../../../components/ProgressViewer/ProgressViewer';
+import type { MetricStatus } from '../../../../../../store/reducers/tenants/types';
+import './MetricCard.scss';
+export interface DiagnosticsCardMetric extends ProgressViewerProps {
+    title?: React.ReactNode;
+}
+interface MetricCardProps {
+    active?: boolean;
+    label?: string;
+    status?: MetricStatus;
+    metrics: DiagnosticsCardMetric[];
+}
+export declare function MetricCard({ active, label, status, metrics }: MetricCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DiagnosticCard } from '../../../../../../components/DiagnosticCard/DiagnosticCard';
+import { ProgressViewer } from '../../../../../../components/ProgressViewer/ProgressViewer';
+import { StatusIcon } from '../../../../../../components/StatusIcon/StatusIcon';
+import { EFlag } from '../../../../../../types/api/enums';
+import { cn } from '../../../../../../utils/cn';
+import './MetricCard.scss';
+const b = cn('ydb-metrics-card');
+const getStatusIcon = (status) => {
+    let colorStatus;
+    if (status === 'Warning') {
+        colorStatus = EFlag.Yellow;
+    }
+    if (status === 'Danger') {
+        colorStatus = EFlag.Red;
+    }
+    if (colorStatus) {
+        return _jsx(StatusIcon, { status: colorStatus, mode: "icons", size: "l" });
+    }
+    return null;
+};
+export function MetricCard({ active, label, status, metrics }) {
+    const renderContent = () => {
+        return metrics.map(({ title, ...progressViewerProps }, index) => {
+            return (_jsxs("div", { className: b('metric'), children: [_jsx("div", { className: b('metric-title'), children: title }), _jsx(ProgressViewer, { size: "xs", colorizeProgress: true, ...progressViewerProps })] }, index));
+        });
+    };
+    return (_jsxs(DiagnosticCard, { className: b({ active }), active: active, children: [_jsxs("div", { className: b('header'), children: [label && _jsx("div", { className: b('label'), children: label }), getStatusIcon(status)] }), _jsx("div", { className: b('content'), children: renderContent() })] }));
+}