ydb-embedded-ui 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [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/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;

package/dist/components/EntityStatus/EntityStatus.scss

@@ -57,6 +57,7 @@
         white-space: nowrap;
     }
 
+    &__status-color,
     &__status-icon {
         margin-right: 8px;
 
@@ -64,19 +65,24 @@
         &_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);
         }
     }
 

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/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>

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.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';
 
@@ -42,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}

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

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

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

@@ -0,0 +1,86 @@
+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;
+    showMoreHandler?: VoidFunction;
+}
+
+const b = cn('healthcheck');
+
+export const Healthcheck = (props: HealthcheckProps) => {
+    const {
+        tenant,
+        preview,
+        fetchData = true,
+        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(() => {
+        if (fetchData) {            
+            dispatch(getHealthcheckInfo(tenant));
+        }
+    }, [dispatch, fetchData, 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>
+    );
+};

package/dist/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>
+    );
+};

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

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

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

@@ -0,0 +1,69 @@
+import cn from 'bem-cn-lite';
+
+import {Button} from '@gravity-ui/uikit';
+
+import type {IHealthCheck} from '../../../../../types/store/healthcheck';
+
+import IssuesViewer from '../IssuesViewer/IssuesViewer';
+
+import i18n from '../i18n';
+
+const b = cn('healthcheck');
+
+interface IssuesListProps {
+    data?: IHealthCheck;
+    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>
+    );
+};

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

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

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

@@ -0,0 +1,80 @@
+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');
+
+interface PreviewProps {
+    data?: IHealthCheck;
+    loading?: boolean;
+    onShowMore?: VoidFunction;
+    onUpdate: VoidFunction;
+}
+
+export const Preview = (props: PreviewProps) => {
+    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]);
+
+    if (!data) {
+        return null;
+    }
+
+    const renderStatus = () => {
+        const modifier = selfCheckResult.toLowerCase();
+
+        return (
+            <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')}
+                </div>
+                <Button size="s" onClick={onUpdate} loading={loading}>
+                    {i18n('label.update')}
+                </Button>
+            </div>
+        );
+    };
+
+    const renderFirstLevelIssues = () => {
+        return (
+            <div className={b('preview-content')}>
+                {
+                    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>
+    );
+};

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

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

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

@@ -0,0 +1,11 @@
+{
+    "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"
+}

package/dist/containers/Tenant/Diagnostics/Healthcheck/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-diagnostics-healthcheck';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

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

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

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

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

@@ -1,4 +1,4 @@
-import {ReactNode, useCallback, useEffect, useMemo} from 'react';
+import {ReactNode, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
@@ -14,11 +14,11 @@ import {
 
 import {EPathType} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
-import {AutoFetcher} from '../../../../utils/autofetcher';
 //@ts-ignore
 import {getSchema} from '../../../../store/reducers/schema';
 //@ts-ignore
 import {getOlapStats} from '../../../../store/reducers/olapStats';
+import {useAutofetcher} from '../../../../utils/hooks';
 
 import './Overview.scss';
 
@@ -57,8 +57,6 @@ interface OverviewProps {
 
 const b = cn('kv-tenant-overview');
 
-const autofetcher = new AutoFetcher();
-
 function Overview(props: OverviewProps) {
     const {tenantName, type} = props;
 
@@ -76,29 +74,14 @@ function Overview(props: OverviewProps) {
         data: { result: olapStats } = { result: undefined },
     } = useSelector((state: any) => state.olapStats);
 
-    const fetchOverviewData = useCallback(() => {
+    useAutofetcher(() => {
         const schemaPath = currentSchemaPath || tenantName;
         dispatch(getSchema({path: schemaPath}));
 
         if (isTableType(type) && isColumnEntityType(type)) {
             dispatch(getOlapStats({path: schemaPath}));
         }
-    }, [currentSchemaPath, dispatch, tenantName, type]);
-
-    useEffect(fetchOverviewData, [fetchOverviewData]);
-
-    useEffect(() => {
-        autofetcher.stop();
-
-        if (autorefresh) {
-            autofetcher.start();
-            autofetcher.fetch(() => fetchOverviewData());
-        }
-
-        return () => {
-            autofetcher.stop();
-        };
-    }, [autorefresh, fetchOverviewData]);
+    }, [currentSchemaPath, dispatch, tenantName, type], autorefresh);
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -141,16 +141,23 @@ function QueryExplain(props) {
         );
     };
 
-    const renderTextExplain = () => {
-        const {explain} = props;
-
-        if (!explain) {
-            return renderStub();
+    const hasContent = () => {
+        switch (activeOption) {
+            case ExplainOptionIds.schema:
+                return Boolean(props.explain?.nodes?.length);
+            case ExplainOptionIds.json:
+                return Boolean(props.explain);
+            case ExplainOptionIds.ast:
+                return Boolean(props.ast);
+            default:
+                return false;
         }
+    };
 
+    const renderTextExplain = () => {
         const content = (
             <JSONTree
-                data={explain.pristine}
+                data={props.explain?.pristine}
                 isExpanded={() => true}
                 className={b('inspector')}
                 searchOptions={{
@@ -168,13 +175,6 @@ function QueryExplain(props) {
     };
 
     const renderAstExplain = () => {
-        if (!props.ast) {
-            return (
-                <div className={b('text-message')}>
-                    There is no AST explanation for the request
-                </div>
-            );
-        }
         const content = (
             <div className={b('ast')}>
                 <MonacoEditor
@@ -196,11 +196,6 @@ function QueryExplain(props) {
     const renderGraph = () => {
         const {explain = {}, theme} = props;
         const {links, nodes, version} = explain;
-
-        if (!explain.nodes?.length) {
-            return renderStub();
-        }
-
         const content =
             links && nodes && nodes.length ? (
                 <div
@@ -259,6 +254,10 @@ function QueryExplain(props) {
             return renderError();
         }
 
+        if (!hasContent()) {
+            return renderStub();
+        }
+
         switch (activeOption) {
             case ExplainOptionIds.json: {
                 return renderTextExplain();
@@ -293,7 +292,7 @@ function QueryExplain(props) {
                             )}
                         </div>
                         <div className={b('controls-left')}>
-                            <EnableFullscreenButton disabled={Boolean(props.error)} />
+                            <EnableFullscreenButton disabled={Boolean(props.error) || !hasContent()} />
                             <PaneVisibilityToggleButtons
                                 onCollapse={props.onCollapseResults}
                                 onExpand={props.onExpandResults}

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -51,6 +51,7 @@
     }
     &__inspector {
         max-width: calc(100% - 50px);
+        padding: 15px 10px;
         @include json-tree-styles();
         &_fullscreen {
             overflow: auto;

package/dist/containers/Tenants/Tenants.js

@@ -98,6 +98,7 @@ class Tenants extends React.Component {
                     text={searchQuery}
                     onUpdate={handleSearchQuery}
                     hasClear
+                    autoFocus
                 />
                 <ProblemFilter value={filter} onChange={changeFilter} />
             </div>

package/dist/services/api.d.ts

@@ -30,6 +30,15 @@ interface Window {
             },
             axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/query').QueryAPIResponse<Action, Schema>>;
+        getExplainQuery: (
+            query: string,
+            database: string,
+        ) => Promise<import('../types/api/query').QueryAPIExplainResponse<'explain'>>;
+        getExplainQueryAst: (
+            query: string,
+            database: string,
+        ) => Promise<import('../types/api/query').QueryAPIExplainResponse<'explain-ast'>>;
+        getHealthcheckInfo: (database: string) => Promise<import('../types/api/healthcheck').HealthCheckAPIResponse>,
         [method: string]: Function;
     };
 }

package/dist/types/api/healthcheck.ts

@@ -0,0 +1,91 @@
+export enum SelfCheckResult {
+    UNSPECIFIED = 'UNSPECIFIED',
+    GOOD = 'GOOD',
+    DEGRADED = 'DEGRADED',
+    MAINTENANCE_REQUIRED = 'MAINTENANCE_REQUIRED',
+    EMERGENCY = 'EMERGENCY',
+}
+
+enum StatusFlag {
+    UNSPECIFIED = 'UNSPECIFIED',
+    GREY = 'GREY',
+    GREEN = 'GREEN',
+    BLUE = 'BLUE',
+    YELLOW = 'YELLOW',
+    ORANGE = 'ORANGE',
+    RED = 'RED',
+}
+
+interface LocationNode {
+    id: number;
+    host: string;
+    port: number;
+}
+
+interface LocationStoragePDisk {
+    id: string;
+    path: string;
+}
+
+interface LocationStorageVDisk {
+    id: string;
+    pdisk: LocationStoragePDisk;
+}
+
+interface LocationStorageGroup {
+    id: string;
+    vdisk: LocationStorageVDisk;
+}
+
+interface LocationStoragePool {
+    name: string;
+    group: LocationStorageGroup;
+}
+
+interface LocationStorage {
+    node: LocationNode;
+    pool: LocationStoragePool;
+}
+
+interface LocationComputePool {
+    name: string;
+}
+
+interface LocationComputeTablet {
+    type: string;
+    id?: string[];
+    count: number;
+}
+
+interface LocationCompute {
+    node: LocationNode;
+    pool: LocationComputePool;
+    tablet: LocationComputeTablet;
+}
+
+interface LocationDatabase {
+    name: string;
+}
+
+interface Location {
+    storage: LocationStorage;
+    compute: LocationCompute;
+    database: LocationDatabase;
+}
+
+export interface IssueLog {
+    id: string;
+    status: StatusFlag;
+    message: string;
+    location: Location;
+    reason?: string[];
+    type: string;
+    level: number;
+}
+
+export interface HealthCheckAPIResponse {
+    // eslint-disable-next-line camelcase
+    self_check_result: SelfCheckResult;
+    // eslint-disable-next-line camelcase
+    issue_log?: IssueLog[];
+}

package/dist/types/store/healthcheck.ts

@@ -0,0 +1,3 @@
+import type {HealthCheckAPIResponse} from "../api/healthcheck";
+
+export type IHealthCheck = HealthCheckAPIResponse;

package/dist/utils/hooks/index.ts

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

package/dist/utils/hooks/useAutofetcher.ts

@@ -0,0 +1,29 @@
+import {DependencyList, useEffect, useRef} from 'react';
+
+import {AutoFetcher} from '../autofetcher';
+
+export const useAutofetcher = (fetchData: VoidFunction, deps: DependencyList, enabled = true) => {
+    const ref = useRef<AutoFetcher | null>(null);
+
+    if (ref.current === null) {
+        ref.current = new AutoFetcher();
+    }
+
+    const autofetcher = ref.current;
+
+    // initial fetch
+    useEffect(fetchData, deps); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        autofetcher.stop();
+
+        if (enabled) {
+            autofetcher.start();
+            autofetcher.fetch(fetchData);
+        }
+
+        return () => {
+            autofetcher.stop();
+        };
+    }, [enabled, ...deps]); // eslint-disable-line react-hooks/exhaustive-deps
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "files": [
     "dist"
   ],

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

@@ -1,195 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {Loader, Button} from '@gravity-ui/uikit';
-
-import IssuesViewer from './IssuesViewer/IssuesViewer';
-
-import {getHealthcheckInfo} from '../../../../store/reducers/healthcheckInfo';
-import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-
-import './Healthcheck.scss';
-
-const b = cn('healthcheck');
-
-class Healthcheck extends React.Component {
-    static propTypes = {
-        data: PropTypes.object,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.object,
-        getHealthcheckInfo: PropTypes.func,
-        tenant: PropTypes.string,
-        preview: PropTypes.bool,
-        showMoreHandler: PropTypes.func,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        this.autofetcher = new AutoFetcher();
-        this.fetchHealthcheck();
-        if (this.props.autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchHealthcheck());
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh} = this.props;
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.fetchHealthcheck();
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchHealthcheck());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    fetchHealthcheck = () => {
-        const {tenant, getHealthcheckInfo} = this.props;
-        getHealthcheckInfo(tenant);
-    };
-
-    renderLoader() {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    }
-
-    renderUpdateButton() {
-        const {loading} = this.props;
-        return (
-            <Button size="s" onClick={this.fetchHealthcheck} loading={loading}>
-                Update
-            </Button>
-        );
-    }
-
-    renderPreview = () => {
-        const {data, showMoreHandler} = this.props;
-        const {self_check_result: selfCheckResult} = data;
-        const modifier = selfCheckResult.toLowerCase();
-
-        const statusOk = selfCheckResult === 'GOOD';
-        const text = statusOk
-            ? 'No issues have been found on this database.'
-            : 'Several issues have been found on this database.';
-
-        return (
-            <div>
-                <div className={b('status-wrapper')}>
-                    <div className={b('preview-title')}>Healthcheck</div>
-                    <div className={b('self-check-status-indicator', {[modifier]: true})}>
-                        {statusOk ? 'Ok' : 'Error'}
-                    </div>
-                    {this.renderUpdateButton()}
-                </div>
-                <div className={b('preview-content')}>
-                    {text}
-                    {!statusOk && (
-                        <Button
-                            view="flat-info"
-                            onClick={showMoreHandler}
-                            size="s"
-                        >
-                            Show details
-                        </Button>
-                    )}
-                </div>
-            </div>
-        );
-    };
-
-    renderOverviewStatus = () => {
-        const {data} = this.props;
-        const {self_check_result: selfCheckResult} = data;
-        const modifier = selfCheckResult.toLowerCase();
-
-        return (
-            <div className={b('self-check-status')}>
-                <h3 className={b('self-check-status-label')}>Self check status</h3>
-                <div className={b('self-check-status-indicator', {[modifier]: true})} />
-                {selfCheckResult}
-                <div className={b('self-check-update')}>{this.renderUpdateButton()}</div>
-            </div>
-        );
-    };
-
-    renderHealthcheckIssues() {
-        const {data, showTooltip, hideTooltip} = this.props;
-        const {issue_log: issueLog} = data;
-
-        if (!issueLog) {
-            return null;
-        }
-
-        return (
-            <div className={b('issues')}>
-                <h3>Issues</h3>
-                <IssuesViewer
-                    issues={issueLog}
-                    showTooltip={showTooltip}
-                    hideTooltip={hideTooltip}
-                />
-            </div>
-        );
-    }
-
-    renderContent = () => {
-        const {preview} = this.props;
-        return preview ? (
-            this.renderPreview()
-        ) : (
-            <div className={b()}>
-                {this.renderOverviewStatus()}
-                {this.renderHealthcheckIssues()}
-            </div>
-        );
-    };
-
-    render() {
-        const {error, data, loading, wasLoaded} = this.props;
-
-        if (error) {
-            return <div>{error.statusText}</div>;
-        } else if (data && data['self_check_result']) {
-            return this.renderContent();
-        } else if (loading && !wasLoaded) {
-            return this.renderLoader();
-        } else return <div className="error">no healthcheck data</div>;
-    }
-}
-
-function mapStateToProps(state) {
-    const {data, loading, wasLoaded, error} = state.healthcheckInfo;
-    const {autorefresh} = state.schema;
-
-    return {
-        data,
-        loading,
-        wasLoaded,
-        error,
-        autorefresh,
-    };
-}
-
-const mapDispatchToProps = {
-    getHealthcheckInfo,
-    hideTooltip,
-    showTooltip,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Healthcheck);