ydb-embedded-ui 3.4.5 → 4.0.0

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;
+}

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/routes.ts

@@ -28,7 +28,7 @@ export const CLUSTER_PAGES = {
 
 export function createHref(
     route: string,
-    params?: object,
+    params?: Record<string, string | number>,
     query: Record<string | number, string | number | string[] | number[] | undefined> = {},
 ) {
     let extendedQuery = query;

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

@@ -96,9 +96,9 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 enums: true,
                 backup: false,
                 private: true,
-                partition_config: false,
-                partition_stats: false,
-                partitioning_info: false,
+                partition_config: true,
+                partition_stats: true,
+                partitioning_info: true,
                 subs: 1,
             },
             {concurrentId: concurrentId || `getSchema|${path}`},
@@ -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,
         });
     }