ydb-embedded-ui 6.12.0 → 6.13.0

package/dist/containers/Storage/PDisk/PDisk.js

@@ -5,17 +5,16 @@ import { InternalLink } from '../../../components/InternalLink';
 import { PDiskPopup } from '../../../components/PDiskPopup/PDiskPopup';
 import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
 import routes, { createHref, getPDiskPagePath } from '../../../routes';
+import { useDiskPagesAvailable } from '../../../store/reducers/capabilities/hooks';
 import { valueIsDefined } from '../../../utils';
 import { cn } from '../../../utils/cn';
-import { USE_SEPARATE_DISKS_PAGES_KEY } from '../../../utils/constants';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { useSetting } from '../../../utils/hooks';
 import { STRUCTURE } from '../../Node/NodePages';
 import './PDisk.scss';
 const b = cn('pdisk-storage');
 export const PDisk = ({ nodeId, data = {}, vDisks }) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
-    const [useSeparateDisksPages] = useSetting(USE_SEPARATE_DISKS_PAGES_KEY);
+    const diskPagesAvailable = useDiskPagesAvailable();
     const anchor = React.useRef(null);
     const showPopup = () => {
         setIsPopupVisible(true);
@@ -36,7 +35,7 @@ export const PDisk = ({ nodeId, data = {}, vDisks }) => {
             }) }));
     };
     let pDiskPath = createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' });
-    if (useSeparateDisksPages && valueIsDefined(data.PDiskId)) {
+    if (diskPagesAvailable && valueIsDefined(data.PDiskId)) {
         pDiskPath = getPDiskPagePath(data.PDiskId, nodeId);
     }
     return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", { className: b(), ref: anchor, children: [renderVDisks(), _jsxs(InternalLink, { to: pDiskPath, className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup, children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", { className: b('media-type'), children: data.Type })] })] })] }));

package/dist/containers/Storage/Storage.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ArrayParam, StringParam, useQueryParams, withDefault } from 'use-query-params';
 import { AccessDenied } from '../../components/Errors/403';
+import { isAccessError } from '../../components/Errors/PageError/PageError';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { selectNodesMap } from '../../store/reducers/nodesList';
@@ -104,11 +105,8 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
                 ? storageGroups.length
                 : storageNodes.length, entitiesCountTotal: entitiesCount.total, entitiesLoading: isLoading }));
     };
-    if (error) {
-        if (error.status === 403) {
-            return _jsx(AccessDenied, { position: "left" });
-        }
-        return _jsx(ResponseError, { error: error });
+    if (isAccessError(error)) {
+        return _jsx(AccessDenied, { position: "left" });
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: isLoading, className: b('table'), children: renderDataTable() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), error ? _jsx(ResponseError, { error: error }) : null, _jsx(TableWithControlsLayout.Table, { loading: isLoading, className: b('table'), children: currentData ? renderDataTable() : null })] }));
 };

package/dist/containers/Tablet/Tablet.js

@@ -54,7 +54,7 @@ export const Tablet = () => {
         if (loading && id !== tabletId && isFirstDataFetchRef.current) {
             return _jsx(Loader, { size: "l" });
         }
-        if (error) {
+        if (error && !currentData) {
             return _jsx(ResponseError, { error: error });
         }
         if (!tablet || !Object.keys(tablet).length) {
@@ -67,7 +67,7 @@ export const Tablet = () => {
                 path: `/tablets?TabletID=${TabletId}`,
             },
         ];
-        return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('pane-wrapper'), children: [_jsxs("div", { className: b('left-pane'), children: [_jsx("ul", { className: b('links'), children: externalLinks.map(renderExternalLinks) }), _jsxs("div", { className: b('row', { header: true }), children: [_jsx("span", { className: b('title'), children: i18n('tablet.header') }), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) }), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", { className: b('loader'), children: loading && _jsx(Loader, { size: "s" }) })] }), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: refetch })] }), _jsx("div", { className: b('rigth-pane'), children: _jsx(TabletTable, { history: history }) })] }) }));
+        return (_jsxs("div", { className: b(), children: [error ? _jsx(ResponseError, { error: error }) : null, _jsxs("div", { className: b('pane-wrapper'), children: [_jsxs("div", { className: b('left-pane'), children: [_jsx("ul", { className: b('links'), children: externalLinks.map(renderExternalLinks) }), _jsxs("div", { className: b('row', { header: true }), children: [_jsx("span", { className: b('title'), children: i18n('tablet.header') }), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) }), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", { className: b('loader'), children: loading && _jsx(Loader, { size: "s" }) })] }), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: refetch })] }), _jsx("div", { className: b('rigth-pane'), children: _jsx(TabletTable, { history: history }) })] })] }));
     };
     return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${id} — ${i18n('tablet.header')} — ${tenantName || queryClusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
 };

package/dist/containers/Tablet/TabletControls/TabletControls.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ButtonWithConfirmDialog } from '../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { selectIsUserAllowedToMakeChanges } from '../../../store/reducers/authentication/authentication';
 import { ETabletState } from '../../../types/api/tablet';
 import { useTypedSelector } from '../../../utils/hooks';
 import { b } from '../Tablet';
 import i18n from '../i18n';
 export const TabletControls = ({ tablet, fetchData }) => {
     const { TabletId, HiveId } = tablet;
-    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
     const _onKillClick = () => {
         return window.api.killTablet(TabletId);
     };

package/dist/containers/Tablets/Tablets.js

@@ -10,6 +10,7 @@ import { InternalLink } from '../../components/InternalLink';
 import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
 import routes, { createHref } from '../../routes';
+import { selectIsUserAllowedToMakeChanges } from '../../store/reducers/authentication/authentication';
 import { selectTabletsWithFqdn, tabletsApi } from '../../store/reducers/tablets';
 import { ETabletState } from '../../types/api/tablet';
 import { cn } from '../../utils/cn';
@@ -110,7 +111,7 @@ const columns = [
 function TabletActions(tablet) {
     const isDisabledRestart = tablet.State === ETabletState.Stopped;
     const dispatch = useTypedDispatch();
-    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
     return (_jsx(ButtonWithConfirmDialog, { buttonView: "outlined", dialogContent: i18n('dialog.kill'), onConfirmAction: () => {
             return window.api.killTablet(tablet.TabletId);
         }, onConfirmActionSuccess: () => {
@@ -135,8 +136,5 @@ export function Tablets({ nodeId, path, className }) {
     if (loading) {
         return _jsx(TableSkeleton, {});
     }
-    if (error) {
-        return _jsx(ResponseError, { error: error });
-    }
-    return (_jsx("div", { className: b(null, className), children: _jsx(ResizeableDataTable, { columns: columns, data: tablets, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('noTabletsData') }) }));
+    return (_jsxs("div", { className: b(null, className), children: [error ? _jsx(ResponseError, { error: error }) : null, currentData ? (_jsx(ResizeableDataTable, { columns: columns, data: tablets, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('noTabletsData') })) : null] }));
 }

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

@@ -38,11 +38,8 @@ export const Consumers = ({ path, type }) => {
     if (loading) {
         return _jsx(Loader, { size: "m" });
     }
-    if (error) {
-        return _jsx(ResponseError, { error: error });
-    }
-    if (!consumers || !consumers.length) {
+    if (!error && (!consumers || !consumers.length)) {
         return _jsx("div", { children: i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`) });
     }
-    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('controls'), children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: CONSUMERS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) }) })] }));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('controls'), children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] }), error ? _jsx(ResponseError, { error: error }) : null, consumers ? (_jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: CONSUMERS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) }) })) : null] }));
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { skipToken } from '@reduxjs/toolkit/query';
 import JSONTree from 'react-json-inspector';
 import { shallowEqual } from 'react-redux';
@@ -42,19 +42,16 @@ const Describe = ({ path, database, type }) => {
     if (loading || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
         return _jsx(Loader, { size: "m" });
     }
-    if (error) {
-        return _jsx(ResponseError, { error: error, className: b('message-container') });
-    }
-    if (!loading && !preparedDescribeData) {
+    if (!preparedDescribeData && !error) {
         return _jsx("div", { className: b('message-container'), children: "Empty" });
     }
-    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('result'), children: _jsx(JSONTree, { data: preparedDescribeData, className: b('tree'), onClick: ({ path }) => {
-                    const newValue = !(expandMap.get(path) || false);
-                    expandMap.set(path, newValue);
-                }, searchOptions: {
-                    debounceTime: 300,
-                }, isExpanded: (keypath) => {
-                    return expandMap.get(keypath) || false;
-                } }) }) }));
+    return (_jsxs("div", { className: b(), children: [error ? _jsx(ResponseError, { error: error }) : null, preparedDescribeData ? (_jsx("div", { className: b('result'), children: _jsx(JSONTree, { data: preparedDescribeData, className: b('tree'), onClick: ({ path }) => {
+                        const newValue = !(expandMap.get(path) || false);
+                        expandMap.set(path, newValue);
+                    }, searchOptions: {
+                        debounceTime: 300,
+                    }, isExpanded: (keypath) => {
+                        return expandMap.get(keypath) || false;
+                    } }) })) : null] }));
 };
 export default Describe;

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

@@ -1,5 +1,6 @@
 .kv-detailed-overview {
     display: flex;
+    flex-direction: column;
     gap: 20px;
 
     width: 100%;

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

@@ -31,23 +31,20 @@ export function Network({ tenantName }) {
     if (loading) {
         return (_jsx("div", { className: "loader", children: _jsx(Loader, { size: "l" }) }));
     }
-    if (error) {
-        return _jsx(ResponseError, { error: error });
-    }
     const netWorkInfo = currentData;
     const nodes = (_a = ((netWorkInfo === null || netWorkInfo === void 0 ? void 0 : netWorkInfo.Tenants) && netWorkInfo.Tenants[0].Nodes)) !== null && _a !== void 0 ? _a : [];
-    if (nodes.length === 0) {
+    if (!error && nodes.length === 0) {
         return _jsx("div", { className: "error", children: "no nodes data" });
     }
     const nodesGroupedByType = groupNodesByField(nodes, 'NodeType');
     const rightNodes = clickedNode ? groupNodesByField((_b = clickedNode.Peers) !== null && _b !== void 0 ? _b : [], 'NodeType') : {};
-    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('inner'), children: _jsxs("div", { className: b('nodes-row'), children: [_jsxs("div", { className: b('left'), children: [_jsx("div", { className: b('controls-wrapper'), children: _jsxs("div", { className: b('controls'), children: [_jsx(ProblemFilter, { value: filter, onChange: (v) => {
-                                                dispatch(changeFilter(v));
-                                            }, className: b('problem-filter') }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
-                                                    setShowId(!showId);
-                                                }, checked: showId, children: "ID" }) }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
-                                                    setShowRacks(!showRacks);
-                                                }, checked: showRacks, children: "Racks" }) })] }) }), _jsx(Nodes, { nodes: nodesGroupedByType, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode })] }), _jsx("div", { className: b('right'), children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", { className: b('label'), children: ["Connectivity of node", ' ', _jsx(Link, { className: b('link'), to: getDefaultNodePath(clickedNode.NodeId), children: clickedNode.NodeId }), ' ', "to other nodes"] }), _jsx("div", { className: b('nodes-row'), children: _jsx(Nodes, { nodes: rightNodes, isRight: true, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode }) })] })) : (_jsxs("div", { className: b('placeholder'), children: [_jsx("div", { className: b('placeholder-img'), children: _jsx(Icon, { data: networkIcon, width: 221, height: 204 }) }), _jsx("div", { className: b('placeholder-text'), children: "Select node to see its connectivity to other nodes" })] })) })] }) }) }));
+    return (_jsxs("div", { className: b(), children: [error ? _jsx(ResponseError, { error: error }) : null, nodes.length > 0 ? (_jsx("div", { className: b('inner'), children: _jsxs("div", { className: b('nodes-row'), children: [_jsxs("div", { className: b('left'), children: [_jsx("div", { className: b('controls-wrapper'), children: _jsxs("div", { className: b('controls'), children: [_jsx(ProblemFilter, { value: filter, onChange: (v) => {
+                                                    dispatch(changeFilter(v));
+                                                }, className: b('problem-filter') }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
+                                                        setShowId(!showId);
+                                                    }, checked: showId, children: "ID" }) }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
+                                                        setShowRacks(!showRacks);
+                                                    }, checked: showRacks, children: "Racks" }) })] }) }), _jsx(Nodes, { nodes: nodesGroupedByType, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode })] }), _jsx("div", { className: b('right'), children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", { className: b('label'), children: ["Connectivity of node", ' ', _jsx(Link, { className: b('link'), to: getDefaultNodePath(clickedNode.NodeId), children: clickedNode.NodeId }), ' ', "to other nodes"] }), _jsx("div", { className: b('nodes-row'), children: _jsx(Nodes, { nodes: rightNodes, isRight: true, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode }) })] })) : (_jsxs("div", { className: b('placeholder'), children: [_jsx("div", { className: b('placeholder-img'), children: _jsx(Icon, { data: networkIcon, width: 221, height: 204 }) }), _jsx("div", { className: b('placeholder-text'), children: "Select node to see its connectivity to other nodes" })] })) })] }) })) : null] }));
 }
 function Nodes({ nodes, isRight, showId, showRacks, clickedNode, onClickNode }) {
     const filter = useTypedSelector(selectProblemFilter);

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

@@ -4,6 +4,7 @@
     display: flex;
     overflow: auto;
     flex-grow: 1;
+    flex-direction: column;
     justify-content: space-between;
 
     max-width: 1305px;

package/dist/containers/Tenant/Diagnostics/Overview/Overview.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import { EPathType } from '../../../../types/api/schema';
 interface OverviewProps {
     type?: EPathType;
     path: string;
     database: string;
 }
-declare function Overview({ type, path, database }: OverviewProps): string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+declare function Overview({ type, path, database }: OverviewProps): import("react/jsx-runtime").JSX.Element;
 export default Overview;

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { shallowEqual } from 'react-redux';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
@@ -65,9 +66,6 @@ function Overview({ type, path, database }) {
     if (entityLoading || entityNotReady) {
         return _jsx(Loader, { size: "m" });
     }
-    if (schemaError || overviewError) {
-        return _jsx(ResponseError, { error: schemaError || overviewError });
-    }
-    return renderContent();
+    return (_jsxs(React.Fragment, { children: [schemaError ? _jsx(ResponseError, { error: schemaError }) : null, overviewError ? _jsx(ResponseError, { error: overviewError }) : null, overviewError && !rawData ? null : renderContent()] }));
 }
 export default Overview;

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { ResponseError } from '../../../../../components/Errors/ResponseError';
 import { InfoViewer } from '../../../../../components/InfoViewer';
 import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
@@ -58,8 +59,6 @@ export const TopicStats = ({ path }) => {
     // If there is at least some empty data object
     // we initialize its fields with zero values
     // so no data at all is considered to be error as well
-    if (error || !data) {
-        return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('title'), children: "Stats" }), _jsx(ResponseError, { error: error })] }));
-    }
-    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('title'), children: "Stats" }), _jsx("div", { className: b('info'), children: _jsx(InfoViewer, { info: prepareTopicInfo(data), multilineLabels: true }) }), _jsx("div", { className: b('bytes-written'), children: _jsx(InfoViewer, { info: prepareBytesWrittenInfo(data) }) })] }));
+    const errorContent = error || !data ? _jsx(ResponseError, { error: error }) : null;
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('title'), children: "Stats" }), errorContent, data ? (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('info'), children: _jsx(InfoViewer, { info: prepareTopicInfo(data), multilineLabels: true }) }), _jsx("div", { className: b('bytes-written'), children: _jsx(InfoViewer, { info: prepareBytesWrittenInfo(data) }) })] })) : null] }));
 };

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

@@ -64,10 +64,7 @@ export const Partitions = ({ path }) => {
         if (loading) {
             return _jsx(TableSkeleton, { className: b('loader') });
         }
-        if (error) {
-            return _jsx(ResponseError, { error: error });
-        }
         return (_jsx(ResizeableDataTable, { columnsWidthLSKey: PARTITIONS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: partitionsToRender, columns: columnsToShow, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }));
     };
-    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('controls'), children: renderControls() }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: renderContent() }) })] }));
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('controls'), children: renderControls() }), error ? _jsx(ResponseError, { error: error }) : null, _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: partitionsData ? renderContent() : null }) })] }));
 };

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

@@ -7,13 +7,13 @@ import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '
 import { b } from './utils';
 export function TenantOverviewTableLayout({ title, error, loading, tableClassNameModifiers = {}, ...props }) {
     const renderContent = () => {
-        if (error) {
-            return _jsx(ResponseError, { error: error });
+        if (error && props.data.length === 0) {
+            return null;
         }
         if (loading) {
             return _jsx(TableSkeleton, { rows: TENANT_OVERVIEW_TABLES_LIMIT });
         }
         return _jsx(ResizeableDataTable, { settings: TENANT_OVERVIEW_TABLES_SETTINGS, ...props });
     };
-    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('table', tableClassNameModifiers), children: renderContent() })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: title }), error ? _jsx(ResponseError, { error: error }) : null, _jsx("div", { className: b('table', tableClassNameModifiers), children: renderContent() })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "nodes" | "queries" | "groups" | "no-data" | "top" | "shards" | "tables" | "no-pools-data" | "top-nodes.empty-data" | "top-groups.empty-data" | "by-pools-usage" | "by-cpu-time" | "by-cpu-usage" | "by-load" | "by-memory" | "by-usage" | "by-size" | "cards.cpu-label" | "cards.storage-label" | "cards.memory-label" | "charts.queries-per-second" | "charts.transaction-latency" | "charts.cpu-usage" | "charts.storage-usage" | "charts.memory-usage" | "storage.tablet-storage-title" | "storage.tablet-storage-description" | "storage.db-storage-title" | "storage.db-storage-description" | "executed-last-hour", params?: import("@gravity-ui/i18n").Params) => string;
+declare const _default: (key: "queries" | "nodes" | "groups" | "no-data" | "top" | "shards" | "tables" | "no-pools-data" | "top-nodes.empty-data" | "top-groups.empty-data" | "by-pools-usage" | "by-cpu-time" | "by-cpu-usage" | "by-load" | "by-memory" | "by-usage" | "by-size" | "cards.cpu-label" | "cards.storage-label" | "cards.memory-label" | "charts.queries-per-second" | "charts.transaction-latency" | "charts.cpu-usage" | "charts.storage-usage" | "charts.memory-usage" | "storage.tablet-storage-title" | "storage.tablet-storage-description" | "storage.db-storage-title" | "storage.db-storage-description" | "executed-last-hour", params?: import("@gravity-ui/i18n").Params) => string;
 export default _default;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { DateRange } from '../../../../components/DateRange';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { Search } from '../../../../components/Search';
 import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
@@ -55,8 +56,8 @@ export const TopQueries = ({ tenantName, type }) => {
         dispatch(setTopQueriesFilters(value));
     };
     const renderContent = () => {
-        if (error) {
-            return _jsx("div", { className: "error", children: parseQueryErrorToString(error) });
+        if (error && !data) {
+            return null;
         }
         if (!data || isColumnEntityType(type)) {
             return i18n('no-data');
@@ -66,5 +67,5 @@ export const TopQueries = ({ tenantName, type }) => {
     const renderControls = () => {
         return (_jsxs(React.Fragment, { children: [_jsx(Search, { value: filters.text, onChange: handleTextSearchUpdate, placeholder: i18n('filter.text.placeholder'), className: b('search') }), _jsx(DateRange, { from: filters.from, to: filters.to, onChange: handleDateRangeChange })] }));
     };
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), error ? _jsx(ResponseError, { error: parseQueryErrorToString(error) }) : null, _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
 };

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { useLocation } from 'react-router-dom';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { setShardsQueryFilters, shardApi, } from '../../../../store/reducers/shardsWorkload/shardsWorkload';
@@ -133,13 +134,13 @@ export const TopShards = ({ tenantName, path, type }) => {
         return _jsx(Filters, { value: filters, onChange: handleFiltersChange });
     };
     const renderContent = () => {
-        if (error) {
-            return _jsx("div", { className: "error", children: parseQueryErrorToString(error) });
+        if (error && !data) {
+            return null;
         }
         if (!data || isColumnEntityType(type)) {
             return i18n('no-data');
         }
         return (_jsx(ResizeableDataTable, { columnsWidthLSKey: TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, columns: tableColumns, data: data, settings: TABLE_SETTINGS, onSort: onSort, sortOrder: stringToDataTableSortOrder(sortOrder) }));
     };
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), filters.mode === EShardsWorkloadMode.History && (_jsx("div", { className: b('hint'), children: i18n('description') })), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), filters.mode === EShardsWorkloadMode.History && (_jsx("div", { className: b('hint'), children: i18n('description') })), error ? _jsx(ResponseError, { error: parseQueryErrorToString(error) }) : null, _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
 };

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

@@ -2,11 +2,11 @@ import type { IQueryResult } from '../../../../types/store/query';
 import './ExecuteResult.scss';
 interface ExecuteResultProps {
     data: IQueryResult | undefined;
-    stats: IQueryResult['stats'] | undefined;
     error: unknown;
     isResultsCollapsed?: boolean;
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
+    theme?: string;
 }
-export declare function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }: ExecuteResultProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExecuteResult({ data, error, isResultsCollapsed, onCollapseResults, onExpandResults, theme, }: ExecuteResultProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.js

@@ -6,39 +6,56 @@ import { ClipboardButton } from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { YDBGraph } from '../../../../components/Graph/Graph';
 import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
 import { QueryResultTable } from '../../../../components/QueryResultTable/QueryResultTable';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
 import { getArray } from '../../../../utils';
 import { cn } from '../../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useTypedDispatch } from '../../../../utils/hooks';
 import { parseQueryError } from '../../../../utils/query';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
+import { SimplifiedPlan } from '../ExplainResult/components/SimplifiedPlan/SimplifiedPlan';
 import { ResultIssues } from '../Issues/Issues';
 import { QueryDuration } from '../QueryDuration/QueryDuration';
+import { QuerySettingsBanner } from '../QuerySettingsBanner/QuerySettingsBanner';
 import { getPreparedResult } from '../utils/getPreparedResult';
+import i18n from './i18n';
+import { getPlan } from './utils';
 import './ExecuteResult.scss';
 const b = cn('ydb-query-execute-result');
 const resultOptionsIds = {
     result: 'result',
     stats: 'stats',
+    schema: 'schema',
+    simplified: 'simplified',
 };
-const resultOptions = [
-    { value: resultOptionsIds.result, content: 'Result' },
-    { value: resultOptionsIds.stats, content: 'Stats' },
-];
-export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }) {
+export function ExecuteResult({ data, error, isResultsCollapsed, onCollapseResults, onExpandResults, theme, }) {
     var _a, _b, _c;
     const [selectedResultSet, setSelectedResultSet] = React.useState(0);
     const [activeSection, setActiveSection] = React.useState(resultOptionsIds.result);
-    const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useTypedDispatch();
+    const stats = data === null || data === void 0 ? void 0 : data.stats;
     const resultsSetsCount = (_a = data === null || data === void 0 ? void 0 : data.resultSets) === null || _a === void 0 ? void 0 : _a.length;
     const isMulti = resultsSetsCount && resultsSetsCount > 0;
     const currentResult = isMulti ? (_b = data === null || data === void 0 ? void 0 : data.resultSets) === null || _b === void 0 ? void 0 : _b[selectedResultSet].result : data === null || data === void 0 ? void 0 : data.result;
     const currentColumns = isMulti ? (_c = data === null || data === void 0 ? void 0 : data.resultSets) === null || _c === void 0 ? void 0 : _c[selectedResultSet].columns : data === null || data === void 0 ? void 0 : data.columns;
     const textResults = getPreparedResult(currentResult);
     const copyDisabled = !textResults.length;
+    const { plan, simplifiedPlan } = React.useMemo(() => getPlan(data), [data]);
+    const resultOptions = [
+        { value: resultOptionsIds.result, content: i18n('action.result') },
+        { value: resultOptionsIds.stats, content: i18n('action.stats') },
+    ];
+    if (plan) {
+        resultOptions.push({ value: resultOptionsIds.schema, content: i18n('action.schema') });
+    }
+    if (simplifiedPlan) {
+        resultOptions.push({
+            value: resultOptionsIds.simplified,
+            content: i18n('action.explain-plan'),
+        });
+    }
     const parsedError = parseQueryError(error);
     React.useEffect(() => {
         return () => {
@@ -51,7 +68,7 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
     const renderResultTable = (result, columns) => {
         return _jsx(QueryResultTable, { data: result, columns: columns, settings: { sortable: false } });
     };
-    const renderContent = () => {
+    const renderResult = () => {
         return (_jsxs(React.Fragment, { children: [isMulti && resultsSetsCount > 1 && (_jsx("div", { children: _jsx(Tabs, { className: b('result-tabs'), size: "l", items: getArray(resultsSetsCount).map((item) => ({
                             id: String(item),
                             title: `Result #${item + 1}`,
@@ -61,30 +78,49 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         return (_jsx(ClipboardButton, { text: textResults, view: "flat-secondary", title: "Copy results", disabled: copyDisabled }));
     };
     const renderStats = () => {
-        const content = (_jsx(JSONTree, { data: stats, isExpanded: () => true, className: b('inspector'), searchOptions: {
-                debounceTime: 300,
-            } }));
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('inspector', { fullscreen: true }), children: content }) }))] }));
+        return (_jsx("div", { className: b('inspector'), children: _jsx(JSONTree, { data: stats, isExpanded: () => true, searchOptions: {
+                    debounceTime: 300,
+                } }) }));
     };
-    const renderResult = () => {
-        const content = renderContent();
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper'), children: content }) }))] }));
+    const renderSchema = () => {
+        const isEnoughDataForGraph = (plan === null || plan === void 0 ? void 0 : plan.links) && (plan === null || plan === void 0 ? void 0 : plan.nodes) && (plan === null || plan === void 0 ? void 0 : plan.nodes.length);
+        if (!isEnoughDataForGraph) {
+            return i18n('description.graph-is-not-supported');
+        }
+        return (_jsx("div", { className: b('explain-canvas-container'), children: _jsx(YDBGraph, { data: plan }, theme) }));
+    };
+    const renderSimplified = () => {
+        if (!simplifiedPlan) {
+            return null;
+        }
+        return _jsx(SimplifiedPlan, { plan: simplifiedPlan });
     };
     const renderIssues = () => {
         if (!parsedError) {
             return null;
         }
         if (typeof parsedError === 'object') {
-            const content = _jsx(ResultIssues, { data: parsedError });
-            return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper', b('result')), children: content }) }))] }));
+            return _jsx(ResultIssues, { data: parsedError });
         }
         return _jsx("div", { className: b('error'), children: parsedError });
     };
     const renderResultSection = () => {
-        if (activeSection === resultOptionsIds.result && !error) {
+        if (error) {
+            return renderIssues();
+        }
+        if (activeSection === resultOptionsIds.result) {
             return renderResult();
         }
-        return (_jsxs("div", { className: b('result'), children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] }));
+        if (activeSection === resultOptionsIds.stats) {
+            return renderStats();
+        }
+        if (activeSection === resultOptionsIds.schema) {
+            return renderSchema();
+        }
+        if (activeSection === resultOptionsIds.simplified) {
+            return renderSimplified();
+        }
+        return null;
     };
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls'), children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: error }), stats && !error && (_jsxs(React.Fragment, { children: [_jsx(QueryDuration, { duration: stats === null || stats === void 0 ? void 0 : stats.DurationUs }), _jsx(Divider, {}), _jsx(RadioButton, { options: resultOptions, value: activeSection, onUpdate: onSelectSection })] }))] }), _jsxs("div", { className: b('controls-left'), children: [renderClipboardButton(), _jsx(EnableFullscreenButton, {}), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] })] }), renderResultSection()] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls'), children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: error }), stats && !error && (_jsxs(React.Fragment, { children: [_jsx(QueryDuration, { duration: stats === null || stats === void 0 ? void 0 : stats.DurationUs }), _jsx(Divider, {}), _jsx(RadioButton, { options: resultOptions, value: activeSection, onUpdate: onSelectSection })] }))] }), _jsxs("div", { className: b('controls-left'), children: [renderClipboardButton(), _jsx(EnableFullscreenButton, {}), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] })] }), _jsx(QuerySettingsBanner, {}), _jsx(Fullscreen, { children: renderResultSection() })] }));
 }

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

@@ -57,14 +57,18 @@
         gap: 4px;
     }
     &__inspector {
+        overflow: auto;
+
+        width: 100%;
+        height: 100%;
         padding: 15px 10px;
         @include json-tree-styles();
-        &_fullscreen {
-            overflow: auto;
+    }
 
-            width: 100%;
-            height: 100%;
-            padding: 10px;
-        }
+    &__explain-canvas-container {
+        overflow-y: auto;
+
+        width: 100%;
+        height: 100%;
     }
 }

package/dist/containers/Tenant/Query/ExecuteResult/i18n/en.json

@@ -0,0 +1,7 @@
+{
+    "description.graph-is-not-supported": "Graph can not be rendered",
+    "action.result": "Result",
+    "action.stats": "Stats",
+    "action.schema": "Schema",
+    "action.explain-plan": "Explain Plan"
+}

package/dist/containers/Tenant/Query/ExecuteResult/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "description.graph-is-not-supported" | "action.result" | "action.stats" | "action.schema" | "action.explain-plan", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Query/ExecuteResult/i18n/index.js

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-execute-result';
+export default registerKeysets(COMPONENT, { en });

package/dist/containers/Tenant/Query/ExecuteResult/utils.d.ts

@@ -0,0 +1,18 @@
+import type { IQueryResult } from '../../../../types/store/query';
+export declare function getPlan(data: IQueryResult | undefined): {
+    plan?: undefined;
+    simplifiedPlan?: undefined;
+} | {
+    plan: {
+        tables: import("../../../../types/api/query").PlanTable[] | undefined;
+        nodes: import("@gravity-ui/paranoid").GraphNode<import("@gravity-ui/paranoid").ExplainPlanNodeData>[];
+        links: import("@gravity-ui/paranoid").Link[];
+    } | undefined;
+    simplifiedPlan: import("../../../../store/reducers/explainQuery/types").SimplifiedPlanItem[] | undefined;
+} | {
+    plan: {
+        nodes: import("@gravity-ui/paranoid").GraphNode<import("@gravity-ui/paranoid").ExplainPlanNodeData>[];
+        links: import("@gravity-ui/paranoid").Link[];
+    };
+    simplifiedPlan?: undefined;
+};