ydb-embedded-ui 5.4.0 → 6.0.0

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 {};

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

@@ -1,28 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Link, useLocation } from 'react-router-dom';
+import { parseQuery } from '../../../../../routes';
 import { TENANT_METRICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { METRIC_STATUS, MetricStatusToSeverity, } from '../../../../../store/reducers/tenants/contants';
+import { TENANT_CPU_DANGER_TRESHOLD, TENANT_CPU_WARNING_TRESHOLD, TENANT_MEMORY_DANGER_TRESHOLD, TENANT_MEMORY_WARNING_TRESHOLD, TENANT_STORAGE_DANGER_TRESHOLD, TENANT_STORAGE_WARNING_TRESHOLD, cpuUsageToStatus, memoryUsageToStatus, storageUsageToStatus, } from '../../../../../store/reducers/tenants/utils';
+import { cn } from '../../../../../utils/cn';
+import { formatStorageValues } from '../../../../../utils/dataFormatters/dataFormatters';
 import { useTypedSelector } from '../../../../../utils/hooks';
-import { parseQuery } from '../../../../../routes';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
-import { calculateUsage, cpuUsageToStatus, storageUsageToStatus, memoryUsageToStatus, formatTenantMetrics, } from '../../../../../store/reducers/tenants/utils';
 import { HealthcheckPreview } from '../Healthcheck/HealthcheckPreview';
+import i18n from '../i18n';
 import { MetricCard } from './MetricCard/MetricCard';
 import './MetricsCards.scss';
 const b = cn('metrics-cards');
-export function MetricsCards({ metrics, issuesStatistics, selfCheckResult, fetchHealthcheck, healthcheckLoading, healthCheckWasLoaded, healthcheckError, }) {
+export function MetricsCards({ poolsCpuStats, memoryStats, blobStorageStats, tabletStorageStats, issuesStatistics, selfCheckResult, fetchHealthcheck, healthcheckLoading, healthcheckError, }) {
     const location = useLocation();
-    const { memoryUsed, memoryLimit, cpuUsage, storageUsed, storageLimit } = metrics || {};
     const { metricsTab } = useTypedSelector((state) => state.tenant);
-    const storageUsage = calculateUsage(storageUsed, storageLimit);
-    const memoryUsage = calculateUsage(memoryUsed, memoryLimit);
-    const cpuStatus = cpuUsageToStatus(cpuUsage);
-    const storageStatus = storageUsageToStatus(storageUsage);
-    const memoryStatus = memoryUsageToStatus(memoryUsage);
-    const { storage, memory } = formatTenantMetrics({
-        storage: storageUsed,
-        memory: memoryUsed,
-    });
     const queryParams = parseQuery(location);
     // Allow tabs untoggle behaviour
     const getTabIfNotActive = (tab) => {
@@ -37,5 +30,66 @@ export function MetricsCards({ metrics, issuesStatistics, selfCheckResult, fetch
         [TENANT_METRICS_TABS_IDS.memory]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.memory) })),
         [TENANT_METRICS_TABS_IDS.healthcheck]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.healthcheck) })),
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Link, Object.assign({ to: tabLinks.cpu, className: b('tab') }, { children: _jsx(MetricCard, { label: "CPU", progress: cpuUsage, status: cpuStatus, active: metricsTab === TENANT_METRICS_TABS_IDS.cpu }) })), _jsx(Link, Object.assign({ to: tabLinks.storage, className: b('tab') }, { children: _jsx(MetricCard, { label: "Storage", progress: storageUsage, status: storageStatus, resourcesUsed: storage, active: metricsTab === TENANT_METRICS_TABS_IDS.storage }) })), _jsx(Link, Object.assign({ to: tabLinks.memory, className: b('tab') }, { children: _jsx(MetricCard, { label: "Memory", progress: memoryUsage, status: memoryStatus, resourcesUsed: memory, active: metricsTab === TENANT_METRICS_TABS_IDS.memory }) })), _jsx(Link, Object.assign({ to: tabLinks.healthcheck, className: b('tab') }, { children: _jsx(HealthcheckPreview, { selfCheckResult: selfCheckResult, issuesStatistics: issuesStatistics, onUpdate: fetchHealthcheck, loading: healthcheckLoading, wasLoaded: healthCheckWasLoaded, error: healthcheckError, active: metricsTab === TENANT_METRICS_TABS_IDS.healthcheck }) }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsx(Link, { to: tabLinks.cpu, className: b('tab'), children: _jsx(CPUCard, { poolsCpuStats: poolsCpuStats, active: metricsTab === TENANT_METRICS_TABS_IDS.cpu }) }), _jsx(Link, { to: tabLinks.storage, className: b('tab'), children: _jsx(StorageCard, { blobStorageStats: blobStorageStats, tabletStorageStats: tabletStorageStats, active: metricsTab === TENANT_METRICS_TABS_IDS.storage }) }), _jsx(Link, { to: tabLinks.memory, className: b('tab'), children: _jsx(MemoryCard, { memoryStats: memoryStats, active: metricsTab === TENANT_METRICS_TABS_IDS.memory }) }), _jsx(Link, { to: tabLinks.healthcheck, className: b('tab'), children: _jsx(HealthcheckPreview, { selfCheckResult: selfCheckResult, issuesStatistics: issuesStatistics, onUpdate: fetchHealthcheck, loading: healthcheckLoading, error: healthcheckError, active: metricsTab === TENANT_METRICS_TABS_IDS.healthcheck }) })] }));
+}
+function CPUCard({ poolsCpuStats = [], active }) {
+    let status = METRIC_STATUS.Unspecified;
+    const metrics = poolsCpuStats
+        // Use only pools that directly indicate resources available to perform user queries
+        .filter((pool) => !(pool.name === 'Batch' || pool.name === 'IO'))
+        .map((pool) => {
+        const { name, usage, limit, used } = pool;
+        const poolStatus = cpuUsageToStatus(usage);
+        if (MetricStatusToSeverity[poolStatus] > MetricStatusToSeverity[status]) {
+            status = poolStatus;
+        }
+        return {
+            title: name,
+            value: used,
+            capacity: limit,
+            warningThreshold: TENANT_CPU_WARNING_TRESHOLD,
+            dangerThreshold: TENANT_CPU_DANGER_TRESHOLD,
+        };
+    });
+    return (_jsx(MetricCard, { label: i18n('cards.cpu-label'), active: active, metrics: metrics, status: status }));
+}
+function StorageCard({ blobStorageStats = [], tabletStorageStats, active }) {
+    let status = METRIC_STATUS.Unspecified;
+    // Display tablet storage stats if limits are set and blob storage stats otherwise
+    const storageStats = tabletStorageStats || blobStorageStats;
+    const metrics = storageStats.map((metric) => {
+        const { name, used, limit, usage } = metric;
+        const metircStatus = storageUsageToStatus(usage);
+        if (MetricStatusToSeverity[metircStatus] > MetricStatusToSeverity[status]) {
+            status = metircStatus;
+        }
+        return {
+            title: name,
+            value: used,
+            capacity: limit,
+            warningThreshold: TENANT_STORAGE_WARNING_TRESHOLD,
+            dangerThreshold: TENANT_STORAGE_DANGER_TRESHOLD,
+            formatValues: formatStorageValues,
+        };
+    });
+    return (_jsx(MetricCard, { label: i18n('cards.storage-label'), active: active, metrics: metrics, status: status }));
+}
+function MemoryCard({ active, memoryStats = [] }) {
+    let status = METRIC_STATUS.Unspecified;
+    const metrics = memoryStats.map((metric) => {
+        const { name, used, limit, usage } = metric;
+        const metircStatus = memoryUsageToStatus(usage);
+        if (MetricStatusToSeverity[metircStatus] > MetricStatusToSeverity[status]) {
+            status = metircStatus;
+        }
+        return {
+            title: name,
+            value: used,
+            capacity: limit,
+            warningThreshold: TENANT_MEMORY_WARNING_TRESHOLD,
+            dangerThreshold: TENANT_MEMORY_DANGER_TRESHOLD,
+            formatValues: formatStorageValues,
+        };
+    });
+    return (_jsx(MetricCard, { label: i18n('cards.memory-label'), active: active, metrics: metrics, status: status }));
 }

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { AdditionalNodesProps } from '../../../../../types/additionalProps';
 interface TenantCpuProps {
     path: string;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare function TenantCpu({ path, additionalNodesProps }: TenantCpuProps): JSX.Element;
+export declare function TenantCpu({ path, additionalNodesProps }: TenantCpuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
-import { cpuDashboardConfig } from './cpuDashboardConfig';
-import { TopNodesByLoad } from './TopNodesByLoad';
 import { TopNodesByCpu } from './TopNodesByCpu';
-import { TopShards } from './TopShards';
+import { TopNodesByLoad } from './TopNodesByLoad';
 import { TopQueries } from './TopQueries';
+import { TopShards } from './TopShards';
+import { cpuDashboardConfig } from './cpuDashboardConfig';
 export function TenantCpu({ path, additionalNodesProps }) {
-    return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { database: path, charts: cpuDashboardConfig }), _jsx(TopNodesByLoad, { path: path, additionalNodesProps: additionalNodesProps }), _jsx(TopNodesByCpu, { path: path, additionalNodesProps: additionalNodesProps }), _jsx(TopShards, { path: path }), _jsx(TopQueries, { path: path })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(TenantDashboard, { database: path, charts: cpuDashboardConfig }), _jsx(TopNodesByLoad, { path: path, additionalNodesProps: additionalNodesProps }), _jsx(TopNodesByCpu, { path: path, additionalNodesProps: additionalNodesProps }), _jsx(TopShards, { path: path }), _jsx(TopQueries, { path: path })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { AdditionalNodesProps } from '../../../../../types/additionalProps';
 interface TopNodesByCpuProps {
     path: string;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare function TopNodesByCpu({ path, additionalNodesProps }: TopNodesByCpuProps): JSX.Element;
+export declare function TopNodesByCpu({ path, additionalNodesProps }: TopNodesByCpuProps): import("react/jsx-runtime").JSX.Element;
 export {};