ydb-embedded-ui 0.2.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [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/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -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();

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/store/reducers/executeQuery.js

@@ -7,12 +7,20 @@ 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';
 
 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: '',
@@ -21,6 +29,7 @@ const initialState = {
         currentIndex: -1,
     },
     runAction: RUN_ACTIONS_VALUES.script,
+    monacoHotKey: null,
 };
 
 const executeQuery = (state = initialState, action) => {
@@ -104,6 +113,13 @@ const executeQuery = (state = initialState, action) => {
             };
         }
 
+        case MONACO_HOT_KEY: {
+            return {
+                ...state,
+                monacoHotKey: action.data,
+            };
+        }
+
         default:
             return state;
     }
@@ -155,4 +171,11 @@ export const changeUserInput = ({input}) => {
     };
 };
 
+export const setMonacoHotKey = (value) => {
+    return {
+        type: MONACO_HOT_KEY,
+        data: value,
+    };
+};
+
 export default executeQuery;

package/package.json

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