ydb-embedded-ui 4.16.2 → 4.18.0

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

@@ -0,0 +1,52 @@
+@import '../../../../../../styles/mixins.scss';
+
+.ydb-metrics-card {
+    $b: &;
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        margin-bottom: 10px;
+    }
+
+    &__label {
+        font-weight: 600;
+        @include lead-typography();
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        font-size: var(--yc-text-header-1-font-size);
+        line-height: var(--yc-text-header-1-line-height);
+        text-align: center;
+
+        color: var(--yc-color-text-secondary);
+    }
+
+    &__progress {
+        font-size: 36px;
+        font-weight: 500;
+        line-height: 40px;
+        text-align: center;
+    }
+
+    &__resources {
+        font-size: var(--yc-text-body-1-font-size);
+
+        color: var(--yc-color-text-secondary);
+    }
+
+    &_active {
+        #{$b}__content {
+            color: var(--yc-color-text-complementary);
+        }
+
+        #{$b}__progress-bar-circle-bg {
+            stroke: var(--yc-color-base-float);
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+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 type {MetricStatus} from '../../../../../../store/reducers/tenants/types';
+
+import i18n from '../../i18n';
+
+import './MetricCard.scss';
+
+const b = cn('ydb-metrics-card');
+
+interface MetricCardProps {
+    active?: boolean;
+    progress?: number;
+    label?: string;
+    status?: MetricStatus;
+    resourcesUsed?: string;
+}
+
+export function MetricCard({active, progress, label, status, resourcesUsed}: MetricCardProps) {
+    const renderContent = () => {
+        return (
+            <div className={b('content')}>
+                {progress && <div className={b('progress')}>{formatUsage(progress)}</div>}
+                {resourcesUsed ? (
+                    <div className={b('resources')}>{resourcesUsed}</div>
+                ) : (
+                    i18n('no-data')
+                )}
+            </div>
+        );
+    };
+    return (
+        <DiagnosticCard className={b({active})} active={active}>
+            <div className={b('header')}>{label && <div className={b('label')}>{label}</div>}</div>
+            <CircularProgressBar
+                size={172}
+                strokeWidth={11}
+                progress={progress || 0}
+                content={renderContent()}
+                status={status}
+                circleBgClassName={b('progress-bar-circle-bg')}
+            />
+        </DiagnosticCard>
+    );
+}

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

@@ -0,0 +1,12 @@
+.metrics-cards {
+    display: flex;
+    gap: 16px;
+
+    margin-bottom: 32px;
+
+    &__tab {
+        text-decoration: none;
+
+        color: inherit;
+    }
+}

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

@@ -0,0 +1,134 @@
+import cn from 'bem-cn-lite';
+
+import {Link, useLocation} from 'react-router-dom';
+
+import type {TenantMetricsTab} from '../../../../../store/reducers/tenant/types';
+import {TENANT_METRICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
+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 type {SelfCheckResult, StatusFlag} from '../../../../../types/api/healthcheck';
+import type {IResponseError} from '../../../../../types/api/error';
+import {HealthcheckPreview} from '../Healthcheck/HealthcheckPreview';
+import {MetricCard} from './MetricCard/MetricCard';
+
+import './MetricsCards.scss';
+
+const b = cn('metrics-cards');
+
+export interface TenantMetrics {
+    memoryUsed?: number;
+    memoryLimit?: number;
+    cpuUsed?: number;
+    cpuLimit?: number;
+    storageUsed?: number;
+    storageLimit?: number;
+}
+
+interface MetricsCardsProps {
+    metrics?: TenantMetrics;
+    issuesStatistics?: [StatusFlag, number][];
+    selfCheckResult: SelfCheckResult;
+    fetchHealthcheck: VoidFunction;
+    healthcheckLoading?: boolean;
+    healthcheckError?: IResponseError;
+}
+
+export function MetricsCards({
+    metrics,
+    issuesStatistics,
+    selfCheckResult,
+    fetchHealthcheck,
+    healthcheckLoading,
+    healthcheckError,
+}: MetricsCardsProps) {
+    const location = useLocation();
+
+    const {memoryUsed, memoryLimit, cpuUsed, cpuLimit, storageUsed, storageLimit} = metrics || {};
+
+    const {metricsTab} = useTypedSelector((state) => state.tenant);
+
+    const cpuUsage = calculateUsage(cpuUsed, cpuLimit);
+    const storageUsage = calculateUsage(storageUsed, storageLimit);
+    const memoryUsage = calculateUsage(memoryUsed, memoryLimit);
+
+    const cpuStatus = cpuUsageToStatus(cpuUsage);
+    const storageStatus = storageUsageToStatus(storageUsage);
+    const memoryStatus = memoryUsageToStatus(memoryUsage);
+
+    const {cpu, storage, memory} = formatTenantMetrics({
+        cpu: cpuUsed,
+        storage: storageUsed,
+        memory: memoryUsed,
+    });
+
+    const queryParams = parseQuery(location);
+
+    const tabLinks: Record<TenantMetricsTab, string> = {
+        [TENANT_METRICS_TABS_IDS.cpu]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.cpu,
+        }),
+        [TENANT_METRICS_TABS_IDS.storage]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.storage,
+        }),
+        [TENANT_METRICS_TABS_IDS.memory]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.memory,
+        }),
+        [TENANT_METRICS_TABS_IDS.healthcheck]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.healthcheck,
+        }),
+    };
+
+    return (
+        <div className={b()}>
+            <Link to={tabLinks.cpu} className={b('tab')}>
+                <MetricCard
+                    label="CPU"
+                    progress={cpuUsage}
+                    status={cpuStatus}
+                    resourcesUsed={cpu}
+                    active={metricsTab === TENANT_METRICS_TABS_IDS.cpu}
+                />
+            </Link>
+            <Link to={tabLinks.storage} className={b('tab')}>
+                <MetricCard
+                    label="Storage"
+                    progress={storageUsage}
+                    status={storageStatus}
+                    resourcesUsed={storage}
+                    active={metricsTab === TENANT_METRICS_TABS_IDS.storage}
+                />
+            </Link>
+            <Link to={tabLinks.memory} className={b('tab')}>
+                <MetricCard
+                    label="Memory"
+                    progress={memoryUsage}
+                    status={memoryStatus}
+                    resourcesUsed={memory}
+                    active={metricsTab === TENANT_METRICS_TABS_IDS.memory}
+                />
+            </Link>
+            <Link to={tabLinks.healthcheck} className={b('tab')}>
+                <HealthcheckPreview
+                    selfCheckResult={selfCheckResult}
+                    issuesStatistics={issuesStatistics}
+                    onUpdate={fetchHealthcheck}
+                    loading={healthcheckLoading}
+                    error={healthcheckError}
+                    active={metricsTab === TENANT_METRICS_TABS_IDS.healthcheck}
+                />
+            </Link>
+        </div>
+    );
+}

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

@@ -0,0 +1,155 @@
+import cn from 'bem-cn-lite';
+import {useCallback} from 'react';
+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/dataFormatters/dataFormatters';
+import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
+import {bytesToGB} from '../../../../utils/utils';
+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 i18n from './i18n';
+import './TenantOverview.scss';
+
+const b = cn('tenant-overview');
+
+interface OldTenantOverviewProps {
+    tenantName: string;
+    additionalTenantProps?: AdditionalTenantsProps;
+}
+
+export function OldTenantOverview({tenantName, additionalTenantProps}: OldTenantOverviewProps) {
+    const {tenant, loading, wasLoaded} = useTypedSelector((state) => state.tenant);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const dispatch = useDispatch();
+    const fetchTenant = useCallback(
+        (isBackground = true) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+            dispatch(getTenantInfo({path: tenantName}));
+        },
+        [dispatch, tenantName],
+    );
+
+    useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
+
+    const {
+        Metrics = {},
+        PoolStats,
+        StateStats = [],
+        MemoryUsed,
+        Name,
+        State,
+        CoresUsed,
+        StorageGroups,
+        StorageAllocatedSize,
+        Type,
+        SystemTablets,
+    } = 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 renderName = () => {
+        return (
+            <div className={b('tenant-name-wrapper')}>
+                <EntityStatus
+                    status={State}
+                    name={Name || TENANT_DEFAULT_TITLE}
+                    withLeftTrim
+                    hasClipboardButton={Boolean(tenant)}
+                    clipboardButtonAlwaysVisible
+                />
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('top-label')}>{tenantType}</div>
+            <div className={b('top')}>
+                {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>
+        </div>
+    );
+}

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

@@ -1,7 +1,6 @@
-@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
-
 .tenant-overview {
     padding-bottom: 20px;
+
     &__loader {
         display: flex;
         justify-content: center;
@@ -22,10 +21,10 @@
     }
 
     &__top-label {
-        margin-bottom: detailedOverview.$section-title-margin;
+        margin-bottom: var(--diagnostics-section-title-margin);
 
         font-weight: 600;
-        line-height: detailedOverview.$section-title-line-height;
+        line-height: 24px;
         gap: 10px;
     }
 
@@ -50,7 +49,6 @@
         font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
         line-height: var(--yc-text-body-2-line-height);
-        //text-transform: uppercase;
     }
 
     &__section {

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": "Этот раздел находится в разработке"
 }