ydb-embedded-ui 3.5.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [4.0.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.5.0...v4.0.0) (2023-04-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* app no longer parses query responses from older ydb versions
+* v0.1 explain plans are no longer rendered
+
+### Features
+
+* enable explain-script parsing, remove deprecated code ([5c6e9a2](https://github.com/ydb-platform/ydb-embedded-ui/commit/5c6e9a21026ea9eb3e32650e6fdda89c7900e7e6))
+* **QueryEditor:** add explain query modes ([39ad943](https://github.com/ydb-platform/ydb-embedded-ui/commit/39ad9434c1622e22901e6cc1af1568e0edf6b434))
+* **QueryEditor:** display query duration ([967f102](https://github.com/ydb-platform/ydb-embedded-ui/commit/967f10296d2362709654172ed7318509286efc78))
+* remove support for explain v0.1 ([c8741a6](https://github.com/ydb-platform/ydb-embedded-ui/commit/c8741a69b82053185a07c7ba563455d4f28ecdce))
+
+
+### Bug Fixes
+
+* **query:** correctly process NetworkError on actions failure ([cf5bd6c](https://github.com/ydb-platform/ydb-embedded-ui/commit/cf5bd6c5c4c2972fec93b2dc9135c92c639fa5f9))
+* **QueryExplain:** do not request ast when missing ([54cf151](https://github.com/ydb-platform/ydb-embedded-ui/commit/54cf151452e17256173736450f5727085ea591ff))
+* **QueryExplain:** request AST if it is empty ([d028b4e](https://github.com/ydb-platform/ydb-embedded-ui/commit/d028b4ed08a98281baff81683204f1cbc1c20c37))
+
 ## [3.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.5...v3.5.0) (2023-04-18)
 
 

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

@@ -2,8 +2,9 @@ import React, {useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import {Button, Popup} from '@gravity-ui/uikit';
+
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {useSelector} from 'react-redux';
+import {useTypedSelector} from '../../../../utils/hooks';
 
 import './QueriesHistory.scss';
 
@@ -17,8 +18,7 @@ interface QueriesHistoryProps {
 
 function QueriesHistory(props: QueriesHistoryProps) {
     const [isHistoryVisible, setIsHistoryVisible] = useState(false);
-    const history: string[] =
-        useSelector((state: any) => state.executeQuery.history?.queries) ?? [];
+    const history = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
     const anchor = useRef(null);
 
     const onShowHistoryClick = () => {

package/dist/containers/Tenant/QueryEditor/QueryDuration/QueryDuration.scss

@@ -0,0 +1,8 @@
+.ydb-query-duration {
+    display: flex;
+    align-items: center;
+
+    margin-left: 10px;
+
+    color: var(--yc-color-text-complementary);
+}

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

@@ -0,0 +1,21 @@
+import block from 'bem-cn-lite';
+
+import {formatDurationToShortTimeFormat, parseUsToMs} from '../../../../utils/timeParsers';
+
+import './QueryDuration.scss';
+
+interface QueryDurationProps {
+    duration?: string;
+}
+
+const b = block('ydb-query-duration');
+
+export const QueryDuration = ({duration}: QueryDurationProps) => {
+    if (!duration) {
+        return null;
+    }
+
+    const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
+
+    return <span className={b()}>{parsedDuration}</span>;
+};

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

@@ -4,41 +4,36 @@ import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import SplitPane from '../../../components/SplitPane';
 import {QueryResultTable} from '../../../components/QueryResultTable';
 
-import SaveQuery from './SaveQuery/SaveQuery';
 import SavedQueries from './SavedQueries/SavedQueries';
-import {Icon} from '../../../components/Icon';
 import QueryResult from './QueryResult/QueryResult';
 import QueryExplain from './QueryExplain/QueryExplain';
+import {QueryEditorControls} from './QueryEditorControls/QueryEditorControls';
+import {OldQueryEditorControls} from './QueryEditorControls/OldQueryEditorControls';
 
 import {
-    sendQuery,
+    sendExecuteQuery,
     changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,
-    selectRunAction,
-    RUN_ACTIONS_VALUES,
     MONACO_HOT_KEY_ACTIONS,
     setMonacoHotKey,
 } from '../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
-import {getSettingValue, setSettingValue} from '../../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     SAVED_QUERIES_KEY,
-    QUERY_INITIAL_RUN_ACTION_KEY,
+    QUERY_INITIAL_MODE_KEY,
+    ENABLE_QUERY_MODES_FOR_EXPLAIN,
 } from '../../../utils/constants';
 
-import {parseJson} from '../../../utils/utils';
-
 import './QueryEditor.scss';
-import Divider from '../../../components/Divider/Divider';
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import {
     PaneVisibilityActionTypes,
@@ -47,11 +42,6 @@ import {
 import Preview from '../Preview/Preview';
 import {setShowPreview} from '../../../store/reducers/schema';
 
-export const RUN_ACTIONS = [
-    {value: RUN_ACTIONS_VALUES.script, content: 'Run Script'},
-    {value: RUN_ACTIONS_VALUES.scan, content: 'Run Scan'},
-];
-
 const TABLE_SETTINGS = {
     sortable: false,
 };
@@ -73,7 +63,7 @@ const RESULT_TYPES = {
 const b = cn('query-editor');
 
 const propTypes = {
-    sendQuery: PropTypes.func,
+    sendExecuteQuery: PropTypes.func,
     path: PropTypes.string,
     response: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
     executeQuery: PropTypes.object,
@@ -81,6 +71,7 @@ const propTypes = {
     setMonacoHotKey: PropTypes.func,
     theme: PropTypes.string,
     type: PropTypes.string,
+    initialQueryMode: PropTypes.string,
 };
 
 const initialTenantCommonInfoState = {
@@ -92,6 +83,7 @@ function QueryEditor(props) {
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
+    const [queryMode, setQueryMode] = useState(props.initialQueryMode);
 
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
@@ -155,7 +147,7 @@ function QueryEditor(props) {
         setMonacoHotKey(null);
         switch (monacoHotKey) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
-                return handleSendClick();
+                return handleSendExecuteClick(queryMode);
             }
             case MONACO_HOT_KEY_ACTIONS.goPrev: {
                 return handlePreviousHistoryClick();
@@ -246,17 +238,17 @@ function QueryEditor(props) {
         props.changeUserInput({input: newValue});
     };
 
-    const handleSendClick = () => {
+    const handleSendExecuteClick = (mode) => {
         const {
             path,
-            executeQuery: {input, history, runAction},
-            sendQuery,
+            executeQuery: {input, history},
+            sendExecuteQuery,
             saveQueryToHistory,
             setShowPreview,
         } = props;
 
         setResultType(RESULT_TYPES.EXECUTE);
-        sendQuery({query: input, database: path, action: runAction});
+        sendExecuteQuery({query: input, database: path, mode});
         setIsResultLoaded(true);
         setShowPreview(false);
 
@@ -267,15 +259,20 @@ function QueryEditor(props) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
 
-    const handleGetExplainQueryClick = () => {
+    const handleGetExplainQueryClick = (mode) => {
         const {
             path,
             executeQuery: {input},
             getExplainQuery,
             setShowPreview,
         } = props;
+
         setResultType(RESULT_TYPES.EXPLAIN);
-        getExplainQuery({query: input, database: path});
+        getExplainQuery({
+            query: input,
+            database: path,
+            mode: mode,
+        });
         setIsResultLoaded(true);
         setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
@@ -513,65 +510,42 @@ function QueryEditor(props) {
         setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
     };
 
-    const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries, selectRunAction, setSettingValue} = props;
-        const {runAction} = executeQuery;
-        const runIsDisabled = !executeQuery.input || executeQuery.loading;
-        const runText = _.find(RUN_ACTIONS, {value: runAction}).content;
-
-        const menuItems = RUN_ACTIONS.map((action) => {
-            return {
-                text: action.content,
-                action: () => {
-                    selectRunAction(action.value);
-                    setSettingValue(QUERY_INITIAL_RUN_ACTION_KEY, action.value);
-                },
-            };
-        });
+    const onUpdateQueryMode = (mode) => {
+        setQueryMode(mode);
+        props.setSettingValue(QUERY_INITIAL_MODE_KEY, mode);
+    };
 
-        return (
-            <div className={b('controls')}>
-                <div className={b('control-run')}>
-                    <Button
-                        onClick={handleSendClick}
-                        view="action"
-                        pin="round-brick"
-                        disabled={runIsDisabled}
-                        loading={executeQuery.loading}
-                    >
-                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {runText}
-                    </Button>
-                    <DropdownMenu
-                        items={menuItems}
-                        popupClassName={b('select-query-action-popup')}
-                        switcher={
-                            <Button
-                                view="action"
-                                pin="brick-round"
-                                disabled={runIsDisabled}
-                                loading={executeQuery.loading}
-                                className={b('select-query-action')}
-                            >
-                                <Icon name="chevron-down" width={16} height={16} />
-                            </Button>
-                        }
-                    />
-                </div>
-                <Button
-                    onClick={handleGetExplainQueryClick}
-                    disabled={!executeQuery.input}
-                    loading={explainQuery.loading}
-                >
-                    Explain
-                </Button>
-                <Divider />
-                <SaveQuery
+    const renderControls = () => {
+        const {executeQuery, explainQuery, savedQueries, enableQueryModesForExplain} = props;
+
+        if (enableQueryModesForExplain) {
+            return (
+                <QueryEditorControls
+                    onRunButtonClick={handleSendExecuteClick}
+                    runIsLoading={executeQuery.loading}
+                    onExplainButtonClick={handleGetExplainQueryClick}
+                    explainIsLoading={explainQuery.loading}
+                    onSaveQueryClick={onSaveQueryHandler}
                     savedQueries={savedQueries}
-                    onSaveQuery={onSaveQueryHandler}
-                    saveButtonDisabled={runIsDisabled}
+                    disabled={!executeQuery.input}
+                    onUpdateQueryMode={onUpdateQueryMode}
+                    queryMode={queryMode}
                 />
-            </div>
+            );
+        }
+
+        return (
+            <OldQueryEditorControls
+                onRunButtonClick={handleSendExecuteClick}
+                runIsLoading={executeQuery.loading}
+                onExplainButtonClick={handleGetExplainQueryClick}
+                explainIsLoading={explainQuery.loading}
+                onSaveQueryClick={onSaveQueryHandler}
+                savedQueries={savedQueries}
+                disabled={!executeQuery.input}
+                onUpdateQueryMode={onUpdateQueryMode}
+                queryMode={queryMode}
+            />
         );
     };
 
@@ -632,7 +606,9 @@ const mapStateToProps = (state) => {
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
-        savedQueries: parseJson(getSettingValue(state, SAVED_QUERIES_KEY)),
+        savedQueries: getParsedSettingValue(state, SAVED_QUERIES_KEY),
+        initialQueryMode: getParsedSettingValue(state, QUERY_INITIAL_MODE_KEY),
+        enableQueryModesForExplain: getParsedSettingValue(state, ENABLE_QUERY_MODES_FOR_EXPLAIN),
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
         monacoHotKey: state.executeQuery?.monacoHotKey,
@@ -640,7 +616,7 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = {
-    sendQuery,
+    sendExecuteQuery,
     changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
@@ -648,7 +624,6 @@ const mapDispatchToProps = {
     getExplainQuery,
     getExplainQueryAst,
     setSettingValue,
-    selectRunAction,
     setShowPreview,
     setMonacoHotKey,
 };

package/dist/containers/Tenant/QueryEditor/QueryEditor.scss

@@ -54,35 +54,6 @@
         align-items: center;
     }
 
-    &__controls {
-        display: flex;
-        flex: 0 0 40px;
-        align-items: flex-end;
-
-        min-height: 40px;
-        padding: 5px 20px;
-
-        border-top: 1px solid var(--yc-color-line-generic);
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
-        gap: 12px;
-    }
-
-    &__control-run {
-        display: flex;
-        align-items: center;
-        .yc-select__option-text {
-            display: none;
-        }
-
-        .yc-button__text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-        }
-    }
-
     &__history-controls {
         display: flex;
         align-items: center;
@@ -93,8 +64,4 @@
 
         color: var(--yc-color-text-secondary);
     }
-
-    &__select-query-action {
-        margin-left: 2px;
-    }
 }

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/OldQueryEditorControls.tsx

@@ -0,0 +1,83 @@
+import {Button, DropdownMenu} from '@gravity-ui/uikit';
+import {useMemo} from 'react';
+
+import {QueryModes} from '../../../../types/store/query';
+import {Icon} from '../../../../components/Icon';
+
+import SaveQuery from '../SaveQuery/SaveQuery';
+
+import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
+
+import './QueryEditorControls.scss';
+
+export const OldQueryEditorControls = ({
+    onRunButtonClick,
+    runIsLoading,
+    onExplainButtonClick,
+    explainIsLoading,
+    onSaveQueryClick,
+    savedQueries,
+    disabled,
+    onUpdateQueryMode,
+    queryMode,
+}: QueryEditorControlsProps) => {
+    const runModeSelectorMenuItems = useMemo(() => {
+        return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
+            return {
+                text: `Run ${title}`,
+                action: () => {
+                    onUpdateQueryMode(mode as QueryModes);
+                },
+            };
+        });
+    }, [onUpdateQueryMode]);
+
+    return (
+        <div className={b()}>
+            <div className={b('left')}>
+                <div className={b('run')}>
+                    <Button
+                        onClick={() => onRunButtonClick(queryMode)}
+                        view="action"
+                        pin="round-brick"
+                        disabled={disabled}
+                        loading={runIsLoading}
+                    >
+                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
+                        {`Run ${QueryModeSelectorTitles[queryMode]}`}
+                    </Button>
+                    <DropdownMenu
+                        items={runModeSelectorMenuItems}
+                        popupClassName={b('select-query-action-popup')}
+                        switcher={
+                            <Button
+                                view="action"
+                                pin="brick-round"
+                                disabled={disabled}
+                                loading={runIsLoading}
+                                className={b('select-query-action')}
+                            >
+                                <Icon name="chevron-down" width={16} height={16} />
+                            </Button>
+                        }
+                    />
+                </div>
+                <Button
+                    onClick={() => {
+                        // Without defined query mode it sends 'explain' action
+                        onExplainButtonClick();
+                    }}
+                    disabled={disabled}
+                    loading={explainIsLoading}
+                >
+                    Explain
+                </Button>
+            </div>
+            <SaveQuery
+                savedQueries={savedQueries}
+                onSaveQuery={onSaveQueryClick}
+                saveButtonDisabled={disabled}
+            />
+        </div>
+    );
+};

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/QueryEditorControls.scss

@@ -0,0 +1,57 @@
+.ydb-query-editor-controls {
+    display: flex;
+    flex: 0 0 40px;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    min-height: 40px;
+    padding: 5px 20px;
+
+    border-top: 1px solid var(--yc-color-line-generic);
+    border-bottom: 1px solid var(--yc-color-line-generic);
+    background-color: var(--yc-color-base-background);
+    gap: 24px;
+
+    &__left {
+        display: flex;
+        gap: 12px;
+    }
+
+    &__run {
+        display: flex;
+        align-items: center;
+        .yc-select__option-text {
+            display: none;
+        }
+
+        .yc-button__text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+        }
+    }
+
+    &__select-query-action {
+        margin-left: 2px;
+    }
+
+    &__mode-selector {
+        &__popup {
+            width: 120px;
+        }
+
+        &__button {
+            width: 120px;
+            margin-left: 2px;
+        }
+
+        &__button-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            width: 100px;
+        }
+    }
+}

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

@@ -0,0 +1,84 @@
+import {Button, DropdownMenu} from '@gravity-ui/uikit';
+import {useMemo} from 'react';
+
+import {QueryModes} from '../../../../types/store/query';
+import {Icon} from '../../../../components/Icon';
+
+import SaveQuery from '../SaveQuery/SaveQuery';
+
+import i18n from '../i18n';
+
+import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
+
+import './QueryEditorControls.scss';
+
+export const QueryEditorControls = ({
+    onRunButtonClick,
+    runIsLoading,
+    onExplainButtonClick,
+    explainIsLoading,
+    onSaveQueryClick,
+    savedQueries,
+    disabled,
+    onUpdateQueryMode,
+    queryMode,
+}: QueryEditorControlsProps) => {
+    const querySelectorMenuItems = useMemo(() => {
+        return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
+            return {
+                text: title,
+                action: () => {
+                    onUpdateQueryMode(mode as QueryModes);
+                },
+            };
+        });
+    }, [onUpdateQueryMode]);
+
+    return (
+        <div className={b()}>
+            <div className={b('left')}>
+                <div className={b('run')}>
+                    <Button
+                        onClick={() => {
+                            onRunButtonClick(queryMode);
+                        }}
+                        view="action"
+                        disabled={disabled}
+                        loading={runIsLoading}
+                    >
+                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
+                        {'Run'}
+                    </Button>
+                </div>
+                <Button
+                    onClick={() => {
+                        onExplainButtonClick(queryMode);
+                    }}
+                    disabled={disabled}
+                    loading={explainIsLoading}
+                >
+                    Explain
+                </Button>
+                <DropdownMenu
+                    items={querySelectorMenuItems}
+                    popupClassName={b('mode-selector__popup')}
+                    switcher={
+                        <Button className={b('mode-selector__button')}>
+                            <span className={b('mode-selector__button-content')}>
+                                {`${i18n('controls.query-mode-selector_type')} ${
+                                    QueryModeSelectorTitles[queryMode]
+                                }`}
+                                <Icon name="chevron-down" width={16} height={16} />
+                            </span>
+                        </Button>
+                    }
+                />
+            </div>
+            <SaveQuery
+                savedQueries={savedQueries}
+                onSaveQuery={onSaveQueryClick}
+                saveButtonDisabled={disabled}
+            />
+        </div>
+    );
+};

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/shared.ts

@@ -0,0 +1,23 @@
+import block from 'bem-cn-lite';
+
+import {QueryModes} from '../../../../types/store/query';
+
+export const b = block('ydb-query-editor-controls');
+
+export const QueryModeSelectorTitles = {
+    [QueryModes.script]: 'Script',
+    [QueryModes.scan]: 'Scan',
+} as const;
+
+export interface QueryEditorControlsProps {
+    onRunButtonClick: (mode?: QueryModes) => void;
+    runIsLoading: boolean;
+    onExplainButtonClick: (mode?: QueryModes) => void;
+    explainIsLoading: boolean;
+    onSaveQueryClick: (queryName: string) => void;
+    savedQueries: unknown;
+    disabled: boolean;
+    onUpdateQueryMode: (mode: QueryModes) => void;
+    queryMode: QueryModes;
+    enableQueryModesForExplain: boolean;
+}