ydb-embedded-ui 6.4.0 → 6.6.0

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useHistory, useLocation } from 'react-router';
+import { DateRange } from '../../../../components/DateRange';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { Search } from '../../../../components/Search';
+import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
+import { parseQuery } from '../../../../routes';
+import { changeUserInput } from '../../../../store/reducers/executeQuery';
+import { setTopQueriesFilters, topQueriesApi, } from '../../../../store/reducers/executeTopQueries/executeTopQueries';
+import { TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../store/reducers/tenant/constants';
+import { cn } from '../../../../utils/cn';
+import { isSortableTopQueriesProperty } from '../../../../utils/diagnostics';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../utils/query';
+import { TenantTabsGroups, getTenantPath } from '../../TenantPages';
+import { QUERY_TABLE_SETTINGS } from '../../utils/constants';
+import { isColumnEntityType } from '../../utils/schema';
+import { TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, getTopQueriesColumns } from './getTopQueriesColumns';
+import i18n from './i18n';
+import './TopQueries.scss';
+const b = cn('kv-top-queries');
+export const TopQueries = ({ path, type }) => {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const history = useHistory();
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const filters = useTypedSelector((state) => state.executeTopQueries);
+    const { currentData, isFetching, error } = topQueriesApi.useGetTopQueriesQuery({
+        database: path,
+        filters,
+    }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const rawColumns = getTopQueriesColumns();
+    const columns = rawColumns.map((column) => (Object.assign(Object.assign({}, column), { sortable: isSortableTopQueriesProperty(column.name) })));
+    const handleRowClick = React.useCallback((row) => {
+        const { QueryText: input } = row;
+        dispatch(changeUserInput({ input }));
+        const queryParams = parseQuery(location);
+        const queryPath = getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.query, [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery }));
+        history.push(queryPath);
+    }, [dispatch, history, location]);
+    const handleTextSearchUpdate = (text) => {
+        dispatch(setTopQueriesFilters({ text }));
+    };
+    const handleDateRangeChange = (value) => {
+        dispatch(setTopQueriesFilters(value));
+    };
+    const renderContent = () => {
+        if (error) {
+            return _jsx("div", { className: "error", children: parseQueryErrorToString(error) });
+        }
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, columns: columns, data: data, settings: QUERY_TABLE_SETTINGS, onRowClick: handleRowClick, rowClassName: () => b('row') }));
+    };
+    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() })] }));
+};

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

@@ -0,0 +1,146 @@
+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';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
+import { setShardsQueryFilters, shardApi, } from '../../../../store/reducers/shardsWorkload/shardsWorkload';
+import { EShardsWorkloadMode } from '../../../../store/reducers/shardsWorkload/types';
+import { cn } from '../../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS } from '../../../../utils/constants';
+import { formatDateTime } from '../../../../utils/dataFormatters/dataFormatters';
+import { isSortableTopShardsProperty } from '../../../../utils/diagnostics';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../utils/query';
+import { isColumnEntityType } from '../../utils/schema';
+import { Filters } from './Filters';
+import { TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, getShardsWorkloadColumns } from './getTopShardsColumns';
+import i18n from './i18n';
+import './TopShards.scss';
+const b = cn('top-shards');
+const TABLE_SETTINGS = Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false, externalSort: true, disableSortReset: true, defaultOrder: DataTable.DESCENDING });
+const tableColumnsNames = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    DataSize: 'DataSize',
+    Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
+};
+function prepareDateTimeValue(value) {
+    if (!value) {
+        return '–';
+    }
+    return formatDateTime(new Date(value).getTime());
+}
+function stringToDataTableSortOrder(value) {
+    return value
+        ? value.split(',').map((columnId) => ({
+            columnId,
+            order: DataTable.DESCENDING,
+        }))
+        : undefined;
+}
+function stringToQuerySortOrder(value) {
+    return value
+        ? value.split(',').map((columnId) => ({
+            columnId,
+            order: 'DESC',
+        }))
+        : undefined;
+}
+function dataTableToStringSortOrder(value = []) {
+    const sortOrders = Array.isArray(value) ? value : [value];
+    return sortOrders.map(({ columnId }) => columnId).join(',');
+}
+function fillDateRangeFor(value) {
+    value.to = Date.now();
+    value.from = value.to - HOUR_IN_SECONDS * 1000;
+    return value;
+}
+export const TopShards = ({ tenantPath, type }) => {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const storeFilters = useTypedSelector((state) => state.shardsWorkload);
+    // default filters shouldn't propagate into URL until user interacts with the control
+    // redux initial value can't be used, as it synchronizes with URL
+    const [filters, setFilters] = React.useState(() => {
+        const defaultValue = Object.assign({}, storeFilters);
+        if (!defaultValue.mode) {
+            defaultValue.mode = EShardsWorkloadMode.Immediate;
+        }
+        if (!defaultValue.from && !defaultValue.to) {
+            fillDateRangeFor(defaultValue);
+        }
+        return defaultValue;
+    });
+    const [sortOrder, setSortOrder] = React.useState(tableColumnsNames.CPUCores);
+    const { data: result, isFetching, error, } = shardApi.useSendShardQueryQuery({
+        database: tenantPath,
+        path: currentSchemaPath,
+        sortOrder: stringToQuerySortOrder(sortOrder),
+        filters,
+    }, { pollingInterval: autorefresh });
+    const loading = isFetching && result === undefined;
+    const { result: data } = result !== null && result !== void 0 ? result : {};
+    const onSort = (newSortOrder) => {
+        // omit information about sort order to disable ASC order, only DESC makes sense for top shards
+        // use a string (and not the DataTable default format) to prevent reference change,
+        // which would cause an excess state change, to avoid repeating requests
+        setSortOrder(dataTableToStringSortOrder(newSortOrder));
+    };
+    const handleFiltersChange = (value) => {
+        const newStateValue = Object.assign({}, value);
+        const isDateRangePristine = !storeFilters.from && !storeFilters.to && !value.from && !value.to;
+        if (isDateRangePristine) {
+            switch (value.mode) {
+                case EShardsWorkloadMode.Immediate:
+                    newStateValue.from = newStateValue.to = undefined;
+                    break;
+                case EShardsWorkloadMode.History:
+                    // should default to the current datetime every time history mode activates
+                    fillDateRangeFor(newStateValue);
+                    break;
+            }
+        }
+        dispatch(setShardsQueryFilters(value));
+        setFilters((state) => (Object.assign(Object.assign({}, state), newStateValue)));
+    };
+    const tableColumns = React.useMemo(() => {
+        const rawColumns = getShardsWorkloadColumns(tenantPath, location);
+        const columns = rawColumns.map((column) => (Object.assign(Object.assign({}, column), { sortable: isSortableTopShardsProperty(column.name) })));
+        if (filters.mode === EShardsWorkloadMode.History) {
+            // after NodeId
+            columns.splice(5, 0, {
+                name: tableColumnsNames.PeakTime,
+                render: ({ row }) => {
+                    return prepareDateTimeValue(row.PeakTime);
+                },
+                sortable: false,
+            });
+            columns.push({
+                name: tableColumnsNames.IntervalEnd,
+                render: ({ row }) => {
+                    return prepareDateTimeValue(row.IntervalEnd);
+                },
+            });
+        }
+        return columns;
+    }, [filters.mode, tenantPath, location]);
+    const renderControls = () => {
+        return _jsx(Filters, { value: filters, onChange: handleFiltersChange });
+    };
+    const renderContent = () => {
+        if (error) {
+            return _jsx("div", { className: "error", children: parseQueryErrorToString(error) });
+        }
+        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() })] }));
+};

package/dist/src/containers/Tenant/Info/View/View.d.ts

@@ -0,0 +1,7 @@
+import type { TEvDescribeSchemeResult } from '../../../../types/api/schema';
+import './View.scss';
+interface ViewInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+export declare function ViewInfo({ data }: ViewInfoProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,32 @@
+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');
+import './View.scss';
+const prepareViewItems = (data) => {
+    var _a, _b;
+    const queryText = (_b = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.ViewDescription) === null || _b === void 0 ? void 0 : _b.QueryText;
+    return [
+        {
+            name: i18n('view.query-text'),
+            copyText: queryText,
+            content: (_jsx(Text, { variant: "code-2", wordBreak: "break-word", children: queryText })),
+        },
+    ];
+};
+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"] });
+    }
+    return (_jsxs("div", { className: b(null), children: [_jsx("div", { className: b('title'), children: entityName }), _jsx(DefinitionList, { nameMaxWidth: 200, copyPosition: "outside", className: b('properties-list'), items: prepareViewItems(data) })] }));
+}

package/dist/src/containers/Tenant/Info/i18n/en.json

@@ -0,0 +1,9 @@
+{
+    "external-objects.source-type": "Source Type",
+    "external-objects.data-source": "Data Source",
+    "external-objects.location": "Location",
+    "external-objects.auth-method": "Auth Method",
+    "external-objects.auth-method.none": "None",
+    "external-objects.auth-method.service-account": "Service Account",
+    "view.query-text": "Query Text"
+}

package/dist/src/containers/Tenant/Info/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "external-objects.source-type" | "external-objects.data-source" | "external-objects.location" | "external-objects.auth-method" | "external-objects.auth-method.none" | "external-objects.auth-method.service-account" | "view.query-text", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/src/containers/Tenant/Info/i18n/index.js

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

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

@@ -0,0 +1,13 @@
+import type { EPathSubType } from '../../../types/api/schema';
+import { EPathType } from '../../../types/api/schema';
+import './ObjectSummary.scss';
+interface ObjectSummaryProps {
+    type?: EPathType;
+    subType?: EPathSubType;
+    tenantName?: 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 {};

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

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
+import { LayoutHeaderCellsLargeFill } from '@gravity-ui/icons';
+import { Button, Icon, Tabs } from '@gravity-ui/uikit';
+import qs from 'qs';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import { AsyncReplicationState } from '../../../components/AsyncReplicationState';
+import { ClipboardButton } from '../../../components/ClipboardButton';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import { CDCStreamOverview, PersQueueGroupOverview, } from '../../../components/InfoViewer/schemaOverview';
+import { Loader } from '../../../components/Loader';
+import SplitPane from '../../../components/SplitPane';
+import routes, { createHref } from '../../../routes';
+import { 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 { 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 { 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';
+import i18n from '../i18n';
+import { PaneVisibilityActionTypes, PaneVisibilityToggleButtons, paneVisibilityToggleReducerCreator, } from '../utils/paneVisibilityToggleHelpers';
+import { isIndexTableType, isTableType } from '../utils/schema';
+import './ObjectSummary.scss';
+const b = cn('object-summary');
+const getTenantCommonInfoState = () => {
+    const collapsed = Boolean(localStorage.getItem(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED));
+    return {
+        triggerExpand: false,
+        triggerCollapse: false,
+        collapsed,
+    };
+};
+export function ObjectSummary({ type, subType, tenantName, onCollapseSummary, onExpandSummary, isCollapsed, }) {
+    var _a, _b, _c;
+    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;
+    React.useEffect(() => {
+        const isTable = isTableType(type);
+        if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
+            dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
+        }
+    }, [dispatch, type, summaryTab]);
+    const renderTabs = () => {
+        const isTable = isTableType(type);
+        const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
+        return (_jsx("div", { className: b('tabs'), children: _jsx(Tabs, { size: "l", items: tabsItems, activeTab: summaryTab, wrapTo: ({ id }, node) => {
+                    const path = createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { name: tenantName, [TenantTabsGroups.summaryTab]: id }));
+                    return (_jsx(Link, { to: path, className: b('tab'), children: node }, id));
+                }, allowNotSelected: true }) }));
+    };
+    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 = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [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.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 })),
+                        },
+                    ] }));
+            },
+        };
+        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 renderTabContent = () => {
+        switch (summaryTab) {
+            case TENANT_SUMMARY_TABS_IDS.acl: {
+                return _jsx(Acl, {});
+            }
+            case TENANT_SUMMARY_TABS_IDS.schema: {
+                return (_jsx(SchemaViewer, { type: type, path: currentSchemaPath, 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);
+    };
+    const onExpandInfoHandler = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
+    const onSplitStartDragAdditional = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.clear);
+    };
+    const onOpenPreview = () => {
+        dispatch(setShowPreview(true));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+    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" })] }));
+    };
+    const renderEntityTypeBadge = () => {
+        const { Status, Reason } = currentItem;
+        let message;
+        if (!type && Status && Reason) {
+            message = `${Status}: ${Reason}`;
+        }
+        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 renderContent();
+}

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

@@ -0,0 +1,12 @@
+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;
+}
+export declare function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }: ExecuteResultProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { RadioButton, Tabs } from '@gravity-ui/uikit';
+import JSONTree from 'react-json-inspector';
+import { ClipboardButton } from '../../../../components/ClipboardButton';
+import Divider from '../../../../components/Divider/Divider';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+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 { parseQueryError } from '../../../../utils/query';
+import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
+import { ResultIssues } from '../Issues/Issues';
+import { QueryDuration } from '../QueryDuration/QueryDuration';
+import { getPreparedResult } from '../utils/getPreparedResult';
+import './ExecuteResult.scss';
+const b = cn('ydb-query-execute-result');
+const resultOptionsIds = {
+    result: 'result',
+    stats: 'stats',
+};
+const resultOptions = [
+    { value: resultOptionsIds.result, content: 'Result' },
+    { value: resultOptionsIds.stats, content: 'Stats' },
+];
+export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }) {
+    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 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 parsedError = parseQueryError(error);
+    React.useEffect(() => {
+        return () => {
+            dispatch(disableFullscreen());
+        };
+    }, [dispatch]);
+    const onSelectSection = (value) => {
+        setActiveSection(value);
+    };
+    const renderResultTable = (result, columns) => {
+        return _jsx(QueryResultTable, { data: result, columns: columns, settings: { sortable: false } });
+    };
+    const renderContent = () => {
+        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}`,
+                        })), activeTab: String(selectedResultSet), onSelectTab: (tabId) => setSelectedResultSet(Number(tabId)) }) })), _jsx("div", { className: b('result'), children: renderResultTable(currentResult, currentColumns) })] }));
+    };
+    const renderClipboardButton = () => {
+        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 }) }))] }));
+    };
+    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 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("div", { className: b('error'), children: parsedError });
+    };
+    const renderResultSection = () => {
+        if (activeSection === resultOptionsIds.result && !error) {
+            return renderResult();
+        }
+        return (_jsxs("div", { className: b('result'), children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] }));
+    };
+    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()] }));
+}