feat: add to embedded ui link to plan2svg converter (#1619)

Co-authored-by: Anton Standrik <[email protected]>

Author: astandrik

src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -18,8 +18,9 @@ import type {ValueOf} from '../../../../types/common';
 import type {ExecuteQueryResult} from '../../../../types/store/executeQuery';
 import {getArray} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
+import {USE_SHOW_PLAN_SVG_KEY} from '../../../../utils/constants';
 import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
-import {useTypedDispatch} from '../../../../utils/hooks';
+import {useSetting, useTypedDispatch} from '../../../../utils/hooks';
 import {parseQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {CancelQueryButton} from '../CancelQueryButton/CancelQueryButton';
@@ -30,6 +31,7 @@ import {QuerySettingsBanner} from '../QuerySettingsBanner/QuerySettingsBanner';
 import {getPreparedResult} from '../utils/getPreparedResult';
 import {isQueryCancelledError} from '../utils/isQueryCancelledError';
 
+import {PlanToSvgButton} from './PlanToSvgButton';
 import {TraceButton} from './TraceButton';
 import i18n from './i18n';
 import {getPlan} from './utils';
@@ -67,6 +69,7 @@ export function ExecuteResult({
     const [selectedResultSet, setSelectedResultSet] = React.useState(0);
     const [activeSection, setActiveSection] = React.useState<SectionID>(resultOptionsIds.result);
     const dispatch = useTypedDispatch();
+    const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
     const {error, isLoading, queryId, data} = result;
 
@@ -273,6 +276,9 @@ export function ExecuteResult({
                     {data?.traceId ? (
                         <TraceButton traceId={data.traceId} isTraceReady={result.isTraceReady} />
                     ) : null}
+                    {data?.plan && useShowPlanToSvg ? (
+                        <PlanToSvgButton plan={data?.plan} database={tenantName} />
+                    ) : null}
                 </div>
                 <div className={b('controls-left')}>
                     {renderClipboardButton()}

src/containers/Tenant/Query/ExecuteResult/PlanToSvgButton.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+import {Button, Tooltip} from '@gravity-ui/uikit';
+
+import {planToSvgApi} from '../../../../store/reducers/planToSvg';
+import type {QueryPlan, ScriptPlan} from '../../../../types/api/query';
+
+import i18n from './i18n';
+
+function getButtonView(error: string | null, isLoading: boolean) {
+    if (error) {
+        return 'flat-danger';
+    }
+    return isLoading ? 'flat-secondary' : 'flat-info';
+}
+
+interface PlanToSvgButtonProps {
+    plan: QueryPlan | ScriptPlan;
+    database: string;
+}
+
+export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
+    const [error, setError] = React.useState<string | null>(null);
+    const [blobUrl, setBlobUrl] = React.useState<string | null>(null);
+    const [getPlanToSvg, {isLoading}] = planToSvgApi.usePlanToSvgQueryMutation();
+
+    const handleClick = React.useCallback(() => {
+        getPlanToSvg({plan, database})
+            .unwrap()
+            .then((result) => {
+                const blob = new Blob([result], {type: 'image/svg+xml'});
+                const url = URL.createObjectURL(blob);
+                setBlobUrl(url);
+                setError(null);
+                window.open(url, '_blank');
+            })
+            .catch((err) => {
+                setError(JSON.stringify(err));
+            });
+    }, [database, getPlanToSvg, plan]);
+
+    React.useEffect(() => {
+        return () => {
+            if (blobUrl) {
+                URL.revokeObjectURL(blobUrl);
+            }
+        };
+    }, [blobUrl]);
+
+    return (
+        <Tooltip
+            content={error ? i18n('text_error-plan-svg', {error}) : i18n('text_open-plan-svg')}
+        >
+            <Button
+                view={getButtonView(error, isLoading)}
+                loading={isLoading}
+                onClick={handleClick}
+                disabled={isLoading}
+            >
+                {i18n('text_plan-svg')}
+                <Button.Icon>
+                    <ArrowUpRightFromSquare />
+                </Button.Icon>
+            </Button>
+        </Tooltip>
+    );
+}

src/containers/Tenant/Query/ExecuteResult/i18n/en.json

@@ -7,5 +7,8 @@
   "action.copy": "Copy {{activeSection}}",
   "trace": "Trace",
   "title.truncated": "Truncated",
-  "title.result": "Result"
+  "title.result": "Result",
+  "text_plan-svg": "Execution plan",
+  "text_open-plan-svg": "Open execution plan in new window",
+  "text_error-plan-svg": "Error: {{error}}"
 }

src/containers/UserSettings/i18n/en.json

@@ -33,6 +33,9 @@
   "settings.usePaginatedTables.title": "Use paginated tables",
   "settings.usePaginatedTables.description": " Use table with data load on scroll for Nodes and Storage tabs. It will increase performance, but could work unstable",
 
+  "settings.useShowPlanToSvg.title": "Plan to svg",
+  "settings.useShowPlanToSvg.description": " Show \"Plan to svg\" button in query result widow (if query was executed with full stats option).",
+
   "settings.showDomainDatabase.title": "Show domain database",
 
   "settings.useClusterBalancerAsBackend.title": "Use cluster balancer as backend",

src/containers/UserSettings/settings.tsx

@@ -12,6 +12,7 @@ import {
     THEME_KEY,
     USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     USE_PAGINATED_TABLES_KEY,
+    USE_SHOW_PLAN_SVG_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 
@@ -96,6 +97,12 @@ export const usePaginatedTables: SettingProps = {
     description: i18n('settings.usePaginatedTables.description'),
 };
 
+export const useShowPlanToSvgTables: SettingProps = {
+    settingKey: USE_SHOW_PLAN_SVG_KEY,
+    title: i18n('settings.useShowPlanToSvg.title'),
+    description: i18n('settings.useShowPlanToSvg.description'),
+};
+
 export const showDomainDatabase: SettingProps = {
     settingKey: SHOW_DOMAIN_DATABASE_KEY,
     title: i18n('settings.showDomainDatabase.title'),
@@ -138,7 +145,7 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [usePaginatedTables],
+    settings: [usePaginatedTables, useShowPlanToSvgTables],
 };
 export const devSettingsSection: SettingsSection = {
     id: 'devSettingsSection',

src/services/api.ts

@@ -4,6 +4,7 @@ import type {AxiosRequestConfig} from 'axios';
 import axiosRetry from 'axios-retry';
 
 import {backend as BACKEND, metaBackend as META_BACKEND} from '../store';
+import type {PlanToSvgQueryParams} from '../store/reducers/planToSvg';
 import type {TMetaInfo} from '../types/api/acl';
 import type {TQueryAutocomplete} from '../types/api/autocomplete';
 import type {CapabilitiesResponse} from '../types/api/capabilities';
@@ -578,6 +579,22 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             },
         );
     }
+    planToSvg({database, plan}: PlanToSvgQueryParams, {signal}: {signal?: AbortSignal} = {}) {
+        return this.post<string>(
+            this.getPath('/viewer/plan2svg'),
+            plan,
+            {database},
+            {
+                requestConfig: {
+                    signal,
+                    responseType: 'text',
+                    headers: {
+                        Accept: 'image/svg+xml',
+                    },
+                },
+            },
+        );
+    }
     getHotKeys(
         {path, database, enableSampling}: {path: string; database: string; enableSampling: boolean},
         {concurrentId, signal}: AxiosOptions = {},

src/services/settings.ts

@@ -19,6 +19,7 @@ import {
     THEME_KEY,
     USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     USE_PAGINATED_TABLES_KEY,
+    USE_SHOW_PLAN_SVG_KEY,
 } from '../utils/constants';
 import {DEFAULT_QUERY_SETTINGS, QUERY_ACTIONS} from '../utils/query';
 import {parseJson} from '../utils/utils';
@@ -37,6 +38,7 @@ export const DEFAULT_USER_SETTINGS = {
     [ASIDE_HEADER_COMPACT_KEY]: true,
     [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
     [USE_PAGINATED_TABLES_KEY]: true,
+    [USE_SHOW_PLAN_SVG_KEY]: false,
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
     [ENABLE_AUTOCOMPLETE]: true,
     [AUTOCOMPLETE_ON_ENTER]: true,

src/store/reducers/planToSvg.ts

@@ -0,0 +1,31 @@
+import type {QueryPlan, ScriptPlan} from '../../types/api/query';
+
+import {api} from './api';
+
+export interface PlanToSvgQueryParams {
+    plan: ScriptPlan | QueryPlan;
+    database: string;
+}
+
+export const planToSvgApi = api.injectEndpoints({
+    endpoints: (build) => ({
+        planToSvgQuery: build.mutation<string, PlanToSvgQueryParams>({
+            queryFn: async ({plan, database}, {signal}) => {
+                try {
+                    const response = await window.api.planToSvg(
+                        {
+                            database,
+                            plan,
+                        },
+                        {signal},
+                    );
+
+                    return {data: response};
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+    }),
+    overrideExisting: 'throw',
+});

src/utils/constants.ts

@@ -134,6 +134,8 @@ export const TENANT_INITIAL_PAGE_KEY = 'saved_tenant_initial_tab';
 // Old key value for backward compatibility
 export const USE_PAGINATED_TABLES_KEY = 'useBackendParamsForTables';
 
+export const USE_SHOW_PLAN_SVG_KEY = 'useShowPlanToSvg';
+
 // Setting to hide domain in database list
 export const SHOW_DOMAIN_DATABASE_KEY = 'showDomainDatabase';