feat: move healthcheck to tabs (#531)

Author: krosy1337

src/components/CircularProgressBar/CircularProgressBar.scss

@@ -7,8 +7,6 @@
 
     &__wrapper {
         position: relative;
-
-        display: inline;
     }
     &__content {
         position: absolute;
@@ -26,8 +24,6 @@
         stroke: var(--yc-color-base-simple-hover);
 
         fill: none;
-
-        transition: stroke 0.1s;
     }
 
     &__circle {

src/components/DiagnosticCard/DiagnosticCard.scss

@@ -9,9 +9,6 @@
     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);

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

@@ -1,6 +1,3 @@
-$section-title-margin: 20px;
-$section-title-line-height: 24px;
-
 .kv-detailed-overview {
     display: flex;
 

src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -10,7 +10,7 @@ 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 {Healthcheck} from '../OldHealthcheck';
 import {TenantOverview} from '../TenantOverview/TenantOverview';
 import {OldTenantOverview} from '../TenantOverview/OldTenantOverview';
 
@@ -65,7 +65,6 @@ function DetailedOverview(props: DetailedOverviewProps) {
                     <TenantOverview
                         tenantName={tenantName}
                         additionalTenantProps={additionalTenantProps}
-                        showMoreHandler={openModalHandler}
                     />
                 </div>
             );

src/containers/Tenant/Diagnostics/Healthcheck/Details/Details.tsx renamed to src/containers/Tenant/Diagnostics/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[];

src/containers/Tenant/Diagnostics/Healthcheck/Details/index.ts renamed to src/containers/Tenant/Diagnostics/OldHealthcheck/Details/index.ts

@@ -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,8 +48,18 @@
         margin-left: 10px;
     }
 
+    &__preview {
+        width: 206px;
+        padding: 16px;
+        padding-bottom: 28px;
+
+        border: 1px solid var(--yc-color-line-generic);
+        border-radius: 8px;
+        background-color: transparent;
+    }
+
     &__preview-header {
-        margin-bottom: detailedOverview.$section-title-margin;
+        margin-bottom: var(--diagnostics-section-title-margin);
         gap: 8px;
     }
 

src/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss renamed to src/containers/Tenant/Diagnostics/OldHealthcheck/Healthcheck.scss

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

src/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.tsx renamed to src/containers/Tenant/Diagnostics/OldHealthcheck/Healthcheck.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;
@@ -21,13 +20,10 @@ interface PreviewProps {
     onShowMore?: VoidFunction;
     onUpdate: VoidFunction;
     error?: IResponseError;
-    active?: boolean;
 }
 
 export const Preview = (props: PreviewProps) => {
-    const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error, active} = props;
-
-    const isStatusOK = selfCheckResult === SelfCheckResult.GOOD;
+    const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error} = props;
 
     const renderHeader = () => {
         const modifier = selfCheckResult.toLowerCase();
@@ -54,7 +50,7 @@ export const Preview = (props: PreviewProps) => {
 
         return (
             <div className={b('preview-content')}>
-                {isStatusOK || !issuesStatistics || !issuesStatistics.length ? (
+                {!issuesStatistics || !issuesStatistics.length ? (
                     i18n('status_message.ok')
                 ) : (
                     <>
@@ -78,9 +74,9 @@ export const Preview = (props: PreviewProps) => {
     };
 
     return (
-        <DiagnosticCard active={active}>
+        <div className={b('preview')}>
             {renderHeader()}
             {renderContent()}
-        </DiagnosticCard>
+        </div>
     );
 };