ydb-embedded-ui 4.16.1 → 4.17.0

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'),
+            {tenant: database},
+            {concurrentId},
+        );
     }
     killTablet(id?: string) {
         return this.get<string>(this.getPath(`/tablets?KillTabletID=${id}`), {});

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/settings/settings.ts

@@ -15,6 +15,7 @@ import {
     LAST_USED_QUERY_ACTION_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     LANGUAGE_KEY,
+    ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {parseJson} from '../../../utils/utils';
@@ -55,6 +56,10 @@ export const initialState = {
             ENABLE_ADDITIONAL_QUERY_MODES,
             'false',
         ),
+        [ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN]: readSavedSettingsValue(
+            ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
+            'false',
+        ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
             TENANT_INITIAL_PAGE_KEY,

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 {formatCPU} from '../../../utils/formatCPU/formatCPU';
 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: formatCPU(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/utils/constants.ts

@@ -88,6 +88,7 @@ export const LANGUAGE_KEY = 'language';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
 export const ENABLE_ADDITIONAL_QUERY_MODES = 'enableAdditionalQueryModes';
+export const ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN = 'enableNewTenantDiagnosticsDesign';
 export const SAVED_QUERIES_KEY = 'saved_queries';
 export const ASIDE_HEADER_COMPACT_KEY = 'asideHeaderCompact';
 export const QUERIES_HISTORY_KEY = 'queries_history';

package/dist/utils/formatCPU/formatCPU.ts

@@ -0,0 +1,20 @@
+import {configuredNumeral} from '../numeral';
+import i18n from './i18n';
+
+export const formatCPU = (value?: number) => {
+    if (value === undefined) {
+        return undefined;
+    }
+
+    const rawCores = value / 1000000;
+    let cores = rawCores.toPrecision(3);
+    if (rawCores >= 1000) {
+        cores = rawCores.toFixed();
+    }
+    if (rawCores < 0.001) {
+        cores = '0';
+    }
+    const localizedCores = configuredNumeral(Number(cores)).format('0.[000]');
+
+    return `${localizedCores} ${i18n('cores', {count: cores})}`;
+};

package/dist/utils/formatCPU/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "cores": ["core", "cores", "cores", "cores"]
+}

package/dist/utils/formatCPU/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-format-cpu';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/utils/formatCPU/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "cores": ["ядро", "ядра", "ядер", "ядер"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.16.1",
+  "version": "4.17.0",
   "files": [
     "dist"
   ],