ydb-embedded-ui 4.16.2 → 4.18.0

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

@@ -7,9 +7,12 @@ import {Button, Modal} from '@gravity-ui/uikit';
 import type {EPathType} from '../../../../types/api/schema';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {Icon} from '../../../../components/Icon';
+import {useSetting} from '../../../../utils/hooks';
+import {DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS} from '../../../../utils/constants';
 import Overview from '../Overview/Overview';
-import {Healthcheck} from '../Healthcheck';
+import {Healthcheck} from '../OldHealthcheck';
 import {TenantOverview} from '../TenantOverview/TenantOverview';
+import {OldTenantOverview} from '../TenantOverview/OldTenantOverview';
 
 import './DetailedOverview.scss';
 
@@ -23,10 +26,14 @@ interface DetailedOverviewProps {
 const b = cn('kv-detailed-overview');
 
 function DetailedOverview(props: DetailedOverviewProps) {
+    const {type, tenantName, additionalTenantProps} = props;
+
     const [isModalVisible, setIsModalVisible] = useState(false);
 
     const {currentSchemaPath} = useSelector((state: any) => state.schema);
 
+    const [displayMetricsCards] = useSetting(DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS);
+
     const openModalHandler = () => {
         setIsModalVisible(true);
     };
@@ -51,27 +58,43 @@ function DetailedOverview(props: DetailedOverviewProps) {
         );
     };
 
+    const renderTenantOverview = () => {
+        if (displayMetricsCards) {
+            return (
+                <div className={b('section')}>
+                    <TenantOverview
+                        tenantName={tenantName}
+                        additionalTenantProps={additionalTenantProps}
+                    />
+                </div>
+            );
+        }
+
+        return (
+            <>
+                <div className={b('section')}>
+                    <OldTenantOverview
+                        tenantName={tenantName}
+                        additionalTenantProps={additionalTenantProps}
+                    />
+                </div>
+                <div className={b('section')}>
+                    <Healthcheck
+                        tenant={tenantName}
+                        preview={true}
+                        showMoreHandler={openModalHandler}
+                    />
+                </div>
+            </>
+        );
+    };
+
     const renderContent = () => {
-        const {type, tenantName, additionalTenantProps} = props;
         const isTenant = tenantName === currentSchemaPath;
         return (
             <div className={b()}>
                 {isTenant ? (
-                    <>
-                        <div className={b('section')}>
-                            <TenantOverview
-                                tenantName={tenantName}
-                                additionalTenantProps={additionalTenantProps}
-                            />
-                        </div>
-                        <div className={b('section')}>
-                            <Healthcheck
-                                tenant={tenantName}
-                                preview={true}
-                                showMoreHandler={openModalHandler}
-                            />
-                        </div>
-                    </>
+                    renderTenantOverview()
                 ) : (
                     <Overview type={type} tenantName={tenantName} />
                 )}

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

@@ -8,11 +8,11 @@ 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 IssueTree from '../../TenantOverview/Healthcheck/IssuesViewer/IssueTree';
 
-import i18n from '../i18n';
+import i18n from '../../TenantOverview/Healthcheck/i18n';
 
-const b = cn('healthcheck');
+const b = cn('old-healthcheck');
 
 interface DetailsProps {
     issueTrees?: IIssuesTree[];

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

@@ -1,8 +1,7 @@
-@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
 @import '../../../../styles/mixins.scss';
 @import '@gravity-ui/uikit/styles/mixins.scss';
 
-.healthcheck {
+.old-healthcheck {
     display: flex;
 
     &_expanded {
@@ -12,6 +11,7 @@
     }
 
     &__details {
+        width: 860px;
         padding: 25px 20px 20px;
     }
 
@@ -27,11 +27,6 @@
         max-height: 70vh;
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-    }
-
     &__message-container {
         padding: 15px 0;
     }
@@ -53,34 +48,52 @@
         margin-left: 10px;
     }
 
-    &__status-wrapper {
-        display: flex;
+    &__preview {
+        width: 206px;
+        padding: 16px;
+        padding-bottom: 28px;
 
-        margin-bottom: detailedOverview.$section-title-margin;
+        border: 1px solid var(--yc-color-line-generic);
+        border-radius: 8px;
+        background-color: transparent;
+    }
+
+    &__preview-header {
+        margin-bottom: var(--diagnostics-section-title-margin);
         gap: 8px;
     }
 
     &__preview-title {
         font-weight: 600;
-        line-height: detailedOverview.$section-title-line-height;
+        @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: 10px 0;
+        margin: 8px 0;
 
-        column-gap: 26px;
-        row-gap: 16px;
+        gap: 10px;
     }
 
     &__self-check-status-indicator {
+        display: inline-block;
+
         padding: 0 8px;
 
         font-size: 13px;

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

@@ -12,7 +12,6 @@ import {
     selectIssuesTrees,
     setDataWasNotLoaded,
 } from '../../../../store/reducers/healthcheckInfo';
-import {DiagnosticCard} from '../../../../components/DiagnosticCard/DiagnosticCard';
 
 import {Details} from './Details';
 import {Preview} from './Preview';
@@ -26,7 +25,7 @@ interface HealthcheckProps {
     showMoreHandler?: VoidFunction;
 }
 
-const b = cn('healthcheck');
+const b = cn('old-healthcheck');
 
 export const Healthcheck = (props: HealthcheckProps) => {
     const {tenant, preview, fetchData = true, showMoreHandler} = props;
@@ -34,12 +33,12 @@ export const Healthcheck = (props: HealthcheckProps) => {
     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 {autorefresh} = useTypedSelector((state) => state.schema);
 
+    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
+
     const fetchHealthcheck = useCallback(
         (isBackground = true) => {
             if (!isBackground) {
@@ -64,11 +63,12 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const renderContent = () => {
         if (loading && !wasLoaded) {
             return (
-                <DiagnosticCard className={b('loader')}>
+                <div className={b('old-preview', {loader: true})}>
                     <Loader size="m" />
-                </DiagnosticCard>
+                </div>
             );
         }
+
         return preview ? (
             <Preview
                 issuesStatistics={issuesStatistics}

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/Overview/TableInfo/prepareTableInfo.ts

@@ -8,7 +8,7 @@ import type {
 import type {KeyValueRow} from '../../../../../types/api/query';
 import {EPathType} from '../../../../../types/api/schema';
 import {isNumeric} from '../../../../../utils/utils';
-import {formatBytes, formatNumber} from '../../../../../utils';
+import {formatBytes, formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
 import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
 import {formatObject, InfoViewerItem} from '../../../../../components/InfoViewer';
 import {

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx

@@ -11,7 +11,7 @@ import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
 import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
-import {formatBps, formatBytes} from '../../../../../utils';
+import {formatBps, formatBytes} from '../../../../../utils/dataFormatters/dataFormatters';
 
 import {selectPreparedTopicStats} from '../../../../../store/reducers/topic';
 

package/dist/containers/Tenant/Diagnostics/Partitions/columns/columns.tsx

@@ -4,7 +4,7 @@ import block from 'bem-cn-lite';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 import {getDefaultNodePath} from '../../../../Node/NodePages';
-import {formatBytes, formatMsToUptime} from '../../../../../utils';
+import {formatBytes, formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
 import {isNumeric} from '../../../../../utils/utils';
 
 import {

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"
 }