feat: UI link to Plan2Svg

Author: astandrik

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

@@ -30,6 +30,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';
@@ -273,6 +274,9 @@ export function ExecuteResult({
                     {data?.traceId ? (
                         <TraceButton traceId={data.traceId} isTraceReady={result.isTraceReady} />
                     ) : null}
+                    {data?.plan ? (
+                        <PlanToSvgButton plan={data?.plan} database={tenantName} />
+                    ) : null}
                 </div>
                 <div className={b('controls-left')}>
                     {renderClipboardButton()}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+import {Button} from '@gravity-ui/uikit';
+
+import {planToSvgQueryApi} from '../../../../store/reducers/planToSvgQuery';
+import type {QueryPlan, ScriptPlan} from '../../../../types/api/query';
+
+import i18n from './i18n';
+
+interface PlanToSvgButtonProps {
+    plan?: QueryPlan | ScriptPlan;
+    database: string;
+}
+
+export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
+    const [checkPlanToSvg, {isLoading, isUninitialized}] =
+        planToSvgQueryApi.usePlanToSvgQueryMutation();
+
+    React.useEffect(() => {
+        let checkPlanToSvgMutation: {abort: () => void} | null;
+        if (plan) {
+            checkPlanToSvgMutation = checkPlanToSvg({plan, database});
+        }
+
+        return () => checkPlanToSvgMutation?.abort();
+    }, [checkPlanToSvg, database, plan]);
+
+    if (isUninitialized) {
+        return null;
+    }
+
+    return (
+        <Button
+            view={isLoading ? 'flat-secondary' : 'flat-info'}
+            loading={isLoading}
+            target="_blank"
+        >
+            {i18n('text_plan-svg')}
+            <Button.Icon>
+                <ArrowUpRightFromSquare />
+            </Button.Icon>
+        </Button>
+    );
+}

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

@@ -7,5 +7,6 @@
   "action.copy": "Copy {{activeSection}}",
   "trace": "Trace",
   "title.truncated": "Truncated",
-  "title.result": "Result"
+  "title.result": "Result",
+  "text_plan-svg": "Plan SVG"
 }

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/planToSvgQuery';
 import type {TMetaInfo} from '../types/api/acl';
 import type {TQueryAutocomplete} from '../types/api/autocomplete';
 import type {CapabilitiesResponse} from '../types/api/capabilities';
@@ -578,6 +579,16 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             },
         );
     }
+    planToSvg({database, plan}: PlanToSvgQueryParams, {signal}: {signal?: AbortSignal} = {}) {
+        return this.post<{test: string}>(
+            this.getPath('/viewer/plan2svg'),
+            plan,
+            {database},
+            {
+                requestConfig: {signal},
+            },
+        );
+    }
     getHotKeys(
         {path, database, enableSampling}: {path: string; database: string; enableSampling: boolean},
         {concurrentId, signal}: AxiosOptions = {},

src/store/reducers/planToSvgQuery.ts

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