ydb-embedded-ui 4.16.2 → 4.18.0

package/dist/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.ts

@@ -0,0 +1,53 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+
+import {
+    getHealthcheckInfo,
+    selectIssuesStatistics,
+    selectIssuesTrees,
+    setDataWasNotLoaded,
+} from '../../../../store/reducers/healthcheckInfo';
+import type {IIssuesTree} from '../../../../types/store/healthcheck';
+import {type StatusFlag, SelfCheckResult} from '../../../../types/api/healthcheck';
+import type {IResponseError} from '../../../../types/api/error';
+import {useTypedSelector} from '../../../../utils/hooks/useTypedSelector';
+
+interface HealthcheckParams {
+    issueTrees: IIssuesTree[];
+    issuesStatistics: [StatusFlag, number][];
+    fetchHealthcheck: (isBackground?: boolean) => void;
+    loading: boolean;
+    wasLoaded: boolean;
+    error?: IResponseError;
+    selfCheckResult: SelfCheckResult;
+}
+
+export const useHealthcheck = (tenantName: string): HealthcheckParams => {
+    const dispatch = useDispatch();
+
+    const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
+    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
+    const issuesStatistics = useTypedSelector(selectIssuesStatistics);
+    const issueTrees = useTypedSelector(selectIssuesTrees);
+
+    const fetchHealthcheck = useCallback(
+        (isBackground = true) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getHealthcheckInfo(tenantName));
+        },
+        [dispatch, tenantName],
+    );
+
+    return {
+        issueTrees,
+        issuesStatistics,
+        fetchHealthcheck,
+        loading,
+        wasLoaded,
+        error,
+        selfCheckResult,
+    };
+};

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -28,7 +28,7 @@ import {
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../../store/reducers/tenant/constants';
-import {formatDateTime, formatNumber} from '../../../../utils';
+import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
 import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.tsx

@@ -22,7 +22,7 @@ import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/sto
 import type {EPathType} from '../../../../types/api/schema';
 import type {CellValue, KeyValueRow} from '../../../../types/api/query';
 
-import {formatDateTime, formatNumber} from '../../../../utils';
+import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -24,7 +24,7 @@ import {
     TColumnTableDescription,
 } from '../../../types/api/schema';
 import routes, {createHref} from '../../../routes';
-import {formatDateTime} from '../../../utils';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
 import {useTypedSelector} from '../../../utils/hooks';
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,

package/dist/containers/Tenant/TenantPages.tsx

@@ -5,6 +5,7 @@ export const TenantTabsGroups = {
     summaryTab: 'summaryTab',
     queryTab: 'queryTab',
     diagnosticsTab: 'diagnosticsTab',
+    metricsTab: 'metricsTab',
 } as const;
 
 export const TENANT_INFO_TABS = [

package/dist/containers/Tenants/Tenants.tsx

@@ -26,7 +26,11 @@ import {
     ProblemFilterValues,
     selectProblemFilter,
 } from '../../store/reducers/settings/settings';
-import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
+import {
+    formatBytesToGigabyte,
+    formatCPU,
+    formatNumber,
+} from '../../utils/dataFormatters/dataFormatters';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 import {clusterName} from '../../store';

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

@@ -23,5 +23,8 @@
   "settings.useBackendParamsForTables.popover": "Filter and sort Nodes and Storage tables with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions"
+  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",
+
+  "settings.tenantDiagnostics.title": "Display metrics cards for database diagnostics",
+  "settings.tenantDiagnostics.popover": "Adds indicators of database resources usage. Incomplete data may be displayed for some databases"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -23,5 +23,8 @@
   "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблиц Nodes и Storage с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях"
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",
+
+  "settings.tenantDiagnostics.title": "Показывать карточки с метриками в диагностике базы данных",
+  "settings.tenantDiagnostics.popover": "Добавляет индикаторы использования ресурсов базы данных. Для некоторых баз могут отображаться неполные данные"
 }

package/dist/containers/UserSettings/settings.ts

@@ -5,6 +5,7 @@ import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
     ENABLE_ADDITIONAL_QUERY_MODES,
+    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
     THEME_KEY,
@@ -94,6 +95,11 @@ export const enableQueryModesForExplainSetting: SettingProps = {
     title: i18n('settings.enableAdditionalQueryModes.title'),
     helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
 };
+export const enableNewTenantDiagnosticsDesign: SettingProps = {
+    settingKey: DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
+    title: i18n('settings.tenantDiagnostics.title'),
+    helpPopoverContent: i18n('settings.tenantDiagnostics.popover'),
+};
 
 export const generalSection: SettingsSection = {
     id: 'generalSection',
@@ -108,6 +114,7 @@ export const experimentsSection: SettingsSection = {
         useNodesEndpointSetting,
         useBackendParamsForTables,
         enableQueryModesForExplainSetting,
+        enableNewTenantDiagnosticsDesign,
     ],
 };
 

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -3,10 +3,10 @@ import DataTable, {Column} from '@gravity-ui/react-data-table';
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
 import {isUnavailableNode} from '../../../utils/nodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {formatBytes} from '../../../utils';
+import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 

package/dist/services/api.ts

@@ -350,10 +350,12 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             enable_sampling: enableSampling,
         });
     }
-    getHealthcheckInfo(database: string) {
-        return this.get<HealthCheckAPIResponse>(this.getPath('/viewer/json/healthcheck'), {
-            tenant: database,
-        });
+    getHealthcheckInfo(database: string, {concurrentId}: AxiosOptions = {}) {
+        return this.get<HealthCheckAPIResponse>(
+            this.getPath('/viewer/json/healthcheck?merge_records=true'),
+            {tenant: database},
+            {concurrentId},
+        );
     }
     killTablet(id?: string) {
         return this.get<string>(this.getPath(`/tablets?KillTabletID=${id}`), {});

package/dist/store/reducers/clusterNodes/clusterNodes.tsx

@@ -5,7 +5,7 @@ import {createRequestActionTypes, createApiRequest} from '../../utils';
 import type {ClusterNodesAction, ClusterNodesState, PreparedClusterNode} from './types';
 
 import '../../../services/api';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 
 export const FETCH_CLUSTER_NODES = createRequestActionTypes('cluster', 'FETCH_CLUSTER_NODES');
 

package/dist/store/reducers/healthcheckInfo.ts

@@ -44,6 +44,10 @@ const healthcheckInfo: Reducer<IHealthcheckInfoState, IHealthCheckInfoAction> =
             };
         }
         case FETCH_HEALTHCHECK.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
@@ -72,21 +76,25 @@ const mapStatusToPriority: Partial<Record<StatusFlag, number>> = {
     GREEN: 4,
 };
 
-const getReasonsForIssue = ({issue, data}: {issue: IssueLog; data: IssueLog[]}) => {
-    return data.filter((item) => issue.reason && issue.reason.indexOf(item.id) !== -1);
-};
+const sortIssues = (data: IssueLog[]): IssueLog[] => {
+    return data.sort((a, b) => {
+        const aPriority = mapStatusToPriority[a.status] || 0;
+        const bPriority = mapStatusToPriority[b.status] || 0;
 
-const getRoots = (data: IssueLog[]): IssueLog[] => {
-    let roots = data.filter((item) => {
-        return !data.find((issue) => issue.reason && issue.reason.indexOf(item.id) !== -1);
+        return aPriority - bPriority;
     });
+};
 
-    roots = _flow([
-        _uniqBy((item: IssueLog) => item.id),
-        _sortBy(({status}: {status: StatusFlag}) => mapStatusToPriority[status]),
-    ])(roots);
+const getReasonsForIssue = ({issue, data}: {issue: IssueLog; data: IssueLog[]}) => {
+    return sortIssues(data.filter((item) => issue.reason && issue.reason.indexOf(item.id) !== -1));
+};
 
-    return roots;
+const getRoots = (data: IssueLog[]): IssueLog[] => {
+    return sortIssues(
+        data.filter((item) => {
+            return !data.find((issue) => issue.reason && issue.reason.indexOf(item.id) !== -1);
+        }),
+    );
 };
 
 const getInvertedConsequencesTree = ({
@@ -147,7 +155,7 @@ export const selectIssuesStatistics: Selector<
 
 export function getHealthcheckInfo(database: string) {
     return createApiRequest({
-        request: window.api.getHealthcheckInfo(database),
+        request: window.api.getHealthcheckInfo(database, {concurrentId: 'getHealthcheckInfo'}),
         actions: FETCH_HEALTHCHECK,
     });
 }

package/dist/store/reducers/node/selectors.ts

@@ -1,7 +1,7 @@
 import type {Selector} from 'reselect';
 import {createSelector} from 'reselect';
 
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 
 import type {
     NodeStateSlice,

package/dist/store/reducers/nodes/selectors.ts

@@ -1,7 +1,7 @@
 import {Selector, createSelector} from 'reselect';
 
 import {EFlag} from '../../../types/api/enums';
-import {calcUptimeInSeconds} from '../../../utils';
+import {calcUptimeInSeconds} from '../../../utils/dataFormatters/dataFormatters';
 import {HOUR_IN_SECONDS} from '../../../utils/constants';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {prepareSearchValue} from '../../../utils/filters';

package/dist/store/reducers/nodes/types.ts

@@ -64,7 +64,7 @@ export interface NodesGeneralRequestParams extends NodesSortParams {
     uptime?: number; // return nodes with less uptime in seconds
     problems_only?: boolean; // return nodes with SystemState !== EFlag.Green
 
-    offser?: number;
+    offset?: number;
     limit?: number;
 }
 

package/dist/store/reducers/nodes/utils.ts

@@ -1,6 +1,6 @@
 import type {TComputeInfo, TComputeNodeInfo} from '../../../types/api/compute';
 import type {TNodesInfo} from '../../../types/api/nodes';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 
 import type {NodesHandledResponse, NodesPreparedEntity} from './types';
 

package/dist/store/reducers/settings/settings.ts

@@ -15,6 +15,7 @@ import {
     LAST_USED_QUERY_ACTION_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     LANGUAGE_KEY,
+    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {parseJson} from '../../../utils/utils';
@@ -49,12 +50,16 @@ export const initialState = {
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-            'false',
+            'true',
         ),
         [ENABLE_ADDITIONAL_QUERY_MODES]: readSavedSettingsValue(
             ENABLE_ADDITIONAL_QUERY_MODES,
             'false',
         ),
+        [DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS]: readSavedSettingsValue(
+            DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
+            'false',
+        ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
             TENANT_INITIAL_PAGE_KEY,

package/dist/store/reducers/storage/types.ts

@@ -63,7 +63,7 @@ export interface StorageSortParams {
 export interface StorageSortAndFilterParams extends StorageSortParams {
     filter?: string; // PoolName or GroupId
 
-    offser?: number;
+    offset?: number;
     limit?: number;
 }
 

package/dist/store/reducers/storage/utils.ts

@@ -9,7 +9,7 @@ import {TPDiskState} from '../../../types/api/pdisk';
 import {EFlag} from '../../../types/api/enums';
 import {getPDiskType} from '../../../utils/pdisk';
 import {getUsage} from '../../../utils/storage';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 
 import type {PreparedStorageGroup, PreparedStorageNode, PreparedStorageResponse} from './types';
 

package/dist/store/reducers/tenant/constants.ts

@@ -31,3 +31,10 @@ export const TENANT_SUMMARY_TABS_IDS = {
     acl: 'acl',
     schema: 'schema',
 } as const;
+
+export const TENANT_METRICS_TABS_IDS = {
+    cpu: 'cpu',
+    storage: 'storage',
+    memory: 'memory',
+    healthcheck: 'healthcheck',
+} as const;

package/dist/store/reducers/tenant/tenant.ts

@@ -4,6 +4,7 @@ import type {TTenant} from '../../../types/api/tenant';
 import type {
     TenantAction,
     TenantDiagnosticsTab,
+    TenantMetricsTab,
     TenantPage,
     TenantQueryTab,
     TenantState,
@@ -19,6 +20,7 @@ const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
 const SET_QUERY_TAB = 'tenant/SET_QUERY_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 const SET_SUMMARY_TAB = 'tenant/SET_SUMMARY_TAB';
+const SET_METRICS_TAB = 'tenant/SET_METRICS_TAB';
 const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
 const SET_DATA_WAS_NOT_LOADED = 'tenant/SET_DATA_WAS_NOT_LOADED';
 
@@ -88,6 +90,12 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
                 summaryTab: action.data,
             };
         }
+        case SET_METRICS_TAB: {
+            return {
+                ...state,
+                metricsTab: action.data,
+            };
+        }
 
         case SET_DATA_WAS_NOT_LOADED: {
             return {
@@ -143,6 +151,13 @@ export function setSummaryTab(tab: TenantSummaryTab) {
     } as const;
 }
 
+export function setMetricsTab(tab: TenantMetricsTab) {
+    return {
+        type: SET_METRICS_TAB,
+        data: tab,
+    } as const;
+}
+
 export const setDataWasNotLoaded = () => {
     return {
         type: SET_DATA_WAS_NOT_LOADED,

package/dist/store/reducers/tenant/types.ts

@@ -8,6 +8,7 @@ import {
     TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_PAGES_IDS,
     TENANT_SUMMARY_TABS_IDS,
+    TENANT_METRICS_TABS_IDS,
 } from './constants';
 import {
     FETCH_TENANT,
@@ -15,6 +16,7 @@ import {
     setDiagnosticsTab,
     setQueryTab,
     setSummaryTab,
+    setMetricsTab,
     setTenantPage,
     setDataWasNotLoaded,
 } from './tenant';
@@ -24,6 +26,7 @@ export type TenantPage = ValueOf<typeof TENANT_PAGES_IDS>;
 export type TenantQueryTab = ValueOf<typeof TENANT_QUERY_TABS_ID>;
 export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
 export type TenantSummaryTab = ValueOf<typeof TENANT_SUMMARY_TABS_IDS>;
+export type TenantMetricsTab = ValueOf<typeof TENANT_METRICS_TABS_IDS>;
 
 export interface TenantState {
     loading: boolean;
@@ -32,6 +35,7 @@ export interface TenantState {
     queryTab?: TenantQueryTab;
     diagnosticsTab?: TenantDiagnosticsTab;
     summaryTab?: TenantSummaryTab;
+    metricsTab?: TenantMetricsTab;
     tenant?: TTenant;
     error?: IResponseError;
 }
@@ -43,4 +47,5 @@ export type TenantAction =
     | ReturnType<typeof setQueryTab>
     | ReturnType<typeof setDiagnosticsTab>
     | ReturnType<typeof setSummaryTab>
+    | ReturnType<typeof setMetricsTab>
     | ReturnType<typeof setDataWasNotLoaded>;

package/dist/store/reducers/tenants/contants.ts

@@ -0,0 +1,6 @@
+export const METRIC_STATUS = {
+    Unspecified: 'Unspecified',
+    Good: 'Good',
+    Warning: 'Warning',
+    Danger: 'Danger',
+} as const;

package/dist/store/reducers/tenants/types.ts

@@ -1,8 +1,10 @@
 import {FETCH_TENANTS, setSearchValue} from './tenants';
 
+import {ValueOf} from '../../../types/common';
 import type {TTenant} from '../../../types/api/tenant';
 import type {IResponseError} from '../../../types/api/error';
 import type {ApiRequestAction} from '../../utils';
+import {METRIC_STATUS} from './contants';
 
 export interface PreparedTenant extends TTenant {
     backend: string | undefined;
@@ -30,3 +32,5 @@ export type TenantsAction =
 export interface TenantsStateSlice {
     tenants: TenantsState;
 }
+
+export type MetricStatus = ValueOf<typeof METRIC_STATUS>;

package/dist/store/reducers/tenants/utils.ts

@@ -1,5 +1,8 @@
 import type {TTenant} from '../../../types/api/tenant';
+import {formatBytes} from '../../../utils/bytesParsers';
+import {formatCPUWithLabel} from '../../../utils/dataFormatters/dataFormatters';
 import {isNumeric} from '../../../utils/utils';
+import {METRIC_STATUS} from './contants';
 
 const getControlPlaneValue = (tenant: TTenant) => {
     const parts = tenant.Name?.split('/');
@@ -18,21 +21,40 @@ const getTenantBackend = (tenant: TTenant) => {
     return node.Host ? `${node.Host}${address ? address : ''}` : undefined;
 };
 
-const calculateTenantMetrics = (tenant: TTenant) => {
-    const {CoresUsed, MemoryUsed, StorageAllocatedSize, Metrics = {}} = tenant;
+export const calculateTenantMetrics = (tenant?: TTenant) => {
+    const {
+        CoresUsed,
+        MemoryUsed,
+        StorageAllocatedSize,
+        CoresLimit,
+        MemoryLimit,
+        StorageLimit,
+        Metrics = {},
+    } = tenant || {};
 
     const cpuFromCores = isNumeric(CoresUsed) ? Number(CoresUsed) * 1_000_000 : undefined;
     const cpuFromMetrics = isNumeric(Metrics.CPU) ? Number(Metrics.CPU) : undefined;
 
-    const cpu = cpuFromCores ?? cpuFromMetrics ?? 0;
+    const cpu = cpuFromCores ?? cpuFromMetrics ?? undefined;
 
     const rawMemory = MemoryUsed ?? Metrics.Memory;
-    const rawStorage = StorageAllocatedSize ?? Metrics.Storage;
 
-    const memory = isNumeric(rawMemory) ? Number(rawMemory) : 0;
-    const storage = isNumeric(rawStorage) ? Number(rawStorage) : 0;
+    const memory = isNumeric(rawMemory) ? Number(rawMemory) : undefined;
 
-    return {cpu, memory, storage};
+    // Blob storage - actual database size
+    const storage = isNumeric(StorageAllocatedSize) ? Number(StorageAllocatedSize) : undefined;
+    const cpuLimit = isNumeric(CoresLimit) ? Number(CoresLimit) : undefined;
+    const memoryLimit = isNumeric(MemoryLimit) ? Number(MemoryLimit) : undefined;
+    const storageLimit = isNumeric(StorageLimit) ? Number(StorageLimit) : undefined;
+
+    return {
+        cpu,
+        memory,
+        storage,
+        cpuLimit,
+        memoryLimit,
+        storageLimit,
+    };
 };
 
 const calculateTenantEntities = (tenant: TTenant) => {
@@ -66,3 +88,88 @@ export const prepareTenants = (tenants: TTenant[], useNodeAsBackend: boolean) =>
         };
     });
 };
+
+export const calculateUsage = (valueUsed?: number, valueLimit?: number): number | undefined => {
+    if (valueUsed && valueLimit) {
+        return (valueUsed * 100) / valueLimit;
+    }
+
+    return undefined;
+};
+
+export const formatUsage = (usage?: number) => {
+    if (usage) {
+        return `${usage.toFixed()}%`;
+    }
+
+    return undefined;
+};
+
+export const cpuUsageToStatus = (usage?: number) => {
+    if (!usage) {
+        return METRIC_STATUS.Unspecified;
+    }
+
+    if (usage > 70) {
+        return METRIC_STATUS.Danger;
+    }
+    if (usage > 60) {
+        return METRIC_STATUS.Warning;
+    }
+
+    return METRIC_STATUS.Good;
+};
+export const storageUsageToStatus = (usage?: number) => {
+    if (!usage) {
+        return METRIC_STATUS.Unspecified;
+    }
+
+    if (usage > 85) {
+        return METRIC_STATUS.Danger;
+    }
+    if (usage > 75) {
+        return METRIC_STATUS.Warning;
+    }
+
+    return METRIC_STATUS.Good;
+};
+
+export const memoryUsageToStatus = (usage?: number) => {
+    if (!usage) {
+        return METRIC_STATUS.Unspecified;
+    }
+
+    if (usage > 70) {
+        return METRIC_STATUS.Danger;
+    }
+    if (usage > 60) {
+        return METRIC_STATUS.Warning;
+    }
+
+    return METRIC_STATUS.Good;
+};
+
+export const formatTenantMetrics = ({
+    cpu,
+    storage,
+    memory,
+}: {
+    cpu?: number;
+    storage?: number;
+    memory?: number;
+}) => ({
+    cpu: formatCPUWithLabel(cpu),
+    storage: formatBytes({value: storage, significantDigits: 2}) || undefined,
+    memory: formatBytes({value: memory, significantDigits: 2}) || undefined,
+});
+
+export const normalizeProgress = (progress: number) => {
+    if (progress >= 100) {
+        return 100;
+    }
+    if (progress <= 0) {
+        return 0;
+    }
+
+    return progress;
+};

package/dist/store/state-url-mapping.js

@@ -54,6 +54,9 @@ const paramSetup = {
         summaryTab: {
             stateKey: 'tenant.summaryTab',
         },
+        metricsTab: {
+            stateKey: 'tenant.metricsTab',
+        },
         shardsMode: {
             stateKey: 'shardsWorkload.filters.mode',
         },

package/dist/styles/constants.scss

@@ -1,3 +1,5 @@
 :root {
     --tenant-object-info-max-value-width: 300px;
+
+    --diagnostics-section-title-margin: 20px;
 }

package/dist/types/api/tenant.ts

@@ -57,6 +57,9 @@ export interface TTenant {
 
     MonitoringEndpoint?: string; // additional
     ControlPlane?: ControlPlane; // additional
+
+    CoresLimit?: string; // TODO: check correctness in backend protos when fully supported
+    StorageLimit?: string; // TODO: check correctness in backend protos when fully supported
 }
 
 interface THiveDomainStatsStateCount {

package/dist/types/api/vdisk.ts

@@ -99,7 +99,7 @@ interface TVDiskSatisfactionRank {
     LevelRank?: TRank;
 }
 
-interface TVDiskID {
+export interface TVDiskID {
     GroupID?: number;
     GroupGeneration?: number;
     Ring?: number;

package/dist/utils/bytesParsers/formatBytes.ts

@@ -1,4 +1,4 @@
-import {formatNumber} from '..';
+import {formatNumber} from '../dataFormatters/dataFormatters';
 import {GIGABYTE, KILOBYTE, MEGABYTE, TERABYTE} from '../constants';
 import {isNumeric} from '../utils';