feat(Healthcheck): display first level issues in overview

Author: ariser

src/components/EntityStatus/EntityStatus.js

@@ -2,10 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
-import {ClipboardButton, Link as ExternalLink, Button} from '@gravity-ui/uikit';
+import {ClipboardButton, Link as ExternalLink, Button, Icon} from '@gravity-ui/uikit';
+
+import circleInfoIcon from '../../assets/icons/circle-info.svg';
+import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
+import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
 
 import './EntityStatus.scss';
 
+const icons = {
+    BLUE: circleInfoIcon,
+    YELLOW: circleExclamationIcon,
+    ORANGE: triangleExclamationIcon,
+    RED: circleTimesIcon,
+};
+
 const b = cn('entity-status');
 
 class EntityStatus extends React.Component {
@@ -22,6 +34,7 @@ class EntityStatus extends React.Component {
         showStatus: PropTypes.bool,
         externalLink: PropTypes.bool,
         className: PropTypes.string,
+        mode: PropTypes.oneOf(['color', 'icons']),
     };
 
     static defaultProps = {
@@ -31,15 +44,27 @@ class EntityStatus extends React.Component {
         label: '',
         showStatus: true,
         externalLink: false,
+        mode: 'color',
     };
     renderIcon() {
-        const {status, size, showStatus} = this.props;
+        const {status, size, showStatus, mode} = this.props;
 
         if (!showStatus) {
             return null;
         }
 
-        return <div className={b('status-icon', {state: status.toLowerCase(), size})} />;
+        const modifiers = {state: status.toLowerCase(), size};
+
+        if (mode === 'icons' && icons[status]) {
+            return (
+                <Icon
+                    className={b('status-icon', modifiers)}
+                    data={icons[status]}
+                />
+            );
+        }
+
+        return <div className={b('status-color', modifiers)} />;
     }
     renderStatusLink() {
         const {iconPath} = this.props;

src/components/EntityStatus/EntityStatus.scss

@@ -57,26 +57,32 @@
         white-space: nowrap;
     }
 
+    &__status-color,
     &__status-icon {
         margin-right: 8px;
 
         border-radius: 3px;
         &_size_xs {
             aspect-ratio: 1;
 
+            width: 12px;
             height: 12px;
         }
         &_size_s {
             aspect-ratio: 1;
 
+            width: 16px;
             height: 16px;
         }
         &_size_m {
             aspect-ratio: 1;
 
+            width: 18px;
             height: 18px;
         }
+    }
 
+    &__status-color {
         &_state_running,
         &_state_green {
             background-color: var(--yc-color-infographics-positive-heavy);
@@ -96,7 +102,22 @@
             background: var(--yc-color-text-complementary);
         }
         &_state_orange {
-            background: var(--yc-color-text-warning-heavy);
+            background: var(--yc-color-base-warning-orange);
+        }
+    }
+
+    &__status-icon {
+        &_state_blue {
+            color: var(--yc-color-infographics-info-heavy);
+        }
+        &_state_yellow {
+            color: var(--yc-color-infographics-warning-heavy);
+        }
+        &_state_orange {
+            color: var(--yc-color-base-warning-orange);
+        }
+        &_state_red {
+            color: var(--yc-color-infographics-danger-heavy);
         }
     }
 

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

@@ -41,7 +41,7 @@ function DetailedOverview(props: DetailedOverviewProps) {
     const renderModal = () => {
         return (
             <Modal open={isModalVisible} onClose={closeModalHandler} className={b('modal')}>
-                <Healthcheck tenant={props.tenantName} />
+                <Healthcheck tenant={props.tenantName} fetchData={false} />
                 <Button
                     className={b('close-modal-button')}
                     onClick={closeModalHandler}

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

@@ -6,6 +6,10 @@
         padding: 25px 20px 20px;
     }
 
+    &__issue-preview {
+        margin-bottom: 15px;
+    }
+
     &__issues {
         overflow-x: hidden;
         overflow-y: auto;

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

@@ -16,6 +16,7 @@ import './Healthcheck.scss';
 interface HealthcheckProps {
     tenant: string;
     preview?: boolean;
+    fetchData?: boolean;
     showMoreHandler?: VoidFunction;
 }
 
@@ -25,6 +26,7 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const {
         tenant,
         preview,
+        fetchData = true,
         showMoreHandler,
     } = props;
 
@@ -34,8 +36,10 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const {autorefresh} = useSelector((state: any) => state.schema);
 
     const fetchHealthcheck = useCallback(() => {
-        dispatch(getHealthcheckInfo(tenant));
-    }, [dispatch, tenant]);
+        if (fetchData) {            
+            dispatch(getHealthcheckInfo(tenant));
+        }
+    }, [dispatch, fetchData, tenant]);
 
     useAutofetcher(fetchHealthcheck, [fetchHealthcheck], autorefresh);
 

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

@@ -0,0 +1,34 @@
+import cn from 'bem-cn-lite';
+
+import {Link, Text} from '@gravity-ui/uikit';
+
+import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
+import {IssueLog} from '../../../../../types/api/healthcheck';
+
+import i18n from '../i18n';
+
+const b = cn('healthcheck');
+
+interface IssuePreviewProps {
+    data?: IssueLog;
+    onShowMore?: VoidFunction;
+}
+
+export const IssuePreview = (props: IssuePreviewProps) => {
+    const {
+        data,
+        onShowMore,
+    } = props;
+
+    if (!data) {
+        return null;
+    }
+
+    return (
+        <div className={b('issue-preview')}>
+            <EntityStatus mode="icons" status={data.status} name={data.type} />
+            <Text as="div" color="secondary" variant="body-2">{data.message}</Text>
+            <Link onClick={onShowMore}>{i18n('label.show-details')}</Link>
+        </div>
+    );
+};

src/containers/Tenant/Diagnostics/Healthcheck/IssuePreview/index.ts

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

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

@@ -1,10 +1,13 @@
+import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import {Button} from '@gravity-ui/uikit';
 
 import {SelfCheckResult} from '../../../../../types/api/healthcheck';
 import type {IHealthCheck} from '../../../../../types/store/healthcheck';
 
+import {IssuePreview} from '../IssuePreview';
+
 import i18n from '../i18n';
 
 const b = cn('healthcheck');
@@ -24,41 +27,54 @@ export const Preview = (props: PreviewProps) => {
         onUpdate,
     } = props;
 
+    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
+    const isStatusOK = selfCheckResult === SelfCheckResult.GOOD;
+
+    const issuesLog = data?.issue_log;
+    const firstLevelIssues = useMemo(() => issuesLog?.filter(({level}) => level === 1), [issuesLog]);
+
     if (!data) {
         return null;
     }
 
-    const {self_check_result: selfCheckResult} = data;
-    const modifier = selfCheckResult.toLowerCase();
+    const renderStatus = () => {
+        const modifier = selfCheckResult.toLowerCase();
 
-    const statusOk = selfCheckResult === SelfCheckResult.GOOD;
-    const text = statusOk
-        ? i18n('status_message.ok')
-        : i18n('status_message.error');
-
-    return (
-        <div className={b('preview')}>
+        return (
             <div className={b('status-wrapper')}>
                 <div className={b('preview-title')}>{i18n('title.healthcheck')}</div>
                 <div className={b('self-check-status-indicator', {[modifier]: true})}>
-                    {statusOk ? i18n('ok') : i18n('error')}
+                    {isStatusOK ? i18n('ok') : i18n('error')}
                 </div>
                 <Button size="s" onClick={onUpdate} loading={loading}>
                     {i18n('label.update')}
                 </Button>
             </div>
+        );
+    };
+
+    const renderFirstLevelIssues = () => {
+        return (
             <div className={b('preview-content')}>
-                {text}
-                {!statusOk && (
-                    <Button
-                        view="flat-info"
-                        onClick={onShowMore}
-                        size="s"
-                    >
-                        {i18n('label.show-details')}
-                    </Button>
-                )}
+                {
+                    isStatusOK ?
+                        i18n('status_massage.ok') :
+                        firstLevelIssues?.map((issue) => (
+                            <IssuePreview
+                                key={issue.id}
+                                data={issue}
+                                onShowMore={onShowMore}
+                            />
+                        ))
+                }
             </div>
+        );
+    };
+
+    return (
+        <div className={b('preview')}>
+            {renderStatus()}
+            {renderFirstLevelIssues()}
         </div>
     );
 };

src/containers/Tenant/Diagnostics/Healthcheck/i18n/en.json

@@ -5,7 +5,6 @@
     "label.update": "Update",
     "label.show-details": "Show details",
     "status_massage.ok": "No issues have been found on this database",
-    "status_message.error": "Several issues have been found on this database",
     "ok": "Ok",
     "error": "Error",
     "no-data": "no healthcheck data"

src/containers/Tenant/Diagnostics/Healthcheck/i18n/ru.json

@@ -5,7 +5,6 @@
     "label.update": "Обновить",
     "label.show-details": "Посмотреть подробности",
     "status_massage.ok": "В базе данных нет проблем",
-    "status_message.error": "В базе данных есть несколько проблем",
     "ok": "Ok",
     "error": "Ошибка",
     "no-data": "нет данных healthcheck"