ydb-embedded-ui 0.2.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+### [1.0.2](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.1...v1.0.2) (2022-03-11)
+
+
+### Bug Fixes
+
+* **Header:** add link to internal viewer ([64af24f](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/64af24f8d78cf0d34466ac129be10c0764cce3d4))
+
+### [1.0.1](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.0...v1.0.1) (2022-03-05)
+
+
+### Bug Fixes
+
+* **QueriesHistory:** should save history to local storage ([#8](https://www.github.com/ydb-platform/ydb-embedded-ui/issues/8)) ([57031ab](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/57031ab16900e9d1112bbf506d5c777f94f883bb))
+
+## [1.0.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v0.2.0...v1.0.0) (2022-03-01)
+
+
+### Bug Fixes
+
+* **ObjectSummary:** start time should be taken from current schema object ([e7511be](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/e7511be61e5c8d2052ad3a2247a713f55049d3e6))
+* **QueryEditor:** key bindings should work properly ([ebe59b3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/ebe59b3c838889ee81e308232e4c8d2ba23a1a3a))
+* **QueryExplain:** should render graph in fullscreen view properly ([da511da](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/da511da2fc1a36282ad99f20d5d6fd0b5b4ea05b))
+* **README:** ui path should be correct ([e2668ef](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/e2668ef329de4cf31fd31061dfe3b4ac091e0121))
+
 ## [0.2.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v0.1.0...v0.2.0) (2022-02-24)
 
 

package/README.md

@@ -24,5 +24,5 @@ The build is minified and the filenames include the hashes.
 
 To test production bundle with latest YDB backend release, do the following:
 1) Build a production bundle with a few tweaks for embedded version: `npm run build:embedded`.
-2) Invoke `docker run -it --hostname localhost -e YDB_LOCAL_SURVIVE_RESTART=true -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui-opensource/build:/ydb_data/node_1/contentmonitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
+2) Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/contentmonitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
 3) Open [embedded YDB UI](http://localhost:8765/monitoring) to view it in the browser.

package/dist/containers/Header/Header.scss

@@ -25,4 +25,16 @@
         font-size: var(--yc-text-body2-font-size);
         font-weight: 500;
     }
+
+    &__cluster-name-wrapper {
+        display: flex;
+        align-items: center;
+
+        height: 100%;
+        gap: 5px;
+    }
+
+    &__divider {
+        height: 80%;
+    }
 }

package/dist/containers/Header/Header.tsx

@@ -1,15 +1,19 @@
-import {useEffect} from 'react';
+import React, {useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 import {useHistory, useLocation} from 'react-router';
+import {Breadcrumbs, BreadcrumbsItem, Link} from '@yandex-cloud/uikit';
 
-import {clusterName as clusterNameLocation} from '../../store';
+import Divider from '../../components/Divider/Divider';
+//@ts-ignore
+import Icon from '../../components/Icon/Icon';
+
+import {clusterName as clusterNameLocation, backend, customBackend} from '../../store';
 import {getClusterInfo} from '../../store/reducers/cluster';
 import {getHostInfo} from '../../store/reducers/host';
+import {HeaderItemType} from '../../store/reducers/header';
 
 import './Header.scss';
-import {Breadcrumbs, BreadcrumbsItem} from '@yandex-cloud/uikit';
-import {HeaderItemType} from '../../store/reducers/header';
 
 const b = cn('header');
 
@@ -49,6 +53,12 @@ function Header() {
     const renderHeader = () => {
         const clusterNameFinal = singleClusterMode ? host.ClusterName : clusterName;
 
+        let link = backend + '/internal';
+
+        if (singleClusterMode && !customBackend) {
+            link = `/internal`;
+        }
+
         const breadcrumbItems = header.reduce((acc, el) => {
             acc.push({text: el.text, action: () => history.push(el.link)});
             return acc;
@@ -63,8 +73,20 @@ function Header() {
                         firstDisplayedItemsCount={1}
                     />
                 </div>
-                <div>
-                    {clusterNameFinal && <ClusterName name={clusterNameFinal} />}
+
+                <div className={b('cluster-name-wrapper')}>
+                    <Link href={link} target="_blank">
+                        Internal viewer{' '}
+                        <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Link>
+                    {clusterNameFinal && (
+                        <React.Fragment>
+                            <div className={b('divider')}>
+                                <Divider />
+                            </div>
+                            <ClusterName name={clusterNameFinal} />
+                        </React.Fragment>
+                    )}
                 </div>
             </header>
         );

package/dist/containers/Tenant/Acl/Acl.scss

@@ -1,6 +1,10 @@
 @import '../../../styles/mixins.scss';
 
 .kv-acl {
+    display: flex;
+    overflow: auto;
+    flex-grow: 1;
+
     padding: 0 12px 16px;
     @include query-data-table;
     &__message-container {
@@ -38,8 +42,4 @@
             color: var(--yc-color-text-danger);
         }
     }
-
-    &__result {
-        overflow: auto;
-    }
 }

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -13,7 +13,9 @@
     max-height: 100%;
 
     &__overview-wrapper {
+        display: flex;
         overflow: auto;
+        flex-grow: 1;
 
         padding: 0 12px 16px;
     }
@@ -91,7 +93,15 @@
     }
 
     &__info {
+        display: flex;
         overflow: hidden;
+        flex-direction: column;
+    }
+
+    &__schema {
+        display: flex;
+        overflow: auto;
+        flex-grow: 1;
     }
 
     &__info-controls {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -78,7 +78,7 @@ interface ObjectSummaryProps {
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
-    additionalTenantInfo?: any
+    additionalTenantInfo?: any;
 }
 
 function ObjectSummary(props: ObjectSummaryProps) {
@@ -104,6 +104,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const {name: tenantName, info: infoTab} = queryParams;
     const tenantData = _.get(data[tenantName as string], 'PathDescription.Self');
+    const currentSchemaData = _.get(data[currentSchemaPath], 'PathDescription.Self');
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.OlapTableDescription;
@@ -152,7 +153,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     };
 
     const renderObjectOverview = () => {
-        const startTimeInMilliseconds = tenantData?.CreateStep / 1000;
+        const startTimeInMilliseconds = currentSchemaData?.CreateStep / 1000;
         let createTime = 'Unknown';
         if (startTimeInMilliseconds) {
             createTime = new Date(startTimeInMilliseconds).toUTCString();
@@ -167,10 +168,16 @@ function ObjectSummary(props: ObjectSummaryProps) {
     const renderTabContent = () => {
         switch (infoTab) {
             case TenantInfoTabsIds.acl: {
-                return <Acl additionalTenantInfo={props.additionalTenantInfo}/>;
+                return <Acl additionalTenantInfo={props.additionalTenantInfo} />;
             }
             case TenantInfoTabsIds.schema: {
-                return loadingSchema ? renderLoader() : <SchemaViewer data={schema} />;
+                return loadingSchema ? (
+                    renderLoader()
+                ) : (
+                    <div className={b('schema')}>
+                        <SchemaViewer data={schema} />
+                    </div>
+                );
             }
             default: {
                 return renderObjectOverview();
@@ -193,7 +200,9 @@ function ObjectSummary(props: ObjectSummaryProps) {
                     <div className={b('tree-title')}>Navigation</div>
                 </div>
                 <div className={b('tree')}>
-                    {tenantData && <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />}
+                    {tenantData && (
+                        <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />
+                    )}
                 </div>
             </div>
         );

package/dist/containers/Tenant/QueryEditor/QueriesHistory/QueriesHistory.tsx

@@ -38,6 +38,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
     };
 
     const renderSavedQueries = () => {
+        const reversedHistory = ([] as string[]).concat(history).reverse();
         return (
             <Popup
                 className={b('popup-wrapper')}
@@ -47,7 +48,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
                 onClose={onCloseHistory}
             >
                 <div className={b()}>
-                    {history.length === 0 ? (
+                    {reversedHistory.length === 0 ? (
                         <div className={b('empty')}>History is empty</div>
                     ) : (
                         <React.Fragment>
@@ -57,7 +58,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
                                 </div>
                             </div>
                             <div>
-                                {history?.reverse().map((query, index) => {
+                                {reversedHistory.map((query, index) => {
                                     return (
                                         <div
                                             className={b('saved-queries-row')}

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

@@ -1,6 +1,6 @@
 import {useEffect, useReducer, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
-import {connect, useDispatch} from 'react-redux';
+import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
@@ -23,6 +23,8 @@ import {
     goToNextQuery,
     selectRunAction,
     RUN_ACTIONS_VALUES,
+    MONACO_HOT_KEY_ACTIONS,
+    setMonacoHotKey,
 } from '../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
 import {showTooltip} from '../../../store/reducers/tooltip';
@@ -45,7 +47,7 @@ import {
     paneVisibilityToggleReducerCreator,
 } from '../utils/paneVisibilityToggleHelpers';
 import Preview from '../Preview/Preview';
-import { setShowPreview } from '../../../store/reducers/schema';
+import {setShowPreview} from '../../../store/reducers/schema';
 
 export const RUN_ACTIONS = [
     {value: RUN_ACTIONS_VALUES.script, content: 'Run Script'},
@@ -83,6 +85,7 @@ const propTypes = {
     executeQuery: PropTypes.object,
     explainQuery: PropTypes.object,
     showTooltip: PropTypes.func,
+    setMonacoHotKey: PropTypes.func,
     theme: PropTypes.string,
     type: PropTypes.string,
 };
@@ -95,8 +98,6 @@ const initialTenantCommonInfoState = {
 function QueryEditor(props) {
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
-    const dispatch = useDispatch()
-
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
         initialTenantCommonInfoState,
@@ -114,6 +115,7 @@ function QueryEditor(props) {
             window.removeEventListener('resize', onChangeWindow);
             window.removeEventListener('storage', storageEventHandler);
             window.onbeforeunload = undefined;
+            props.setMonacoHotKey(null);
         };
     }, []);
 
@@ -150,14 +152,29 @@ function QueryEditor(props) {
     }, [props.executeQuery, props.executeQuery]);
 
     useEffect(() => {
-        const {
-            path,
-            executeQuery: {input},
-        } = props;
-        if (resultType === RESULT_TYPES.EXPLAIN) {
-            props.getExplainQuery({query: input, database: path});
+        const {monacoHotKey, setMonacoHotKey} = props;
+        if (monacoHotKey === null) {
+            return 
+        }
+        setMonacoHotKey(null);
+        switch (monacoHotKey) {
+            case MONACO_HOT_KEY_ACTIONS.sendQuery: {
+                return handleSendClick();
+            }
+            case MONACO_HOT_KEY_ACTIONS.goPrev: {
+                return handlePreviousHistoryClick();
+            }
+            case MONACO_HOT_KEY_ACTIONS.goNext: {
+                return handleNextHistoryClick();
+            }
+            case MONACO_HOT_KEY_ACTIONS.getExplain: {
+                return handleGetExplainQueryClick();
+            }
+            default: {
+                return;
+            }
         }
-    }, [resultType]);
+    }, [props.monacoHotKey]);
 
     const checkIfHasUnsavedInput = (e) => {
         e.preventDefault();
@@ -165,6 +182,10 @@ function QueryEditor(props) {
         e.returnValue = '';
     };
 
+    const handleKeyBinding = (value) => {
+        return () => props.setMonacoHotKey(value);
+    };
+
     const editorDidMount = (editor, monaco) => {
         editorRef.current = editor;
         editor.focus();
@@ -183,9 +204,7 @@ function QueryEditor(props) {
             contextMenuOrder: 1,
             // Method that will be executed when the action is triggered.
             // @param editor The editor instance is passed in as a convinience
-            run: () => {
-                handleSendClick();
-            },
+            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.sendQuery),
         });
 
         editor.addAction({
@@ -197,9 +216,7 @@ function QueryEditor(props) {
             ],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 2,
-            run: () => {
-                handlePreviousHistoryClick();
-            },
+            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.goPrev),
         });
         editor.addAction({
             id: 'next-query',
@@ -210,9 +227,7 @@ function QueryEditor(props) {
             ],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 3,
-            run: () => {
-                handleNextHistoryClick();
-            },
+            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.goNext),
         });
 
         editor.addAction({
@@ -228,9 +243,7 @@ function QueryEditor(props) {
             keybindingContext: null,
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 4,
-            run: () => {
-                handleGetExplainQueryClick();
-            },
+            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.getExplain),
         });
     };
     const onChange = (newValue) => {
@@ -243,11 +256,12 @@ function QueryEditor(props) {
             executeQuery: {input, history, runAction},
             sendQuery,
             saveQueryToHistory,
+            setShowPreview,
         } = props;
 
         setResultType(RESULT_TYPES.EXECUTE);
         sendQuery({query: input, database: path, action: runAction});
-        dispatch(setShowPreview(false))
+        setShowPreview(false);
 
         const {queries, currentIndex} = history;
         if (input !== queries[currentIndex]) {
@@ -257,8 +271,15 @@ function QueryEditor(props) {
     };
 
     const handleGetExplainQueryClick = () => {
+        const {
+            path,
+            executeQuery: {input},
+            getExplainQuery,
+            setShowPreview,
+        } = props;
         setResultType(RESULT_TYPES.EXPLAIN);
-        dispatch(setShowPreview(false))
+        getExplainQuery({query: input, database: path});
+        setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
 
@@ -655,6 +676,7 @@ const mapStateToProps = (state) => {
         savedQueries: parseJson(getSettingValue(state, SAVED_QUERIES_KEY)),
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
+        monacoHotKey: state.executeQuery?.monacoHotKey,
     };
 };
 
@@ -669,6 +691,8 @@ const mapDispatchToProps = {
     getExplainQueryAst,
     setSettingValue,
     selectRunAction,
+    setShowPreview,
+    setMonacoHotKey,
 };
 
 QueryEditor.propTypes = propTypes;

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

@@ -1,14 +1,14 @@
-import React, {useEffect, useState, useMemo} from 'react';
+import React, {useEffect, useState} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
 import {Loader, RadioButton} from '@yandex-cloud/uikit';
 import JSONTree from 'react-json-inspector';
 import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
 import {
-    TopologyWrapper,
-    CompactTopologyWrapper,
     TextOverflow,
     getYdbPlanNodeShape,
+    getCompactTopology,
+    getTopology,
 } from '@yandex-cloud/paranoid';
 import {renderExplainNode} from '../../../../utils';
 import {explainVersions} from '../../../../store/reducers/explainQuery';
@@ -21,7 +21,7 @@ import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import 'react-json-inspector/json-inspector.css';
 import './QueryExplain.scss';
 import {useDispatch, useSelector} from 'react-redux';
-import { disableFullscreen } from '../../../../store/reducers/fullscreen';
+import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
 const b = cn('kv-query-explain');
 
@@ -61,8 +61,42 @@ const explainOptions = [
     {value: ExplainOptionIds.ast, content: 'AST'},
 ];
 
+function GraphRoot(props) {
+    let paranoid;
+    useEffect(() => {
+        const {data, opts, shapes, version} = props;
+        if (version === explainVersions.v2) {
+            paranoid = getTopology('graphRoot', props.data, opts, shapes);
+            paranoid.render();
+        } else if (version === explainVersions.v1) {
+            paranoid = getCompactTopology('graphRoot', data, opts);
+            paranoid.renderCompactTopology();
+        }
+    }, []);
+
+    useEffect(() => {
+        const graphRoot = document.getElementById('graphRoot');
+
+        if (!graphRoot) {
+            throw new Error("Can't find element with id #graphRoot");
+        }
+
+        graphRoot.innerHTML = '';
+
+        const {data, opts} = props;
+        paranoid = getCompactTopology('graphRoot', data, opts);
+        paranoid.renderCompactTopology();
+    }, [props.opts.colors]);
+
+    useEffect(() => {
+        paranoid.updateData(props.data);
+    }, [props.data]);
+
+    return <div id="graphRoot" style={{height: '100vh'}} />;
+}
+
 function QueryExplain(props) {
-    const dispatch = useDispatch()
+    const dispatch = useDispatch();
     const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
 
     const isFullscreen = useSelector((state) => state.fullscreen);
@@ -76,41 +110,6 @@ function QueryExplain(props) {
     const {explain = {}, theme} = props;
     const {links, nodes, version, graphDepth} = explain;
 
-    const graph = useMemo(() => {
-        if (links && nodes) {
-            if (version === explainVersions.v2) {
-                return (
-                    <TopologyWrapper
-                        data={{links, nodes}}
-                        opts={{
-                            renderNodeTitle: renderExplainNode,
-                            textOverflow: TextOverflow.Normal,
-                            colors: theme === 'dark' ? DARK_COLORS : {},
-                            initialZoomFitsCanvas: true,
-                        }}
-                        shapes={{
-                            node: getYdbPlanNodeShape,
-                        }}
-                    />
-                );
-            } else if (version === explainVersions.v1) {
-                return (
-                    <CompactTopologyWrapper
-                        data={{links, nodes}}
-                        opts={{
-                            renderNodeTitle: renderExplainNode,
-                            textOverflow: TextOverflow.Normal,
-                            colors: theme === 'dark' ? DARK_COLORS : {},
-                            initialZoomFitsCanvas: true,
-                        }}
-                    />
-                );
-            }
-            return 'The explanation format of the query is not supported';
-        }
-        return null;
-    }, [links, nodes, theme, version]);
-
     useEffect(() => {
         if (!props.ast && activeOption === ExplainOptionIds.ast) {
             props.astQuery();
@@ -188,19 +187,37 @@ function QueryExplain(props) {
 
     const renderGraph = () => {
         const graphHeight = `${Math.max(graphDepth * 100, 200)}px`;
-        const content = (
-            <div
-                className={b('explain-canvas-container', {
-                    hidden: activeOption !== ExplainOptionIds.schema,
-                })}
-                style={{height: graphHeight, minHeight: graphHeight, width: '100%'}}
-            >
-                {graph}
-            </div>
-        );
+
+        const content =
+            links && nodes && nodes.length ? (
+                <div
+                    className={b('explain-canvas-container', {
+                        hidden: activeOption !== ExplainOptionIds.schema,
+                    })}
+                    style={{
+                        height: isFullscreen ? '100%' : graphHeight,
+                        minHeight: graphHeight,
+                        width: '100%',
+                    }}
+                >
+                    <GraphRoot
+                        version={version}
+                        data={{links, nodes}}
+                        opts={{
+                            renderNodeTitle: renderExplainNode,
+                            textOverflow: TextOverflow.Normal,
+                            colors: theme === 'dark' ? DARK_COLORS : {},
+                            initialZoomFitsCanvas: true,
+                        }}
+                        shapes={{
+                            node: getYdbPlanNodeShape,
+                        }}
+                    />
+                </div>
+            ) : null;
         return (
             <React.Fragment>
-                {content}
+                {!isFullscreen && content}
                 {isFullscreen && <Fullscreen>{content}</Fullscreen>}
                 {renderStub()}
             </React.Fragment>
@@ -249,9 +266,7 @@ function QueryExplain(props) {
                     )}
                 </div>
                 <div className={b('controls-left')}>
-                    <EnableFullscreenButton
-                        disabled={Boolean(props.error) || activeOption === ExplainOptionIds.schema}
-                    />
+                    <EnableFullscreenButton disabled={Boolean(props.error)} />
                     <PaneVisibilityToggleButtons
                         onCollapse={props.onCollapseResults}
                         onExpand={props.onExpandResults}

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

@@ -67,7 +67,7 @@ class SchemaViewer extends React.Component {
                 theme="yandex-cloud"
                 data={tableData}
                 columns={columns}
-                settings={{...DEFAULT_TABLE_SETTINGS, stickyTop: 107}}
+                settings={DEFAULT_TABLE_SETTINGS}
                 dynamicRender={true}
                 initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
             />

package/dist/store/reducers/executeQuery.js

@@ -1,5 +1,9 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
+import {getValueFromLS, parseJson} from '../../utils/utils';
+import {QUERIES_HISTORY_KEY} from '../../utils/constants';
+
+const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
@@ -7,20 +11,33 @@ const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
 const GO_TO_PREVIOUS_QUERY = 'query/GO_TO_PREVIOUS_QUERY';
 const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
 const SELECT_RUN_ACTION = 'query/SELECT_RUN_ACTION';
+const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
+
+const queriesHistoryInitial = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, []));
+
+const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
 export const RUN_ACTIONS_VALUES = {
     script: 'execute-script',
     scan: 'execute-scan',
 };
 
+export const MONACO_HOT_KEY_ACTIONS = {
+    sendQuery: 'sendQuery',
+    goPrev: 'goPrev',
+    goNext: 'goNext',
+    getExplain: 'getExplain',
+};
+
 const initialState = {
     loading: false,
     input: '',
     history: {
-        queries: [],
+        queries: queriesHistoryInitial.slice(sliceLimit < 0 ? 0 : sliceLimit),
         currentIndex: -1,
     },
     runAction: RUN_ACTIONS_VALUES.script,
+    monacoHotKey: null,
 };
 
 const executeQuery = (state = initialState, action) => {
@@ -67,7 +84,10 @@ const executeQuery = (state = initialState, action) => {
 
         case SAVE_QUERY_TO_HISTORY: {
             const query = action.data;
-            const newQueries = [...state.history.queries, query];
+            const newQueries = [...state.history.queries, query].slice(
+                state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
+            );
+            window.localStorage.setItem(QUERIES_HISTORY_KEY, JSON.stringify(newQueries));
             const currentIndex = newQueries.length - 1;
 
             return {
@@ -104,6 +124,13 @@ const executeQuery = (state = initialState, action) => {
             };
         }
 
+        case MONACO_HOT_KEY: {
+            return {
+                ...state,
+                monacoHotKey: action.data,
+            };
+        }
+
         default:
             return state;
     }
@@ -155,4 +182,11 @@ export const changeUserInput = ({input}) => {
     };
 };
 
+export const setMonacoHotKey = (value) => {
+    return {
+        type: MONACO_HOT_KEY,
+        data: value,
+    };
+};
+
 export default executeQuery;

package/dist/utils/constants.js

@@ -120,6 +120,7 @@ export const PROBLEMS = 'With problems';
 
 export const THEME_KEY = 'theme';
 export const SAVED_QUERIES_KEY = 'saved_queries';
+export const QUERIES_HISTORY_KEY = 'queries_history';
 export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
 
 export const defaultUserSettings = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "0.2.0",
+  "version": "1.0.2",
   "files": [
     "dist"
   ],