ydb-embedded-ui 5.2.1 → 5.3.0

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

@@ -12,6 +12,7 @@ import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, SAVED_
 import { useSetting, useQueryModes } from '../../../../utils/hooks';
 import { QUERY_ACTIONS } from '../../../../utils/query';
 import { parseJson } from '../../../../utils/utils';
+import { useEditorOptions } from './helpers';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
 import { Preview } from '../Preview/Preview';
 import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
@@ -19,13 +20,6 @@ import { ExplainResult } from '../ExplainResult/ExplainResult';
 import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
 import i18n from '../i18n';
 import './QueryEditor.scss';
-const EDITOR_OPTIONS = {
-    automaticLayout: true,
-    selectOnLineNumbers: true,
-    minimap: {
-        enabled: false,
-    },
-};
 const CONTEXT_MENU_GROUP_ID = 'navigation';
 const RESULT_TYPES = {
     EXECUTE: 'execute',
@@ -42,6 +36,7 @@ const initialTenantCommonInfoState = {
     collapsed: true,
 };
 function QueryEditor(props) {
+    const editorOptions = useEditorOptions();
     const { path, setTenantPath: setPath, executeQuery, explainQuery, type, theme, changeUserInput, showPreview, } = props;
     const { tenantPath: savedPath } = executeQuery;
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
@@ -291,7 +286,7 @@ function QueryEditor(props) {
     };
     return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs(SplitPane, Object.assign({ 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", Object.assign({ className: b('pane-wrapper', {
                         top: true,
-                    }) }, { children: [_jsx("div", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: EDITOR_OPTIONS, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ className: b('pane-wrapper') }, { children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) }))] })) })));
+                    }) }, { children: [_jsx("div", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ className: b('pane-wrapper') }, { children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) }))] })) })));
 }
 const mapStateToProps = (state) => {
     return {

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

@@ -0,0 +1,4 @@
+import type Monaco from 'monaco-editor';
+export type EditorOptions = Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions;
+export declare const EDITOR_OPTIONS: EditorOptions;
+export declare function useEditorOptions(): EditorOptions;

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

@@ -0,0 +1,17 @@
+import { ENABLE_AUTOCOMPLETE, useSetting } from '../../../../lib';
+import { useMemo } from 'react';
+export const EDITOR_OPTIONS = {
+    automaticLayout: true,
+    selectOnLineNumbers: true,
+    minimap: {
+        enabled: false,
+    },
+};
+export function useEditorOptions() {
+    const [enableAutocomplete] = useSetting(ENABLE_AUTOCOMPLETE);
+    const options = useMemo(() => {
+        const useAutocomplete = Boolean(enableAutocomplete);
+        return Object.assign({ quickSuggestions: useAutocomplete, suggestOnTriggerCharacters: useAutocomplete }, EDITOR_OPTIONS);
+    }, [enableAutocomplete]);
+    return options;
+}

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

@@ -2,18 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
-import { useDispatch, useSelector } from 'react-redux';
 import { Dialog, DropdownMenu, TextInput, Button } from '@gravity-ui/uikit';
 import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import './SaveQuery.scss';
 const b = cn('kv-save-query');
 function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }) {
-    const singleClusterMode = useSelector((state) => state.singleClusterMode);
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const [isDialogVisible, setIsDialogVisible] = useState(false);
     const [queryName, setQueryName] = useState('');
     const [validationError, setValidationError] = useState(null);
-    const queryNameToEdit = useSelector((state) => state.saveQuery);
-    const dispatch = useDispatch();
+    const queryNameToEdit = useTypedSelector((state) => state.saveQuery);
+    const dispatch = useTypedDispatch();
     const onSaveQueryClick = () => {
         setIsDialogVisible(true);
         dispatch(setQueryNameToEdit(null));

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import block from 'bem-cn-lite';
 import { Dialog, Button } from '@gravity-ui/uikit';
 import DataTable from '@gravity-ui/react-data-table';
@@ -9,6 +8,7 @@ import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { Icon } from '../../../../components/Icon';
+import { useTypedDispatch } from '../../../../utils/hooks';
 import { MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import i18n from '../i18n';
 import './SavedQueries.scss';
@@ -17,7 +17,7 @@ const DeleteDialog = ({ visible, queryName, onCancelClick, onConfirmClick }) =>
     return (_jsxs(Dialog, Object.assign({ open: visible, hasCloseButton: false, size: "s", onClose: onCancelClick, onEnterKeyDown: onConfirmClick }, { children: [_jsx(Dialog.Header, { caption: i18n('delete-dialog.header') }), _jsxs(Dialog.Body, Object.assign({ className: b('dialog-body') }, { children: [i18n('delete-dialog.question'), _jsx("span", Object.assign({ className: b('dialog-query-name') }, { children: ` ${queryName}?` }))] })), _jsx(Dialog.Footer, { textButtonApply: i18n('delete-dialog.delete'), textButtonCancel: i18n('delete-dialog.cancel'), onClickButtonCancel: onCancelClick, onClickButtonApply: onConfirmClick })] })));
 };
 export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) => {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
     const [queryNameToDelete, setQueryNameToDelete] = useState('');
     const closeDeleteDialog = () => {

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

@@ -1,19 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 import { NavigationTree } from 'ydb-ui-components';
 import { setCurrentSchemaPath, preloadSchemas } from '../../../../store/reducers/schema/schema';
-import { useQueryModes } from '../../../../utils/hooks';
+import { useQueryModes, useTypedDispatch } from '../../../../utils/hooks';
 import { isChildlessPathType, mapPathTypeToNavigationTreeType } from '../../utils/schema';
 import { getActions } from '../../utils/schemaActions';
 import { getControls } from '../../utils/schemaControls';
 export function SchemaTree(props) {
     const { rootPath, rootName, rootType, currentPath } = props;
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const [_, setQueryMode] = useQueryModes();
     const fetchPath = (path) => window.api
         .getSchema({ path }, { concurrentId: `NavigationTree.getSchema|${path}` })
         .then((data) => {
+        if (!data) {
+            throw new Error(`no describe data about path ${path}`);
+        }
         const { PathDescription: { Children = [] } = {} } = data;
         const preloadedData = {
             [path]: data,

package/dist/containers/Tenant/Tenant.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useReducer, useRef } from 'react';
 import cn from 'bem-cn-lite';
 import { useLocation } from 'react-router';
 import qs from 'qs';
 import { Helmet } from 'react-helmet-async';
 import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '../../utils/constants';
-import { useTypedSelector } from '../../utils/hooks';
+import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { disableAutorefresh, getSchema } from '../../store/reducers/schema/schema';
+import { registerYQLCompletionItemProvider } from '../../utils/monaco';
 import SplitPane from '../../components/SplitPane';
 import { AccessDenied } from '../../components/Errors/403';
 import { ObjectSummary } from './ObjectSummary/ObjectSummary';
@@ -28,22 +28,34 @@ const getTenantSummaryState = () => {
 function Tenant(props) {
     var _a;
     const [summaryVisibilityState, dispatchSummaryVisibilityAction] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED), undefined, getTenantSummaryState);
-    const { currentSchemaPath, currentSchema: currentItem = {} } = useSelector((state) => state.schema);
-    const { PathType: preloadedPathType, PathSubType: preloadedPathSubType } = useSelector((state) => { var _a, _b; return ((_b = (_a = state.schema.data[currentSchemaPath]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self) || {}; });
+    const previousTenant = useRef();
+    const { currentSchemaPath, currentSchema: currentItem = {} } = useTypedSelector((state) => state.schema);
+    const { PathType: preloadedPathType, PathSubType: preloadedPathSubType } = useTypedSelector((state) => {
+        var _a, _b;
+        return currentSchemaPath
+            ? ((_b = (_a = state.schema.data[currentSchemaPath]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self) || {}
+            : {};
+    });
     const { PathType: currentPathType, PathSubType: currentPathSubType } = ((_a = currentItem.PathDescription) === null || _a === void 0 ? void 0 : _a.Self) || {};
     const { error: { status: schemaStatus = 200 } = {} } = useTypedSelector((state) => state.schema);
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
     const { name } = queryParams;
     const tenantName = name;
+    if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
+        registerYQLCompletionItemProvider(tenantName);
+        previousTenant.current = tenantName;
+    }
     useEffect(() => {
         dispatch(getSchema({ path: tenantName }));
     }, [tenantName, dispatch]);
     useEffect(() => {
-        dispatch(getSchema({ path: currentSchemaPath }));
+        if (currentSchemaPath) {
+            dispatch(getSchema({ path: currentSchemaPath }));
+        }
     }, [currentSchemaPath, dispatch]);
     useEffect(() => {
         dispatch(disableAutorefresh());
@@ -64,6 +76,10 @@ function Tenant(props) {
     };
     const showBlockingError = schemaStatus === 403;
     const title = currentSchemaPath || tenantName || i18n('page.title');
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Helmet, { defaultTitle: `${title} — YDB Monitoring`, titleTemplate: `%s — ${title} — YDB Monitoring` }), showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, Object.assign({ defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral, { type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps })] })))] })));
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Helmet, { defaultTitle: `${title} — YDB Monitoring`, titleTemplate: `%s — ${title} — YDB Monitoring` }), showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, Object.assign({ defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral
+                    // @ts-expect-error
+                    , { 
+                        // @ts-expect-error
+                        type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps, tenantName: tenantName })] })))] })));
 }
 export default Tenant;

package/dist/containers/Tenant/utils/index.d.ts

@@ -1,2 +1,2 @@
 import { TPathDescription } from '../../../types/api/schema';
-export declare const getEntityName: (pathDescription?: TPathDescription | undefined) => string | undefined;
+export declare const getEntityName: (pathDescription?: TPathDescription) => string | undefined;

package/dist/containers/Tenant/utils/schema.d.ts

@@ -1,15 +1,15 @@
 import type { NavigationTreeNodeType } from 'ydb-ui-components';
 import { EPathSubType, EPathType } from '../../../types/api/schema';
 import { ETenantType } from '../../../types/api/tenant';
-export declare const mapPathTypeToNavigationTreeType: (type?: EPathType, subType?: EPathSubType | undefined, defaultType?: NavigationTreeNodeType) => NavigationTreeNodeType;
-export declare const mapPathTypeToEntityName: (type?: EPathType | undefined, subType?: EPathSubType | undefined) => string | undefined;
-export declare const mapDatabaseTypeToDBName: (type?: ETenantType | undefined) => string | undefined;
-export declare const isTableType: (pathType?: EPathType | undefined) => boolean;
-export declare const isIndexTable: (subType?: EPathSubType | undefined) => boolean;
-export declare const isColumnEntityType: (type?: EPathType | undefined) => boolean;
-export declare const isDatabaseEntityType: (type?: EPathType | undefined) => boolean;
-export declare const isCdcStreamEntityType: (type?: EPathType | undefined) => boolean;
-export declare const isEntityWithMergedImplementation: (type?: EPathType | undefined) => boolean;
-export declare const isChildlessPathType: (type?: EPathType | undefined, subType?: EPathSubType | undefined) => boolean;
-export declare const isPathTypeWithTopic: (type?: EPathType | undefined) => boolean;
-export declare const isExternalTable: (type?: EPathType | undefined) => boolean;
+export declare const mapPathTypeToNavigationTreeType: (type?: EPathType, subType?: EPathSubType, defaultType?: NavigationTreeNodeType) => NavigationTreeNodeType;
+export declare const mapPathTypeToEntityName: (type?: EPathType, subType?: EPathSubType) => string | undefined;
+export declare const mapDatabaseTypeToDBName: (type?: ETenantType) => string | undefined;
+export declare const isTableType: (pathType?: EPathType) => boolean;
+export declare const isIndexTable: (subType?: EPathSubType) => boolean;
+export declare const isColumnEntityType: (type?: EPathType) => boolean;
+export declare const isDatabaseEntityType: (type?: EPathType) => boolean;
+export declare const isCdcStreamEntityType: (type?: EPathType) => boolean;
+export declare const isEntityWithMergedImplementation: (type?: EPathType) => boolean;
+export declare const isChildlessPathType: (type?: EPathType, subType?: EPathSubType) => boolean;
+export declare const isPathTypeWithTopic: (type?: EPathType) => boolean;
+export declare const isExternalTable: (type?: EPathType) => boolean;

package/dist/containers/Tenant/utils/schemaActions.d.ts

@@ -5,5 +5,5 @@ interface ActionsAdditionalEffects {
     setQueryMode: (mode: QueryMode) => void;
     setActivePath: (path: string) => void;
 }
-export declare const getActions: (dispatch: Dispatch<any>, additionalEffects: ActionsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => import("@gravity-ui/uikit/index").DropdownMenuItemMixed<any>[];
+export declare const getActions: (dispatch: Dispatch<any>, additionalEffects: ActionsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => import("@gravity-ui/uikit").DropdownMenuItemMixed<any>[];
 export {};

package/dist/containers/Tenants/Tenants.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'bem-cn-lite';
-import { useDispatch } from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 import { Button } from '@gravity-ui/uikit';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { PoolsGraph } from '../../components/PoolsGraph/PoolsGraph';
 import { TabletsStatistic } from '../../components/TabletsStatistic';
 import { ProblemFilter } from '../../components/ProblemFilter';
@@ -16,13 +15,13 @@ import { selectFilteredTenants, selectTenantsSearchValue, } from '../../store/re
 import { changeFilter, ProblemFilterValues, selectProblemFilter, } from '../../store/reducers/settings/settings';
 import { formatBytesToGigabyte, formatCPU, formatNumber, } from '../../utils/dataFormatters/dataFormatters';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { clusterName } from '../../store';
 import { getTenantPath } from '../Tenant/TenantPages';
 import './Tenants.scss';
 const b = cn('tenants');
 export const Tenants = ({ additionalTenantsProps }) => {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const { error, loading, wasLoaded } = useTypedSelector((state) => state.tenants);
     const searchValue = useTypedSelector(selectTenantsSearchValue);
     const filteredTenants = useTypedSelector(selectFilteredTenants);

package/dist/containers/UserSettings/Setting.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-export declare type SettingsElementType = 'switch' | 'radio';
+export type SettingsElementType = 'switch' | 'radio';
 export interface SettingProps {
     type?: SettingsElementType;
     title: string;

package/dist/containers/UserSettings/i18n/en.json

@@ -3,6 +3,10 @@
     "section.appearance": "Appearance",
     "page.experiments": "Experiments",
     "section.experiments": "Experiments",
+    "page.editor": "Editor",
+    "section.dev-setting": "Development settings",
+    "settings.editor.autocomplete.title": "Enable autocomplete",
+    "settings.editor.autocomplete.description": "You’re always able to get suggestions by pressing Ctrl+Space.",
     "settings.theme.title": "Interface theme",
     "settings.theme.option-dark": "Dark",
     "settings.theme.option-light": "Light",

package/dist/containers/UserSettings/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "page.general" | "section.appearance" | "page.experiments" | "section.experiments" | "settings.theme.title" | "settings.theme.option-dark" | "settings.theme.option-light" | "settings.theme.option-system" | "settings.language.title" | "settings.language.option-russian" | "settings.language.option-english" | "settings.binaryDataInPlainTextDisplay.title" | "settings.binaryDataInPlainTextDisplay.description" | "settings.invertedDisks.title" | "settings.useNodesEndpoint.title" | "settings.useNodesEndpoint.popover" | "settings.useVirtualTables.title" | "settings.useVirtualTables.popover" | "settings.queryUseMultiSchema.title" | "settings.queryUseMultiSchema.popover", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "page.general" | "section.appearance" | "page.experiments" | "section.experiments" | "page.editor" | "section.dev-setting" | "settings.editor.autocomplete.title" | "settings.editor.autocomplete.description" | "settings.theme.title" | "settings.theme.option-dark" | "settings.theme.option-light" | "settings.theme.option-system" | "settings.language.title" | "settings.language.option-russian" | "settings.language.option-english" | "settings.binaryDataInPlainTextDisplay.title" | "settings.binaryDataInPlainTextDisplay.description" | "settings.invertedDisks.title" | "settings.useNodesEndpoint.title" | "settings.useNodesEndpoint.popover" | "settings.useVirtualTables.title" | "settings.useVirtualTables.popover" | "settings.queryUseMultiSchema.title" | "settings.queryUseMultiSchema.popover", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/UserSettings/settings.d.ts

@@ -11,7 +11,7 @@ export interface SettingsPage {
     icon: IconProps;
     sections: SettingsSection[];
 }
-export declare type YDBEmbeddedUISettings = SettingsPage[];
+export type YDBEmbeddedUISettings = SettingsPage[];
 export declare const themeSetting: SettingProps;
 export declare const languageSetting: SettingProps;
 export declare const binaryDataInPlainTextDisplay: SettingProps;
@@ -19,8 +19,11 @@ export declare const invertedDisksSetting: SettingProps;
 export declare const useNodesEndpointSetting: SettingProps;
 export declare const useVirtualTables: SettingProps;
 export declare const queryUseMultiSchemaSetting: SettingProps;
+export declare const enableAutocompleteSetting: SettingProps;
 export declare const appearanceSection: SettingsSection;
 export declare const experimentsSection: SettingsSection;
+export declare const devSettingsSection: SettingsSection;
 export declare const generalPage: SettingsPage;
 export declare const experimentsPage: SettingsPage;
+export declare const editorPage: SettingsPage;
 export declare const settings: YDBEmbeddedUISettings;

package/dist/containers/UserSettings/settings.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import favoriteFilledIcon from '../../assets/icons/star.svg';
-import flaskIcon from '../../assets/icons/flask.svg';
-import { INVERTED_DISKS_KEY, LANGUAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, QUERY_USE_MULTI_SCHEMA_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, } from '../../utils/constants';
+import { PencilToSquare, Flask, StarFill } from '@gravity-ui/icons';
+import { INVERTED_DISKS_KEY, LANGUAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, QUERY_USE_MULTI_SCHEMA_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, } from '../../utils/constants';
 import { Lang, defaultLang } from '../../utils/i18n';
 import i18n from './i18n';
 import { ClusterModeGuard } from '../ClusterModeGuard';
@@ -69,6 +68,11 @@ export const queryUseMultiSchemaSetting = {
     title: i18n('settings.queryUseMultiSchema.title'),
     helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
 };
+export const enableAutocompleteSetting = {
+    settingKey: ENABLE_AUTOCOMPLETE,
+    title: i18n('settings.editor.autocomplete.title'),
+    description: i18n('settings.editor.autocomplete.description'),
+};
 export const appearanceSection = {
     id: 'appearanceSection',
     title: i18n('section.appearance'),
@@ -79,16 +83,27 @@ export const experimentsSection = {
     title: i18n('section.experiments'),
     settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
 };
+export const devSettingsSection = {
+    id: 'devSettingsSection',
+    title: i18n('section.dev-setting'),
+    settings: [enableAutocompleteSetting],
+};
 export const generalPage = {
     id: 'generalPage',
     title: i18n('page.general'),
-    icon: { data: favoriteFilledIcon, height: 14, width: 14 },
+    icon: { data: StarFill, height: 14, width: 14 },
     sections: [appearanceSection],
 };
 export const experimentsPage = {
     id: 'experimentsPage',
     title: i18n('page.experiments'),
-    icon: { data: flaskIcon },
+    icon: { data: Flask },
     sections: [experimentsSection],
 };
-export const settings = [generalPage, experimentsPage];
+export const editorPage = {
+    id: 'editorPage',
+    title: i18n('page.editor'),
+    icon: { data: PencilToSquare },
+    sections: [devSettingsSection],
+};
+export const settings = [generalPage, editorPage, experimentsPage];

package/dist/containers/Versions/NodesTable/NodesTable.js

@@ -6,7 +6,7 @@ import { formatBytes } from '../../../utils/dataFormatters/dataFormatters';
 import { getDefaultNodePath } from '../../Node/NodePages';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 const columns = [
     {
         name: 'NodeId',

package/dist/containers/Versions/Versions.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import block from 'bem-cn-lite';
 import { Checkbox, RadioButton } from '@gravity-ui/uikit';
-import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getClusterNodes } from '../../store/reducers/clusterNodes/clusterNodes';
 import { Loader } from '../../components/Loader';
 import { getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes } from './groupNodes';
@@ -12,7 +11,7 @@ import { GroupByValue } from './types';
 import './Versions.scss';
 const b = block('ydb-versions');
 export const Versions = ({ versionToColor }) => {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const { nodes = [], loading, wasLoaded } = useTypedSelector((state) => state.clusterNodes);
     useAutofetcher(() => dispatch(getClusterNodes()), [dispatch], true);
     const [groupByValue, setGroupByValue] = useState(GroupByValue.VERSION);

package/dist/reportWebVitals.d.ts

@@ -1,3 +1,3 @@
 import type { ReportHandler } from 'web-vitals';
-declare const reportWebVitals: (onPerfEntry?: ReportHandler | undefined) => void;
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
 export default reportWebVitals;

package/dist/routes.d.ts

@@ -4,18 +4,21 @@ export declare const CLUSTERS = "clusters";
 export declare const CLUSTER = "cluster";
 export declare const TENANT = "tenant";
 export declare const NODE = "node";
+export declare const PDISK = "pDisk";
 export declare const TABLET = "tablet";
 declare const routes: {
     readonly clusters: "/clusters";
     readonly cluster: "/cluster/:activeTab?";
     readonly tenant: "/tenant";
     readonly node: "/node/:id/:activeTab?";
+    readonly pDisk: "/pDisk";
     readonly tablet: "/tablet/:id";
     readonly tabletsFilters: "/tabletsFilters";
     readonly auth: "/auth";
 };
+export default routes;
 export declare const parseQuery: (location: Location) => qs.ParsedQs;
-export declare type Query = Record<string | number, string | number | string[] | number[] | undefined>;
+export type Query = Record<string | number, string | number | string[] | number[] | undefined>;
 export declare function createHref(route: string, params?: Record<string, string | number>, query?: Query): string;
 export declare const createExternalUILink: (query?: {}) => string;
 export declare function getLocationObjectFromHref(href: string): {
@@ -23,4 +26,4 @@ export declare function getLocationObjectFromHref(href: string): {
     search: string;
     hash: string;
 };
-export default routes;
+export declare function getPDiskPagePath(pDiskId: string | number, nodeId: string | number, query?: Query): string;

package/dist/routes.js

@@ -6,16 +6,19 @@ export const CLUSTERS = 'clusters';
 export const CLUSTER = 'cluster';
 export const TENANT = 'tenant';
 export const NODE = 'node';
+export const PDISK = 'pDisk';
 export const TABLET = 'tablet';
 const routes = {
     clusters: `/${CLUSTERS}`,
     cluster: `/${CLUSTER}/:activeTab?`,
     tenant: `/${TENANT}`,
     node: `/${NODE}/:id/:activeTab?`,
+    pDisk: `/${PDISK}`,
     tablet: `/${TABLET}/:id`,
     tabletsFilters: `/tabletsFilters`,
     auth: `/auth`,
 };
+export default routes;
 export const parseQuery = (location) => {
     return qs.parse(location.search, {
         ignoreQueryPrefix: true,
@@ -57,4 +60,6 @@ export function getLocationObjectFromHref(href) {
     const { pathname, search, hash } = new URL(href, 'http://localhost');
     return { pathname, search, hash };
 }
-export default routes;
+export function getPDiskPagePath(pDiskId, nodeId, query = {}) {
+    return createHref(routes.pDisk, undefined, Object.assign(Object.assign({}, query), { nodeId, pDiskId }));
+}

package/dist/services/api.d.ts

@@ -23,14 +23,15 @@ import type { ComputeApiRequestParams, NodesApiRequestParams } from '../store/re
 import type { StorageApiRequestParams } from '../store/reducers/storage/types';
 import type { MetaClusters } from '../types/api/meta';
 import type { JsonHotKeysResponse } from '../types/api/hotkeys';
-declare type AxiosOptions = {
+import { Nullable } from '../utils/typecheckers';
+type AxiosOptions = {
     concurrentId?: string;
 };
 export declare class YdbEmbeddedAPI extends AxiosWrapper {
     getPath(path: string): string;
     getClusterInfo(clusterName?: string, { concurrentId }?: AxiosOptions): Promise<TClusterInfo>;
     getClusterNodes({ concurrentId }?: AxiosOptions): Promise<TEvSystemStateResponse>;
-    getNodeInfo(id?: string): Promise<TEvSystemStateResponse>;
+    getNodeInfo(id?: string | number): Promise<TEvSystemStateResponse>;
     getTenants(clusterName?: string): Promise<TTenantInfo>;
     getTenantInfo({ path }: {
         path: string;
@@ -53,16 +54,16 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
     }): Promise<TEvTabletStateResponse>;
     getSchema({ path }: {
         path: string;
-    }, { concurrentId }?: AxiosOptions): Promise<TEvDescribeSchemeResult>;
+    }, { concurrentId }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
     getDescribe({ path }: {
         path: string;
-    }, { concurrentId }?: AxiosOptions): Promise<TEvDescribeSchemeResult>;
+    }, { concurrentId }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
     getSchemaAcl({ path }: {
         path: string;
     }): Promise<TMetaInfo>;
     getHeatmapData({ path }: {
         path: string;
-    }): Promise<TEvDescribeSchemeResult>;
+    }): Promise<Nullable<TEvDescribeSchemeResult>>;
     getNetwork(path: string): Promise<TNetInfo>;
     getTopic({ path }: {
         path?: string;
@@ -95,8 +96,8 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
     killTablet(id?: string): Promise<string>;
     stopTablet(id?: string, hiveId?: string): Promise<string>;
     resumeTablet(id?: string, hiveId?: string): Promise<string>;
-    getTabletDescribe(tenantId: TDomainKey): Promise<TEvDescribeSchemeResult>;
-    getChartData({ target, from, until, maxDataPoints }: JsonRenderRequestParams, { concurrentId }?: AxiosOptions): Promise<JsonRenderResponse>;
+    getTabletDescribe(tenantId: TDomainKey): Promise<Nullable<TEvDescribeSchemeResult>>;
+    getChartData({ target, from, until, maxDataPoints, database }: JsonRenderRequestParams, { concurrentId }?: AxiosOptions): Promise<JsonRenderResponse>;
     /** @deprecated use localStorage instead */
     postSetting(settingsApi: string, name: string, value: string): Promise<any>;
     authenticate(user: string, password: string): Promise<any>;

package/dist/services/api.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import AxiosWrapper from '@gravity-ui/axios-wrapper';
 import { backend as BACKEND, metaBackend as META_BACKEND } from '../store';
 import { prepareSortValue } from '../utils/filters';
@@ -232,9 +222,9 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             path_id: tenantId === null || tenantId === void 0 ? void 0 : tenantId.PathId,
         });
     }
-    getChartData({ target, from, until, maxDataPoints }, { concurrentId } = {}) {
+    getChartData({ target, from, until, maxDataPoints, database }, { concurrentId } = {}) {
         const requestString = `${target}&from=${from}&until=${until}&maxDataPoints=${maxDataPoints}&format=json`;
-        return this.post(this.getPath('/viewer/json/render'), requestString, {}, {
+        return this.post(this.getPath(`/viewer/json/render?database=${database}`), requestString, {}, {
             concurrentId,
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded',

package/dist/services/settings.d.ts

@@ -1,4 +1,4 @@
-export declare type SettingsObject = Record<string, unknown>;
+export type SettingsObject = Record<string, unknown>;
 /** User settings keys and their default values */
 export declare const DEFAULT_USER_SETTINGS: SettingsObject;
 declare class SettingsManager {

package/dist/services/settings.js

@@ -1,5 +1,5 @@
 import { TENANT_PAGES_IDS } from '../store/reducers/tenant/constants';
-import { ASIDE_HEADER_COMPACT_KEY, INVERTED_DISKS_KEY, LANGUAGE_KEY, LAST_USED_QUERY_ACTION_KEY, PARTITIONS_HIDDEN_COLUMNS_KEY, QUERY_INITIAL_MODE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, TENANT_INITIAL_PAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, } from '../utils/constants';
+import { ASIDE_HEADER_COMPACT_KEY, INVERTED_DISKS_KEY, LANGUAGE_KEY, LAST_USED_QUERY_ACTION_KEY, PARTITIONS_HIDDEN_COLUMNS_KEY, QUERY_INITIAL_MODE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, TENANT_INITIAL_PAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, } from '../utils/constants';
 import { QUERY_ACTIONS, QUERY_MODES } from '../utils/query';
 import { parseJson } from '../utils/utils';
 /** User settings keys and their default values */
@@ -18,6 +18,7 @@ export const DEFAULT_USER_SETTINGS = {
     [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
     [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
+    [ENABLE_AUTOCOMPLETE]: false,
 };
 class SettingsManager {
     constructor() {