ydb-embedded-ui 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # 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)
 
 

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,7 +2,7 @@ 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, Icon} 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';
@@ -35,6 +35,7 @@ class EntityStatus extends React.Component {
         externalLink: PropTypes.bool,
         className: PropTypes.string,
         mode: PropTypes.oneOf(['color', 'icons']),
+        withLeftTrim: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -45,6 +46,7 @@ class EntityStatus extends React.Component {
         showStatus: true,
         externalLink: false,
         mode: 'color',
+        withLeftTrim: false,
     };
     renderIcon() {
         const {status, size, showStatus, mode} = this.props;
@@ -56,12 +58,7 @@ class EntityStatus extends React.Component {
         const modifiers = {state: status.toLowerCase(), size};
 
         if (mode === 'icons' && icons[status]) {
-            return (
-                <Icon
-                    className={b('status-icon', modifiers)}
-                    data={icons[status]}
-                />
-            );
+            return <Icon className={b('status-icon', modifiers)} data={icons[status]} />;
         }
 
         return <div className={b('status-color', modifiers)} />;
@@ -70,21 +67,25 @@ class EntityStatus extends React.Component {
         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}
@@ -95,7 +96,6 @@ class EntityStatus extends React.Component {
             name && (
                 <span
                     className={b('name')}
-                    title={name}
                     onMouseEnter={onNameMouseEnter}
                     onMouseLeave={onNameMouseLeave}
                 >
@@ -108,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,12 +49,25 @@
         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;

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

@@ -114,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,
@@ -143,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/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

@@ -26,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 openModalHandler = () => {
+    const {currentSchemaPath} = useSelector((state: any) => state.schema);
+
+    const openModalHandler = (id: string) => {
+        setExpandedIssueId(id);
         setIsModalVisible(true);
     };
 
@@ -41,12 +42,16 @@ function DetailedOverview(props: DetailedOverviewProps) {
     const renderModal = () => {
         return (
             <Modal open={isModalVisible} onClose={closeModalHandler} className={b('modal')}>
-                <Healthcheck tenant={props.tenantName} fetchData={false} />
+                <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>
@@ -62,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,7 +1,12 @@
 @use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
 @import '../../../../styles/mixins.scss';
+@import '@gravity-ui/uikit/styles/mixins.scss';
 
 .healthcheck {
+    // 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;
     }
@@ -27,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

@@ -17,18 +17,14 @@ interface HealthcheckProps {
     tenant: string;
     preview?: boolean;
     fetchData?: boolean;
-    showMoreHandler?: VoidFunction;
+    expandedIssueId?: string;
+    showMoreHandler?: (id: string) => void;
 }
 
 const b = cn('healthcheck');
 
 export const Healthcheck = (props: HealthcheckProps) => {
-    const {
-        tenant,
-        preview,
-        fetchData = true,
-        showMoreHandler,
-    } = props;
+    const {tenant, preview, fetchData = true, showMoreHandler, expandedIssueId} = props;
 
     const dispatch = useDispatch();
 
@@ -36,12 +32,18 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const {autorefresh} = useSelector((state: any) => state.schema);
 
     const fetchHealthcheck = useCallback(() => {
-        if (fetchData) {            
-            dispatch(getHealthcheckInfo(tenant));
-        }
-    }, [dispatch, fetchData, tenant]);
-
-    useAutofetcher(fetchHealthcheck, [fetchHealthcheck], autorefresh);
+        dispatch(getHealthcheckInfo(tenant));
+    }, [dispatch, tenant]);
+
+    useAutofetcher(
+        () => {
+            if (fetchData) {
+                fetchHealthcheck();
+            }
+        },
+        [fetchData, fetchHealthcheck],
+        autorefresh,
+    );
 
     const renderContent = () => {
         if (error) {
@@ -67,20 +69,15 @@ export const Healthcheck = (props: HealthcheckProps) => {
             ) : (
                 <IssuesList
                     data={data}
+                    expandedIssueId={expandedIssueId}
                     loading={loading}
                     onUpdate={fetchHealthcheck}
                 />
             );
         }
 
-        return (
-            <div className="error">{i18n('no-data')}</div>
-        );
+        return <div className="error">{i18n('no-data')}</div>;
     };
 
-    return (
-        <div className={b()}>
-            {renderContent()}
-        </div>
-    );
+    return <div className={b()}>{renderContent()}</div>;
 };

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

@@ -11,14 +11,11 @@ const b = cn('healthcheck');
 
 interface IssuePreviewProps {
     data?: IssueLog;
-    onShowMore?: VoidFunction;
+    onShowMore?: (id: string) => void;
 }
 
 export const IssuePreview = (props: IssuePreviewProps) => {
-    const {
-        data,
-        onShowMore,
-    } = props;
+    const {data, onShowMore} = props;
 
     if (!data) {
         return null;
@@ -27,8 +24,12 @@ export const IssuePreview = (props: IssuePreviewProps) => {
     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>
+            <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/IssuesList/IssuesList.tsx

@@ -1,6 +1,8 @@
 import cn from 'bem-cn-lite';
 
-import {Button} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 
 import type {IHealthCheck} from '../../../../../types/store/healthcheck';
 
@@ -13,32 +15,24 @@ const b = cn('healthcheck');
 interface IssuesListProps {
     data?: IHealthCheck;
     loading?: boolean;
+    expandedIssueId?: string;
     onUpdate: VoidFunction;
 }
 
 export const IssuesList = (props: IssuesListProps) => {
-    const {
-        data,
-        loading,
-        onUpdate,
-    } = props;
+    const {data, loading, onUpdate, expandedIssueId} = props;
 
     if (!data) {
         return null;
     }
 
-    const renderOverviewStatus = () => {
-        const {self_check_result: selfCheckResult} = data;
-        const modifier = selfCheckResult.toLowerCase();
-
+    const renderHealthcheckHeader = () => {
         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')}
+            <div className={b('issues-list-header')}>
+                <h3 className={b('issues-list-header-title')}>{i18n('title.healthcheck')}</h3>
+                <div className={b('issues-list-header-update')}>
+                    <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
+                        <Icon data={updateArrow} height={20} width={20} />
                     </Button>
                 </div>
             </div>
@@ -54,15 +48,14 @@ export const IssuesList = (props: IssuesListProps) => {
 
         return (
             <div className={b('issues')}>
-                <h3>{i18n('title.issues')}</h3>
-                <IssuesViewer issues={issueLog} />
+                <IssuesViewer issues={issueLog} expandedIssueId={expandedIssueId} />
             </div>
         );
-    }
+    };
 
     return (
         <div className={b('issues-list')}>
-            {renderOverviewStatus()}
+            {renderHealthcheckHeader()}
             {renderHealthcheckIssues()}
         </div>
     );

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

@@ -2,30 +2,22 @@
 
 .issue {
     display: flex;
+    justify-content: space-between;
     align-items: center;
 
     height: 40px;
 
     cursor: pointer;
 
-    &_active {
-        border-radius: 4px;
-        background: var(--yc-color-base-info);
-    }
-
     &__field {
-        padding: 0 10px;
+        display: flex;
+        overflow: hidden;
 
         &_status {
             display: flex;
 
-            min-width: 470px;
-
             white-space: nowrap;
         }
-        &_type {
-            min-width: 160px;
-        }
         &_additional {
             width: max-content;
 
@@ -39,6 +31,7 @@
         }
         &_message {
             overflow: hidden;
+            flex-shrink: 0;
 
             width: 300px;
 
@@ -96,8 +89,10 @@
 .issue-viewer {
     display: flex;
 
+    width: 820px;
+
     &__tree {
-        padding-right: 20px;
+        width: 100%;
     }
 
     &__checkbox {
@@ -106,11 +101,10 @@
 
     &__info-panel {
         position: sticky;
-        top: 20px;
 
-        width: 500px;
         height: 100%;
-        padding: 5px 20px 20px;
+        margin: 11px 0;
+        padding: 8px 20px;
 
         border-radius: 4px;
         background: var(--yc-color-base-generic);
@@ -152,6 +146,8 @@
     }
 
     .ydb-tree-view {
+        $calculated-margin: calc(24px * var(--ydb-tree-view-level));
+
         &__item {
             height: 40px;
         }
@@ -160,5 +156,15 @@
             width: 40px;
             height: 40px;
         }
+
+        // Without !important this class does not have enough weight compared to styles set in TreeView
+        .ydb-tree-view__item {
+            margin-left: $calculated-margin !important;
+            padding-left: 0 !important;
+        }
+
+        .issue-viewer__info-panel {
+            margin-left: $calculated-margin;
+        }
     }
 }

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssuesViewer.js

@@ -13,62 +13,26 @@ import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 
 import './IssueViewer.scss';
 
-// const indicatorBlock = cn('indicator');
-
-// const IssueStatus = ({status, name}) => {
-//     const modifier = status && status.toLowerCase();
-
-//     return (
-//         <React.Fragment>
-//             <div className={indicatorBlock({[modifier]: true})} />
-//             {name}
-//         </React.Fragment>
-//     );
-// };
-
 const issueBlock = cn('issue');
 
-const IssueRow = ({data, treeLevel, active, setInfoForActive, onClick}) => {
-    // eslint-disable-next-line no-unused-vars
-    const {id, status, message, type, reasonsItems, ...rest} = data;
-
-    useEffect(() => {
-        if (active) {
-            setInfoForActive(rest);
-        }
-    }, [active, setInfoForActive]);
+const IssueRow = ({data, onClick}) => {
+    const {status, message, type} = data;
 
     return (
-        <div className={issueBlock({active})} onClick={onClick}>
+        <div className={issueBlock()} onClick={onClick}>
             <div className={issueBlock('field', {status: true})}>
-                <EntityStatus status={status} name={id} />
-                {/* <IssueStatus status={status} name={id} /> */}
-            </div>
-            <div
-                className={issueBlock('field', {message: true})}
-                style={{marginLeft: -treeLevel * 24 + 'px'}}
-            >
-                {message}
+                <EntityStatus mode="icons" status={status} name={type} />
             </div>
-            <div className={issueBlock('field', {type: true})}>{type}</div>
+            <div className={issueBlock('field', {message: true})}>{message}</div>
         </div>
     );
 };
 
 const issueViewerBlock = cn('issue-viewer');
 
-const IssuesViewer = ({issues}) => {
+const IssuesViewer = ({issues, expandedIssueId}) => {
     const [data, setData] = useState([]);
     const [collapsedIssues, setCollapsedIssues] = useState({});
-    const [activeItem, setActiveItem] = useState();
-    const [infoData, setInfoData] = useState();
-
-    useEffect(() => {
-        if (!activeItem && data.length) {
-            const {id} = data[0];
-            setActiveItem(id);
-        }
-    }, [data]);
 
     useEffect(() => {
         const newData = getInvertedConsequencesTree({data: issues});
@@ -77,67 +41,69 @@ const IssuesViewer = ({issues}) => {
     }, [issues]);
 
     const renderTree = useCallback(
-        (data, childrenKey, treeLevel = 0) => {
+        (data, childrenKey) => {
             return _.map(data, (item) => {
                 const {id} = item;
-                const isActive = activeItem === item.id;
-                const hasArrow = item[childrenKey].length;
+
+                // eslint-disable-next-line no-unused-vars
+                const {status, message, type, reasonsItems, reason, level, ...rest} = item;
+
+                if (level === 1 && expandedIssueId && id !== expandedIssueId) {
+                    return;
+                }
+
+                const isCollapsed =
+                    typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id];
+
+                const toggleCollapsed = () => {
+                    setCollapsedIssues((collapsedIssues) => ({
+                        ...collapsedIssues,
+                        [id]: !isCollapsed,
+                    }));
+                };
 
                 return (
                     <TreeView
                         key={id}
-                        name={
-                            <IssueRow
-                                data={item}
-                                treeLevel={treeLevel}
-                                active={isActive}
-                                setInfoForActive={setInfoData}
-                            />
-                        }
-                        collapsed={
-                            typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id]
-                        }
-                        hasArrow={hasArrow}
-                        onClick={() => setActiveItem(id)}
-                        onArrowClick={() => {
-                            const newValue =
-                                typeof collapsedIssues[id] === 'undefined'
-                                    ? false
-                                    : !collapsedIssues[id];
-                            const newCollapsedIssues = {...collapsedIssues, [id]: newValue};
-                            setCollapsedIssues(newCollapsedIssues);
-                        }}
+                        name={<IssueRow data={item} />}
+                        collapsed={isCollapsed}
+                        hasArrow={true}
+                        onClick={toggleCollapsed}
+                        onArrowClick={toggleCollapsed}
+                        level={level - 1}
                     >
-                        {renderTree(item[childrenKey], childrenKey, treeLevel + 1)}
+                        {renderInfoPanel(rest)}
+                        {renderTree(item[childrenKey], childrenKey)}
                     </TreeView>
                 );
             });
         },
-        [data, collapsedIssues, activeItem],
+        [data, collapsedIssues],
     );
 
-    const renderInfoPanel = useCallback(() => {
-        if (!infoData) {
-            return null;
-        }
-
-        return (
-            <div className={issueViewerBlock('info-panel')}>
-                <h3>Additional info for {activeItem}</h3>
-                <JSONTree
-                    data={infoData}
-                    search={false}
-                    isExpanded={() => true}
-                    className={issueViewerBlock('inspector')}
-                />
-            </div>
-        );
-    }, [data, infoData, activeItem]);
+    const renderInfoPanel = useCallback(
+        (info) => {
+            if (!info) {
+                return null;
+            }
+
+            return (
+                <div className={issueViewerBlock('info-panel')}>
+                    <JSONTree
+                        data={info}
+                        search={false}
+                        isExpanded={() => true}
+                        className={issueViewerBlock('inspector')}
+                    />
+                </div>
+            );
+        },
+        [data],
+    );
 
     return (
         <div className={issueViewerBlock()}>
             <div className={issueViewerBlock('tree')}>{renderTree(data, 'reasonsItems')}</div>
-            {renderInfoPanel()}
         </div>
     );
 };

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

@@ -1,7 +1,9 @@
 import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
-import {Button} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 
 import {SelfCheckResult} from '../../../../../types/api/healthcheck';
 import type {IHealthCheck} from '../../../../../types/store/healthcheck';
@@ -15,23 +17,21 @@ const b = cn('healthcheck');
 interface PreviewProps {
     data?: IHealthCheck;
     loading?: boolean;
-    onShowMore?: VoidFunction;
     onUpdate: VoidFunction;
+    onShowMore?: (id: string) => void;
 }
 
 export const Preview = (props: PreviewProps) => {
-    const {
-        data,
-        loading,
-        onShowMore,
-        onUpdate,
-    } = props;
+    const {data, loading, onShowMore, 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]);
+    const firstLevelIssues = useMemo(
+        () => issuesLog?.filter(({level}) => level === 1),
+        [issuesLog],
+    );
 
     if (!data) {
         return null;
@@ -44,10 +44,10 @@ export const Preview = (props: PreviewProps) => {
             <div className={b('status-wrapper')}>
                 <div className={b('preview-title')}>{i18n('title.healthcheck')}</div>
                 <div className={b('self-check-status-indicator', {[modifier]: true})}>
-                    {isStatusOK ? i18n('ok') : i18n('error')}
+                    {selfCheckResult}
                 </div>
-                <Button size="s" onClick={onUpdate} loading={loading}>
-                    {i18n('label.update')}
+                <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
+                    <Icon data={updateArrow} width={20} height={20} />
                 </Button>
             </div>
         );
@@ -56,17 +56,11 @@ export const Preview = (props: PreviewProps) => {
     const renderFirstLevelIssues = () => {
         return (
             <div className={b('preview-content')}>
-                {
-                    isStatusOK ?
-                        i18n('status_massage.ok') :
-                        firstLevelIssues?.map((issue) => (
-                            <IssuePreview
-                                key={issue.id}
-                                data={issue}
-                                onShowMore={onShowMore}
-                            />
-                        ))
-                }
+                {isStatusOK
+                    ? i18n('status_message.ok')
+                    : firstLevelIssues?.map((issue) => (
+                          <IssuePreview key={issue.id} data={issue} onShowMore={onShowMore} />
+                      ))}
             </div>
         );
     };

package/dist/containers/Tenant/Diagnostics/Healthcheck/i18n/en.json

@@ -1,11 +1,7 @@
 {
-    "title.healthcheck": "Healthcheck",
-    "title.issues": "Issues",
-    "title.self-check-status": "Self check status",
-    "label.update": "Update",
-    "label.show-details": "Show details",
-    "status_massage.ok": "No issues have been found on this database",
-    "ok": "Ok",
-    "error": "Error",
-    "no-data": "no healthcheck data"
+  "title.healthcheck": "Healthcheck",
+  "label.update": "Update",
+  "label.show-details": "Show details",
+  "status_message.ok": "No issues have been found on this database",
+  "no-data": "no healthcheck data"
 }

package/dist/containers/Tenant/Diagnostics/Healthcheck/i18n/ru.json

@@ -1,11 +1,7 @@
 {
-    "title.healthcheck": "Healthcheck",
-    "title.issues": "Проблемы",
-    "title.self-check-status": "Статус самопроверки",
-    "label.update": "Обновить",
-    "label.show-details": "Посмотреть подробности",
-    "status_massage.ok": "В базе данных нет проблем",
-    "ok": "Ok",
-    "error": "Ошибка",
-    "no-data": "нет данных healthcheck"
+  "title.healthcheck": "Healthcheck",
+  "label.update": "Обновить",
+  "label.show-details": "Посмотреть подробности",
+  "status_message.ok": "В базе данных нет проблем",
+  "no-data": "нет данных healthcheck"
 }

package/dist/containers/Tenant/Tenant.tsx

@@ -43,8 +43,8 @@ const initialTenantSummaryState = {
 };
 
 interface TenantProps {
-    additionalTenantInfo: any;
-    additionalNodesInfo: any;
+    additionalTenantInfo?: any;
+    additionalNodesInfo?: any;
 }
 
 function Tenant(props: TenantProps) {

package/dist/containers/Tenants/Tenants.js

@@ -107,7 +107,7 @@ class Tenants extends React.Component {
 
     getControlPlaneValue = (item) => {
         const parts = _.get(item, 'Name', []).split('/');
-        const defaultValue = parts.length ? parts.slice(-1) : '—';
+        const defaultValue = parts.length ? parts[parts.length - 1] : '—';
 
         return _.get(item, 'ControlPlane.name', defaultValue);
     };
@@ -124,12 +124,10 @@ class Tenants extends React.Component {
             savedTenantInitialTab,
         } = this.props;
 
-        const filteredTenantsBySearch = tenants.filter(
-            (item) =>
-                item.Name.includes(searchQuery) ||
-                this.getControlPlaneValue(item).includes(searchQuery),
-            filter,
-        );
+        const filteredTenantsBySearch = tenants.filter((item) => {
+            const re = new RegExp(searchQuery, 'i');
+            return re.test(item.Name) || re.test(this.getControlPlaneValue(item));
+        });
         const filteredTenants = Tenants.filterTenants(filteredTenantsBySearch, filter);
 
         const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
@@ -151,6 +149,7 @@ class Tenants extends React.Component {
                                 externalLink={isExternalLink}
                                 className={b('name')}
                                 name={value || 'unknown database'}
+                                withLeftTrim={true}
                                 status={row.Overall}
                                 hasClipboardButton
                                 path={createHref(routes.tenant, undefined, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "files": [
     "dist"
   ],
@@ -57,6 +57,9 @@
     ],
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix --quiet"
+    ],
+    "*.{json}": [
+      "prettier --write"
     ]
   },
   "jest": {