ydb-embedded-ui 2.0.0 → 2.2.0

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

@@ -0,0 +1,62 @@
+import cn from 'bem-cn-lite';
+
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import updateArrow from '../../../../../assets/icons/update-arrow.svg';
+
+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;
+    expandedIssueId?: string;
+    onUpdate: VoidFunction;
+}
+
+export const IssuesList = (props: IssuesListProps) => {
+    const {data, loading, onUpdate, expandedIssueId} = props;
+
+    if (!data) {
+        return null;
+    }
+
+    const renderHealthcheckHeader = () => {
+        return (
+            <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>
+        );
+    };
+
+    const renderHealthcheckIssues = () => {
+        const {issue_log: issueLog} = data;
+
+        if (!issueLog) {
+            return null;
+        }
+
+        return (
+            <div className={b('issues')}>
+                <IssuesViewer issues={issueLog} expandedIssueId={expandedIssueId} />
+            </div>
+        );
+    };
+
+    return (
+        <div className={b('issues-list')}>
+            {renderHealthcheckHeader()}
+            {renderHealthcheckIssues()}
+        </div>
+    );
+};

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

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

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

@@ -0,0 +1,74 @@
+import {useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+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';
+
+import {IssuePreview} from '../IssuePreview';
+
+import i18n from '../i18n';
+
+const b = cn('healthcheck');
+
+interface PreviewProps {
+    data?: IHealthCheck;
+    loading?: boolean;
+    onUpdate: VoidFunction;
+    onShowMore?: (id: string) => void;
+}
+
+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})}>
+                    {selfCheckResult}
+                </div>
+                <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
+                    <Icon data={updateArrow} width={20} height={20} />
+                </Button>
+            </div>
+        );
+    };
+
+    const renderFirstLevelIssues = () => {
+        return (
+            <div className={b('preview-content')}>
+                {isStatusOK
+                    ? i18n('status_message.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,7 @@
+{
+  "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/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,7 @@
+{
+  "title.healthcheck": "Healthcheck",
+  "label.update": "Обновить",
+  "label.show-details": "Посмотреть подробности",
+  "status_message.ok": "В базе данных нет проблем",
+  "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/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

@@ -98,6 +98,7 @@ class Tenants extends React.Component {
                     text={searchQuery}
                     onUpdate={handleSearchQuery}
                     hasClear
+                    autoFocus
                 />
                 <ProblemFilter value={filter} onChange={changeFilter} />
             </div>
@@ -106,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);
     };
@@ -123,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;
@@ -150,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/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;
     };
 }