ydb-embedded-ui 6.3.0 → 6.5.0

package/dist/containers/Storage/utils/index.js

@@ -1,5 +1,9 @@
+import { ASCENDING, DESCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
+import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { EFlag } from '../../../types/api/enums';
 import { generateEvaluator } from '../../../utils/generateEvaluator';
+import { NODES_SORT_VALUES } from '../../../utils/nodes';
+import { STORAGE_SORT_VALUES } from '../../../utils/storage';
 const defaultDegradationEvaluator = generateEvaluator(1, 2, ['success', 'warning', 'danger']);
 const degradationEvaluators = {
     'block-4-2': generateEvaluator(1, 2, ['success', 'warning', 'danger']),
@@ -22,3 +26,28 @@ export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, [
     EFlag.Yellow,
     EFlag.Red,
 ]);
+export const defaultSortNode = {
+    sortValue: NODES_SORT_VALUES.NodeId,
+    sortOrder: ASCENDING,
+};
+const defaultSortGroup = {
+    sortValue: STORAGE_SORT_VALUES.PoolName,
+    sortOrder: ASCENDING,
+};
+const defaultSortGroupMissing = {
+    sortValue: STORAGE_SORT_VALUES.Degraded,
+    sortOrder: DESCENDING,
+};
+const defaultSortGroupSpace = {
+    sortValue: STORAGE_SORT_VALUES.Usage,
+    sortOrder: DESCENDING,
+};
+export function getDefaultSortGroup(visibleEntities) {
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
+        return defaultSortGroupMissing;
+    }
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
+        return defaultSortGroupSpace;
+    }
+    return defaultSortGroup;
+}

package/dist/containers/Tablet/Tablet.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Link as ExternalLink } from '@gravity-ui/uikit';
+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';
 import { EmptyState } from '../../components/EmptyState';
 import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../components/Errors/ResponseError';
-import { Icon } from '../../components/Icon';
 import { Loader } from '../../components/Loader';
 import { Tag } from '../../components/Tag';
 import { parseQuery } from '../../routes';
@@ -66,7 +66,7 @@ export const 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, { name: "external" }) }), 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 (_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/TabletControls/TabletControls.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ButtonWithConfirmDialog } from '../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import { ETabletState } from '../../../types/api/tablet';
+import { useTypedSelector } from '../../../utils/hooks';
 import { b } from '../Tablet';
 import i18n from '../i18n';
 export const TabletControls = ({ tablet, fetchData }) => {
     const { TabletId, HiveId } = tablet;
+    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
     const _onKillClick = () => {
         return window.api.killTablet(TabletId);
     };
@@ -21,5 +23,5 @@ export const TabletControls = ({ tablet, fetchData }) => {
     const isDisabledRestart = tablet.State === ETabletState.Stopped;
     const isDisabledResume = tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
     const isDisabledStop = tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
-    return (_jsxs("div", { className: b('controls'), children: [_jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.kill'), onConfirmAction: _onKillClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledRestart, children: i18n('controls.kill') }), hasHiveId() ? (_jsxs(React.Fragment, { children: [_jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.stop'), onConfirmAction: _onStopClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledStop, children: i18n('controls.stop') }), _jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.resume'), onConfirmAction: _onResumeClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledResume, children: i18n('controls.resume') })] })) : null] }));
+    return (_jsxs("div", { className: b('controls'), children: [_jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.kill'), onConfirmAction: _onKillClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledRestart || !isUserAllowedToMakeChanges, withPopover: true, popoverContent: i18n('controls.kill-not-allowed'), popoverPlacement: 'bottom', popoverDisabled: isUserAllowedToMakeChanges, children: i18n('controls.kill') }), hasHiveId() ? (_jsxs(React.Fragment, { children: [_jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.stop'), onConfirmAction: _onStopClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledStop || !isUserAllowedToMakeChanges, withPopover: true, popoverContent: i18n('controls.stop-not-allowed'), popoverPlacement: 'bottom', popoverDisabled: isUserAllowedToMakeChanges, children: i18n('controls.stop') }), _jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.resume'), onConfirmAction: _onResumeClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledResume || !isUserAllowedToMakeChanges, withPopover: true, popoverContent: i18n('controls.resume-not-allowed'), popoverPlacement: 'bottom', popoverDisabled: isUserAllowedToMakeChanges, children: i18n('controls.resume') })] })) : null] }));
 };

package/dist/containers/Tablet/i18n/en.json

@@ -3,6 +3,9 @@
     "controls.kill": "Restart",
     "controls.stop": "Stop",
     "controls.resume": "Resume",
+    "controls.kill-not-allowed": "You don't have enough rights to restart tablet",
+    "controls.stop-not-allowed": "You don't have enough rights to stop tablet",
+    "controls.resume-not-allowed": "You don't have enough rights to resume tablet",
     "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
     "dialog.stop": "The tablet will be stopped. Do you want to proceed?",
     "dialog.resume": "The tablet will be resumed. Do you want to proceed?",

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

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

package/dist/containers/Tablet/i18n/index.js

@@ -1,5 +1,4 @@
 import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
-import ru from './ru.json';
 const COMPONENT = 'ydb-tablet-page';
-export default registerKeysets(COMPONENT, { en, ru });
+export default registerKeysets(COMPONENT, { en });

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

@@ -1,8 +1,7 @@
-import './Tablets.scss';
 interface TabletsProps {
     path?: string;
     nodeId?: string | number;
     className?: string;
 }
-export declare const Tablets: ({ path, nodeId, className }: TabletsProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Tablets({ nodeId, path, className }: TabletsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tablets/Tablets.js

@@ -1,25 +1,121 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Select } from '@gravity-ui/uikit';
+import { ArrowsRotateRight } from '@gravity-ui/icons';
+import { Icon, Label, Text } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
-import ReactList from 'react-list';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../components/Errors/ResponseError';
-import { Loader } from '../../components/Loader';
-import { Tablet } from '../../components/Tablet';
-import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
-import { setStateFilter, setTypeFilter, tabletsApi } from '../../store/reducers/tablets';
+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 { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { mapTabletStateToLabelTheme } from '../../utils/tablet';
+import { getDefaultNodePath } from '../Node/NodePages';
 import i18n from './i18n';
-import './Tablets.scss';
 const b = cn('tablets');
-export const Tablets = ({ path, nodeId, className }) => {
+const columns = [
+    {
+        name: 'Type',
+        get header() {
+            return i18n('Type');
+        },
+        render: ({ row }) => {
+            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? _jsx(Text, { color: "secondary", children: "leader" }) : ''] }));
+        },
+    },
+    {
+        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, Object.assign({}, row));
+        },
+    },
+];
+function TabletActions(tablet) {
+    const isDisabledRestart = tablet.State === ETabletState.Stopped;
     const dispatch = useTypedDispatch();
-    const { stateFilter, typeFilter } = useTypedSelector((state) => state.tablets);
+    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 { autorefresh } = useTypedSelector((state) => state.schema);
     let params = skipToken;
-    if (nodeId) {
-        params = { nodes: [String(nodeId)] };
+    const node = nodeId === undefined ? undefined : String(nodeId);
+    if (node !== undefined) {
+        params = { nodes: [String(node)] };
     }
     else if (path) {
         params = { path };
@@ -28,48 +124,12 @@ export const Tablets = ({ path, nodeId, className }) => {
         pollingInterval: autorefresh,
     });
     const loading = isFetching && currentData === undefined;
-    const tablets = React.useMemo(() => (currentData === null || currentData === void 0 ? void 0 : currentData.TabletStateInfo) || [], [currentData]);
-    const tabletsToRender = React.useMemo(() => {
-        let filteredTablets = tablets;
-        if (typeFilter.length > 0) {
-            filteredTablets = filteredTablets.filter((tablet) => typeFilter.some((filter) => tablet.Type === filter));
-        }
-        if (stateFilter.length > 0) {
-            filteredTablets = filteredTablets.filter((tablet) => stateFilter.some((filter) => tablet.State === filter));
-        }
-        return filteredTablets;
-    }, [tablets, stateFilter, typeFilter]);
-    const handleStateFilterChange = (value) => {
-        dispatch(setStateFilter(value));
-    };
-    const handleTypeFilterChange = (value) => {
-        dispatch(setTypeFilter(value));
-    };
-    const renderTablet = (tabletIndex) => {
-        return _jsx(Tablet, { tablet: tabletsToRender[tabletIndex] }, tabletIndex);
-    };
-    const renderContent = () => {
-        const states = Array.from(new Set(tablets.map((tablet) => tablet.State)))
-            .filter((state) => state !== undefined)
-            .map((item) => ({
-            value: item,
-            content: item,
-        }));
-        const types = Array.from(new Set(tablets.map((tablet) => tablet.Type)))
-            .filter((type) => type !== undefined)
-            .map((item) => ({
-            value: item,
-            content: item,
-        }));
-        return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('header'), children: [_jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.state')}:`, options: states, value: stateFilter, onUpdate: handleStateFilterChange }), _jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.type')}:`, options: types, value: typeFilter, onUpdate: handleTypeFilterChange }), _jsx(TabletsOverall, { tablets: tablets })] }), _jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: renderTablet, length: tabletsToRender.length, type: "uniform" }) })] }));
-    };
+    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, node, path));
     if (loading) {
-        return _jsx(Loader, {});
+        return _jsx(TableSkeleton, {});
     }
-    else if (error) {
+    if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    else {
-        return tablets.length > 0 ? (renderContent()) : (_jsx("div", { className: "error", children: i18n('noTabletsData') }));
-    }
-};
+    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/en.json

@@ -1,6 +1,12 @@
 {
-    "controls.type": "Type",
-    "controls.state": "State",
-    "controls.allItems": "All items",
-    "noTabletsData": "No tablets data"
+    "noTabletsData": "No tablets data",
+    "Type": "Type",
+    "Tablet": "Tablet",
+    "State": "State",
+    "Node ID": "Node ID",
+    "Node FQDN": "Node FQDN",
+    "Generation": "Generation",
+    "Uptime": "Uptime",
+    "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
+    "controls.kill-not-allowed": "You don't have enough rights to restart tablet"
 }

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

@@ -1,2 +1,2 @@
-declare const _default: (key: "controls.type" | "controls.state" | "controls.allItems" | "noTabletsData", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+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 | undefined) => string;
 export default _default;

package/dist/containers/Tablets/i18n/index.js

@@ -1,5 +1,4 @@
 import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
-import ru from './ru.json';
 const COMPONENT = 'ydb-tablets';
-export default registerKeysets(COMPONENT, { ru, en });
+export default registerKeysets(COMPONENT, { en });

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

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Tabs } from '@gravity-ui/uikit';
-import qs from 'qs';
 import { Helmet } from 'react-helmet-async';
-import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
+import { StringParam, useQueryParams } from 'use-query-params';
 import { Loader } from '../../../components/Loader';
 import routes, { createHref } from '../../../routes';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
@@ -35,9 +34,10 @@ function Diagnostics(props) {
     const dispatch = useTypedDispatch();
     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, {
-        ignoreQueryPrefix: true,
+    const [queryParams] = useQueryParams({
+        name: StringParam,
+        backend: StringParam,
+        clusterName: StringParam,
     });
     const { name: rootTenantName } = queryParams;
     const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;

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

@@ -4,6 +4,13 @@ type Page = {
     id: TenantDiagnosticsTab;
     title: string;
 };
+export declare const ASYNC_REPLICATION_PAGES: ({
+    id: "overview";
+    title: string;
+} | {
+    id: "describe";
+    title: string;
+})[];
 export declare const DATABASE_PAGES: ({
     id: "overview";
     title: string;

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

@@ -52,6 +52,7 @@ const partitions = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
     title: 'Partitions',
 };
+export const ASYNC_REPLICATION_PAGES = [overview, describe];
 export const DATABASE_PAGES = [
     overview,
     topQueries,
@@ -86,5 +87,6 @@ const pathTypeToPages = {
     [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/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -1,14 +1,16 @@
 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 { Icon } from '../../../../components/Icon';
 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 } from '../../../../utils/constants';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+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 = {
@@ -18,12 +20,13 @@ const tableColumnsIds = {
 const getHotKeysColumns = (keyColumnsIds = []) => {
     const keysColumns = keyColumnsIds.map((col, index) => ({
         name: col,
-        header: (_jsxs("div", { 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, { data: keyIcon, width: 12, height: 7 }), col] })),
         render: ({ row }) => row.keyValues[index],
         align: DataTable.RIGHT,
         sortable: false,
     }));
     return [
+        ...keysColumns,
         {
             name: tableColumnsIds.accessSample,
             header: 'Samples',
@@ -31,12 +34,12 @@ const getHotKeysColumns = (keyColumnsIds = []) => {
             align: DataTable.RIGHT,
             sortable: false,
         },
-        ...keysColumns,
     ];
 };
 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);
@@ -84,18 +87,27 @@ export function HotKeys({ path }) {
         };
         fetchData();
     }, [dispatch, path]);
-    // 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 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/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss

@@ -1,13 +1,23 @@
 @import '../../../../styles/mixins.scss';
 
 .ydb-hot-keys {
-    &__table {
-        @include freeze-nth-column(1);
-    }
-
     &__primary-key-column {
         display: flex;
         align-items: center;
         gap: 5px;
     }
+
+    &__help-card {
+        position: sticky;
+        left: 0;
+
+        margin-bottom: 20px;
+        padding: 20px 40px 20px 20px;
+
+        &__close-button {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+    }
 }

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

@@ -1,4 +1,5 @@
 {
     "hot-keys-collecting": "Please wait a little while we are collecting hot keys samples...",
-    "no-data": "No information about hot keys"
+    "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/containers/Tenant/Diagnostics/HotKeys/i18n/index.d.ts

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

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Checkbox, Loader } from '@gravity-ui/uikit';
+import { Checkbox, Icon, Loader } from '@gravity-ui/uikit';
 import { Link } from 'react-router-dom';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { Icon } from '../../../../components/Icon';
 import { Illustration } from '../../../../components/Illustration';
 import { ProblemFilter } from '../../../../components/ProblemFilter';
 import { networkApi } from '../../../../store/reducers/network/network';
@@ -14,6 +13,7 @@ import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { getDefaultNodePath } from '../../../Node/NodePages';
 import { NodeNetwork } from './NodeNetwork/NodeNetwork';
 import { getConnectedNodesCount } from './utils';
+import networkIcon from '../../../../assets/icons/network.svg';
 import './Network.scss';
 const b = cn('network');
 export function Network({ path }) {
@@ -47,7 +47,7 @@ export function Network({ path }) {
                                                     setShowId(!showId);
                                                 }, checked: showId, children: "ID" }) }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
                                                     setShowRacks(!showRacks);
-                                                }, checked: showRacks, children: "Racks" }) })] }) }), _jsx(Nodes, { nodes: nodesGroupedByType, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode })] }), _jsx("div", { className: b('right'), children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", { className: b('label'), children: ["Connectivity of node", ' ', _jsx(Link, { className: b('link'), to: getDefaultNodePath(clickedNode.NodeId), children: clickedNode.NodeId }), ' ', "to other nodes"] }), _jsx("div", { className: b('nodes-row'), children: _jsx(Nodes, { nodes: rightNodes, isRight: true, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode }) })] })) : (_jsxs("div", { className: b('placeholder'), children: [_jsx("div", { className: b('placeholder-img'), children: _jsx(Icon, { name: "network-placeholder", viewBox: "0 0 221 204", width: 221, height: 204 }) }), _jsx("div", { className: b('placeholder-text'), children: "Select node to see its connectivity to other nodes" })] })) })] }) }) }));
+                                                }, checked: showRacks, children: "Racks" }) })] }) }), _jsx(Nodes, { nodes: nodesGroupedByType, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode })] }), _jsx("div", { className: b('right'), children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", { className: b('label'), children: ["Connectivity of node", ' ', _jsx(Link, { className: b('link'), to: getDefaultNodePath(clickedNode.NodeId), children: clickedNode.NodeId }), ' ', "to other nodes"] }), _jsx("div", { className: b('nodes-row'), children: _jsx(Nodes, { nodes: rightNodes, isRight: true, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode }) })] })) : (_jsxs("div", { className: b('placeholder'), children: [_jsx("div", { className: b('placeholder-img'), children: _jsx(Icon, { data: networkIcon, width: 221, height: 204 }) }), _jsx("div", { className: b('placeholder-text'), children: "Select node to see its connectivity to other nodes" })] })) })] }) }) }));
 }
 function Nodes({ nodes, isRight, showId, showRacks, clickedNode, onClickNode }) {
     const filter = useTypedSelector(selectProblemFilter);

package/dist/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/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/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 {};