ydb-embedded-ui 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## [2.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.1.0...v2.2.0) (2022-10-14)
+
+
+### Features
+
+* **Healthcheck:** rework issues list in modal ([e7cb0df](https://github.com/ydb-platform/ydb-embedded-ui/commit/e7cb0df58e22c8c9cd25aae83b78be4808e9ba81))
+
+
+### Bug Fixes
+
+* **EntityStatus:** enable component to left trim links ([fbc6c51](https://github.com/ydb-platform/ydb-embedded-ui/commit/fbc6c51f9fbea3c1a7f5f70cb542971a41f4d8b3))
+* fix pre-commit prettier linting and add json linting ([#189](https://github.com/ydb-platform/ydb-embedded-ui/issues/189)) ([047415d](https://github.com/ydb-platform/ydb-embedded-ui/commit/047415d2d69ecf4a2d99f0092b9e6735bd8efbc0))
+* **Healthcheck:** delete unneeded i18n translations ([0c6de90](https://github.com/ydb-platform/ydb-embedded-ui/commit/0c6de9031607e4cde1387387393a9cfc9e1e2b8f))
+* **Healthcheck:** enable update button in modal to fetch data ([de0b06e](https://github.com/ydb-platform/ydb-embedded-ui/commit/de0b06e7f2d3536df1b3896cbf86a947b2e7a291))
+* **Healthcheck:** fix layout shift on scrollbar appearance ([ccdde6e](https://github.com/ydb-platform/ydb-embedded-ui/commit/ccdde6e065abbdb1c22a2c3bdd17e63f706d0f77))
+* **Healthcheck:** fix styles for long issues trees ([32f1a8d](https://github.com/ydb-platform/ydb-embedded-ui/commit/32f1a8db58d9f84073327b92dcd80a5b4626a526))
+* **Healthcheck:** fix variable typo ([0f0e056](https://github.com/ydb-platform/ydb-embedded-ui/commit/0f0e056576b9ec18fc3ce574d3742d55e5da6e35))
+* **Healthcheck:** full check status in a preview ([bc0b51e](https://github.com/ydb-platform/ydb-embedded-ui/commit/bc0b51eedd4ff3b4ae1650946832f463a6703c12))
+* **Healthcheck:** make modal show only one first level issue ([cdc95a7](https://github.com/ydb-platform/ydb-embedded-ui/commit/cdc95a7412c1266d990df7e2807630a8f4c88780))
+* **Healthcheck:** redesign healthcheck header ([867f57a](https://github.com/ydb-platform/ydb-embedded-ui/commit/867f57aed84b7b72c22a816c6ac02387490ff495))
+* **Healthcheck:** replace update button with icon ([709a994](https://github.com/ydb-platform/ydb-embedded-ui/commit/709a994544f068db1b0fe09009ecb4d8db46fc38))
+* **Healthcheck:** update styles to be closer to the design ([aa1083d](https://github.com/ydb-platform/ydb-embedded-ui/commit/aa1083d299e24590336eeb3d913a9c53fd77bad6))
+* **Nodes:** case insensitive search ([11d2c98](https://github.com/ydb-platform/ydb-embedded-ui/commit/11d2c985e0c30bb74ed07e22273d8b3459b54c89))
+* **QueryEditor:** smarter error message trim ([8632948](https://github.com/ydb-platform/ydb-embedded-ui/commit/863294828090dc8eb2595884283d0996156c3785))
+* **Tenants:** case insensitive search ([0ad93f5](https://github.com/ydb-platform/ydb-embedded-ui/commit/0ad93f57dcbba7d9746be54a4ba7b76ab4d45108))
+* **Tenants:** fix filtering by ControlPlane name ([4941c82](https://github.com/ydb-platform/ydb-embedded-ui/commit/4941c821cdbb7c5d0da26a3b0d5c00d8979401c0))
+* **Tenants:** left trim db names in db list ([81bf0fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/81bf0fafe901d3601dc04fdf71939e914493ff1c))
+
+## [2.1.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.0.0...v2.1.0) (2022-10-04)
+
+
+### Features
+
+* autofocus all text search fields ([a38ee84](https://github.com/ydb-platform/ydb-embedded-ui/commit/a38ee84abad4202f5e9b8af897eb68d2c006233a))
+* **Healthcheck:** display first level issues in overview ([10b4bf5](https://github.com/ydb-platform/ydb-embedded-ui/commit/10b4bf5d15d32f028702ff8cfecca0e06bc5616f))
+
+
+### Bug Fixes
+
+* fix production assets paths ([8eaad0f](https://github.com/ydb-platform/ydb-embedded-ui/commit/8eaad0f1db109c4cf3cbf7d11ad32ea335a6b0c1))
+* **Healthcheck:** add translations ([75f9851](https://github.com/ydb-platform/ydb-embedded-ui/commit/75f9851a35766ef692805a6f154d40340b003487))
+* move eslint hooks rule extension to src config ([179b81d](https://github.com/ydb-platform/ydb-embedded-ui/commit/179b81d60adf422addc8d72f947800c72bd3e4c5))
+* **QueryEditor:** disable fullscreen button for empty result ([4825b5b](https://github.com/ydb-platform/ydb-embedded-ui/commit/4825b5b8dcb89fcafd828dabbace521ddc429922))
+* **QueryEditor:** fix query stats spacings ([b836d72](https://github.com/ydb-platform/ydb-embedded-ui/commit/b836d72824a791b3fde2b9e4585c6c9b42385265))
+* **useAutofetcher:** private autofetcher instance for each usage ([3f34b7a](https://github.com/ydb-platform/ydb-embedded-ui/commit/3f34b7aee2042562a42e6d1a7daf03ffddd888c0))
+
 ## [2.0.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.14.2...v2.0.0) (2022-09-26)
 
 

package/dist/assets/icons/update-arrow.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12C21 16.9706 16.9706 21 12 21C9.5 21 6.5 19 5 17" stroke='currentColor' stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 21L5 17L9 17" stroke='currentColor' stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 12C3 7.02944 7.02944 3 12 3C14.5 3 17.5 5 19 7" stroke='currentColor' stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 3L19 7L15 7" stroke='currentColor' stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/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 UIKitLink, 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,8 @@ class EntityStatus extends React.Component {
         showStatus: PropTypes.bool,
         externalLink: PropTypes.bool,
         className: PropTypes.string,
+        mode: PropTypes.oneOf(['color', 'icons']),
+        withLeftTrim: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -31,35 +45,47 @@ class EntityStatus extends React.Component {
         label: '',
         showStatus: true,
         externalLink: false,
+        mode: 'color',
+        withLeftTrim: false,
     };
     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;
 
         return (
-            <ExternalLink target="_blank" href={iconPath}>
+            <UIKitLink target="_blank" href={iconPath}>
                 {this.renderIcon()}
-            </ExternalLink>
+            </UIKitLink>
         );
     }
     renderLink() {
         const {externalLink, name, path, onNameMouseEnter, onNameMouseLeave} = this.props;
 
         if (externalLink) {
-            return <ExternalLink href={path}>{name}</ExternalLink>;
+            return (
+                <UIKitLink className={b('name')} href={path}>
+                    {name}
+                </UIKitLink>
+            );
         }
 
         return path ? (
             <Link
-                title={name}
+                className={b('name')}
                 to={path}
                 onMouseEnter={onNameMouseEnter}
                 onMouseLeave={onNameMouseLeave}
@@ -70,7 +96,6 @@ class EntityStatus extends React.Component {
             name && (
                 <span
                     className={b('name')}
-                    title={name}
                     onMouseEnter={onNameMouseEnter}
                     onMouseLeave={onNameMouseLeave}
                 >
@@ -83,14 +108,16 @@ class EntityStatus extends React.Component {
         const {name, label, iconPath, hasClipboardButton, className} = this.props;
 
         return (
-            <div className={b(null, className)}>
+            <div className={b(null, className)} title={name}>
                 {iconPath ? this.renderStatusLink() : this.renderIcon()}
                 {label && (
                     <span title={label} className={b('label')}>
                         {label}
                     </span>
                 )}
-                {this.renderLink()}
+                <span className={b('link', {'with-left-trim': this.props.withLeftTrim})}>
+                    {this.renderLink()}
+                </span>
                 {hasClipboardButton && (
                     <Button
                         component="span"

package/dist/components/EntityStatus/EntityStatus.scss

@@ -31,11 +31,7 @@
     }
 
     a {
-        overflow: hidden;
-
-        white-space: nowrap;
         text-decoration: none;
-        text-overflow: ellipsis;
 
         color: var(--yc-color-text-link);
     }
@@ -53,30 +49,49 @@
         color: var(--yc-color-text-complementary);
     }
 
-    &__name {
+    &__link {
+        overflow: hidden;
+
         white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__link_with-left-trim {
+        direction: rtl;
+
+        .entity-status__name {
+            unicode-bidi: plaintext;
+        }
     }
 
+    &__status-color,
     &__status-icon {
+        flex-shrink: 0;
+
         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 +111,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);
         }
     }
 

package/dist/components/NodesViewer/NodesViewer.js

@@ -106,6 +106,7 @@ class NodesViewer extends React.PureComponent {
                     text={searchQuery}
                     onUpdate={handleSearchQuery}
                     hasClear
+                    autoFocus
                 />
                 <ProblemFilter value={filter} onChange={this.onChangeProblemFilter} />
                 <Label theme="info" size="m">{`Nodes: ${nodesToShow.length}`}</Label>

package/dist/components/ShortyString/ShortyString.tsx

@@ -3,6 +3,7 @@ import cn from 'bem-cn-lite';
 
 import {Link} from '@gravity-ui/uikit';
 
+import i18n from './i18n';
 import './ShortyString.scss';
 
 const block = cn('kv-shorty-string');
@@ -10,6 +11,8 @@ const block = cn('kv-shorty-string');
 type Props = {
     value?: string;
     limit?: number;
+    /** in strict mode the text always trims at the limit, otherwise it is allowed to overflow a little */
+    strict?: boolean;
     displayLength?: boolean;
     render?: (value: string) => React.ReactNode;
     onToggle?: () => void;
@@ -20,19 +23,29 @@ type Props = {
 export default function ShortyString({
     value = '',
     limit = 200,
+    strict = false,
     displayLength = true,
     render = (v: string) => v,
     onToggle,
-    expandLabel = 'Show more',
-    collapseLabel = 'Show less',
+    expandLabel = i18n('default_expand_label'),
+    collapseLabel = i18n('default_collapse_label'),
 }: Props) {
     const [expanded, setExpanded] = React.useState(false);
-    const hasToggle = value.length > limit;
-    const length =
-        displayLength && !expanded ? `(${value.length} symbols)` : undefined;
 
-    const text = expanded || value.length <= limit ? value : value.slice(0, limit - 4) + '\u00a0...';
-    const label = expanded ? collapseLabel : expandLabel;
+    const toggleLabelAction = expanded ? collapseLabel : expandLabel;
+    const toggleLabelSymbolsCount = displayLength && !expanded
+        ? i18n('chars_count', {count: value.length})
+        : '';
+    const toggleLabel = toggleLabelAction + toggleLabelSymbolsCount;
+
+    // showing toogle button with a label that is longer than the hidden part is pointless,
+    // hence compare to limit + length in the not-strict mode
+    const hasToggle = value.length > limit + (strict ? 0 : toggleLabel.length);
+
+    const text = expanded || !hasToggle
+        ? value
+        : value.slice(0, limit - 4) + '\u00a0...';
+
     return (
         <div className={block()}>
             {render(text)}
@@ -45,7 +58,7 @@ export default function ShortyString({
                         onToggle?.();
                     }}
                 >
-                    {label} {length}
+                    {toggleLabel}
                 </Link>
             ) : null}
         </div>

package/dist/components/ShortyString/i18n/en.json

@@ -0,0 +1,10 @@
+{
+    "default_collapse_label": "Show less",
+    "default_expand_label": "Show more",
+    "chars_count": [
+        " ({{count}} symbol)",
+        " ({{count}} symbols)",
+        " ({{count}} symbols)",
+        " ({{count}} symbols)"
+    ]
+}

package/dist/components/ShortyString/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-shorty-string';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/ShortyString/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+    "default_collapse_label": "Показать меньше",
+    "default_expand_label": "Показать ещё",
+    "chars_count": [
+        " ({{count}} символ)",
+        " ({{count}} символа)",
+        " ({{count}} символов)",
+        " ({{count}} символов)"
+    ]
+}

package/dist/containers/Cluster/Cluster.tsx

@@ -14,9 +14,9 @@ import ClusterInfo from '../../components/ClusterInfo/ClusterInfo';
 const b = cn('cluster');
 
 interface ClusterProps {
-    additionalClusterInfo: any;
-    additionalTenantsInfo: any;
-    additionalNodesInfo: any;
+    additionalClusterInfo?: any;
+    additionalTenantsInfo?: any;
+    additionalNodesInfo?: any;
 }
 
 function Cluster(props: ClusterProps) {

package/dist/containers/Nodes/Nodes.js

@@ -87,6 +87,7 @@ class Nodes extends React.Component {
                     text={searchQuery}
                     onUpdate={this.handleSearchQueryChange}
                     hasClear
+                    autoFocus
                 />
                 <ProblemFilter value={filter} onChange={this.handleFilterChange} />
                 <Label theme="info" size="m">{`Nodes: ${nodes?.length}`}</Label>
@@ -113,11 +114,10 @@ class Nodes extends React.Component {
         });
 
         let preparedNodes = searchQuery
-            ? nodes.filter((node) =>
-                  node.Host
-                      ? node.Host.includes(searchQuery) || String(node.NodeId).includes(searchQuery)
-                      : true,
-              )
+            ? nodes.filter((node) => {
+                  const re = new RegExp(searchQuery, 'i');
+                  return node.Host ? re.test(node.Host) || re.test(String(node.NodeId)) : true;
+              })
             : nodes;
         preparedNodes = preparedNodes.map((node) => ({
             ...node,
@@ -142,7 +142,7 @@ class Nodes extends React.Component {
                             columnId: 'NodeId',
                             order: DataTable.ASCENDING,
                         }}
-                        emptyDataMessage='No such nodes'
+                        emptyDataMessage="No such nodes"
                     />
                 </div>
             </div>

package/dist/containers/Storage/StorageFilter/StorageFilter.tsx

@@ -47,6 +47,7 @@ export const StorageFilter = (props: StorageFilterProps) => {
             value={filterValue}
             onUpdate={changeFilter}
             hasClear
+            autoFocus
         />
     );
 }

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

@@ -19,8 +19,8 @@ $section-title-line-height: 24px;
 
     &__close-modal-button {
         position: absolute;
-        top: 10px;
-        right: 10px;
+        top: 23px;
+        right: 13px;
 
         & .yc-button__text {
             display: flex;

package/dist/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';
 
@@ -27,11 +26,12 @@ const b = cn('kv-detailed-overview');
 function DetailedOverview(props: DetailedOverviewProps) {
     const [isModalVisible, setIsModalVisible] = useState(false);
 
-    const {
-        currentSchemaPath,
-    } = useSelector((state: any) => state.schema);
+    const [expandedIssueId, setExpandedIssueId] = useState<string>();
+
+    const {currentSchemaPath} = useSelector((state: any) => state.schema);
 
-    const openModalHandler = () => {
+    const openModalHandler = (id: string) => {
+        setExpandedIssueId(id);
         setIsModalVisible(true);
     };
 
@@ -42,12 +42,16 @@ 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}
+                    expandedIssueId={expandedIssueId}
+                />
                 <Button
                     className={b('close-modal-button')}
                     onClick={closeModalHandler}
                     view="flat-secondary"
-                    title='Close'
+                    title="Close"
                 >
                     <Icon name="close" viewBox={'0 0 16 16 '} height={20} width={20} />
                 </Button>
@@ -63,7 +67,10 @@ function DetailedOverview(props: DetailedOverviewProps) {
                 {isTenant ? (
                     <>
                         <div className={b('section')}>
-                            <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo} />
+                            <TenantOverview
+                                tenantName={tenantName}
+                                additionalTenantInfo={additionalTenantInfo}
+                            />
                         </div>
                         <div className={b('section')}>
                             <Healthcheck

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss

@@ -1,8 +1,19 @@
 @use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
 @import '../../../../styles/mixins.scss';
+@import '@gravity-ui/uikit/styles/mixins.scss';
 
 .healthcheck {
-    padding: 25px 20px 20px;
+    // 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;
+
+    &__issues-list {
+        padding: 25px 20px 20px;
+    }
+
+    &__issue-preview {
+        margin-bottom: 15px;
+    }
 
     &__issues {
         overflow-x: hidden;
@@ -21,19 +32,21 @@
         padding: 15px 0;
     }
 
-    &__self-check-status {
+    &__issues-list-header {
         display: flex;
         align-items: center;
 
         margin-bottom: 20px;
     }
 
-    &__self-check-status-label {
+    &__issues-list-header-title {
         margin: 0 10px 0 0;
+
+        @include text-header-1();
     }
 
-    &__self-check-update {
-        margin-left: 20px;
+    &__issues-list-header-update {
+        margin-left: 10px;
     }
 
     &__status-wrapper {

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

@@ -0,0 +1,83 @@
+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;
+    fetchData?: boolean;
+    expandedIssueId?: string;
+    showMoreHandler?: (id: string) => void;
+}
+
+const b = cn('healthcheck');
+
+export const Healthcheck = (props: HealthcheckProps) => {
+    const {tenant, preview, fetchData = true, showMoreHandler, expandedIssueId} = 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(
+        () => {
+            if (fetchData) {
+                fetchHealthcheck();
+            }
+        },
+        [fetchData, 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}
+                    expandedIssueId={expandedIssueId}
+                    loading={loading}
+                    onUpdate={fetchHealthcheck}
+                />
+            );
+        }
+
+        return <div className="error">{i18n('no-data')}</div>;
+    };
+
+    return <div className={b()}>{renderContent()}</div>;
+};

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuePreview/IssuePreview.tsx

@@ -0,0 +1,35 @@
+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?: (id: string) => void;
+}
+
+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 && onShowMore(data.id)}>
+                {i18n('label.show-details')}
+            </Link>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuePreview/index.ts

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