ydb-embedded-ui 5.5.0 → 6.0.1

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

@@ -1,39 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import block from 'bem-cn-lite';
-import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import { EntityStatus } from '../../../../../components/EntityStatus/EntityStatus';
-import { getDefaultNodePath } from '../../../../Node/NodePages';
+import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
+import { cn } from '../../../../../utils/cn';
 import { formatBytes, formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import { isNumeric } from '../../../../../utils/utils';
-import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES, PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS, PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES, generalPartitionColumnsIds, } from '../utils/constants';
+import { getDefaultNodePath } from '../../../../Node/NodePages';
 import { MultilineHeader, ReadLagsHeader, ReadSessionHeader, UncommitedMessagesHeader, UnreadMessagesHeader, WriteLagsHeader, } from '../Headers';
+import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITLES, PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS, PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES, generalPartitionColumnsIds, } from '../utils/constants';
 import './Columns.scss';
-const b = block('ydb-diagnostics-partitions-columns');
+const b = cn('ydb-diagnostics-partitions-columns');
 export const allColumns = [
     {
         name: PARTITIONS_COLUMNS_IDS.PARTITION_ID,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.PARTITION_ID] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.PARTITION_ID] })),
         sortAccessor: (row) => isNumeric(row.partitionId) && Number(row.partitionId),
         align: DataTable.LEFT,
         render: ({ row }) => row.partitionId,
     },
     {
         name: PARTITIONS_COLUMNS_IDS.STORE_SIZE,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.STORE_SIZE] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.STORE_SIZE] })),
         align: DataTable.RIGHT,
         render: ({ row }) => formatBytes(row.storeSize),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.WRITE_SPEED,
-        header: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_SPEED],
+        header: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.WRITE_SPEED],
         align: DataTable.LEFT,
         sortAccessor: (row) => row.writeSpeed.perMinute,
         render: ({ row }) => _jsx(SpeedMultiMeter, { data: row.writeSpeed }),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.READ_SPEED,
-        header: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SPEED],
+        header: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READ_SPEED],
         align: DataTable.LEFT,
         sortAccessor: (row) => { var _a; return (_a = row.readSpeed) === null || _a === void 0 ? void 0 : _a.perMinute; },
         render: ({ row }) => _jsx(SpeedMultiMeter, { data: row.readSpeed }),
@@ -96,21 +96,21 @@ export const allColumns = [
     },
     {
         name: PARTITIONS_COLUMNS_IDS.START_OFFSET,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.START_OFFSET] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.START_OFFSET] })),
         sortAccessor: (row) => isNumeric(row.startOffset) && Number(row.startOffset),
         align: DataTable.RIGHT,
         render: ({ row }) => row.startOffset,
     },
     {
         name: PARTITIONS_COLUMNS_IDS.END_OFFSET,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.END_OFFSET] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.END_OFFSET] })),
         sortAccessor: (row) => isNumeric(row.endOffset) && Number(row.endOffset),
         align: DataTable.RIGHT,
         render: ({ row }) => row.endOffset,
     },
     {
         name: PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET] })),
         sortAccessor: (row) => isNumeric(row.commitedOffset) && Number(row.commitedOffset),
         align: DataTable.RIGHT,
         render: ({ row }) => row.commitedOffset,
@@ -123,19 +123,19 @@ export const allColumns = [
     },
     {
         name: PARTITIONS_COLUMNS_IDS.READER_NAME,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READER_NAME] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READER_NAME] })),
         align: DataTable.LEFT,
         render: ({ row }) => row.readerName ? (_jsx(EntityStatus, { name: row.readerName, showStatus: false, hasClipboardButton: true, className: b('string-with-copy') })) : ('–'),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.PARTITION_HOST,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.PARTITION_HOST] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.PARTITION_HOST] })),
         align: DataTable.LEFT,
         render: ({ row }) => row.partitionNodeId && row.partitionHost ? (_jsx(EntityStatus, { name: row.partitionHost, path: getDefaultNodePath(row.partitionNodeId), showStatus: false, hasClipboardButton: true, className: b('string-with-copy') })) : ('–'),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.CONNECTION_HOST,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.CONNECTION_HOST] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.CONNECTION_HOST] })),
         align: DataTable.LEFT,
         render: ({ row }) => row.connectionNodeId && row.connectionHost ? (_jsx(EntityStatus, { name: row.connectionHost, path: getDefaultNodePath(row.connectionNodeId), showStatus: false, hasClipboardButton: true, className: b('string-with-copy') })) : ('–'),
     },

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

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

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

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../../../utils/i18n';
+import { registerKeysets } from '../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-diagnostics-partitions';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/Tenant/Diagnostics/Partitions/utils/constants.d.ts

@@ -15,7 +15,7 @@ export declare const PARTITIONS_COLUMNS_IDS: {
     readonly PARTITION_HOST: "partitionHost";
     readonly CONNECTION_HOST: "connectionHost";
 };
-export declare const PARTITIONS_COLUMNS_TITILES: {
+export declare const PARTITIONS_COLUMNS_TITLES: {
     readonly partitionId: "Partition ID";
     readonly storeSize: "Store size";
     readonly writeSpeed: "Write speed";
@@ -50,5 +50,5 @@ export declare const PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES: {
     readonly consumerReadLag: "read lag";
     readonly consumerReadIdleTime: "read idle time";
 };
-export declare const generalPartitionColumnsIds: ("storeSize" | "endOffset" | "partitionId" | "writeSpeed" | "writeLags" | "startOffset" | "partitionHost")[];
-export declare const allPartitionsColumnsIds: ("storeSize" | "endOffset" | "partitionId" | "writeSpeed" | "readSpeed" | "writeLags" | "readLags" | "uncommitedMessages" | "unreadMessages" | "startOffset" | "commitedOffset" | "readSessionId" | "readerName" | "partitionHost" | "connectionHost")[];
+export declare const generalPartitionColumnsIds: ("endOffset" | "partitionId" | "storeSize" | "writeSpeed" | "startOffset" | "writeLags" | "partitionHost")[];
+export declare const allPartitionsColumnsIds: ("endOffset" | "partitionId" | "storeSize" | "writeSpeed" | "readSpeed" | "uncommitedMessages" | "unreadMessages" | "startOffset" | "commitedOffset" | "readSessionId" | "readerName" | "readLags" | "writeLags" | "partitionHost" | "connectionHost")[];

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

@@ -15,7 +15,7 @@ export const PARTITIONS_COLUMNS_IDS = {
     PARTITION_HOST: 'partitionHost',
     CONNECTION_HOST: 'connectionHost',
 };
-export const PARTITIONS_COLUMNS_TITILES = {
+export const PARTITIONS_COLUMNS_TITLES = {
     [PARTITIONS_COLUMNS_IDS.PARTITION_ID]: 'Partition ID',
     [PARTITIONS_COLUMNS_IDS.STORE_SIZE]: 'Store size',
     [PARTITIONS_COLUMNS_IDS.WRITE_SPEED]: 'Write speed',

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

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import React from 'react';
 import { allColumns, generalColumns } from '../columns';
 import { allPartitionsColumnsIds, generalPartitionColumnsIds } from './constants';
 // Columns are different for partitions with consumers and without
 export const useGetPartitionsColumns = (selectedConsumer) => {
-    const [columns, setColumns] = useState([]);
-    const [columnsIdsForSelector, setColumnsIdsForSelector] = useState([]);
-    useEffect(() => {
+    const [columns, setColumns] = React.useState([]);
+    const [columnsIdsForSelector, setColumnsIdsForSelector] = React.useState([]);
+    React.useEffect(() => {
         if (selectedConsumer) {
             setColumns(allColumns);
             setColumnsIdsForSelector(allPartitionsColumnsIds);

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

@@ -1,5 +1,5 @@
 interface DefaultOverviewContentProps {
     database: string;
 }
-export declare const DefaultOverviewContent: ({ database }: DefaultOverviewContentProps) => JSX.Element;
+export declare const DefaultOverviewContent: ({ database }: DefaultOverviewContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss

@@ -30,12 +30,16 @@
     }
 
     &__preview-header {
-        margin-bottom: var(--diagnostics-section-title-margin);
         gap: 8px;
+
+        margin-bottom: var(--diagnostics-section-title-margin);
     }
 
     &__preview-title {
         font-weight: 600;
+
+        color: var(--g-color-text-link);
+
         @include lead-typography();
     }
 
@@ -46,20 +50,18 @@
     &__preview-title-wrapper {
         display: flex;
         align-items: center;
+        gap: 8px;
 
         margin-bottom: 4px;
-
-        gap: 8px;
     }
 
     &__issues-statistics {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
+        gap: 10px;
 
         margin: 8px 0;
-
-        gap: 10px;
     }
 
     &__self-check-status-indicator {

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.d.ts

@@ -1,12 +1,9 @@
-/// <reference types="react" />
-import type { IResponseError } from '../../../../../types/api/error';
 import type { IssuesTree } from '../../../../../store/reducers/healthcheckInfo/types';
 import './Healthcheck.scss';
 interface HealthcheckDetailsProps {
     issueTrees?: IssuesTree[];
     loading?: boolean;
-    wasLoaded?: boolean;
-    error?: IResponseError;
+    error?: unknown;
 }
-export declare function HealthcheckDetails(props: HealthcheckDetailsProps): JSX.Element;
+export declare function HealthcheckDetails(props: HealthcheckDetailsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.js

@@ -1,24 +1,25 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { ResponseError } from '../../../../../components/Errors/ResponseError';
 import { Loader } from '../../../../../components/Loader';
+import { cn } from '../../../../../utils/cn';
 import IssueTree from './IssuesViewer/IssueTree';
 import i18n from './i18n';
 import './Healthcheck.scss';
 const b = cn('healthcheck');
 export function HealthcheckDetails(props) {
-    const { issueTrees, loading, wasLoaded, error } = props;
+    const { issueTrees, loading, error } = props;
     const renderContent = () => {
         if (error) {
             return _jsx(ResponseError, { error: error, defaultMessage: i18n('no-data') });
         }
-        if (loading && !wasLoaded) {
+        if (loading) {
             return _jsx(Loader, { size: "m" });
         }
         if (!issueTrees || !issueTrees.length) {
             return i18n('status_message.ok');
         }
-        return (_jsx(_Fragment, { children: issueTrees.map((issueTree) => (_jsx(IssueTree, { issueTree: issueTree }, issueTree.id))) }));
+        return (_jsx(React.Fragment, { children: issueTrees.map((issueTree) => (_jsx(IssueTree, { issueTree: issueTree }, issueTree.id))) }));
     };
-    return (_jsx("div", Object.assign({ className: b('details') }, { children: _jsx("div", Object.assign({ className: b('details-content-wrapper') }, { children: renderContent() })) })));
+    return (_jsx("div", { className: b('details'), children: _jsx("div", { className: b('details-content-wrapper'), children: renderContent() }) }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.d.ts

@@ -1,15 +1,12 @@
-/// <reference types="react" />
-import { SelfCheckResult, type StatusFlag } from '../../../../../types/api/healthcheck';
-import type { IResponseError } from '../../../../../types/api/error';
+import type { SelfCheckResult, StatusFlag } from '../../../../../types/api/healthcheck';
 import './Healthcheck.scss';
 interface HealthcheckPreviewProps {
     selfCheckResult: SelfCheckResult;
     issuesStatistics?: [StatusFlag, number][];
     loading?: boolean;
-    wasLoaded?: boolean;
     onUpdate: VoidFunction;
-    error?: IResponseError;
+    error?: unknown;
     active?: boolean;
 }
-export declare function HealthcheckPreview(props: HealthcheckPreviewProps): JSX.Element;
+export declare function HealthcheckPreview(props: HealthcheckPreviewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.js

@@ -1,32 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Button, Icon } from '@gravity-ui/uikit';
-import updateArrow from '../../../../../assets/icons/update-arrow.svg';
-import { hcStatusToColorFlag } from '../../../../../store/reducers/healthcheckInfo/utils';
 import { DiagnosticCard } from '../../../../../components/DiagnosticCard/DiagnosticCard';
 import { EntityStatus } from '../../../../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../../../../components/Errors/ResponseError';
 import { Loader } from '../../../../../components/Loader';
+import { hcStatusToColorFlag } from '../../../../../store/reducers/healthcheckInfo/utils';
+import { cn } from '../../../../../utils/cn';
 import i18n from './i18n';
+import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 import './Healthcheck.scss';
 const b = cn('healthcheck');
 export function HealthcheckPreview(props) {
-    const { selfCheckResult, issuesStatistics, loading, wasLoaded, onUpdate, error, active } = props;
+    const { selfCheckResult, issuesStatistics, loading, onUpdate, error, active } = props;
     const renderHeader = () => {
         const modifier = selfCheckResult.toLowerCase();
-        if (loading && !wasLoaded) {
+        if (loading) {
             return null;
         }
-        return (_jsxs("div", Object.assign({ className: b('preview-header') }, { children: [_jsxs("div", Object.assign({ className: b('preview-title-wrapper') }, { children: [_jsx("div", Object.assign({ className: b('preview-title') }, { children: i18n('title.healthcheck') })), _jsx(Button, Object.assign({ size: "s", onClick: onUpdate, loading: loading, view: "flat-secondary" }, { children: _jsx(Icon, { data: updateArrow, width: 20, height: 20 }) }))] })), _jsx("div", Object.assign({ className: b('self-check-status-indicator', { [modifier]: true }) }, { children: selfCheckResult }))] })));
+        return (_jsxs("div", { className: b('preview-header'), children: [_jsxs("div", { className: b('preview-title-wrapper'), children: [_jsx("div", { className: b('preview-title'), children: i18n('title.healthcheck') }), _jsx(Button, { size: "s", onClick: (event) => {
+                                // FIXME: refactor card to remove the button from the anchor link.
+                                event.preventDefault();
+                                onUpdate();
+                            }, loading: loading, view: "flat-secondary", children: _jsx(Icon, { data: updateArrow, width: 20, height: 20 }) })] }), _jsx("div", { className: b('self-check-status-indicator', { [modifier]: true }), children: selfCheckResult })] }));
     };
     const renderContent = () => {
         if (error) {
             return _jsx(ResponseError, { error: error, defaultMessage: i18n('no-data') });
         }
-        if (loading && !wasLoaded) {
+        if (loading) {
             return _jsx(Loader, { size: "m" });
         }
-        return (_jsx("div", Object.assign({ className: b('preview-content') }, { children: !issuesStatistics || !issuesStatistics.length ? (i18n('status_message.ok')) : (_jsxs(_Fragment, { children: [_jsx("div", { children: i18n('label.issues') }), _jsx("div", Object.assign({ className: b('issues-statistics') }, { children: issuesStatistics.map(([status, count]) => (_jsx(EntityStatus, { mode: "icons", status: hcStatusToColorFlag[status], label: count.toString(), size: "l" }, status))) }))] })) })));
+        return (_jsx("div", { className: b('preview-content'), children: !issuesStatistics || !issuesStatistics.length ? (i18n('status_message.ok')) : (_jsxs(React.Fragment, { children: [_jsx("div", { children: i18n('label.issues') }), _jsx("div", { className: b('issues-statistics'), children: issuesStatistics.map(([status, count]) => (_jsx(EntityStatus, { mode: "icons", status: hcStatusToColorFlag[status], label: count.toString(), size: "l" }, status))) })] })) }));
     };
-    return (_jsxs(DiagnosticCard, Object.assign({ className: b('preview'), active: active }, { children: [renderHeader(), renderContent()] })));
+    return (_jsxs(DiagnosticCard, { className: b('preview'), active: active, children: [renderHeader(), renderContent()] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.d.ts

@@ -1,7 +1,7 @@
-import { IssuesTree } from '../../../../../../store/reducers/healthcheckInfo/types';
+import type { IssuesTree } from '../../../../../../store/reducers/healthcheckInfo/types';
 import './IssueTree.scss';
 interface IssuesViewerProps {
     issueTree: IssuesTree;
 }
-declare const IssueTree: ({ issueTree }: IssuesViewerProps) => JSX.Element;
+declare const IssueTree: ({ issueTree }: IssuesViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default IssueTree;

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

@@ -1,17 +1,23 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import cn from 'bem-cn-lite';
+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] = useState({});
-    const renderTree = useCallback((data) => {
+    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 } = item, rest = __rest(item, ["status", "message", "type", "reasonsItems", "level"]);
@@ -19,15 +25,9 @@ const IssueTree = ({ issueTree }) => {
             const toggleCollapsed = () => {
                 setCollapsedIssues((collapsedIssues) => (Object.assign(Object.assign({}, collapsedIssues), { [id]: !isCollapsed })));
             };
-            return (_jsxs(TreeView, Object.assign({ 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));
+            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));
         });
-    }, [issueTree, collapsedIssues]);
-    const renderInfoPanel = useCallback((info) => {
-        if (!info) {
-            return null;
-        }
-        return (_jsx("div", Object.assign({ className: b('info-panel') }, { children: _jsx(JSONTree, { data: info, search: false, isExpanded: () => true, className: b('inspector') }) })));
-    }, [issueTree]);
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx("div", Object.assign({ className: b('block') }, { children: renderTree([issueTree]) })) })));
+    }, [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/IssuesViewer/IssueTreeItem/IssueTreeItem.d.ts

@@ -6,5 +6,5 @@ interface IssueRowProps {
     type: string;
     onClick?: VoidFunction;
 }
-export declare const IssueTreeItem: ({ status, message, type, onClick }: IssueRowProps) => JSX.Element;
+export declare const IssueTreeItem: ({ status, message, type, onClick }: IssueRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { EntityStatus } from '../../../../../../../components/EntityStatus/EntityStatus';
+import { cn } from '../../../../../../../utils/cn';
 import './IssueTreeItem.scss';
 const b = cn('issue-tree-item');
 export const IssueTreeItem = ({ status, message, type, onClick }) => {
-    return (_jsxs("div", Object.assign({ className: b(), onClick: onClick }, { children: [_jsx("div", Object.assign({ className: b('field', { status: true }) }, { children: _jsx(EntityStatus, { mode: "icons", status: status, name: type }) })), _jsx("div", Object.assign({ className: b('field', { message: true }) }, { children: message }))] })));
+    return (_jsxs("div", { className: b(), onClick: onClick, children: [_jsx("div", { className: b('field', { status: true }), children: _jsx(EntityStatus, { mode: "icons", status: status, name: type }) }), _jsx("div", { className: b('field', { message: true }), children: message })] }));
 };

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

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

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../../../../utils/i18n';
+import { registerKeysets } from '../../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-diagnostics-healthcheck';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

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

@@ -1,12 +1,15 @@
 /// <reference types="react" />
+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;
-    progress?: number;
     label?: string;
     status?: MetricStatus;
-    resourcesUsed?: string;
+    metrics: DiagnosticsCardMetric[];
 }
-export declare function MetricCard({ active, progress, label, status, resourcesUsed }: MetricCardProps): JSX.Element;
+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

@@ -1,17 +1,31 @@
+import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
-import { CircularProgressBar } from '../../../../../../components/CircularProgressBar/CircularProgressBar';
 import { DiagnosticCard } from '../../../../../../components/DiagnosticCard/DiagnosticCard';
-import { formatUsage } from '../../../../../../store/reducers/tenants/utils';
-import i18n from '../../i18n';
+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');
-export function MetricCard({ active, progress, label, status, resourcesUsed }) {
+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 = () => {
-        if (progress === undefined && resourcesUsed === undefined) {
-            return _jsx("div", Object.assign({ className: b('content') }, { children: i18n('no-data') }));
-        }
-        return (_jsxs("div", Object.assign({ className: b('content') }, { children: [progress && _jsx("div", Object.assign({ className: b('progress') }, { children: formatUsage(progress) })), resourcesUsed && _jsx("div", Object.assign({ className: b('resources') }, { children: resourcesUsed }))] })));
+        return metrics.map((_a, index) => {
+            var { title } = _a, progressViewerProps = __rest(_a, ["title"]);
+            return (_jsxs("div", { className: b('metric'), children: [_jsx("div", { className: b('metric-title'), children: title }), _jsx(ProgressViewer, Object.assign({ size: "xs", colorizeProgress: true }, progressViewerProps))] }, index));
+        });
     };
-    return (_jsxs(DiagnosticCard, Object.assign({ className: b({ active }), active: active }, { children: [_jsx("div", Object.assign({ className: b('header') }, { children: label && _jsx("div", Object.assign({ className: b('label') }, { children: label })) })), _jsx(CircularProgressBar, { size: 172, strokeWidth: 11, progress: progress || 0, content: renderContent(), status: status, circleBgClassName: b('progress-bar-circle-bg') })] })));
+    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() })] }));
 }

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

@@ -2,51 +2,40 @@
 
 .ydb-metrics-card {
     $b: &;
+
+    min-height: 252px;
+
     &__header {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        gap: 8px;
 
         margin-bottom: 10px;
     }
 
     &__label {
         font-weight: 600;
+
+        color: var(--g-color-text-link);
         @include lead-typography();
     }
 
     &__content {
         display: flex;
         flex-direction: column;
-        align-items: center;
-
-        text-align: center;
+        gap: 10px;
 
         color: var(--g-color-text-secondary);
-
-        @include header-1-typography();
     }
 
-    &__progress {
-        font-size: 36px;
-        font-weight: 500;
-        line-height: 40px;
-        text-align: center;
-    }
-
-    &__resources {
-        font-size: var(--g-text-body-1-font-size);
-
-        color: var(--g-color-text-secondary);
+    &__metric-title {
+        height: var(--g-text-body-2-line-height);
     }
 
     &_active {
         #{$b}__content {
             color: var(--g-color-text-complementary);
         }
-
-        #{$b}__progress-bar-circle-bg {
-            stroke: var(--g-color-base-float);
-        }
     }
 }

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
+import type { TenantMetricStats, TenantPoolsStats, TenantStorageStats } from '../../../../../store/reducers/tenants/utils';
 import type { SelfCheckResult, StatusFlag } from '../../../../../types/api/healthcheck';
-import type { IResponseError } from '../../../../../types/api/error';
 import './MetricsCards.scss';
 export interface TenantMetrics {
     memoryUsed?: number;
@@ -11,13 +10,16 @@ export interface TenantMetrics {
     storageLimit?: number;
 }
 interface MetricsCardsProps {
-    metrics?: TenantMetrics;
+    poolsCpuStats?: TenantPoolsStats[];
+    memoryStats?: TenantMetricStats[];
+    blobStorageStats?: TenantStorageStats[];
+    tabletStorageStats?: TenantStorageStats[];
     issuesStatistics?: [StatusFlag, number][];
     selfCheckResult: SelfCheckResult;
     fetchHealthcheck: VoidFunction;
     healthcheckLoading?: boolean;
     healthCheckWasLoaded?: boolean;
-    healthcheckError?: IResponseError;
+    healthcheckError?: unknown;
 }
-export declare function MetricsCards({ metrics, issuesStatistics, selfCheckResult, fetchHealthcheck, healthcheckLoading, healthCheckWasLoaded, healthcheckError, }: MetricsCardsProps): JSX.Element;
+export declare function MetricsCards({ poolsCpuStats, memoryStats, blobStorageStats, tabletStorageStats, issuesStatistics, selfCheckResult, fetchHealthcheck, healthcheckLoading, healthcheckError, }: MetricsCardsProps): import("react/jsx-runtime").JSX.Element;
 export {};