ydb-embedded-ui 2.2.1 → 2.4.0

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

@@ -4,10 +4,15 @@ import cn from 'bem-cn-lite';
 
 import {Loader} from '@gravity-ui/uikit';
 
-import {getHealthcheckInfo} from '../../../../store/reducers/healthcheckInfo';
+import {SelfCheckResult} from '../../../../types/api/healthcheck';
+import {
+    getHealthcheckInfo,
+    selectIssuesTreeById,
+    selectIssuesTreesRoots,
+} from '../../../../store/reducers/healthcheckInfo';
 import {useAutofetcher} from '../../../../utils/hooks';
 
-import {IssuesList} from './IssuesList';
+import {Details} from './Details';
 import {Preview} from './Preview';
 
 import i18n from './i18n';
@@ -29,6 +34,11 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const dispatch = useDispatch();
 
     const {data, loading, wasLoaded, error} = useSelector((state: any) => state.healthcheckInfo);
+    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
+
+    const issuesTreesRoots = useSelector(selectIssuesTreesRoots);
+    const expandedIssueTree = useSelector((state) => selectIssuesTreeById(state, expandedIssueId));
+
     const {autorefresh} = useSelector((state: any) => state.schema);
 
     const fetchHealthcheck = useCallback(() => {
@@ -61,15 +71,15 @@ export const Healthcheck = (props: HealthcheckProps) => {
         if (data && data['self_check_result']) {
             return preview ? (
                 <Preview
-                    data={data}
+                    issuesTrees={issuesTreesRoots}
+                    selfCheckResult={selfCheckResult}
                     loading={loading}
                     onShowMore={showMoreHandler}
                     onUpdate={fetchHealthcheck}
                 />
             ) : (
-                <IssuesList
-                    data={data}
-                    expandedIssueId={expandedIssueId}
+                <Details
+                    issueTree={expandedIssueTree}
                     loading={loading}
                     onUpdate={fetchHealthcheck}
                 />

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/{IssueViewer.scss → IssueTree.scss}

@@ -1,56 +1,5 @@
 @import '../../../../../styles/mixins.scss';
 
-.issue {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    height: 40px;
-
-    cursor: pointer;
-
-    &__field {
-        display: flex;
-        overflow: hidden;
-
-        &_status {
-            display: flex;
-
-            white-space: nowrap;
-        }
-        &_additional {
-            width: max-content;
-
-            cursor: pointer;
-
-            color: var(--yc-color-text-link);
-
-            &:hover {
-                color: var(--yc-color-text-link-hover);
-            }
-        }
-        &_message {
-            overflow: hidden;
-            flex-shrink: 0;
-
-            width: 300px;
-
-            white-space: normal;
-        }
-    }
-
-    &__field-tooltip {
-        &#{&} {
-            min-width: 500px;
-            max-width: 500px;
-        }
-    }
-
-    &__field-label {
-        color: var(--yc-color-text-secondary);
-    }
-}
-
 .indicator {
     width: 12px;
     height: 12px;
@@ -86,12 +35,12 @@
     }
 }
 
-.issue-viewer {
+.issue-tree {
     display: flex;
 
     width: 820px;
 
-    &__tree {
+    &__block {
         width: 100%;
     }
 
@@ -163,7 +112,7 @@
             padding-left: 0 !important;
         }
 
-        .issue-viewer__info-panel {
+        .issue-tree__info-panel {
             margin-left: $calculated-margin;
         }
     }

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

@@ -0,0 +1,87 @@
+import {useCallback, useState} from 'react';
+import cn from 'bem-cn-lite';
+import _omit from 'lodash/omit';
+
+// @ts-ignore
+import JSONTree from 'react-json-inspector';
+
+import {TreeView} from 'ydb-ui-components';
+
+import {IIssuesTree} from '../../../../../types/store/healthcheck';
+
+import {IssueTreeItem} from './IssueTreeItem';
+
+import './IssueTree.scss';
+
+const b = cn('issue-tree');
+
+interface IssuesViewerProps {
+    issueTree: IIssuesTree;
+}
+
+const IssueTree = ({issueTree}: IssuesViewerProps) => {
+    const [collapsedIssues, setCollapsedIssues] = useState<Record<string, boolean>>({});
+
+    const renderTree = useCallback(
+        (data: IIssuesTree[]) => {
+            return data.map((item) => {
+                const {id} = item;
+                const {status, message, type, reasonsItems, level, ...rest} = item;
+
+                const isCollapsed =
+                    typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id];
+
+                const toggleCollapsed = () => {
+                    setCollapsedIssues((collapsedIssues) => ({
+                        ...collapsedIssues,
+                        [id]: !isCollapsed,
+                    }));
+                };
+
+                return (
+                    <TreeView
+                        key={id}
+                        name={<IssueTreeItem status={status} message={message} type={type} />}
+                        collapsed={isCollapsed}
+                        hasArrow={true}
+                        onClick={toggleCollapsed}
+                        onArrowClick={toggleCollapsed}
+                        level={level - 1}
+                    >
+                        {renderInfoPanel(_omit(rest, ['reason']))}
+                        {renderTree(reasonsItems || [])}
+                    </TreeView>
+                );
+            });
+        },
+        [issueTree, collapsedIssues],
+    );
+
+    const renderInfoPanel = useCallback(
+        (info) => {
+            if (!info) {
+                return null;
+            }
+
+            return (
+                <div className={b('info-panel')}>
+                    <JSONTree
+                        data={info}
+                        search={false}
+                        isExpanded={() => true}
+                        className={b('inspector')}
+                    />
+                </div>
+            );
+        },
+        [issueTree],
+    );
+
+    return (
+        <div className={b()}>
+            <div className={b('block')}>{renderTree([issueTree])}</div>
+        </div>
+    );
+};
+
+export default IssueTree;

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

@@ -0,0 +1,50 @@
+.issue-tree-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    height: 40px;
+
+    cursor: pointer;
+
+    &__field {
+        display: flex;
+        overflow: hidden;
+
+        &_status {
+            display: flex;
+
+            white-space: nowrap;
+        }
+        &_additional {
+            width: max-content;
+
+            cursor: pointer;
+
+            color: var(--yc-color-text-link);
+
+            &:hover {
+                color: var(--yc-color-text-link-hover);
+            }
+        }
+        &_message {
+            overflow: hidden;
+            flex-shrink: 0;
+
+            width: 300px;
+
+            white-space: normal;
+        }
+    }
+
+    &__field-tooltip {
+        &#{&} {
+            min-width: 500px;
+            max-width: 500px;
+        }
+    }
+
+    &__field-label {
+        color: var(--yc-color-text-secondary);
+    }
+}

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

@@ -0,0 +1,25 @@
+import cn from 'bem-cn-lite';
+
+import EntityStatus from '../../../../../../components/EntityStatus/EntityStatus';
+
+import './IssueTreeItem.scss';
+
+const b = cn('issue-tree-item');
+
+interface IssueRowProps {
+    status: string;
+    message: string;
+    type: string;
+    onClick?: VoidFunction;
+}
+
+export const IssueTreeItem = ({status, message, type, onClick}: IssueRowProps) => {
+    return (
+        <div className={b()} onClick={onClick}>
+            <div className={b('field', {status: true})}>
+                <EntityStatus mode="icons" status={status} name={type} />
+            </div>
+            <div className={b('field', {message: true})}>{message}</div>
+        </div>
+    );
+};

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

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

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

@@ -1,4 +1,3 @@
-import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import {Button, Icon} from '@gravity-ui/uikit';
@@ -6,34 +5,28 @@ 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 type {IIssuesTree} from '../../../../../types/store/healthcheck';
 
-import {IssuePreview} from '../IssuePreview';
+import {PreviewItem} from './PreviewItem';
 
 import i18n from '../i18n';
 
 const b = cn('healthcheck');
 
 interface PreviewProps {
-    data?: IHealthCheck;
+    selfCheckResult: SelfCheckResult;
+    issuesTrees?: IIssuesTree[];
     loading?: boolean;
-    onUpdate: VoidFunction;
     onShowMore?: (id: string) => void;
+    onUpdate: VoidFunction;
 }
 
 export const Preview = (props: PreviewProps) => {
-    const {data, loading, onShowMore, onUpdate} = props;
+    const {selfCheckResult, issuesTrees, 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) {
+    if (!issuesTrees) {
         return null;
     }
 
@@ -58,8 +51,12 @@ export const Preview = (props: PreviewProps) => {
             <div className={b('preview-content')}>
                 {isStatusOK
                     ? i18n('status_message.ok')
-                    : firstLevelIssues?.map((issue) => (
-                          <IssuePreview key={issue.id} data={issue} onShowMore={onShowMore} />
+                    : issuesTrees?.map((issueTree) => (
+                          <PreviewItem
+                              key={issueTree.id}
+                              data={issueTree}
+                              onShowMore={onShowMore}
+                          />
                       ))}
             </div>
         );

package/dist/containers/Tenant/Diagnostics/Healthcheck/{IssuePreview/IssuePreview.tsx → Preview/PreviewItem/PreviewItem.tsx}

@@ -2,19 +2,19 @@ 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 EntityStatus from '../../../../../../components/EntityStatus/EntityStatus';
+import {IssueLog} from '../../../../../../types/api/healthcheck';
 
-import i18n from '../i18n';
+import i18n from '../../i18n';
 
 const b = cn('healthcheck');
 
-interface IssuePreviewProps {
+interface PreviewItemProps {
     data?: IssueLog;
     onShowMore?: (id: string) => void;
 }
 
-export const IssuePreview = (props: IssuePreviewProps) => {
+export const PreviewItem = (props: PreviewItemProps) => {
     const {data, onShowMore} = props;
 
     if (!data) {
@@ -27,9 +27,7 @@ export const IssuePreview = (props: IssuePreviewProps) => {
             <Text as="div" color="secondary" variant="body-2">
                 {data.message}
             </Text>
-            <Link onClick={() => onShowMore && onShowMore(data.id)}>
-                {i18n('label.show-details')}
-            </Link>
+            <Link onClick={() => onShowMore?.(data.id)}>{i18n('label.show-details')}</Link>
         </div>
     );
 };

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

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

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

@@ -15,9 +15,12 @@ import {
 import {EPathType} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 //@ts-ignore
-import {getSchema} from '../../../../store/reducers/schema';
+import {getSchema, resetLoadingState} from '../../../../store/reducers/schema';
 //@ts-ignore
-import {getOlapStats} from '../../../../store/reducers/olapStats';
+import {
+    getOlapStats,
+    resetLoadingState as resetOlapLoadingState,
+} from '../../../../store/reducers/olapStats';
 import {useAutofetcher} from '../../../../utils/hooks';
 
 import './Overview.scss';
@@ -64,24 +67,36 @@ function Overview(props: OverviewProps) {
 
     const {
         currentSchema: currentItem = {},
-        loading,
+        loading: schemaLoading,
         wasLoaded,
         autorefresh,
         currentSchemaPath,
     } = useSelector((state: any) => state.schema);
 
-    const {
-        data: { result: olapStats } = { result: undefined },
-    } = useSelector((state: any) => state.olapStats);
+    const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
+        useSelector((state: any) => state.olapStats);
+
+    const loading = schemaLoading || olapStatsLoading;
 
-    useAutofetcher(() => {
-        const schemaPath = currentSchemaPath || tenantName;
-        dispatch(getSchema({path: schemaPath}));
+    useAutofetcher(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(resetLoadingState());
+            }
 
-        if (isTableType(type) && isColumnEntityType(type)) {
-            dispatch(getOlapStats({path: schemaPath}));
-        }
-    }, [currentSchemaPath, dispatch, tenantName, type], autorefresh);
+            const schemaPath = currentSchemaPath || tenantName;
+            dispatch(getSchema({path: schemaPath}));
+
+            if (isTableType(type) && isColumnEntityType(type)) {
+                if (!isBackground) {
+                    dispatch(resetOlapLoadingState());
+                }
+                dispatch(getOlapStats({path: schemaPath}));
+            }
+        },
+        [currentSchemaPath, dispatch, tenantName, type],
+        autorefresh,
+    );
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
@@ -116,17 +131,17 @@ function Overview(props: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupInfo data={schemaData} />,
         };
 
-        return (type && pathTypeToComponent[type]?.()) || (
-            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+        return (
+            (type && pathTypeToComponent[type]?.()) || (
+                <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+            )
         );
-    }
+    };
 
     return loading && !wasLoaded ? (
         renderLoader()
     ) : (
-        <div className={props.className}>
-            {renderContent()}
-        </div>
+        <div className={props.className}>{renderContent()}</div>
     );
 }
 

package/dist/containers/Tenant/Preview/Preview.scss

@@ -52,7 +52,13 @@
     &__result {
         overflow: auto;
 
+        // This fixes last row display for ordinary preview (not fullscreen)
         height: calc(100% - 40px);
         padding: 0 10px;
+
+        // Fix white space footer block for fullscreen preview
+        .kv-fullscreen & {
+            height: 100%;
+        }
     }
 }

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

@@ -54,8 +54,6 @@ export const RUN_ACTIONS = [
 
 const TABLE_SETTINGS = {
     sortable: false,
-    dynamicItemSizeGetter: () => 40,
-    dynamicRenderType: 'variable',
 };
 
 const EDITOR_OPTIONS = {
@@ -511,13 +509,7 @@ function QueryEditor(props) {
     };
 
     const renderControls = () => {
-        const {
-            executeQuery,
-            explainQuery,
-            savedQueries,
-            selectRunAction,
-            setSettingValue,
-        } = props;
+        const {executeQuery, explainQuery, savedQueries, selectRunAction, setSettingValue} = props;
         const {runAction} = executeQuery;
         const runIsDisabled = !executeQuery.input || executeQuery.loading;
         const runText = _.find(RUN_ACTIONS, {value: runAction}).content;

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

@@ -15,8 +15,8 @@
         }
         &_fullscreen {
             width: 100%;
-            margin-top: 0;
-            padding: 10px;
+            margin-top: 10px;
+            padding: 0 10px 10px;
         }
     }
 

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

@@ -83,7 +83,7 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
                             <TextInput
                                 id="queryName"
                                 placeholder="Enter query name"
-                                text={queryName}
+                                value={queryName}
                                 onUpdate={onQueryNameChange}
                                 hasClear
                                 autoFocus

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -3,7 +3,7 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
+import {setCurrentSchemaPath, getSchema, preloadSchema} from '../../../../store/reducers/schema';
 import {getDescribe} from '../../../../store/reducers/describe';
 import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
 import type {EPathType} from '../../../../types/api/schema';
@@ -19,28 +19,35 @@ interface SchemaTreeProps {
 }
 
 export function SchemaTree(props: SchemaTreeProps) {
-    const {
-        rootPath,
-        rootName,
-        rootType,
-        currentPath,
-    } = props;
+    const {rootPath, rootName, rootType, currentPath} = props;
 
     const dispatch = useDispatch();
 
-    const fetchPath = (path: string) => window.api.getSchema(
-        {path},
-        {concurrentId: `NavigationTree.getSchema|${path}`},
-    )
-        .then(({PathDescription: {Children = []} = {}}) => {
-            return Children.map(({Name = '', PathType, PathSubType}) => ({
-                name: Name,
-                type: mapPathTypeToNavigationTreeType(PathType, PathSubType),
-                // FIXME: should only be explicitly set to true for tables with indexes
-                // at the moment of writing there is no property to determine this, fix later
-                expandable: true,
-            }));
-        });
+    const fetchPath = (path: string) =>
+        window.api
+            .getSchema({path}, {concurrentId: `NavigationTree.getSchema|${path}`})
+            .then((data) => {
+                const {PathDescription: {Children = []} = {}} = data;
+
+                dispatch(preloadSchema(path, data));
+
+                return Children.map((childData) => {
+                    const {Name = '', PathType, PathSubType} = childData;
+
+                    // not full data, but it contains PathType, which ensures seamless switch between nodes
+                    dispatch(
+                        preloadSchema(`${path}/${Name}`, {PathDescription: {Self: childData}}),
+                    );
+
+                    return {
+                        name: Name,
+                        type: mapPathTypeToNavigationTreeType(PathType, PathSubType),
+                        // FIXME: should only be explicitly set to true for tables with indexes
+                        // at the moment of writing there is no property to determine this, fix later
+                        expandable: true,
+                    };
+                });
+            });
 
     const handleActivePathUpdate = (activePath: string) => {
         dispatch(setCurrentSchemaPath(activePath));