ydb-embedded-ui 4.16.2 → 4.17.0

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

@@ -0,0 +1,83 @@
+import cn from 'bem-cn-lite';
+
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import updateArrow from '../../../../../assets/icons/update-arrow.svg';
+
+import {SelfCheckResult, type StatusFlag} from '../../../../../types/api/healthcheck';
+import type {IResponseError} from '../../../../../types/api/error';
+import {DiagnosticCard} from '../../../../../components/DiagnosticCard/DiagnosticCard';
+import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
+
+import i18n from './i18n';
+import './Healthcheck.scss';
+
+const b = cn('healthcheck');
+
+interface HealthcheckPreviewProps {
+    selfCheckResult: SelfCheckResult;
+    issuesStatistics?: [StatusFlag, number][];
+    loading?: boolean;
+    onUpdate: VoidFunction;
+    error?: IResponseError;
+    active?: boolean;
+}
+
+export function HealthcheckPreview(props: HealthcheckPreviewProps) {
+    const {selfCheckResult, issuesStatistics, loading, onUpdate, error, active} = props;
+
+    const renderHeader = () => {
+        const modifier = selfCheckResult.toLowerCase();
+
+        return (
+            <div className={b('preview-header')}>
+                <div className={b('preview-title-wrapper')}>
+                    <div className={b('preview-title')}>{i18n('title.healthcheck')}</div>
+                    <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
+                        <Icon data={updateArrow} width={20} height={20} />
+                    </Button>
+                </div>
+                <div className={b('self-check-status-indicator', {[modifier]: true})}>
+                    {selfCheckResult}
+                </div>
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
+        }
+
+        return (
+            <div className={b('preview-content')}>
+                {!issuesStatistics || !issuesStatistics.length ? (
+                    i18n('status_message.ok')
+                ) : (
+                    <>
+                        <div>{i18n('label.issues')}</div>
+                        <div className={b('issues-statistics')}>
+                            {issuesStatistics.map(([status, count]) => (
+                                <EntityStatus
+                                    key={status}
+                                    mode="icons"
+                                    status={status}
+                                    label={count.toString()}
+                                    size="l"
+                                />
+                            ))}
+                        </div>
+                    </>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <DiagnosticCard className={b('preview')} active={active}>
+            {renderHeader()}
+            {renderContent()}
+        </DiagnosticCard>
+    );
+}

package/dist/containers/Tenant/Diagnostics/{Healthcheck → TenantOverview/Healthcheck}/IssuesViewer/IssueTree.scss

@@ -1,4 +1,4 @@
-@import '../../../../../styles/mixins.scss';
+@import '../../../../../../styles/mixins.scss';
 
 .indicator {
     width: 12px;
@@ -38,8 +38,6 @@
 .issue-tree {
     display: flex;
 
-    width: 820px;
-
     &__block {
         width: 100%;
     }

package/dist/containers/Tenant/Diagnostics/{Healthcheck → TenantOverview/Healthcheck}/IssuesViewer/IssueTree.tsx

@@ -7,7 +7,7 @@ import JSONTree from 'react-json-inspector';
 
 import {TreeView} from 'ydb-ui-components';
 
-import {IIssuesTree} from '../../../../../types/store/healthcheck';
+import {IIssuesTree} from '../../../../../../types/store/healthcheck';
 
 import {IssueTreeItem} from './IssueTreeItem';
 

package/dist/containers/Tenant/Diagnostics/{Healthcheck → TenantOverview/Healthcheck}/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx

@@ -1,6 +1,6 @@
 import cn from 'bem-cn-lite';
 
-import EntityStatus from '../../../../../../components/EntityStatus/EntityStatus';
+import EntityStatus from '../../../../../../../components/EntityStatus/EntityStatus';
 
 import './IssueTreeItem.scss';
 

package/dist/containers/Tenant/Diagnostics/{Healthcheck → TenantOverview/Healthcheck}/i18n/en.json

@@ -2,6 +2,7 @@
   "title.healthcheck": "Healthcheck",
   "label.update": "Update",
   "label.show-details": "Show details",
-  "status_message.ok": "No issues have been found on this database",
+  "label.issues": "Issues:",
+  "status_message.ok": "No issues",
   "no-data": "no healthcheck data"
 }

package/dist/containers/Tenant/Diagnostics/{Healthcheck → TenantOverview/Healthcheck}/i18n/index.ts

@@ -1,4 +1,4 @@
-import {i18n, Lang} from '../../../../../utils/i18n';
+import {i18n, Lang} from '../../../../../../utils/i18n';
 
 import en from './en.json';
 import ru from './ru.json';

package/dist/containers/Tenant/Diagnostics/{Healthcheck → TenantOverview/Healthcheck}/i18n/ru.json

@@ -2,6 +2,7 @@
   "title.healthcheck": "Healthcheck",
   "label.update": "Обновить",
   "label.show-details": "Посмотреть подробности",
-  "status_message.ok": "В базе данных нет проблем",
+  "label.issues": "Проблемы:",
+  "status_message.ok": "Нет проблем",
   "no-data": "нет данных healthcheck"
 }

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';
+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 {