ydb-embedded-ui 4.16.1 → 4.17.0

package/dist/containers/Tenant/Diagnostics/{Healthcheck → OldHealthcheck}/Preview/Preview.tsx

@@ -6,13 +6,12 @@ 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 i18n from '../../TenantOverview/Healthcheck/i18n';
 
-const b = cn('healthcheck');
+const b = cn('old-healthcheck');
 
 interface PreviewProps {
     selfCheckResult: SelfCheckResult;
@@ -26,20 +25,20 @@ interface PreviewProps {
 export const Preview = (props: PreviewProps) => {
     const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error} = props;
 
-    const isStatusOK = selfCheckResult === SelfCheckResult.GOOD;
-
-    const renderStatus = () => {
+    const renderHeader = () => {
         const modifier = selfCheckResult.toLowerCase();
 
         return (
-            <div className={b('status-wrapper')}>
-                <div className={b('preview-title')}>{i18n('title.healthcheck')}</div>
+            <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>
-                <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
-                    <Icon data={updateArrow} width={20} height={20} />
-                </Button>
             </div>
         );
     };
@@ -51,11 +50,11 @@ export const Preview = (props: PreviewProps) => {
 
         return (
             <div className={b('preview-content')}>
-                {isStatusOK || !issuesStatistics || !issuesStatistics.length ? (
+                {!issuesStatistics || !issuesStatistics.length ? (
                     i18n('status_message.ok')
                 ) : (
                     <>
-                        <div>Issues:</div>
+                        <div>{i18n('label.issues')}</div>
                         <div className={b('issues-statistics')}>
                             {issuesStatistics.map(([status, count]) => (
                                 <EntityStatus
@@ -75,9 +74,9 @@ export const Preview = (props: PreviewProps) => {
     };
 
     return (
-        <DiagnosticCard className={b('preview')}>
-            {renderStatus()}
+        <div className={b('preview')}>
+            {renderHeader()}
             {renderContent()}
-        </DiagnosticCard>
+        </div>
     );
 };

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

@@ -0,0 +1,108 @@
+@import '../../../../../styles/mixins.scss';
+
+.healthcheck {
+    display: flex;
+
+    &_expanded {
+        // Since most of the inner containers have fixed width, we can set fixed width here as well
+        // Thus we will get rid of unneeded layout shift when scrollbar appear
+        min-width: 885px;
+    }
+
+    &__issue-preview {
+        margin-bottom: 15px;
+    }
+
+    &__message-container {
+        padding: 15px 0;
+    }
+
+    &__details {
+        width: 872px;
+    }
+
+    &__details-content-wrapper {
+        overflow-x: hidden;
+    }
+
+    &__preview {
+        height: 100%;
+    }
+
+    &__preview-header {
+        margin-bottom: var(--diagnostics-section-title-margin);
+        gap: 8px;
+    }
+
+    &__preview-title {
+        font-weight: 600;
+        @include lead-typography();
+    }
+
+    &__preview-content {
+        line-height: 24px;
+    }
+
+    &__preview-title-wrapper {
+        display: flex;
+        align-items: center;
+
+        margin-bottom: 4px;
+
+        gap: 8px;
+    }
+
+    &__issues-statistics {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        margin: 8px 0;
+
+        gap: 10px;
+    }
+
+    &__self-check-status-indicator {
+        display: inline-block;
+
+        padding: 0 8px;
+
+        font-size: 13px;
+        line-height: 24px;
+
+        border-radius: 4px;
+
+        &_good,
+        &_green {
+            color: var(--yc-color-text-positive);
+            background-color: var(--yc-color-base-positive);
+        }
+        &_degraded,
+        &_yellow {
+            color: var(--yc-color-text-warning);
+            background-color: var(--yc-color-base-warning);
+        }
+
+        &_blue {
+            color: var(--yc-color-text-info);
+            background-color: var(--yc-color-base-info);
+        }
+
+        &_emergency,
+        &_red {
+            color: var(--yc-color-text-danger);
+            background-color: var(--yc-color-base-danger);
+        }
+        &_unspecified,
+        &_gray,
+        &_grey {
+            color: var(--yc-color-text-misc);
+            background-color: var(--yc-color-base-misc);
+        }
+        &_maintenance_required,
+        &_orange {
+            color: var(--yc-color-text-warning-heavy);
+            background-color: var(--yc-color-infographics-warning-light);
+        }
+    }
+}

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

@@ -0,0 +1,45 @@
+import cn from 'bem-cn-lite';
+
+import type {IResponseError} from '../../../../../types/api/error';
+import type {IIssuesTree} from '../../../../../types/store/healthcheck';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
+
+import IssueTree from './IssuesViewer/IssueTree';
+
+import i18n from './i18n';
+import './Healthcheck.scss';
+
+const b = cn('healthcheck');
+
+interface HealthcheckDetailsProps {
+    issueTrees?: IIssuesTree[];
+    error?: IResponseError;
+}
+
+export function HealthcheckDetails(props: HealthcheckDetailsProps) {
+    const {issueTrees, error} = props;
+
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
+        }
+
+        if (!issueTrees || !issueTrees.length) {
+            return i18n('status_message.ok');
+        }
+
+        return (
+            <>
+                {issueTrees.map((issueTree) => (
+                    <IssueTree key={issueTree.id} issueTree={issueTree} />
+                ))}
+            </>
+        );
+    };
+
+    return (
+        <div className={b('details')}>
+            <div className={b('details-content-wrapper')}>{renderContent()}</div>
+        </div>
+    );
+}

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>
+    );
+}