ydb-embedded-ui 1.14.2 → 2.1.0

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/HotKeys/HotKeys.js

@@ -1,7 +1,7 @@
 import {useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
 import Icon from '../../../../components/Icon/Icon';

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

@@ -5,11 +5,12 @@ import {connect} from 'react-redux';
 import _ from 'lodash';
 
 import {Link} from 'react-router-dom';
-import {Loader, Checkbox} from '@yandex-cloud/uikit';
+import {Loader, Checkbox} from '@gravity-ui/uikit';
 
 import NodeNetwork from './NodeNetwork/NodeNetwork';
 import Icon from '../../../../components/Icon/Icon';
 import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFilter/ProblemFilter';
+import {Illustration} from '../../../../components/Illustration';
 
 import {getNetworkInfo} from '../../../../store/reducers/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
@@ -242,7 +243,7 @@ class Network extends React.Component {
         });
 
         if (filter === PROBLEMS && problemNodesCount === 0) {
-            return <div className="no-problem" />;
+            return <Illustration name="thumbsUp" width="200" />;
         } else {
             return result;
         }

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

@@ -111,7 +111,7 @@
         display: flex;
         gap: 12px;
 
-        margin-bottom: 16px;
+        margin: 0 16px 16px 0;
     }
 
     &__controls-wrapper {

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

@@ -1,8 +1,8 @@
-import {ReactNode, useEffect, useMemo} from 'react';
+import {ReactNode, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
@@ -14,22 +14,22 @@ 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';
 
-function prepareOlapTableGeneral(tableData: any, olapStats: any[]) {
+function prepareOlapTableGeneral(tableData: any, olapStats?: any[]) {
     const {ColumnShardCount} = tableData;
     const Bytes = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Bytes) ?? 0;
+        acc += parseInt(el.Bytes) || 0;
         return acc;
     }, 0);
     const Rows = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Rows) ?? 0;
+        acc += parseInt(el.Rows) || 0;
         return acc;
     }, 0);
     const tabletIds = olapStats?.reduce((acc, el) => {
@@ -57,10 +57,11 @@ interface OverviewProps {
 
 const b = cn('kv-tenant-overview');
 
-const autofetcher = new AutoFetcher();
-
 function Overview(props: OverviewProps) {
+    const {tenantName, type} = props;
+
     const dispatch = useDispatch();
+
     const {
         currentSchema: currentItem = {},
         loading,
@@ -69,46 +70,27 @@ function Overview(props: OverviewProps) {
         currentSchemaPath,
     } = useSelector((state: any) => state.schema);
 
-    let {data: olapStats} = useSelector((state: any) => state.olapStats);
-    olapStats = olapStats && olapStats.result ? olapStats.result : olapStats;
+    const {
+        data: { result: olapStats } = { result: undefined },
+    } = useSelector((state: any) => state.olapStats);
 
-    const fetchOverviewData = () => {
-        const {tenantName, type} = props;
+    useAutofetcher(() => {
         const schemaPath = currentSchemaPath || tenantName;
         dispatch(getSchema({path: schemaPath}));
 
         if (isTableType(type) && isColumnEntityType(type)) {
             dispatch(getOlapStats({path: schemaPath}));
         }
-    };
-
-    useEffect(() => {
-        fetchOverviewData();
-        return () => {
-            autofetcher.stop();
-        };
-    }, []);
-
-    useEffect(() => {
-        if (autorefresh) {
-            fetchOverviewData();
-            autofetcher.stop();
-            autofetcher.start();
-            autofetcher.fetch(() => fetchOverviewData());
-        }
-        if (autorefresh === false) {
-            autofetcher.stop();
-        }
-    }, [autorefresh]);
+    }, [currentSchemaPath, dispatch, tenantName, type], autorefresh);
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
 
     const schemaData = useMemo(() => {
-        return isTableType(props.type) && isColumnEntityType(props.type)
+        return isTableType(type) && isColumnEntityType(type)
             ? prepareOlapTableGeneral(tableSchema, olapStats)
             : currentItem;
-    }, [props.type, tableSchema, olapStats, currentItem]);
+    }, [type, tableSchema, olapStats, currentItem]);
 
     const renderLoader = () => {
         return (
@@ -134,7 +116,7 @@ function Overview(props: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupInfo data={schemaData} />,
         };
 
-        return (props.type && pathTypeToComponent[props.type]?.()) || (
+        return (type && pathTypeToComponent[type]?.()) || (
             <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
         );
     }

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

@@ -17,7 +17,7 @@ import {TABLET_STATES} from '../../../../utils/constants';
 
 import './TenantOverview.scss';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 const b = cn('tenant-overview');
 

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
@@ -167,11 +167,11 @@ class TopQueries extends React.Component {
     }
 }
 const mapStateToProps = (state) => {
-    const {loading, data, error, wasLoaded} = state.executeTopQueries;
+    const {loading, data = {}, error, wasLoaded} = state.executeTopQueries;
     const {autorefresh} = state.schema;
     return {
         loading,
-        data: data && data.result ? data.result: data,
+        data: data.result,
         error,
         wasLoaded,
         autorefresh,

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

@@ -1,7 +1,7 @@
 import {useState, useContext, useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
 import InternalLink from '../../../../components/InternalLink/InternalLink';
@@ -216,11 +216,11 @@ function TopShards({
 }
 
 const mapStateToProps = (state) => {
-    const {loading, data, error, wasLoaded} = state.shardsWorkload;
+    const {loading, data = {}, error, wasLoaded} = state.shardsWorkload;
     const {autorefresh} = state.schema;
     return {
         loading,
-        data: data && data.result ? data.result : data,
+        data: data.result,
         error,
         currentSchemaPath: state.schema?.currentSchema?.Path,
         autorefresh,

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -2,7 +2,7 @@ import qs from 'qs';
 import {useLocation} from 'react-router';
 import cn from 'bem-cn-lite';
 
-import {useThemeValue} from '@yandex-cloud/uikit';
+import {useThemeValue} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../types/api/schema';
 

package/dist/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx

@@ -4,7 +4,7 @@ import {useLocation} from 'react-router';
 import {Link} from 'react-router-dom';
 import cn from 'bem-cn-lite';
 
-import {Tabs} from '@yandex-cloud/uikit';
+import {Tabs} from '@gravity-ui/uikit';
 
 import routes, {createHref} from '../../../routes';
 import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -6,7 +6,7 @@ import {useHistory, useLocation} from 'react-router';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Button, HelpPopover, Loader, Tabs} from '@yandex-cloud/uikit';
+import {Button, HelpPopover, Loader, Tabs} from '@gravity-ui/uikit';
 
 import SplitPane from '../../../components/SplitPane';
 import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';

package/dist/containers/Tenant/Preview/Preview.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Loader, Button} from '@yandex-cloud/uikit';
+import {Loader, Button} from '@gravity-ui/uikit';
 
 import Icon from '../../../components/Icon/Icon';
 import Fullscreen from '../../../components/Fullscreen/Fullscreen';

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

@@ -1,8 +1,6 @@
 .kv-result-issues {
-    overflow: auto;
-
-    height: 100%;
     padding: 0 10px;
+
     &__error-message {
         position: sticky;
         z-index: 2;
@@ -16,6 +14,7 @@
 
         background-color: var(--yc-color-base-background);
     }
+
     &__error-message-text {
         margin: 0 10px;
     }

package/dist/containers/Tenant/QueryEditor/Issues/Issues.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import cn from 'bem-cn-lite';
 
-import {Button, Icon, ArrowToggle} from '@yandex-cloud/uikit';
+import {Button, Icon, ArrowToggle} from '@gravity-ui/uikit';
 import ShortyString from '../../../../components/ShortyString/ShortyString';
 
 import {IssueType, SEVERITY, getSeverity} from './models';

package/dist/containers/Tenant/QueryEditor/QueriesHistory/QueriesHistory.tsx

@@ -1,7 +1,7 @@
 import React, {useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
-import {Button, Popup} from '@yandex-cloud/uikit';
+import {Button, Popup} from '@gravity-ui/uikit';
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {useSelector} from 'react-redux';
 

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

@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
-import {Button, DropdownMenu} from '@yandex-cloud/uikit';
+import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import SplitPane from '../../../components/SplitPane';
 import {QueryResultTable} from '../../../components/QueryResultTable';
@@ -341,7 +341,7 @@ function QueryEditor(props) {
                 error={error}
                 explain={data}
                 astQuery={handleAstQuery}
-                ast={dataAst?.ast}
+                ast={dataAst}
                 loading={loading}
                 loadingAst={loadingAst}
                 theme={theme}