feat: update TenantOverview design (#527)

Author: krosy1337

src/components/CircularProgressBar/CircularProgressBar.scss

@@ -0,0 +1,46 @@
+.ydb-circular-progress-bar {
+    display: block;
+
+    max-width: 100%;
+
+    transform: rotate(90deg);
+
+    &__wrapper {
+        position: relative;
+
+        display: inline;
+    }
+    &__content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        overflow: hidden;
+
+        max-width: 100%;
+
+        transform: translate(-50%, -50%);
+    }
+
+    &__circle-bg {
+        stroke: var(--yc-color-base-simple-hover);
+
+        fill: none;
+
+        transition: stroke 0.1s;
+    }
+
+    &__circle {
+        fill: none;
+
+        &_status_good {
+            stroke: var(--yc-color-private-green-550);
+        }
+        &_status_warning {
+            stroke: var(--yc-color-private-yellow-550);
+        }
+        &_status_danger {
+            stroke: var(--yc-color-private-red-550);
+        }
+    }
+}

src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -0,0 +1,59 @@
+import cn from 'bem-cn-lite';
+import type {ReactNode} from 'react';
+
+import type {MetricStatus} from '../../store/reducers/tenants/types';
+import {normalizeProgress} from '../../store/reducers/tenants/utils';
+
+import './CircularProgressBar.scss';
+
+const b = cn('ydb-circular-progress-bar');
+
+interface CircularProgressBarProps {
+    size?: number;
+    progress?: number;
+    strokeWidth?: number;
+    content?: ReactNode;
+    status?: MetricStatus;
+    circleBgClassName?: string;
+}
+
+export function CircularProgressBar({
+    size = 100,
+    progress = 0,
+    strokeWidth = 10,
+    content,
+    status,
+    circleBgClassName,
+}: CircularProgressBarProps) {
+    const center = size / 2;
+
+    const radius = size / 2 - strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+
+    const normalizedProgress = normalizeProgress(progress);
+
+    const offset = ((100 - normalizedProgress) / 100) * circumference;
+    return (
+        <div className={b('wrapper')}>
+            {content && <div className={b('content')}>{content}</div>}
+            <svg className={b()} width={size} height={size}>
+                <circle
+                    className={b('circle-bg', circleBgClassName)}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                />
+                <circle
+                    className={b('circle', {status: status?.toLocaleLowerCase()})}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={circumference}
+                    strokeDashoffset={offset}
+                />
+            </svg>
+        </div>
+    );
+}

src/components/DiagnosticCard/DiagnosticCard.scss

@@ -1,5 +1,25 @@
-.diagnostic-card {
-    min-width: 200px;
-    max-width: 350px;
+.ydb-diagnostic-card {
+    flex-shrink: 0;
+
+    width: 206px;
     padding: 16px;
+    padding-bottom: 28px;
+
+    border: 1px solid var(--yc-color-line-generic);
+    border-radius: 8px;
+    background-color: transparent;
+
+    transition: all 0.1s;
+    transition-property: box-shadow, background-color, border-color;
+
+    &_active {
+        border-color: var(--yc-color-base-info-heavy);
+        background-color: var(--yc-color-base-selection);
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow);
+    }
 }

src/components/DiagnosticCard/DiagnosticCard.tsx

@@ -1,17 +1,16 @@
-import {ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 
-import {Card} from '@gravity-ui/uikit';
-
 import './DiagnosticCard.scss';
 
-const b = cn('diagnostic-card');
+const b = cn('ydb-diagnostic-card');
 
 interface DiagnosticCardProps {
     children?: ReactNode;
     className?: string;
+    active?: boolean;
 }
 
-export function DiagnosticCard({children, className}: DiagnosticCardProps) {
-    return <Card className={b(null, className)}>{children}</Card>;
+export function DiagnosticCard({children, className, active}: DiagnosticCardProps) {
+    return <div className={b({active}, className)}>{children}</div>;
 }

src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -10,8 +10,7 @@ $section-title-line-height: 24px;
 
     &__section {
         display: flex;
-        overflow-x: hidden;
-        flex: 0 0 calc(50% - 10px);
+        flex: 1 0 calc(50% - 10px);
         flex-direction: column;
 
         min-width: 300px;

src/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 {ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN} from '../../../../utils/constants';
 import Overview from '../Overview/Overview';
 import {Healthcheck} from '../Healthcheck';
 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 [newTenantDiagnostics] = useSetting(ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN);
+
     const openModalHandler = () => {
         setIsModalVisible(true);
     };
@@ -51,27 +58,44 @@ function DetailedOverview(props: DetailedOverviewProps) {
         );
     };
 
+    const renderTenantOverview = () => {
+        if (newTenantDiagnostics) {
+            return (
+                <div className={b('section')}>
+                    <TenantOverview
+                        tenantName={tenantName}
+                        additionalTenantProps={additionalTenantProps}
+                        showMoreHandler={openModalHandler}
+                    />
+                </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} />
                 )}

src/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss

@@ -53,34 +53,42 @@
         margin-left: 10px;
     }
 
-    &__status-wrapper {
-        display: flex;
-
+    &__preview-header {
         margin-bottom: detailedOverview.$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;

src/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.tsx

@@ -24,22 +24,23 @@ interface HealthcheckProps {
     preview?: boolean;
     fetchData?: boolean;
     showMoreHandler?: VoidFunction;
+    active?: boolean;
 }
 
 const b = cn('healthcheck');
 
 export const Healthcheck = (props: HealthcheckProps) => {
-    const {tenant, preview, fetchData = true, showMoreHandler} = props;
+    const {tenant, preview, fetchData = true, showMoreHandler, active} = props;
 
     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) {
@@ -77,6 +78,7 @@ export const Healthcheck = (props: HealthcheckProps) => {
                 onShowMore={showMoreHandler}
                 onUpdate={fetchHealthcheck}
                 error={error}
+                active={active}
             />
         ) : (
             <Details

src/containers/Tenant/Diagnostics/Healthcheck/Preview/Preview.tsx

@@ -21,25 +21,28 @@ interface PreviewProps {
     onShowMore?: VoidFunction;
     onUpdate: VoidFunction;
     error?: IResponseError;
+    active?: boolean;
 }
 
 export const Preview = (props: PreviewProps) => {
-    const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error} = props;
+    const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error, active} = 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>
         );
     };
@@ -55,7 +58,7 @@ export const Preview = (props: PreviewProps) => {
                     i18n('status_message.ok')
                 ) : (
                     <>
-                        <div>Issues:</div>
+                        <div>{i18n('label.issues')}</div>
                         <div className={b('issues-statistics')}>
                             {issuesStatistics.map(([status, count]) => (
                                 <EntityStatus
@@ -75,8 +78,8 @@ export const Preview = (props: PreviewProps) => {
     };
 
     return (
-        <DiagnosticCard className={b('preview')}>
-            {renderStatus()}
+        <DiagnosticCard active={active}>
+            {renderHeader()}
             {renderContent()}
         </DiagnosticCard>
     );