ydb-embedded-ui 3.5.0 → 4.0.0

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

@@ -5,12 +5,7 @@ import MonacoEditor from 'react-monaco-editor';
 import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
 
-import {
-    TextOverflow,
-    getYdbPlanNodeShape,
-    getCompactTopology,
-    getTopology,
-} from '@gravity-ui/paranoid';
+import {TextOverflow, getYdbPlanNodeShape, getTopology} from '@gravity-ui/paranoid';
 import {Loader, RadioButton} from '@gravity-ui/uikit';
 
 import Divider from '../../../../components/Divider/Divider';
@@ -55,7 +50,7 @@ const explainOptions = [
 function GraphRoot(props) {
     const paranoid = useRef();
 
-    const {data, opts, shapes, version, theme} = props;
+    const {data, opts, shapes, theme} = props;
 
     const [componentTheme, updateComponentTheme] = useState(theme);
 
@@ -64,13 +59,8 @@ function GraphRoot(props) {
     }, [theme]);
 
     const render = () => {
-        if (version === explainVersions.v2) {
-            paranoid.current = getTopology('graphRoot', data, opts, shapes);
-            paranoid.current.render();
-        } else if (version === explainVersions.v1) {
-            paranoid.current = getCompactTopology('graphRoot', data, opts);
-            paranoid.current.renderCompactTopology();
-        }
+        paranoid.current = getTopology('graphRoot', data, opts, shapes);
+        paranoid.current.render();
     };
 
     useEffect(() => {
@@ -112,12 +102,6 @@ function QueryExplain(props) {
         };
     }, []);
 
-    useEffect(() => {
-        if (!props.ast && activeOption === ExplainOptionIds.ast) {
-            props.astQuery();
-        }
-    }, [activeOption]);
-
     const onSelectOption = (tabId) => {
         setActiveOption(tabId);
     };
@@ -131,7 +115,9 @@ function QueryExplain(props) {
     };
 
     const renderStub = () => {
-        return <div className={b('text-message')}>There is no explanation for the request</div>;
+        return (
+            <div className={b('text-message')}>{`There is no ${activeOption} for the request`}</div>
+        );
     };
 
     const hasContent = () => {
@@ -189,8 +175,12 @@ function QueryExplain(props) {
     const renderGraph = () => {
         const {explain = {}, theme} = props;
         const {links, nodes, version} = explain;
+
+        const isSupportedVersion = version === explainVersions.v2;
+        const isEnoughDataForGraph = links && nodes && nodes.length;
+
         const content =
-            links && nodes && nodes.length ? (
+            isSupportedVersion && isEnoughDataForGraph ? (
                 <div
                     className={b('explain-canvas-container', {
                         hidden: activeOption !== ExplainOptionIds.schema,
@@ -198,7 +188,6 @@ function QueryExplain(props) {
                 >
                     <GraphRoot
                         theme={theme}
-                        version={version}
                         data={{links, nodes}}
                         opts={{
                             renderNodeTitle: renderExplainNode,

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

@@ -18,6 +18,7 @@ import {prepareQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
 import ResultIssues from '../Issues/Issues';
+import {QueryDuration} from '../QueryDuration/QueryDuration';
 
 import './QueryResult.scss';
 
@@ -116,15 +117,11 @@ function QueryResult(props) {
                         </Fullscreen>
                     )}
                 </React.Fragment>
-            )
+            );
         }
 
         if (error) {
-            return (
-                <div className={b('error')}>
-                    {prepareQueryError(error)}
-                </div>
-            );
+            return <div className={b('error')}>{prepareQueryError(error)}</div>;
         }
     };
 
@@ -136,6 +133,7 @@ function QueryResult(props) {
 
                     {props.stats && !props.error && (
                         <React.Fragment>
+                            <QueryDuration duration={props.stats?.DurationUs} />
                             <Divider />
                             <RadioButton
                                 options={resultOptions}

package/dist/containers/Tenant/QueryEditor/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "controls.query-mode-selector_type": "Type:"
+}

package/dist/containers/Tenant/QueryEditor/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-query-editor';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/QueryEditor/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "controls.query-mode-selector_type": "Тип:"
+}

package/dist/containers/UserSettings/UserSettings.tsx

@@ -9,6 +9,7 @@ import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
+    ENABLE_QUERY_MODES_FOR_EXPLAIN,
     INVERTED_DISKS_KEY,
     THEME_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
@@ -39,6 +40,10 @@ function UserSettings(props: any) {
         props.setSettingValue(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, String(value));
     };
 
+    const _onExplainQueryModesChangeHandler = (value: boolean) => {
+        props.setSettingValue(ENABLE_QUERY_MODES_FOR_EXPLAIN, String(value));
+    };
+
     const renderBreakNodesSettingsItem = (title: ReactNode) => {
         return (
             <div className={b('item-with-popup')}>
@@ -52,6 +57,19 @@ function UserSettings(props: any) {
         );
     };
 
+    const renderEnableExplainQueryModesItem = (title: ReactNode) => {
+        return (
+            <div className={b('item-with-popup')}>
+                {title}
+                <HelpPopover
+                    content="Enable script | scan query mode selector for both run and explain. May not work on some versions"
+                    contentClassName={b('popup')}
+                    hasArrow={true}
+                />
+            </div>
+        );
+    };
+
     return (
         <Settings>
             <Settings.Page
@@ -86,6 +104,15 @@ function UserSettings(props: any) {
                             onUpdate={_onNodesEndpointChangeHandler}
                         />
                     </Settings.Item>
+                    <Settings.Item
+                        title="Enable query modes for explain"
+                        renderTitleComponent={renderEnableExplainQueryModesItem}
+                    >
+                        <Switch
+                            checked={props.enableQueryModesForExplain}
+                            onUpdate={_onExplainQueryModesChangeHandler}
+                        />
+                    </Settings.Item>
                 </Settings.Section>
             </Settings.Page>
         </Settings>
@@ -93,12 +120,14 @@ function UserSettings(props: any) {
 }
 
 const mapStateToProps = (state: any) => {
-    const {theme, invertedDisks, useNodesEndpointInDiagnostics} = state.settings.userSettings;
+    const {theme, invertedDisks, useNodesEndpointInDiagnostics, enableQueryModesForExplain} =
+        state.settings.userSettings;
 
     return {
         theme,
         invertedDisks: JSON.parse(invertedDisks),
         useNodesEndpointInDiagnostics: JSON.parse(useNodesEndpointInDiagnostics),
+        enableQueryModesForExplain: JSON.parse(enableQueryModesForExplain),
     };
 };
 

package/dist/services/api.d.ts

@@ -38,14 +38,15 @@ interface Window {
             },
             axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/query').QueryAPIResponse<Action, Schema>>;
-        getExplainQuery: (
+        getExplainQuery: <Action extends import('../types/api/query').ExplainActions = 'explain'>(
             query: string,
             database: string,
-        ) => Promise<import('../types/api/query').QueryAPIExplainResponse<'explain'>>;
+            action?: Action,
+        ) => Promise<import('../types/api/query').ExplainResponse<Action>>;
         getExplainQueryAst: (
             query: string,
             database: string,
-        ) => Promise<import('../types/api/query').QueryAPIExplainResponse<'explain-ast'>>;
+        ) => Promise<import('../types/api/query').ExplainResponse<'explain-ast'>>;
         getHealthcheckInfo: (
             database: string,
         ) => Promise<import('../types/api/healthcheck').HealthCheckAPIResponse>;

package/dist/services/api.js

@@ -207,11 +207,11 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             },
         );
     }
-    getExplainQuery(query, database) {
+    getExplainQuery(query, database, action = 'explain') {
         return this.post(this.getPath('/viewer/json/query'), {
             query,
             database,
-            action: 'explain',
+            action,
             timeout: 600000,
         });
     }

package/dist/store/reducers/executeQuery.ts

@@ -1,21 +1,20 @@
 import type {Reducer} from 'redux';
 
-import type {Actions} from '../../types/api/query';
+import type {ExecuteActions} from '../../types/api/query';
 import type {
     ExecuteQueryAction,
     ExecuteQueryState,
     MonacoHotKeyAction,
-    RunAction,
 } from '../../types/store/executeQuery';
+import type {QueryRequestParams, QueryModes} from '../../types/store/query';
 import {getValueFromLS, parseJson} from '../../utils/utils';
-import {QUERIES_HISTORY_KEY, QUERY_INITIAL_RUN_ACTION_KEY} from '../../utils/constants';
+import {QUERIES_HISTORY_KEY} from '../../utils/constants';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
+import {parseQueryError} from '../../utils/error';
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-import {readSavedSettingsValue} from './settings';
-
 const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 export const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
@@ -24,18 +23,12 @@ const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
 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: string[] = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
 
 const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
-export const RUN_ACTIONS_VALUES = {
-    script: 'execute-script',
-    scan: 'execute-scan',
-} as const;
-
 export const MONACO_HOT_KEY_ACTIONS = {
     sendQuery: 'sendQuery',
     goPrev: 'goPrev',
@@ -53,7 +46,6 @@ const initialState = {
                 ? MAXIMUM_QUERIES_IN_HISTORY - 1
                 : queriesHistoryInitial.length - 1,
     },
-    runAction: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY, RUN_ACTIONS_VALUES.script),
     monacoHotKey: null,
 };
 
@@ -79,22 +71,14 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
                 error: undefined,
             };
         }
-        // 401 Unauthorized error is handled by GenericAPI
         case SEND_QUERY.FAILURE: {
             return {
                 ...state,
-                error: action.error || 'Unauthorized',
+                error: parseQueryError(action.error),
                 loading: false,
             };
         }
 
-        case SELECT_RUN_ACTION: {
-            return {
-                ...state,
-                runAction: action.data,
-            };
-        }
-
         case CHANGE_USER_INPUT: {
             return {
                 ...state,
@@ -156,15 +140,13 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
     }
 };
 
-export const sendQuery = ({
-    query,
-    database,
-    action,
-}: {
-    query: string;
-    database: string;
-    action: Actions;
-}) => {
+interface SendQueryParams extends QueryRequestParams {
+    mode?: QueryModes;
+}
+
+export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {
+    const action: ExecuteActions = mode ? `execute-${mode}` : 'execute';
+
     return createApiRequest({
         request: window.api.sendQuery({
             schema: 'modern',
@@ -185,13 +167,6 @@ export const saveQueryToHistory = (query: string) => {
     } as const;
 };
 
-export const selectRunAction = (value: RunAction) => {
-    return {
-        type: SELECT_RUN_ACTION,
-        data: value,
-    } as const;
-};
-
 export const goToPreviousQuery = () => {
     return {
         type: GO_TO_PREVIOUS_QUERY,

package/dist/store/reducers/{explainQuery.js → explainQuery.ts}

@@ -1,21 +1,33 @@
+import type {Reducer} from 'redux';
+import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid';
 import _ from 'lodash';
 
 import '../../services/api';
+import type {ExplainActions} from '../../types/api/query';
+import type {
+    ExplainQueryAction,
+    ExplainQueryState,
+    PreparedExplainResponse,
+} from '../../types/store/explainQuery';
+import type {QueryRequestParams, QueryModes} from '../../types/store/query';
 
-import {getExplainNodeId, getMetaForExplainNode} from '../../utils';
 import {preparePlan} from '../../utils/prepareQueryExplain';
-import {parseQueryAPIExplainResponse} from '../../utils/query';
+import {parseQueryAPIExplainResponse, parseQueryExplainPlan} from '../../utils/query';
+import {parseQueryError} from '../../utils/error';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const GET_EXPLAIN_QUERY = createRequestActionTypes('query', 'GET_EXPLAIN_QUERY');
-const GET_EXPLAIN_QUERY_AST = createRequestActionTypes('query', 'GET_EXPLAIN_QUERY_AST');
+export const GET_EXPLAIN_QUERY = createRequestActionTypes('query', 'GET_EXPLAIN_QUERY');
+export const GET_EXPLAIN_QUERY_AST = createRequestActionTypes('query', 'GET_EXPLAIN_QUERY_AST');
 
 const initialState = {
     loading: false,
 };
 
-const explainQuery = (state = initialState, action) => {
+const explainQuery: Reducer<ExplainQueryState, ExplainQueryAction> = (
+    state = initialState,
+    action,
+) => {
     switch (action.type) {
         case GET_EXPLAIN_QUERY.REQUEST: {
             return {
@@ -36,11 +48,10 @@ const explainQuery = (state = initialState, action) => {
                 error: undefined,
             };
         }
-        // 401 Unauthorized error is handled by GenericAPI
         case GET_EXPLAIN_QUERY.FAILURE: {
             return {
                 ...state,
-                error: action.error || 'Unauthorized',
+                error: parseQueryError(action.error),
                 loading: false,
             };
         }
@@ -63,7 +74,7 @@ const explainQuery = (state = initialState, action) => {
         case GET_EXPLAIN_QUERY_AST.FAILURE: {
             return {
                 ...state,
-                errorAst: action.error || 'Unauthorized',
+                errorAst: parseQueryError(action.error),
                 loadingAst: false,
             };
         }
@@ -73,7 +84,7 @@ const explainQuery = (state = initialState, action) => {
     }
 };
 
-export const getExplainQueryAst = ({query, database}) => {
+export const getExplainQueryAst = ({query, database}: QueryRequestParams) => {
     return createApiRequest({
         request: window.api.getExplainQueryAst(query, database),
         actions: GET_EXPLAIN_QUERY_AST,
@@ -82,74 +93,48 @@ export const getExplainQueryAst = ({query, database}) => {
 };
 
 export const explainVersions = {
-    v1: '0.1',
     v2: '0.2',
 };
 
 const supportedExplainQueryVersions = Object.values(explainVersions);
 
-export const getExplainQuery = ({query, database}) => {
+interface ExplainQueryParams extends QueryRequestParams {
+    mode?: QueryModes;
+}
+
+export const getExplainQuery = ({query, database, mode}: ExplainQueryParams) => {
+    const action: ExplainActions = mode ? `explain-${mode}` : 'explain';
+
     return createApiRequest({
-        request: window.api.getExplainQuery(query, database),
+        request: window.api.getExplainQuery(query, database, action),
         actions: GET_EXPLAIN_QUERY,
-        dataHandler: (response) => {
-            const {plan: result, ast} = parseQueryAPIExplainResponse(response);
+        dataHandler: (response): PreparedExplainResponse => {
+            const {plan: rawPlan, ast} = parseQueryAPIExplainResponse(response);
 
-            if (!result) {
+            if (!rawPlan) {
                 return {ast};
             }
 
-            let links = [];
-            let nodes = [];
-            const {tables, meta, Plan} = result;
+            const {tables, meta, Plan} = parseQueryExplainPlan(rawPlan);
 
             if (supportedExplainQueryVersions.indexOf(meta.version) === -1) {
+                // Do not prepare plan for not supported versions
                 return {
-                    pristine: result,
-                    version: meta.version,
+                    plan: {
+                        pristine: rawPlan,
+                        version: meta.version,
+                    },
+                    ast,
                 };
             }
-            if (meta.version === explainVersions.v2) {
+
+            let links: Link[] = [];
+            let nodes: GraphNode<ExplainPlanNodeData>[] = [];
+
+            if (Plan) {
                 const preparedPlan = preparePlan(Plan);
                 links = preparedPlan.links;
                 nodes = preparedPlan.nodes;
-            } else {
-                _.forEach(tables, (table) => {
-                    nodes.push({
-                        name: table.name,
-                    });
-
-                    const tableTypes = {};
-
-                    const {reads = [], writes = []} = table;
-                    let prevNodeId = table.name;
-
-                    _.forEach([...reads, ...writes], (node) => {
-                        if (tableTypes[node.type]) {
-                            tableTypes[node.type] = tableTypes[node.type] + 1;
-                        } else {
-                            tableTypes[node.type] = 1;
-                        }
-
-                        const nodeId = getExplainNodeId(
-                            table.name,
-                            node.type,
-                            tableTypes[node.type],
-                        );
-
-                        links.push({
-                            from: prevNodeId,
-                            to: nodeId,
-                        });
-                        nodes.push({
-                            name: nodeId,
-                            meta: getMetaForExplainNode(node),
-                            id: nodeId,
-                        });
-
-                        prevNodeId = nodeId;
-                    });
-                });
             }
 
             return {
@@ -158,7 +143,7 @@ export const getExplainQuery = ({query, database}) => {
                     nodes,
                     tables,
                     version: meta.version,
-                    pristine: result,
+                    pristine: rawPlan,
                 },
                 ast,
             };

package/dist/store/reducers/settings.js

@@ -3,14 +3,16 @@ import {
     SAVED_QUERIES_KEY,
     THEME_KEY,
     TENANT_INITIAL_TAB_KEY,
-    QUERY_INITIAL_RUN_ACTION_KEY,
     INVERTED_DISKS_KEY,
     ASIDE_HEADER_COMPACT_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     PARTITIONS_SELECTED_COLUMNS_KEY,
+    QUERY_INITIAL_MODE_KEY,
+    ENABLE_QUERY_MODES_FOR_EXPLAIN,
 } from '../../utils/constants';
 import '../../services/api';
-import {getValueFromLS} from '../../utils/utils';
+import {getValueFromLS, parseJson} from '../../utils/utils';
+import {QueryModes} from '../../types/store/query';
 
 const CHANGE_PROBLEM_FILTER = 'settings/CHANGE_PROBLEM_FILTER';
 const SET_SETTING_VALUE = 'settings/SET_VALUE';
@@ -44,9 +46,13 @@ export const initialState = {
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
             'false',
         ),
+        [ENABLE_QUERY_MODES_FOR_EXPLAIN]: readSavedSettingsValue(
+            ENABLE_QUERY_MODES_FOR_EXPLAIN,
+            'false',
+        ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
-        [QUERY_INITIAL_RUN_ACTION_KEY]: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY),
+        [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(
             ASIDE_HEADER_COMPACT_KEY,
             legacyAsideNavCompactState || 'true',
@@ -97,6 +103,15 @@ export const getSettingValue = (state, name) => {
     return state.settings.userSettings[name];
 };
 
+/**
+ * Returns parsed settings value.
+ * If value cannot be parsed, returns initially stored string
+ */
+export const getParsedSettingValue = (state, name) => {
+    const value = state.settings.userSettings[name];
+    return parseJson(value);
+};
+
 export const changeFilter = (filter) => {
     return {
         type: CHANGE_PROBLEM_FILTER,

package/dist/types/api/error.ts

@@ -4,3 +4,17 @@ export interface IResponseError {
     statusText?: string;
     isCancelled?: boolean;
 }
+
+// Error on offline backend or requests blocked by CORS
+export interface NetworkError {
+    code?: unknown;
+    columnNumber?: unknown;
+    config?: Record<string, unknown>;
+    description?: unknown;
+    fileName?: unknown;
+    lineNumber?: unknown;
+    message?: 'Network Error';
+    name?: string;
+    number?: unknown;
+    stack?: string;
+}