feat(QueryTracker): support validate and explain for yql queries [#370]

ytsaurus · Apr 12, 2024 · 2ba362e · 2ba362e
1 parent 0e82358
commit 2ba362e
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 7 deletions.
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryACO/QueryACOSelect/QueryACOSelect.scss b/packages/ui/src/ui/pages/query-tracker/QueryACO/QueryACOSelect/QueryACOSelect.scss
@@ -1,3 +1,4 @@
 .query-aco-select {
     min-width: 210px;
+    margin-left: auto;
 }
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryACO/QueryACOSelect/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryACO/QueryACOSelect/index.tsx
@@ -27,7 +27,6 @@ export const QueryACOSelect: React.FunctionComponent<{}> = () => {
                 filterable
                 disabled={isFlight}
                 width={'auto'}
-                pin="clear-round"
                 label="Query access:"
                 className={'query-aco-select'}
                 options={selectACOOptions}

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryEditor/QueryEditor.scss b/packages/ui/src/ui/pages/query-tracker/QueryEditor/QueryEditor.scss
@@ -52,11 +52,20 @@
         background: var(--main-background);
 
         .query-run-action {
+            width: 100%;
             display: flex;
             align-items: center;
-            padding-right: 12px;
             margin-right: 12px;
         }
+
+    }
+
+    &__action-button {
+        margin-right: 4px;
+
+        &:not(:first-child) {
+            margin-left: 4px;
+        }
     }
 
     &__error-line {

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryEditor/QueryEditor.tsx b/packages/ui/src/ui/pages/query-tracker/QueryEditor/QueryEditor.tsx
@@ -156,35 +156,66 @@ const QueryEditorView = React.memo(function QueryEditorView({
         };
     }, [engine]);
 
-    const upadteQueryText = useCallback(
+    const updateQueryText = useCallback(
         function (text: string) {
             dispatch(updateQueryDraft({query: text, error: undefined}));
         },
         [dispatch],
     );
 
+    const validateQueryCallback = useCallback(
+        function () {
+            dispatch(runQuery(onStartQuery, {execution_mode: 'validate'}));
+        },
+        [dispatch, onStartQuery],
+    );
+
+    const explainQueryCallback = useCallback(
+        function () {
+            dispatch(runQuery(onStartQuery, {execution_mode: 'optimize'}));
+        },
+        [dispatch, onStartQuery],
+    );
+
     return (
         <div className={b('query')}>
             <MonacoEditor
                 editorRef={editorRef}
                 value={text || ''}
                 language={getLanguageByEngine(engine)}
                 className={b('editor')}
-                onChange={upadteQueryText}
+                onChange={updateQueryText}
                 monacoConfig={monacoConfig}
             />
             <div className={b('actions')}>
                 <div className="query-run-action">
                     <Button
                         qa="qt-run"
-                        pin={isACOSupported ? 'round-brick' : undefined}
-                        className="query-run-action-button"
                         view="action"
                         onClick={runQueryCallback}
+                        className={b('action-button')}
                     >
                         <Icon data={playIcon} />
                         Run
                     </Button>
+                    {engine === QueryEngine.YQL ? (
+                        <>
+                            <Button
+                                qa="qt-validate"
+                                className={b('action-button')}
+                                onClick={validateQueryCallback}
+                            >
+                                Validate
+                            </Button>
+                            <Button
+                                qa="qt-explain"
+                                className={b('action-button')}
+                                onClick={explainQueryCallback}
+                            >
+                                Explain
+                            </Button>
+                        </>
+                    ) : null}
                     {isACOSupported && <QueryACOSelect />}
                 </div>
             </div>

diff --git a/packages/ui/src/ui/pages/query-tracker/module/api.ts b/packages/ui/src/ui/pages/query-tracker/module/api.ts
@@ -266,6 +266,7 @@ export function getQuery(query_id: string): ThunkAction<Promise<QueryItem>, Root
 
 export function startQuery(
     queryInstance: DraftQuery,
+    options?: {execution_mode: 'validate' | 'optimize'},
 ): ThunkAction<Promise<{query_id: QueryItemId}>, RootState, any, any> {
     return async (_dispatch, getState) => {
         const state = getState();
@@ -280,6 +281,7 @@ export function startQuery(
                 engine,
                 annotations,
                 access_control_object,
+                execution_mode: options?.execution_mode,
                 settings: {
                     stage: engine === 'yql' ? yqlAgentStage : undefined,
                     ...settings,

diff --git a/packages/ui/src/ui/pages/query-tracker/module/query/actions.ts b/packages/ui/src/ui/pages/query-tracker/module/query/actions.ts
@@ -216,11 +216,12 @@ export function createEmptyQuery(
 
 export function runQuery(
     afterCreate?: (query_id: string) => boolean | void,
+    options?: {execution_mode: 'validate' | 'optimize'},
 ): ThunkAction<any, RootState, any, SetQueryAction> {
     return async (dispatch, getState) => {
         const state = getState();
         const query = getQueryDraft(state);
-        const {query_id} = await wrapApiPromiseByToaster(dispatch(startQuery(query)), {
+        const {query_id} = await wrapApiPromiseByToaster(dispatch(startQuery(query, options)), {
             toasterName: 'start_query',
             skipSuccessToast: true,
             errorTitle: 'Failed to start query',