refactor(Healthcheck): rewrite in ts

Author: ariser

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

@@ -8,8 +8,7 @@ import type {EPathType} from '../../../../types/api/schema';
 //@ts-ignore
 import Icon from '../../../../components/Icon/Icon';
 import Overview from '../Overview/Overview';
-//@ts-ignore
-import Healthcheck from '../Healthcheck/Healthcheck';
+import {Healthcheck} from '../Healthcheck';
 //@ts-ignore
 import TenantOverview from '../TenantOverview/TenantOverview';
 

src/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.js

@@ -2,7 +2,9 @@
 @import '../../../../styles/mixins.scss';
 
 .healthcheck {
-    padding: 25px 20px 20px;
+    &__issues-list {
+        padding: 25px 20px 20px;
+    }
 
     &__issues {
         overflow-x: hidden;

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

@@ -0,0 +1,82 @@
+import {useCallback} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Loader} from '@gravity-ui/uikit';
+
+import {getHealthcheckInfo} from '../../../../store/reducers/healthcheckInfo';
+import {useAutofetcher} from '../../../../utils/hooks';
+
+import {IssuesList} from './IssuesList';
+import {Preview} from './Preview';
+
+import i18n from './i18n';
+import './Healthcheck.scss';
+
+interface HealthcheckProps {
+    tenant: string;
+    preview?: boolean;
+    showMoreHandler?: VoidFunction;
+}
+
+const b = cn('healthcheck');
+
+export const Healthcheck = (props: HealthcheckProps) => {
+    const {
+        tenant,
+        preview,
+        showMoreHandler,
+    } = props;
+
+    const dispatch = useDispatch();
+
+    const {data, loading, wasLoaded, error} = useSelector((state: any) => state.healthcheckInfo);
+    const {autorefresh} = useSelector((state: any) => state.schema);
+
+    const fetchHealthcheck = useCallback(() => {
+        dispatch(getHealthcheckInfo(tenant));
+    }, [dispatch, tenant]);
+
+    useAutofetcher(fetchHealthcheck, [fetchHealthcheck], autorefresh);
+
+    const renderContent = () => {
+        if (error) {
+            return error.statusText;
+        }
+
+        if (loading && !wasLoaded) {
+            return (
+                <div className={b('loader')}>
+                    <Loader size="m" />
+                </div>
+            );
+        }
+
+        if (data && data['self_check_result']) {
+            return preview ? (
+                <Preview
+                    data={data}
+                    loading={loading}
+                    onShowMore={showMoreHandler}
+                    onUpdate={fetchHealthcheck}
+                />
+            ) : (
+                <IssuesList
+                    data={data}
+                    loading={loading}
+                    onUpdate={fetchHealthcheck}
+                />
+            );
+        }
+
+        return (
+            <div className="error">{i18n('no-data')}</div>
+        );
+    };
+
+    return (
+        <div className={b()}>
+            {renderContent()}
+        </div>
+    );
+};

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

@@ -0,0 +1,67 @@
+import cn from 'bem-cn-lite';
+
+import {Button} from '@gravity-ui/uikit';
+
+import IssuesViewer from '../IssuesViewer/IssuesViewer';
+
+import i18n from '../i18n';
+
+const b = cn('healthcheck');
+
+interface IssuesListProps {
+    data?: any;
+    loading?: boolean;
+    onUpdate: VoidFunction;
+}
+
+export const IssuesList = (props: IssuesListProps) => {
+    const {
+        data,
+        loading,
+        onUpdate,
+    } = props;
+
+    if (!data) {
+        return null;
+    }
+
+    const renderOverviewStatus = () => {
+        const {self_check_result: selfCheckResult} = data;
+        const modifier = selfCheckResult.toLowerCase();
+
+        return (
+            <div className={b('self-check-status')}>
+                <h3 className={b('self-check-status-label')}>{i18n('title.self-check-status')}</h3>
+                <div className={b('self-check-status-indicator', {[modifier]: true})} />
+                {selfCheckResult}
+                <div className={b('self-check-update')}>
+                    <Button size="s" onClick={onUpdate} loading={loading}>
+                        {i18n('label.update')}
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    const renderHealthcheckIssues = () => {
+        const {issue_log: issueLog} = data;
+
+        if (!issueLog) {
+            return null;
+        }
+
+        return (
+            <div className={b('issues')}>
+                <h3>{i18n('title.issues')}</h3>
+                <IssuesViewer issues={issueLog} />
+            </div>
+        );
+    }
+
+    return (
+        <div className={b('issues-list')}>
+            {renderOverviewStatus()}
+            {renderHealthcheckIssues()}
+        </div>
+    );
+};

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

@@ -0,0 +1 @@
+export * from './IssuesList';