ydb-embedded-ui 6.10.3 → 6.12.0

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

@@ -3,26 +3,17 @@ import DataTable from '@gravity-ui/react-data-table';
 import { OneLineQueryWithPopover, TruncatedQuery, } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { cn } from '../../../../utils/cn';
 import { formatDateTime, formatNumber } from '../../../../utils/dataFormatters/dataFormatters';
+import { TOP_QUERIES_COLUMNS_IDS } from '../../../../utils/diagnostics';
 import { generateHash } from '../../../../utils/generateHash';
-import { parseUsToMs } from '../../../../utils/timeParsers';
+import { formatToMs, parseUsToMs } from '../../../../utils/timeParsers';
 import { MAX_QUERY_HEIGHT } from '../../utils/constants';
 import './TopQueries.scss';
 const b = cn('kv-top-queries');
 export const TOP_QUERIES_COLUMNS_WIDTH_LS_KEY = 'topQueriesColumnsWidth';
-const TOP_QUERIES_COLUMNS_IDS = {
-    CPUTimeUs: 'CPUTimeUs',
-    QueryText: 'QueryText',
-    EndTime: 'EndTime',
-    ReadRows: 'ReadRows',
-    ReadBytes: 'ReadBytes',
-    UserSID: 'UserSID',
-    OneLineQueryText: 'OneLineQueryText',
-    QueryHash: 'QueryHash',
-    Duration: 'Duration',
-};
 const cpuTimeUsColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.CPUTimeUs,
     sortAccessor: (row) => Number(row.CPUTimeUs),
+    render: ({ row }) => { var _a; return formatToMs(parseUsToMs((_a = row.CPUTimeUs) !== null && _a !== void 0 ? _a : undefined)); },
     width: 120,
     align: DataTable.RIGHT,
     sortable: false,
@@ -78,23 +69,23 @@ const queryHashColumn = {
 };
 const durationColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.Duration,
-    header: 'Duration, ms',
-    render: ({ row }) => { var _a; return formatNumber(parseUsToMs((_a = row.Duration) !== null && _a !== void 0 ? _a : undefined)); },
+    header: 'Duration',
+    render: ({ row }) => { var _a; return formatToMs(parseUsToMs((_a = row.Duration) !== null && _a !== void 0 ? _a : undefined)); },
     sortAccessor: (row) => Number(row.Duration),
     align: DataTable.RIGHT,
     width: 150,
 };
-export const getTopQueriesColumns = () => {
-    return [
-        cpuTimeUsColumn,
-        queryTextColumn,
-        endTimeColumn,
-        durationColumn,
-        readRowsColumn,
-        readBytesColumn,
-        userSIDColumn,
-    ];
-};
-export const getTenantOverviewTopQueriesColumns = () => {
-    return [queryHashColumn, oneLineQueryTextColumn, cpuTimeUsColumn];
-};
+export const TOP_QUERIES_COLUMNS = [
+    cpuTimeUsColumn,
+    queryTextColumn,
+    endTimeColumn,
+    durationColumn,
+    readRowsColumn,
+    readBytesColumn,
+    userSIDColumn,
+];
+export const TENANT_OVERVIEW_TOP_QUERUES_COLUMNS = [
+    queryHashColumn,
+    oneLineQueryTextColumn,
+    cpuTimeUsColumn,
+];

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

@@ -7,9 +7,9 @@ import { TableWithControlsLayout } from '../../../../components/TableWithControl
 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 { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
 import { formatDateTime } from '../../../../utils/dataFormatters/dataFormatters';
-import { isSortableTopShardsProperty } from '../../../../utils/diagnostics';
+import { TOP_SHARD_COLUMNS_IDS, isSortableTopShardsProperty } from '../../../../utils/diagnostics';
 import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { parseQueryErrorToString } from '../../../../utils/query';
 import { isColumnEntityType } from '../../utils/schema';
@@ -25,16 +25,6 @@ const TABLE_SETTINGS = {
     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 '–';
@@ -62,8 +52,8 @@ function dataTableToStringSortOrder(value = []) {
     return sortOrders.map(({ columnId }) => columnId).join(',');
 }
 function fillDateRangeFor(value) {
-    value.to = Date.now();
-    value.from = value.to - HOUR_IN_SECONDS * 1000;
+    value.to = 'now';
+    value.from = 'now-1h';
     return value;
 }
 export const TopShards = ({ tenantName, path, type }) => {
@@ -83,7 +73,7 @@ export const TopShards = ({ tenantName, path, type }) => {
         }
         return defaultValue;
     });
-    const [sortOrder, setSortOrder] = React.useState(tableColumnsNames.CPUCores);
+    const [sortOrder, setSortOrder] = React.useState(TOP_SHARD_COLUMNS_IDS.CPUCores);
     const { data: result, isFetching, error, } = shardApi.useSendShardQueryQuery({
         database: tenantName,
         path: path,
@@ -124,14 +114,14 @@ export const TopShards = ({ tenantName, path, type }) => {
         if (filters.mode === EShardsWorkloadMode.History) {
             // after NodeId
             columns.splice(5, 0, {
-                name: tableColumnsNames.PeakTime,
+                name: TOP_SHARD_COLUMNS_IDS.PeakTime,
                 render: ({ row }) => {
                     return prepareDateTimeValue(row.PeakTime);
                 },
                 sortable: false,
             });
             columns.push({
-                name: tableColumnsNames.IntervalEnd,
+                name: TOP_SHARD_COLUMNS_IDS.IntervalEnd,
                 render: ({ row }) => {
                     return prepareDateTimeValue(row.IntervalEnd);
                 },

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
+import { DeveloperUILinkButton } from '../../../../components/DeveloperUILinkButton/DeveloperUILinkButton';
+import { EntityStatus } from '../../../../components/EntityStatus/EntityStatus';
 import { InternalLink } from '../../../../components/InternalLink';
 import { LinkToSchemaObject } from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import { UsageLabel } from '../../../../components/UsageLabel/UsageLabel';
 import routes, { createHref } from '../../../../routes';
 import { getLoadSeverityForShard } from '../../../../store/reducers/tenantOverview/topShards/utils';
 import { formatNumber, roundToPrecision } from '../../../../utils/dataFormatters/dataFormatters';
+import { createTabletDeveloperUIHref } from '../../../../utils/developerUI/developerUI';
 import { getDefaultNodePath } from '../../../Node/NodePages';
 export const TOP_SHARDS_COLUMNS_WIDTH_LS_KEY = 'topShardsColumnsWidth';
 const TOP_SHARDS_COLUMNS_IDS = {
@@ -61,13 +64,14 @@ const tabletIdColumn = {
     name: TOP_SHARDS_COLUMNS_IDS.TabletId,
     header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.TabletId],
     render: ({ row }) => {
+        var _a;
         if (!row.TabletId) {
             return '–';
         }
-        return (_jsx(InternalLink, { to: createHref(routes.tablet, { id: row.TabletId }), children: row.TabletId }));
+        return (_jsx(EntityStatus, { name: (_a = row.TabletId) === null || _a === void 0 ? void 0 : _a.toString(), path: createHref(routes.tablet, { id: row.TabletId }), hasClipboardButton: true, showStatus: false, additionalControls: _jsx(DeveloperUILinkButton, { href: createTabletDeveloperUIHref(row.TabletId) }) }));
     },
     sortable: false,
-    width: 190,
+    width: 220,
 };
 const nodeIdColumn = {
     name: TOP_SHARDS_COLUMNS_IDS.NodeId,

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

@@ -8,6 +8,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { AsyncReplicationState } from '../../../components/AsyncReplicationState';
 import { ClipboardButton } from '../../../components/ClipboardButton';
+import { toFormattedSize } from '../../../components/FormattedBytes/utils';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon';
 import { Loader } from '../../../components/Loader';
@@ -19,7 +20,7 @@ import { setQueryTab, setSummaryTab, setTenantPage } from '../../../store/reduce
 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, formatSecondsToHours } from '../../../utils/dataFormatters/dataFormatters';
+import { formatDateTime, formatNumber, formatSecondsToHours, } from '../../../utils/dataFormatters/dataFormatters';
 import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import { Acl } from '../Acl/Acl';
 import { EntityTitle } from '../EntityTitle/EntityTitle';
@@ -48,7 +49,7 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
-    const { data: currentObjectData } = useGetSchemaQuery({ path });
+    const { data: currentObjectData } = useGetSchemaQuery({ path, database: tenantName });
     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);
@@ -86,10 +87,33 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
         overview.push({ label: i18n('summary.version'), value: PathVersion });
         overview.push({
             label: i18n('summary.created'),
-            value: formatDateTime(CreateStep, ''),
+            value: formatDateTime(CreateStep),
         });
         const { PathDescription } = currentObjectData;
+        if (PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.TableStats) {
+            const { DataSize, RowCount } = PathDescription.TableStats;
+            overview.push({
+                label: i18n('summary.data-size'),
+                value: toFormattedSize(DataSize),
+            }, {
+                label: i18n('summary.row-count'),
+                value: formatNumber(RowCount),
+            });
+        }
         const title = _jsx(EntityTitle, { data: PathDescription });
+        const getDatabaseOverview = () => {
+            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,
+                },
+            ];
+        };
         const getPathTypeOverview = {
             [EPathType.EPathTypeInvalid]: undefined,
             [EPathType.EPathTypeDir]: undefined,
@@ -102,21 +126,9 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
                     },
                 ];
             },
-            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeSubDomain]: getDatabaseOverview,
             [EPathType.EPathTypeTableIndex]: undefined,
-            [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.EPathTypeExtSubDomain]: getDatabaseOverview,
             [EPathType.EPathTypeColumnStore]: () => {
                 var _a, _b;
                 return [
@@ -212,7 +224,7 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
     const renderTabContent = () => {
         switch (summaryTab) {
             case TENANT_SUMMARY_TABS_IDS.acl: {
-                return _jsx(Acl, { path: path });
+                return _jsx(Acl, { path: path, database: tenantName });
             }
             case TENANT_SUMMARY_TABS_IDS.schema: {
                 return _jsx(SchemaViewer, { type: type, path: path, tenantName: tenantName });
@@ -257,6 +269,7 @@ function ObjectTree({ tenantName, path }) {
     var _a;
     const { data: tenantData = {}, isLoading } = useGetSchemaQuery({
         path: tenantName,
+        database: 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);

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

@@ -12,7 +12,7 @@ import { explainVersions } from '../../../../store/reducers/explainQuery/utils';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
 import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
-import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
+import { S_EXPRESSION_LANGUAGE_ID } from '../../../../utils/monaco/constats';
 import { parseQueryErrorToString } from '../../../../utils/query';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
 import { renderExplainNode } from './utils';
@@ -98,7 +98,7 @@ export function ExplainResult(props) {
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderAstExplain = () => {
-        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", theme: `vs-${props.theme}` }) }));
+        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: S_EXPRESSION_LANGUAGE_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", theme: `vs-${props.theme}` }) }));
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderGraph = () => {

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

@@ -11,13 +11,14 @@ import { setShowPreview } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../../../utils/constants';
 import { useQueryModes, useSetting } from '../../../../utils/hooks';
-import { LANGUAGE_YQL_ID } from '../../../../utils/monaco/yql/constants';
+import { YQL_LANGUAGE_ID } from '../../../../utils/monaco/constats';
 import { QUERY_ACTIONS } from '../../../../utils/query';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
 import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
 import { ExplainResult } from '../ExplainResult/ExplainResult';
 import { Preview } from '../Preview/Preview';
 import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
+import { QuerySettingsDialog } from '../QuerySettingsDialog/QuerySettingsDialog';
 import { SaveQueryDialog } from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 import { useEditorOptions } from './helpers';
@@ -133,6 +134,10 @@ function QueryEditor(props) {
         }
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
+    const handleSettingsClick = () => {
+        setQueryAction('settings');
+        props.setShowPreview(false);
+    };
     const handleGetExplainQueryClick = (mode) => {
         const { input } = executeQuery;
         setLastUsedQueryAction(QUERY_ACTIONS.explain);
@@ -255,11 +260,11 @@ function QueryEditor(props) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
     const renderControls = () => {
-        return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, runIsLoading: executeQueryResult.isLoading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQueryResult.isLoading, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlightedAction: lastUsedQueryAction }));
+        return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, onSettingsButtonClick: handleSettingsClick, runIsLoading: executeQueryResult.isLoading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQueryResult.isLoading, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlightedAction: lastUsedQueryAction }));
     };
     return (_jsxs("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, tenantName: tenantName, path: path, showPreview: showPreview }) })] }), _jsx(SaveQueryDialog, {})] }));
+                        }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: YQL_LANGUAGE_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 }) })] }), _jsx(SaveQueryDialog, {}), _jsx(QuerySettingsDialog, {})] }));
 }
 const mapStateToProps = (state) => {
     return {

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

@@ -2,6 +2,7 @@ import type { QueryAction, QueryMode } from '../../../../types/store/query';
 import './QueryEditorControls.scss';
 interface QueryEditorControlsProps {
     onRunButtonClick: (mode?: QueryMode) => void;
+    onSettingsButtonClick: () => void;
     runIsLoading: boolean;
     onExplainButtonClick: (mode?: QueryMode) => void;
     explainIsLoading: boolean;
@@ -10,5 +11,5 @@ interface QueryEditorControlsProps {
     queryMode: QueryMode;
     highlightedAction: QueryAction;
 }
-export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, onUpdateQueryMode, queryMode, highlightedAction, }: QueryEditorControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QueryEditorControls: ({ onRunButtonClick, onSettingsButtonClick, onUpdateQueryMode, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, queryMode, highlightedAction, }: QueryEditorControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ChevronDown, PlayFill } from '@gravity-ui/icons';
+import { ChevronDown, Gear, PlayFill } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
 import { LabelWithPopover } from '../../../../components/LabelWithPopover';
+import { QUERY_SETTINGS, useSetting } from '../../../../lib';
 import { cn } from '../../../../utils/cn';
 import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
 import { SaveQuery } from '../SaveQuery/SaveQuery';
@@ -33,7 +34,10 @@ const QueryModeSelectorOptions = {
         description: i18n('method-description.pg'),
     },
 };
-export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, onUpdateQueryMode, queryMode, highlightedAction, }) => {
+export const QueryEditorControls = ({ onRunButtonClick, onSettingsButtonClick, onUpdateQueryMode, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, queryMode, highlightedAction, }) => {
+    const [useQuerySettings] = useSetting(QUERY_SETTINGS);
+    const runView = highlightedAction === 'execute' ? 'action' : undefined;
+    const explainView = highlightedAction === 'explain' ? 'action' : undefined;
     const querySelectorMenuItems = React.useMemo(() => {
         return Object.entries(QueryModeSelectorOptions).map(([mode, { title, description }]) => {
             return {
@@ -44,14 +48,12 @@ export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainB
             };
         });
     }, [onUpdateQueryMode]);
-    const runView = highlightedAction === 'execute' ? 'action' : undefined;
-    const explainView = highlightedAction === 'explain' ? 'action' : undefined;
     return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('left'), children: [_jsxs(Button, { onClick: () => {
                             onRunButtonClick(queryMode);
-                        }, disabled: disabled, loading: runIsLoading, view: runView, children: [_jsx(Icon, { data: PlayFill, size: 14 }), 'Run'] }), _jsx(Button, { onClick: () => {
+                        }, disabled: disabled, loading: runIsLoading, view: runView, className: b('run-button'), children: [_jsx(Icon, { data: PlayFill, size: 14 }), 'Run'] }), _jsx(Button, { onClick: () => {
                             onExplainButtonClick(queryMode);
-                        }, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), _jsx("div", { className: b('mode-selector'), children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
+                        }, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), useQuerySettings ? (_jsx(Button, { onClick: onSettingsButtonClick, loading: runIsLoading, className: b('gear-button'), children: _jsx(Icon, { data: Gear, size: 16 }) })) : (_jsx("div", { className: b('mode-selector'), children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
                                 className: b('mode-selector__popup'),
                                 qa: queryModeSelectorPopupQa,
-                            }, switcher: _jsx(Button, { className: b('mode-selector__button'), qa: queryModeSelectorQa, children: _jsxs("span", { className: b('mode-selector__button-content'), children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { data: ChevronDown })] }) }) }) })] }), _jsx(SaveQuery, { isSaveButtonDisabled: disabled })] }));
+                            }, switcher: _jsx(Button, { className: b('mode-selector__button'), qa: queryModeSelectorQa, children: _jsxs("span", { className: b('mode-selector__button-content'), children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { data: ChevronDown })] }) }) }) }))] }), _jsx(SaveQuery, { isSaveButtonDisabled: disabled })] }));
 };

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

@@ -0,0 +1,2 @@
+import './QuerySettingsDialog.scss';
+export declare function QuerySettingsDialog(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Dialog, Link as ExternalLink, Flex, TextInput } from '@gravity-ui/uikit';
+import { Controller, useForm } from 'react-hook-form';
+import { selectQueryAction, setQueryAction, } from '../../../../store/reducers/queryActions/queryActions';
+import { cn } from '../../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { ISOLATION_LEVELS, QUERY_MODES, STATISTICS_MODES, TRACING_LEVELS, } from '../../../../utils/query';
+import { QuerySettingsSelect } from './QuerySettingsSelect';
+import { ISOLATION_LEVEL_SELECT_OPTIONS, QUERY_MODE_SELECT_OPTIONS, STATISTICS_MODE_SELECT_OPTIONS, TRACING_LEVEL_SELECT_OPTIONS, } from './constants';
+import i18n from './i18n';
+import './QuerySettingsDialog.scss';
+const b = cn('ydb-query-settings-dialog');
+export function QuerySettingsDialog() {
+    const dispatch = useTypedDispatch();
+    const queryAction = useTypedSelector(selectQueryAction);
+    const { control, handleSubmit, reset } = useForm({
+        defaultValues: {
+            queryMode: QUERY_MODES.script,
+            timeout: '60',
+            isolationLevel: ISOLATION_LEVELS.serializable,
+            statisticsMode: STATISTICS_MODES.none,
+            tracingLevel: TRACING_LEVELS.detailed,
+        },
+    });
+    const onCloseDialog = () => {
+        dispatch(setQueryAction('idle'));
+        reset();
+    };
+    const onSaveClick = (data) => {
+        console.log('Form Data:', data);
+        // dispatch(saveQuerySettings(data));
+        onCloseDialog();
+    };
+    return (_jsxs(Dialog, { open: queryAction === 'settings', size: "s", onClose: onCloseDialog, className: b(), hasCloseButton: false, children: [_jsx(Dialog.Header, { caption: i18n('action.settings') }), _jsxs("form", { onSubmit: handleSubmit(onSaveClick), children: [_jsxs(Dialog.Body, { className: b('dialog-body'), children: [_jsxs(Flex, { direction: "row", alignItems: "flex-start", className: b('dialog-row'), children: [_jsx("label", { htmlFor: "queryMode", className: b('field-title'), children: i18n('form.query-mode') }), _jsx("div", { className: b('control-wrapper'), children: _jsx(Controller, { name: "queryMode", control: control, render: ({ field }) => (_jsx(QuerySettingsSelect, { setting: field.value, onUpdateSetting: field.onChange, settingOptions: QUERY_MODE_SELECT_OPTIONS })) }) })] }), _jsxs(Flex, { direction: "row", alignItems: "flex-start", className: b('dialog-row'), children: [_jsx("label", { htmlFor: "timeout", className: b('field-title'), children: i18n('form.timeout') }), _jsx("div", { className: b('control-wrapper'), children: _jsx(Controller, { name: "timeout", control: control, render: ({ field }) => (_jsxs(React.Fragment, { children: [_jsx(TextInput, { type: "number", ...field, className: b('timeout'), placeholder: "60" }), _jsx("span", { className: b('timeout-suffix'), children: i18n('form.timeout.seconds') })] })) }) })] }), _jsxs(Flex, { direction: "row", alignItems: "flex-start", className: b('dialog-row'), children: [_jsx("label", { htmlFor: "tracingLevel", className: b('field-title'), children: i18n('form.tracing-level') }), _jsx("div", { className: b('control-wrapper'), children: _jsx(Controller, { name: "tracingLevel", control: control, render: ({ field }) => (_jsx(QuerySettingsSelect, { setting: field.value, onUpdateSetting: field.onChange, settingOptions: TRACING_LEVEL_SELECT_OPTIONS })) }) })] }), _jsxs(Flex, { direction: "row", alignItems: "flex-start", className: b('dialog-row'), children: [_jsx("label", { htmlFor: "isolationLevel", className: b('field-title'), children: i18n('form.isolation-level') }), _jsx("div", { className: b('control-wrapper'), children: _jsx(Controller, { name: "isolationLevel", control: control, render: ({ field }) => (_jsx(QuerySettingsSelect, { setting: field.value, onUpdateSetting: field.onChange, settingOptions: ISOLATION_LEVEL_SELECT_OPTIONS })) }) })] }), _jsxs(Flex, { direction: "row", alignItems: "flex-start", className: b('dialog-row'), children: [_jsx("label", { htmlFor: "statisticsMode", className: b('field-title'), children: i18n('form.statistics-mode') }), _jsx("div", { className: b('control-wrapper'), children: _jsx(Controller, { name: "statisticsMode", control: control, render: ({ field }) => (_jsx(QuerySettingsSelect, { setting: field.value, onUpdateSetting: field.onChange, settingOptions: STATISTICS_MODE_SELECT_OPTIONS })) }) })] })] }), _jsx(Dialog.Footer, { textButtonApply: i18n('button-done'), textButtonCancel: i18n('button-cancel'), onClickButtonCancel: onCloseDialog, propsButtonApply: {
+                            type: 'submit',
+                        }, renderButtons: (buttonApply, buttonCancel) => (_jsxs("div", { className: b('buttons-container'), children: [_jsx(ExternalLink, { href: "https://ydb.tech/docs/ru/concepts/transactions", target: "_blank", className: b('documentation-link'), children: i18n('docs') }), _jsxs("div", { className: b('main-buttons'), children: [buttonCancel, buttonApply] })] })) })] })] }));
+}

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

@@ -0,0 +1,63 @@
+.ydb-query-settings-dialog {
+    &__dialog-row {
+        & + & {
+            margin-top: var(--g-text-body-1-line-height);
+        }
+    }
+
+    &__field-title {
+        flex: 4;
+
+        margin-right: var(--g-spacing-3);
+
+        font-weight: 500;
+        line-height: var(--g-text-header-2-line-height);
+        white-space: nowrap;
+    }
+
+    .g-dialog-footer__bts-wrapper {
+        width: 100%;
+    }
+
+    &__dialog-body {
+        padding-top: var(--g-spacing-6);
+    }
+
+    &__control-wrapper {
+        display: flex;
+        flex: 6;
+    }
+
+    &__timeout {
+        width: 33.3%;
+        margin-right: var(--g-spacing-2);
+    }
+
+    &__timeout-suffix {
+        display: flex;
+        align-items: center;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__documentation-link {
+        display: flex;
+        align-items: center;
+
+        margin-left: var(--g-spacing-4);
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__buttons-container {
+        display: flex;
+        justify-content: space-between;
+
+        width: 100%;
+    }
+
+    &__main-buttons {
+        display: flex;
+        gap: 10px;
+    }
+}

package/dist/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.d.ts

@@ -0,0 +1,15 @@
+import type { SelectOption } from '@gravity-ui/uikit';
+import type { IsolationLevel, QueryMode, StatisticsMode, TracingLevel } from '../../../../types/store/query';
+import './QuerySettingsSelect.scss';
+export declare const getOptionHeight: () => number;
+type SelectType = QueryMode | IsolationLevel | StatisticsMode | TracingLevel;
+type QuerySettingSelectOption<T> = SelectOption<T> & {
+    isDefault?: boolean;
+};
+interface QuerySettingsSelectProps<T extends SelectType> {
+    setting: T;
+    settingOptions: QuerySettingSelectOption<T>[];
+    onUpdateSetting: (mode: T) => void;
+}
+export declare function QuerySettingsSelect<T extends SelectType>(props: QuerySettingsSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Select } from '@gravity-ui/uikit';
+import { cn } from '../../../../utils/cn';
+import i18n from './i18n';
+import './QuerySettingsSelect.scss';
+// Make option height dynamic.
+// By default it has static height.
+export const getOptionHeight = () => -1;
+const b = cn('ydb-query-settings-select');
+export function QuerySettingsSelect(props) {
+    return (_jsx("div", { className: b('selector'), children: _jsx(Select, { options: props.settingOptions, value: [props.setting], onUpdate: (value) => {
+                props.onUpdateSetting(value[0]);
+            }, getOptionHeight: getOptionHeight, popupClassName: b('popup'), renderOption: (option) => (_jsxs("div", { className: b('item'), children: [_jsxs("div", { className: b('item-title'), children: [option.content, option.isDefault ? i18n('description.default') : ''] }), option.text && (_jsx("span", { className: b('item-description'), children: option.text }))] })), width: "max" }) }));
+}

package/dist/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.scss

@@ -0,0 +1,19 @@
+.ydb-query-settings-select {
+    &__selector {
+        width: 100%;
+    }
+
+    &__popup {
+        max-width: 320px;
+    }
+
+    &__item-description {
+        white-space: pre-wrap;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__item {
+        padding: var(--g-spacing-1) 0;
+    }
+}