ydb-embedded-ui 4.16.2 → 4.17.0

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

@@ -4,18 +4,17 @@ import {useDispatch} from 'react-redux';
 
 import {Loader} from '@gravity-ui/uikit';
 
-import {InfoViewer} from '../../../../components/InfoViewer';
-import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
-import {Tablet} from '../../../../components/Tablet';
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
-import {formatCPU} from '../../../../utils';
-import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
-import {bytesToGB} from '../../../../utils/utils';
+import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
+import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-import type {ETabletVolatileState} from '../../../../types/api/tenant';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
+import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
+import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
+import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
+import {useHealthcheck} from './useHealthcheck';
 
 import i18n from './i18n';
 import './TenantOverview.scss';
@@ -28,9 +27,26 @@ interface TenantOverviewProps {
 }
 
 export function TenantOverview({tenantName, additionalTenantProps}: TenantOverviewProps) {
-    const {tenant, loading, wasLoaded} = useTypedSelector((state) => state.tenant);
-    const {autorefresh} = useTypedSelector((state) => state.schema);
     const dispatch = useDispatch();
+
+    const {
+        tenant,
+        loading: tenantLoading,
+        wasLoaded: tenantWasLoaded,
+        metricsTab,
+    } = useTypedSelector((state) => state.tenant);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {
+        issueTrees,
+        issuesStatistics,
+        selfCheckResult,
+        fetchHealthcheck,
+        loading: healthcheckLoading,
+        wasLoaded: healthCheckWasLoaded,
+        error: healthcheckError,
+    } = useHealthcheck(tenantName);
+
     const fetchTenant = useCallback(
         (isBackground = true) => {
             if (!isBackground) {
@@ -41,56 +57,30 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
         [dispatch, tenantName],
     );
 
-    useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
+    useAutofetcher(
+        (isBackground) => {
+            fetchTenant(isBackground);
+            fetchHealthcheck(isBackground);
+        },
+        [fetchTenant, fetchHealthcheck],
+        autorefresh,
+    );
 
-    const {
-        Metrics = {},
-        PoolStats,
-        StateStats = [],
-        MemoryUsed,
-        Name,
-        State,
-        CoresUsed,
-        StorageGroups,
-        StorageAllocatedSize,
-        Type,
-        SystemTablets,
-    } = tenant || {};
+    const {Name, State, Type} = tenant || {};
 
     const tenantType = mapDatabaseTypeToDBName(Type);
-    const memoryRaw = MemoryUsed ?? Metrics.Memory;
-
-    const memory = (memoryRaw && bytesToGB(memoryRaw)) || i18n('no-data');
-    const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || i18n('no-data');
-    const storageGroups = StorageGroups ?? i18n('no-data');
-    const blobStorage =
-        (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || i18n('no-data');
-    const storageEfficiency =
-        Metrics.Storage && StorageAllocatedSize
-            ? `${((parseInt(Metrics.Storage) * 100) / parseInt(StorageAllocatedSize)).toFixed(2)}%`
-            : i18n('no-data');
-
-    const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
-
-    const cpu = formatCPU(cpuRaw);
-
-    const metricsInfo = [
-        {label: 'Type', value: Type},
-        {label: 'Memory', value: memory},
-        {label: 'CPU', value: cpu},
-        {label: 'Tablet storage', value: storage},
-        {label: 'Storage groups', value: storageGroups},
-        {label: 'Blob storage', value: blobStorage},
-        {label: 'Storage efficiency', value: storageEfficiency},
-    ];
-
-    const tabletsInfo = StateStats.filter(
-        (item): item is {VolatileState: ETabletVolatileState; Count: number} => {
-            return item.VolatileState !== undefined && item.Count !== undefined;
-        },
-    ).map((info) => {
-        return {label: TABLET_STATES[info.VolatileState], value: info.Count};
-    });
+
+    const {cpu, storage, memory, cpuLimit, storageLimit, memoryLimit} =
+        calculateTenantMetrics(tenant);
+
+    const calculatedMetrics: TenantMetrics = {
+        memoryUsed: memory,
+        memoryLimit,
+        cpuUsed: cpu,
+        cpuLimit,
+        storageUsed: storage,
+        storageLimit,
+    };
 
     const renderName = () => {
         return (
@@ -106,7 +96,27 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
         );
     };
 
-    if (loading && !wasLoaded) {
+    const renderTabContent = () => {
+        switch (metricsTab) {
+            case TENANT_METRICS_TABS_IDS.cpu: {
+                return i18n('label.under-development');
+            }
+            case TENANT_METRICS_TABS_IDS.storage: {
+                return i18n('label.under-development');
+            }
+            case TENANT_METRICS_TABS_IDS.memory: {
+                return i18n('label.under-development');
+            }
+            case TENANT_METRICS_TABS_IDS.healthcheck: {
+                return <HealthcheckDetails issueTrees={issueTrees} error={healthcheckError} />;
+            }
+            default: {
+                return undefined;
+            }
+        }
+    };
+
+    if ((tenantLoading && !tenantWasLoaded) || (healthcheckLoading && !healthCheckWasLoaded)) {
         return (
             <div className={b('loader')}>
                 <Loader size="m" />
@@ -121,35 +131,15 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
                 {renderName()}
                 {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
             </div>
-            <div className={b('system-tablets')}>
-                {SystemTablets &&
-                    SystemTablets.map((tablet, tabletIndex) => (
-                        <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
-                    ))}
-            </div>
-            <div className={b('common-info')}>
-                <div>
-                    <div className={b('section-title')}>{i18n('title.pools')}</div>
-                    {PoolStats ? (
-                        <div className={b('section', {pools: true})}>
-                            {PoolStats.map((pool, poolIndex) => (
-                                <PoolUsage key={poolIndex} data={pool} />
-                            ))}
-                        </div>
-                    ) : (
-                        <div className="error">{i18n('no-pools-data')}</div>
-                    )}
-                </div>
-                <InfoViewer
-                    title={i18n('title.metrics')}
-                    className={b('section', {metrics: true})}
-                    info={metricsInfo}
-                />
-
-                <div className={b('section')}>
-                    <InfoViewer info={tabletsInfo} title="Tablets" />
-                </div>
-            </div>
+            <MetricsCards
+                metrics={calculatedMetrics}
+                issuesStatistics={issuesStatistics}
+                selfCheckResult={selfCheckResult}
+                fetchHealthcheck={fetchHealthcheck}
+                healthcheckLoading={healthcheckLoading}
+                healthcheckError={healthcheckError}
+            />
+            {renderTabContent()}
         </div>
     );
 }

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

@@ -3,5 +3,7 @@
   "no-pools-data": "No pools data",
 
   "title.pools": "Pools",
-  "title.metrics": "Metrics"
+  "title.metrics": "Metrics",
+
+  "label.under-development": "This section is under development"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -3,5 +3,7 @@
   "no-pools-data": "Нет данных о пулах",
 
   "title.pools": "Пулы",
-  "title.metrics": "Метрики"
+  "title.metrics": "Метрики",
+
+  "label.under-development": "Этот раздел находится в разработке"
 }

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/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/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": "Enable new database diagnostics design",
+  "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,
+    ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
     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: ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
+    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/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>;