ydb-embedded-ui 6.6.1 → 6.7.0

package/dist/src/containers/Tenant/Info/ExternalTable/ExternalTable.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router';
 import { EntityStatus } from '../../../../components/EntityStatus/EntityStatus';
-import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { InfoViewer } from '../../../../components/InfoViewer';
 import { formatCommonItem } from '../../../../components/InfoViewer/formatters';
 import { LinkWithIcon } from '../../../../components/LinkWithIcon/LinkWithIcon';
 import { createExternalUILink, parseQuery } from '../../../../routes';
 import { cn } from '../../../../utils/cn';
-import { useTypedSelector } from '../../../../utils/hooks';
 import { getEntityName } from '../../utils';
 import i18n from '../i18n';
 import './ExternalTable.scss';
@@ -43,10 +41,6 @@ const ExternalTable = ({ data, prepareData }) => {
     const query = parseQuery(location);
     const pathToDataSource = createExternalUILink(Object.assign(Object.assign({}, query), { schema: (_b = (_a = data === null || data === void 0 ? void 0 : data.PathDescription) === null || _a === void 0 ? void 0 : _a.ExternalTableDescription) === null || _b === void 0 ? void 0 : _b.DataSourcePath }));
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
-    const { error: schemaError } = useTypedSelector((state) => state.schema);
-    if (schemaError) {
-        return _jsx(ResponseError, { error: schemaError });
-    }
     if (!data) {
         return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }

package/dist/src/containers/Tenant/Info/View/View.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DefinitionList } from '@gravity-ui/components';
 import { Text } from '@gravity-ui/uikit';
-import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { cn } from '../../../../utils/cn';
-import { useTypedSelector } from '../../../../utils/hooks';
 import { getEntityName } from '../../utils';
 import i18n from '../i18n';
 const b = cn('ydb-view-info');
@@ -21,10 +19,6 @@ const prepareViewItems = (data) => {
 };
 export function ViewInfo({ data }) {
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
-    const { error: schemaError } = useTypedSelector((state) => state.schema);
-    if (schemaError) {
-        return _jsx(ResponseError, { error: schemaError });
-    }
     if (!data) {
         return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }

package/dist/src/containers/Tenant/ObjectGeneral/ObjectGeneral.d.ts

@@ -4,8 +4,9 @@ import './ObjectGeneral.scss';
 interface ObjectGeneralProps {
     type?: EPathType;
     tenantName: string;
+    path: string;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function ObjectGeneral(props: ObjectGeneralProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ObjectGeneral(props: ObjectGeneralProps): import("react/jsx-runtime").JSX.Element;
 export default ObjectGeneral;

package/dist/src/containers/Tenant/ObjectGeneral/ObjectGeneral.js

@@ -1,33 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useThemeValue } from '@gravity-ui/uikit';
 import { TENANT_PAGES_IDS } from '../../../store/reducers/tenant/constants';
 import { cn } from '../../../utils/cn';
 import { useTypedSelector } from '../../../utils/hooks';
 import Diagnostics from '../Diagnostics/Diagnostics';
 import { Query } from '../Query/Query';
+import { TenantNavigation } from '../TenantNavigation/TenantNavigation';
 import './ObjectGeneral.scss';
 const b = cn('object-general');
 function ObjectGeneral(props) {
     const theme = useThemeValue();
     const { tenantPage } = useTypedSelector((state) => state.tenant);
-    const renderTabContent = () => {
-        const { type, additionalTenantProps, additionalNodesProps, tenantName } = props;
+    const renderPageContent = () => {
+        const { type, additionalTenantProps, additionalNodesProps, tenantName, path } = props;
         switch (tenantPage) {
             case TENANT_PAGES_IDS.query: {
-                return _jsx(Query, { path: tenantName, theme: theme, type: type });
+                return _jsx(Query, { tenantName: tenantName, path: path, theme: theme, type: type });
             }
             default: {
-                return (_jsx(Diagnostics, { type: type, additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }));
+                return (_jsx(Diagnostics, { type: type, tenantName: tenantName, path: path, additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }));
             }
         }
     };
-    const renderContent = () => {
-        const { tenantName } = props;
-        if (!tenantName) {
-            return null;
-        }
-        return _jsx("div", { className: b(), children: renderTabContent() });
-    };
-    return renderContent();
+    return (_jsxs("div", { className: b(), children: [_jsx(TenantNavigation, {}), renderPageContent()] }));
 }
 export default ObjectGeneral;

package/dist/src/containers/Tenant/ObjectSummary/ObjectSummary.d.ts

@@ -1,13 +1,13 @@
-import type { EPathSubType } from '../../../types/api/schema';
-import { EPathType } from '../../../types/api/schema';
+import { EPathSubType, EPathType } from '../../../types/api/schema';
 import './ObjectSummary.scss';
 interface ObjectSummaryProps {
     type?: EPathType;
     subType?: EPathSubType;
-    tenantName?: string;
+    tenantName: string;
+    path: string;
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
 }
-export declare function ObjectSummary({ type, subType, tenantName, onCollapseSummary, onExpandSummary, isCollapsed, }: ObjectSummaryProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ObjectSummary({ type, subType, tenantName, path, onCollapseSummary, onExpandSummary, isCollapsed, }: ObjectSummaryProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/containers/Tenant/ObjectSummary/ObjectSummary.js

@@ -6,24 +6,24 @@ import { Button, Icon, Tabs } from '@gravity-ui/uikit';
 import qs from 'qs';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
+import { StringParam, useQueryParam } from 'use-query-params';
 import { AsyncReplicationState } from '../../../components/AsyncReplicationState';
 import { ClipboardButton } from '../../../components/ClipboardButton';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-import { CDCStreamOverview, PersQueueGroupOverview, } from '../../../components/InfoViewer/schemaOverview';
+import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon';
 import { Loader } from '../../../components/Loader';
 import SplitPane from '../../../components/SplitPane';
-import routes, { createHref } from '../../../routes';
-import { setShowPreview } from '../../../store/reducers/schema/schema';
+import { getEntityName } from '../../../containers/Tenant/utils';
+import routes, { createExternalUILink, createHref } from '../../../routes';
+import { schemaApi, setShowPreview } from '../../../store/reducers/schema/schema';
 import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, TENANT_SUMMARY_TABS_IDS, } from '../../../store/reducers/tenant/constants';
 import { setQueryTab, setSummaryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
-import { EPathType } from '../../../types/api/schema';
+import { EPathSubType, EPathType } from '../../../types/api/schema';
 import { cn } from '../../../utils/cn';
 import { DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED, DEFAULT_SIZE_TENANT_SUMMARY_KEY, } from '../../../utils/constants';
-import { formatDateTime } from '../../../utils/dataFormatters/dataFormatters';
+import { formatDateTime, formatSecondsToHours } from '../../../utils/dataFormatters/dataFormatters';
 import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import { Acl } from '../Acl/Acl';
-import { ExternalDataSourceSummary } from '../Info/ExternalDataSource/ExternalDataSource';
-import { ExternalTableSummary } from '../Info/ExternalTable/ExternalTable';
 import { SchemaTree } from '../Schema/SchemaTree/SchemaTree';
 import { SchemaViewer } from '../Schema/SchemaViewer/SchemaViewer';
 import { TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups } from '../TenantPages';
@@ -40,19 +40,17 @@ const getTenantCommonInfoState = () => {
         collapsed,
     };
 };
-export function ObjectSummary({ type, subType, tenantName, onCollapseSummary, onExpandSummary, isCollapsed, }) {
-    var _a, _b, _c;
+export function ObjectSummary({ type, subType, tenantName, path, onCollapseSummary, onExpandSummary, isCollapsed, }) {
+    var _a;
     const dispatch = useTypedDispatch();
     const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED), undefined, getTenantCommonInfoState);
-    const { data, currentSchemaPath, currentSchema: currentItem = {}, } = useTypedSelector((state) => state.schema);
     const { summaryTab = TENANT_SUMMARY_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
-    const pathData = tenantName ? (_b = (_a = data[tenantName.toString()]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self : undefined;
-    const currentObjectData = currentSchemaPath ? data[currentSchemaPath] : undefined;
-    const currentSchemaData = (_c = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _c === void 0 ? void 0 : _c.Self;
+    const { currentData: currentObjectData } = schemaApi.endpoints.getSchema.useQueryState({ path });
+    const currentSchemaData = (_a = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _a === void 0 ? void 0 : _a.Self;
     React.useEffect(() => {
         const isTable = isTableType(type);
         if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
@@ -69,70 +67,155 @@ export function ObjectSummary({ type, subType, tenantName, onCollapseSummary, on
     };
     const renderObjectOverview = () => {
         var _a;
-        const startTimeInMilliseconds = Number(currentSchemaData === null || currentSchemaData === void 0 ? void 0 : currentSchemaData.CreateStep);
-        const createdAt = startTimeInMilliseconds
-            ? formatDateTime(startTimeInMilliseconds)
-            : 'unknown';
-        const createdAtLabel = 'Created At';
-        // verbose mapping to guarantee a correct render for new path types
-        // TS will error when a new type is added but not mapped here
-        const pathTypeToComponent = {
+        if (!currentSchemaData) {
+            return undefined;
+        }
+        const { CreateStep, PathType, PathSubType, PathId, PathVersion } = currentSchemaData;
+        const overview = [];
+        overview.push({ label: i18n('summary.type'), value: PathType === null || PathType === void 0 ? void 0 : PathType.replace(/^EPathType/, '') });
+        if (PathSubType !== EPathSubType.EPathSubTypeEmpty) {
+            overview.push({
+                label: i18n('summary.subtype'),
+                value: PathSubType === null || PathSubType === void 0 ? void 0 : PathSubType.replace(/^EPathSubType/, ''),
+            });
+        }
+        overview.push({ label: i18n('summary.id'), value: PathId });
+        overview.push({ label: i18n('summary.version'), value: PathVersion });
+        overview.push({
+            label: i18n('summary.created'),
+            value: formatDateTime(CreateStep, ''),
+        });
+        const { PathDescription } = currentObjectData;
+        const title = getEntityName(PathDescription);
+        const getPathTypeOverview = {
             [EPathType.EPathTypeInvalid]: undefined,
             [EPathType.EPathTypeDir]: undefined,
-            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeTable]: () => {
+                var _a;
+                return [
+                    {
+                        label: i18n('summary.partitions'),
+                        value: (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.TablePartitions) === null || _a === void 0 ? void 0 : _a.length,
+                    },
+                ];
+            },
             [EPathType.EPathTypeSubDomain]: undefined,
             [EPathType.EPathTypeTableIndex]: undefined,
-            [EPathType.EPathTypeExtSubDomain]: undefined,
-            [EPathType.EPathTypeColumnStore]: undefined,
-            [EPathType.EPathTypeColumnTable]: undefined,
-            [EPathType.EPathTypeCdcStream]: () => _jsx(CDCStreamOverview, { data: currentObjectData }),
-            [EPathType.EPathTypePersQueueGroup]: () => (_jsx(PersQueueGroupOverview, { data: currentObjectData })),
-            [EPathType.EPathTypeExternalTable]: () => (_jsx(ExternalTableSummary, { data: currentObjectData })),
-            [EPathType.EPathTypeExternalDataSource]: () => (_jsx(ExternalDataSourceSummary, { data: currentObjectData })),
+            [EPathType.EPathTypeExtSubDomain]: () => {
+                var _a, _b;
+                return [
+                    {
+                        label: i18n('summary.paths'),
+                        value: (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.DomainDescription) === null || _a === void 0 ? void 0 : _a.PathsInside,
+                    },
+                    {
+                        label: i18n('summary.shards'),
+                        value: (_b = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.DomainDescription) === null || _b === void 0 ? void 0 : _b.ShardsInside,
+                    },
+                ];
+            },
+            [EPathType.EPathTypeColumnStore]: () => {
+                var _a, _b;
+                return [
+                    {
+                        label: i18n('summary.partitions'),
+                        value: (_b = (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.ColumnStoreDescription) === null || _a === void 0 ? void 0 : _a.ColumnShards) === null || _b === void 0 ? void 0 : _b.length,
+                    },
+                ];
+            },
+            [EPathType.EPathTypeColumnTable]: () => {
+                var _a, _b, _c;
+                return [
+                    {
+                        label: i18n('summary.partitions'),
+                        value: (_c = (_b = (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.ColumnTableDescription) === null || _a === void 0 ? void 0 : _a.Sharding) === null || _b === void 0 ? void 0 : _b.ColumnShards) === null || _c === void 0 ? void 0 : _c.length,
+                    },
+                ];
+            },
+            [EPathType.EPathTypeCdcStream]: () => {
+                const { Mode, Format } = (PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.CdcStreamDescription) || {};
+                return [
+                    {
+                        label: i18n('summary.mode'),
+                        value: Mode === null || Mode === void 0 ? void 0 : Mode.replace(/^ECdcStreamMode/, ''),
+                    },
+                    {
+                        label: i18n('summary.format'),
+                        value: Format === null || Format === void 0 ? void 0 : Format.replace(/^ECdcStreamFormat/, ''),
+                    },
+                ];
+            },
+            [EPathType.EPathTypePersQueueGroup]: () => {
+                var _a, _b, _c;
+                const pqGroup = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.PersQueueGroup;
+                const value = (_b = (_a = pqGroup === null || pqGroup === void 0 ? void 0 : pqGroup.PQTabletConfig) === null || _a === void 0 ? void 0 : _a.PartitionConfig) === null || _b === void 0 ? void 0 : _b.LifetimeSeconds;
+                return [
+                    {
+                        label: i18n('summary.partitions'),
+                        value: (_c = pqGroup === null || pqGroup === void 0 ? void 0 : pqGroup.Partitions) === null || _c === void 0 ? void 0 : _c.length,
+                    },
+                    {
+                        label: i18n('summary.retention'),
+                        value: value && formatSecondsToHours(value),
+                    },
+                ];
+            },
+            [EPathType.EPathTypeExternalTable]: () => {
+                var _a, _b;
+                const pathToDataSource = createExternalUILink(Object.assign(Object.assign({}, queryParams), { schema: (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.ExternalTableDescription) === null || _a === void 0 ? void 0 : _a.DataSourcePath }));
+                const { SourceType, DataSourcePath } = (PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.ExternalTableDescription) || {};
+                const dataSourceName = ((_b = DataSourcePath === null || DataSourcePath === void 0 ? void 0 : DataSourcePath.match(/([^/]*)\/*$/)) === null || _b === void 0 ? void 0 : _b[1]) || '';
+                return [
+                    { label: i18n('summary.source-type'), value: SourceType },
+                    {
+                        label: i18n('summary.data-source'),
+                        value: DataSourcePath && (_jsx("span", { title: DataSourcePath, children: _jsx(LinkWithIcon, { title: dataSourceName || '', url: pathToDataSource }) })),
+                    },
+                ];
+            },
+            [EPathType.EPathTypeExternalDataSource]: () => {
+                var _a;
+                return [
+                    {
+                        label: i18n('summary.source-type'),
+                        value: (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.ExternalDataSourceDescription) === null || _a === void 0 ? void 0 : _a.SourceType,
+                    },
+                ];
+            },
             [EPathType.EPathTypeView]: undefined,
             [EPathType.EPathTypeReplication]: () => {
-                var _a, _b;
-                return (_jsx(InfoViewer, { info: [
-                        {
-                            label: createdAtLabel,
-                            value: createdAt,
-                        },
-                        {
-                            label: 'State',
-                            value: (_jsx(AsyncReplicationState, { state: (_b = (_a = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _a === void 0 ? void 0 : _a.ReplicationDescription) === null || _b === void 0 ? void 0 : _b.State })),
-                        },
-                    ] }));
+                var _a;
+                const state = (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.ReplicationDescription) === null || _a === void 0 ? void 0 : _a.State;
+                if (!state) {
+                    return [];
+                }
+                return [
+                    {
+                        label: i18n('summary.state'),
+                        value: _jsx(AsyncReplicationState, { state: state }),
+                    },
+                ];
             },
         };
-        let component = (currentSchemaData === null || currentSchemaData === void 0 ? void 0 : currentSchemaData.PathType) && ((_a = pathTypeToComponent[currentSchemaData.PathType]) === null || _a === void 0 ? void 0 : _a.call(pathTypeToComponent));
-        if (!component) {
-            component = _jsx(InfoViewer, { info: [{ label: createdAtLabel, value: createdAt }] });
-        }
-        return component;
-    };
-    const renderLoader = () => {
-        // If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
-        return (_jsx("div", { children: _jsx(Loader, {}) }));
+        const pathTypeOverview = (PathType && ((_a = getPathTypeOverview[PathType]) === null || _a === void 0 ? void 0 : _a.call(getPathTypeOverview))) || [];
+        overview.push(...pathTypeOverview);
+        // filter all empty values in according this requirement
+        // https://github.com/ydb-platform/ydb-embedded-ui/issues/906
+        return _jsx(InfoViewer, { title: title, info: overview.filter((i) => i.value) });
     };
     const renderTabContent = () => {
         switch (summaryTab) {
             case TENANT_SUMMARY_TABS_IDS.acl: {
-                return _jsx(Acl, {});
+                return _jsx(Acl, { path: path });
             }
             case TENANT_SUMMARY_TABS_IDS.schema: {
-                return (_jsx(SchemaViewer, { type: type, path: currentSchemaPath, tenantName: tenantName }));
+                return _jsx(SchemaViewer, { type: type, path: path, tenantName: tenantName });
             }
             default: {
                 return renderObjectOverview();
             }
         }
     };
-    const renderTree = () => {
-        return (_jsxs("div", { className: b('tree-wrapper'), children: [_jsx("div", { className: b('tree-header'), children: i18n('summary.navigation') }), _jsx("div", { className: b('tree'), children: pathData && (_jsx(SchemaTree, { rootPath: tenantName, 
-                        // for the root pathData.Name contains the same string as tenantName,
-                        // but without the leading slash
-                        rootName: pathData.Name || String(tenantName), rootType: pathData.PathType, currentPath: currentSchemaPath })) })] }));
-    };
     const onCollapseInfoHandler = () => {
         dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     };
@@ -149,10 +232,10 @@ export function ObjectSummary({ type, subType, tenantName, onCollapseSummary, on
     };
     const renderCommonInfoControls = () => {
         const showPreview = isTableType(type) && !isIndexTableType(subType);
-        return (_jsxs(React.Fragment, { children: [showPreview && (_jsx(Button, { view: "flat-secondary", onClick: onOpenPreview, title: i18n('summary.showPreview'), children: _jsx(Icon, { data: LayoutHeaderCellsLargeFill }) })), currentSchemaPath && (_jsx(ClipboardButton, { text: currentSchemaPath, view: "flat-secondary", title: i18n('summary.copySchemaPath') })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseInfoHandler, onExpand: onExpandInfoHandler, isCollapsed: commonInfoVisibilityState.collapsed, initialDirection: "bottom" })] }));
+        return (_jsxs(React.Fragment, { children: [showPreview && (_jsx(Button, { view: "flat-secondary", onClick: onOpenPreview, title: i18n('summary.showPreview'), children: _jsx(Icon, { data: LayoutHeaderCellsLargeFill }) })), _jsx(ClipboardButton, { text: path, view: "flat-secondary", title: i18n('summary.copySchemaPath') }), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseInfoHandler, onExpand: onExpandInfoHandler, isCollapsed: commonInfoVisibilityState.collapsed, initialDirection: "bottom" })] }));
     };
     const renderEntityTypeBadge = () => {
-        const { Status, Reason } = currentItem;
+        const { Status, Reason } = currentObjectData !== null && currentObjectData !== void 0 ? currentObjectData : {};
         let message;
         if (!type && Status && Reason) {
             message = `${Status}: ${Reason}`;
@@ -160,10 +243,23 @@ export function ObjectSummary({ type, subType, tenantName, onCollapseSummary, on
         return type ? (_jsx("div", { className: b('entity-type'), children: type.replace('EPathType', '') })) : (_jsx("div", { className: b('entity-type', { error: true }), children: _jsx(HelpPopover, { content: message, offset: { left: 0 } }) }));
     };
     const renderContent = () => {
-        if (!tenantName) {
-            return null;
-        }
-        return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b({ hidden: isCollapsed }), children: _jsxs(SplitPane, { direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_TENANT_SUMMARY_KEY, onSplitStartDragAdditional: onSplitStartDragAdditional, triggerCollapse: commonInfoVisibilityState.triggerCollapse, triggerExpand: commonInfoVisibilityState.triggerExpand, minSize: [200, 52], collapsedSizes: [100, 0], children: [currentSchemaPath ? renderTree() : renderLoader(), _jsxs("div", { className: b('info'), children: [_jsxs("div", { className: b('sticky-top'), children: [_jsxs("div", { className: b('info-header'), children: [_jsxs("div", { className: b('info-title'), children: [renderEntityTypeBadge(), _jsx("div", { className: b('path-name'), children: currentSchemaPath })] }), _jsx("div", { className: b('info-controls'), children: renderCommonInfoControls() })] }), renderTabs()] }), _jsx("div", { className: b('overview-wrapper'), children: renderTabContent() })] })] }) }), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseSummary, onExpand: onExpandSummary, isCollapsed: isCollapsed, initialDirection: "left", className: b('action-button') })] }));
+        return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b({ hidden: isCollapsed }), children: _jsxs(SplitPane, { direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_TENANT_SUMMARY_KEY, onSplitStartDragAdditional: onSplitStartDragAdditional, triggerCollapse: commonInfoVisibilityState.triggerCollapse, triggerExpand: commonInfoVisibilityState.triggerExpand, minSize: [200, 52], collapsedSizes: [100, 0], children: [_jsx(ObjectTree, { tenantName: tenantName, path: path }), _jsxs("div", { className: b('info'), children: [_jsxs("div", { className: b('sticky-top'), children: [_jsxs("div", { className: b('info-header'), children: [_jsxs("div", { className: b('info-title'), children: [renderEntityTypeBadge(), _jsx("div", { className: b('path-name'), children: path })] }), _jsx("div", { className: b('info-controls'), children: renderCommonInfoControls() })] }), renderTabs()] }), _jsx("div", { className: b('overview-wrapper'), children: renderTabContent() })] })] }) }), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseSummary, onExpand: onExpandSummary, isCollapsed: isCollapsed, initialDirection: "left", className: b('action-button') })] }));
     };
     return renderContent();
 }
+function ObjectTree({ tenantName, path }) {
+    var _a;
+    const { currentData: tenantData = {}, isFetching } = schemaApi.useGetSchemaQuery({
+        path: tenantName,
+    });
+    const pathData = (_a = tenantData === null || tenantData === void 0 ? void 0 : tenantData.PathDescription) === null || _a === void 0 ? void 0 : _a.Self;
+    const [, setCurrentPath] = useQueryParam('schema', StringParam);
+    if (!pathData && isFetching) {
+        // If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
+        return (_jsx("div", { children: _jsx(Loader, {}) }));
+    }
+    return (_jsxs("div", { className: b('tree-wrapper'), children: [_jsx("div", { className: b('tree-header'), children: i18n('summary.navigation') }), _jsx("div", { className: b('tree'), children: pathData ? (_jsx(SchemaTree, { rootPath: tenantName, 
+                    // for the root pathData.Name contains the same string as tenantName,
+                    // but without the leading slash
+                    rootName: pathData.Name || tenantName, rootType: pathData.PathType, currentPath: path, onActivePathUpdate: setCurrentPath })) : null })] }));
+}

package/dist/src/containers/Tenant/Query/Issues/Issues.js

@@ -4,6 +4,7 @@ import { CircleExclamationFill, CircleInfoFill, CircleXmarkFill, TriangleExclama
 import { ArrowToggle, Button, Icon } from '@gravity-ui/uikit';
 import ShortyString from '../../../../components/ShortyString/ShortyString';
 import { cn } from '../../../../utils/cn';
+import { isNumeric } from '../../../../utils/utils';
 import { getSeverity } from './models';
 import './Issues.scss';
 const blockWrapper = cn('kv-result-issues');
@@ -63,10 +64,10 @@ function IssueSeverity({ severity }) {
     return (_jsxs("span", { className: blockIssueSeverity({ severity: shortenSeverity }), children: [_jsx(Icon, { className: blockIssueSeverity('icon'), data: severityIcons[severity] }), _jsx("span", { className: blockIssueSeverity('title'), children: shortenSeverity })] }));
 }
 function getIssuePosition(issue) {
-    const { position = {} } = issue;
-    if (!position) {
-        return false;
+    const { position } = issue;
+    if (typeof position !== 'object' || position === null || !isNumeric(position.row)) {
+        return '';
     }
-    const { file, row, column } = position;
-    return `${file ? 'file:' : ''}${row}:${column}`;
+    const { row, column } = position;
+    return isNumeric(column) ? `${row}:${column}` : `line ${row}`;
 }

package/dist/src/containers/Tenant/Query/Preview/Preview.d.ts

@@ -2,7 +2,8 @@ import type { EPathType } from '../../../../types/api/schema';
 import './Preview.scss';
 interface PreviewProps {
     database: string;
+    path: string;
     type: EPathType | undefined;
 }
-export declare const Preview: ({ database, type }: PreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Preview: ({ database, path, type }: PreviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,26 +7,26 @@ import { QueryResultTable } from '../../../../components/QueryResultTable';
 import { previewApi } from '../../../../store/reducers/preview';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { parseQueryErrorToString } from '../../../../utils/query';
 import { isExternalTableType, isTableType } from '../../utils/schema';
 import i18n from '../i18n';
 import './Preview.scss';
 const b = cn('kv-preview');
-export const Preview = ({ database, type }) => {
+export const Preview = ({ database, path, type }) => {
     const dispatch = useTypedDispatch();
     const isPreviewAvailable = isTableType(type);
-    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
-    const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
-    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTableType(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh, skip: !isPreviewAvailable });
+    const query = `--!syntax_v1\nselect * from \`${path}\` limit 32`;
+    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTableType(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autoRefreshInterval, skip: !isPreviewAvailable });
     const loading = isFetching && currentData === undefined;
     const data = currentData !== null && currentData !== void 0 ? currentData : {};
     const handleClosePreview = () => {
         dispatch(setShowPreview(false));
     };
     const renderHeader = () => {
-        return (_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('title'), children: [i18n('preview.title'), ' ', _jsx("div", { className: b('table-name'), children: currentSchemaPath })] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, { view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close'), children: _jsx(Icon, { data: Xmark, size: 18 }) })] })] }));
+        return (_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('title'), children: [i18n('preview.title'), " ", _jsx("div", { className: b('table-name'), children: path })] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, { view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close'), children: _jsx(Icon, { data: Xmark, size: 18 }) })] })] }));
     };
     if (loading) {
         return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));

package/dist/src/containers/Tenant/Query/Query.d.ts

@@ -2,6 +2,7 @@ import type { EPathType } from '../../../types/api/schema';
 import './Query.scss';
 interface QueryProps {
     theme: string;
+    tenantName: string;
     path: string;
     type?: EPathType;
 }

package/dist/src/containers/Tenant/Query/Query.scss

@@ -5,7 +5,7 @@
     @include flex-container();
 
     &__tabs {
-        padding: 13px 20px 16px;
+        padding: 0 20px 16px;
     }
 
     &__content {

package/dist/src/containers/Tenant/Query/QueryEditor/QueryEditor.d.ts

@@ -5,6 +5,7 @@ import type { EPathType } from '../../../../types/api/schema';
 import type { ExecuteQueryState } from '../../../../types/store/executeQuery';
 import './QueryEditor.scss';
 interface QueryEditorProps {
+    tenantName: string;
     path: string;
     changeUserInput: (arg: {
         input: string;
@@ -24,6 +25,7 @@ declare const _default: import("react-redux").ConnectedComponent<typeof QueryEdi
     theme: string;
     path: string;
     type?: EPathType | undefined;
+    tenantName: string;
     changeUserInput: (arg: {
         input: string;
     }) => void;

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

@@ -13,7 +13,6 @@ import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, LAST_U
 import { useQueryModes, useSetting } from '../../../../utils/hooks';
 import { LANGUAGE_YQL_ID } from '../../../../utils/monaco/yql/constants';
 import { QUERY_ACTIONS } from '../../../../utils/query';
-import { parseJson } from '../../../../utils/utils';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
 import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
 import { ExplainResult } from '../ExplainResult/ExplainResult';
@@ -39,7 +38,7 @@ const initialTenantCommonInfoState = {
 };
 function QueryEditor(props) {
     const editorOptions = useEditorOptions();
-    const { path, setTenantPath: setPath, executeQuery, type, theme, changeUserInput, showPreview, } = props;
+    const { tenantName, path, setTenantPath: setPath, executeQuery, type, theme, changeUserInput, showPreview, } = props;
     const { tenantPath: savedPath } = executeQuery;
     const [resultType, setResultType] = React.useState(RESULT_TYPES.EXECUTE);
     const [isResultLoaded, setIsResultLoaded] = React.useState(false);
@@ -51,13 +50,13 @@ function QueryEditor(props) {
     const [sendExecuteQuery, executeQueryResult] = executeQueryApi.useExecuteQueryMutation();
     const [sendExplainQuery, explainQueryResult] = explainQueryApi.useExplainQueryMutation();
     React.useEffect(() => {
-        if (savedPath !== path) {
+        if (savedPath !== tenantName) {
             if (savedPath) {
                 changeUserInput({ input: '' });
             }
-            setPath(path);
+            setPath(tenantName);
         }
-    }, [changeUserInput, setPath, path, savedPath]);
+    }, [changeUserInput, setPath, tenantName, savedPath]);
     const [resultVisibilityState, dispatchResultVisibilityState] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
     const editorRef = React.useRef();
     React.useEffect(() => {
@@ -75,18 +74,6 @@ function QueryEditor(props) {
             window.removeEventListener('resize', onChangeWindow);
         };
     }, []);
-    React.useEffect(() => {
-        const storageEventHandler = (event) => {
-            if (event.key === SAVED_QUERIES_KEY) {
-                const v = parseJson(event.newValue);
-                setSavedQueries(v);
-            }
-        };
-        window.addEventListener('storage', storageEventHandler);
-        return () => {
-            window.removeEventListener('storage', storageEventHandler);
-        };
-    }, [setSavedQueries]);
     React.useEffect(() => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     }, []);
@@ -130,7 +117,7 @@ function QueryEditor(props) {
         setResultType(RESULT_TYPES.EXECUTE);
         sendExecuteQuery({
             query,
-            database: path,
+            database: tenantName,
             mode,
             schema,
         });
@@ -151,7 +138,7 @@ function QueryEditor(props) {
         setResultType(RESULT_TYPES.EXPLAIN);
         sendExplainQuery({
             query: input,
-            database: path,
+            database: tenantName,
             mode: mode,
         });
         setIsResultLoaded(true);
@@ -287,7 +274,7 @@ function QueryEditor(props) {
     };
     return (_jsx("div", { className: b(), children: _jsxs(SplitPane, { direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_RESULT_PANE_KEY, triggerCollapse: resultVisibilityState.triggerCollapse, triggerExpand: resultVisibilityState.triggerExpand, minSize: [0, 52], collapsedSizes: [100, 0], onSplitStartDragAdditional: onSplitStartDragAdditional, children: [_jsxs("div", { className: b('pane-wrapper', {
                         top: true,
-                    }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: LANGUAGE_YQL_ID, value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) }) }), renderControls()] }), _jsx("div", { className: b('pane-wrapper'), children: _jsx(Result, { executeQueryData: executeQueryResult.data, executeQueryError: executeQueryResult.error, explainQueryData: explainQueryResult.data, explainQueryError: explainQueryResult.error, explainQueryLoading: explainQueryResult.isLoading, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) })] }) }));
+                    }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: LANGUAGE_YQL_ID, value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) }) }), renderControls()] }), _jsx("div", { className: b('pane-wrapper'), children: _jsx(Result, { executeQueryData: executeQueryResult.data, executeQueryError: executeQueryResult.error, explainQueryData: explainQueryResult.data, explainQueryError: explainQueryResult.error, explainQueryLoading: explainQueryResult.isLoading, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, theme: theme, resultType: resultType, tenantName: tenantName, path: path, showPreview: showPreview }) })] }) }));
 }
 const mapStateToProps = (state) => {
     return {
@@ -303,9 +290,9 @@ const mapDispatchToProps = {
     setTenantPath,
 };
 export default connect(mapStateToProps, mapDispatchToProps)(QueryEditor);
-function Result({ executeQueryData, executeQueryError, explainQueryData, explainQueryError, explainQueryLoading, resultVisibilityState, onExpandResultHandler, onCollapseResultHandler, type, theme, resultType, path, showPreview, }) {
+function Result({ executeQueryData, executeQueryError, explainQueryData, explainQueryError, explainQueryLoading, resultVisibilityState, onExpandResultHandler, onCollapseResultHandler, type, theme, resultType, tenantName, path, showPreview, }) {
     if (showPreview) {
-        return _jsx(Preview, { database: path, type: type });
+        return _jsx(Preview, { database: tenantName, path: path, type: type });
     }
     if (resultType === RESULT_TYPES.EXECUTE) {
         if (executeQueryData || executeQueryError) {