Browse Source

[editor] Various query editor web component improvements

- execute and stop events added on the execute button
- execute button is not the only component in charge of execution
- dataCatalog properly exported and typed
Johan Åhlén 4 years ago
parent
commit
c4e802bac9

+ 27 - 30
desktop/core/src/desktop/js/apps/editor/components/ExecuteButton.vue

@@ -56,7 +56,7 @@
 
 <script lang="ts">
   import { EXECUTABLE_UPDATED_TOPIC, ExecutableUpdatedEvent } from 'apps/editor/execution/events';
-  import { defineComponent, PropType, ref, toRefs, watch } from 'vue';
+  import { defineComponent, nextTick, PropType, ref, toRefs, watch } from 'vue';
 
   import SqlExecutable from 'apps/editor/execution/sqlExecutable';
   import HueButton from 'components/HueButton.vue';
@@ -67,8 +67,8 @@
   import { Session } from 'apps/editor/execution/api';
   import { ExecutionStatus } from 'apps/editor/execution/executable';
   import sessionManager from 'apps/editor/execution/sessionManager';
+  import { EXECUTE_ACTIVE_EXECUTABLE_TOPIC, ExecuteActiveExecutableEvent } from './events';
 
-  const EXECUTE_ACTIVE_EXECUTABLE_EVENT = 'executable.active.executable';
   const WHITE_SPACE_REGEX = /^\s*$/;
 
   export default defineComponent({
@@ -86,7 +86,8 @@
         default: undefined
       }
     },
-    setup(props) {
+    emits: ['execute-started', 'executable-updated', 'execute-stopping'],
+    setup(props, { emit }) {
       const { executable, beforeExecute } = toRefs(props);
       const subTracker = new SubscriptionTracker();
 
@@ -107,9 +108,20 @@
           await beforeExecute.value(executable.value as SqlExecutable);
         }
         await executable.value.reset();
+        emit('execute-started', executable.value);
         executable.value.execute();
       };
 
+      const stop = async (): Promise<void> => {
+        if (stopping.value || !executable.value) {
+          return;
+        }
+        emit('execute-stopping', executable.value);
+        stopping.value = true;
+        await executable.value.cancelBatchChain(true);
+        stopping.value = false;
+      };
+
       const updateFromExecutable = (executable: SqlExecutable): void => {
         const waitForSession =
           !lastSession || lastSession.type !== executable.executor.connector().type;
@@ -139,19 +151,26 @@
       );
 
       subTracker.subscribe<ExecutableUpdatedEvent>(EXECUTABLE_UPDATED_TOPIC, updatedExecutable => {
-        if (executable.value && executable.value.id === updatedExecutable.id) {
+        const active = executable.value && executable.value.id === updatedExecutable.id;
+        if (active) {
           updateFromExecutable(updatedExecutable);
         }
+        emit('executable-updated', { executable: updatedExecutable, active });
       });
 
-      subTracker.subscribe(EXECUTE_ACTIVE_EXECUTABLE_EVENT, eventExecutable => {
-        if (executable.value && executable.value === eventExecutable) {
-          execute();
+      subTracker.subscribe<ExecuteActiveExecutableEvent>(
+        EXECUTE_ACTIVE_EXECUTABLE_TOPIC,
+        async eventExecutable => {
+          if (executable.value && executable.value.id === eventExecutable.id) {
+            await execute();
+          }
         }
-      });
+      );
 
       return {
+        execute,
         subTracker,
+        stop,
         stopping,
         loadingSession,
         partOfRunningExecution,
@@ -183,28 +202,6 @@
           this.waiting
         );
       }
-    },
-    methods: {
-      async execute(): Promise<void> {
-        huePubSub.publish('hue.ace.autocompleter.hide');
-        if (!this.executable) {
-          return;
-        }
-        if (this.beforeExecute) {
-          await this.beforeExecute(this.executable);
-        }
-        await this.executable.reset();
-        this.executable.execute();
-      },
-
-      async stop(): Promise<void> {
-        if (this.stopping || !this.executable) {
-          return;
-        }
-        this.stopping = true;
-        await this.executable.cancelBatchChain(true);
-        this.stopping = false;
-      }
     }
   });
 </script>

+ 4 - 0
desktop/core/src/desktop/js/apps/editor/components/QueryEditorWebComponents.d.ts

@@ -18,6 +18,7 @@ import { ConnectorNamespaces, GetOptions } from 'catalog/contextCatalog';
 import { findEditorConnector } from 'config/hueConfig';
 import { EditorInterpreter, HueConfig } from 'config/types';
 import Executor, { ExecutorOptions } from 'apps/editor/execution/executor';
+import { DataCatalog } from 'catalog/dataCatalog';
 
 export interface HueComponentConfig {
   baseUrl?: string;
@@ -25,7 +26,10 @@ export interface HueComponentConfig {
 
 declare const _default: {
   configure(config: HueComponentConfig): void;
+  setBaseUrl(baseUrl: string): void;
+  setBearerToken(bearerToken: string): void;
   createExecutor(options: ExecutorOptions): Executor;
+  dataCatalog: DataCatalog;
   findEditorConnector(
     connectorTest: (connector: EditorInterpreter) => boolean
   ): EditorInterpreter | undefined;

+ 4 - 2
desktop/core/src/desktop/js/apps/editor/components/QueryEditorWebComponents.ts

@@ -59,11 +59,13 @@ const clearContextCatalogCache = async (connector: Connector): Promise<void> =>
 };
 
 export default {
-  dataCatalog,
   clearContextCatalogCache,
   configure,
   createExecutor,
+  dataCatalog,
   findEditorConnector,
   getNamespaces,
-  refreshConfig
+  refreshConfig,
+  setBaseUrl,
+  setBearerToken
 };

+ 2 - 2
desktop/core/src/desktop/js/apps/editor/components/aceEditor/AceEditor.vue

@@ -36,6 +36,7 @@
 
   import ace, { getAceMode } from 'ext/aceHelper';
   import { Ace } from 'ext/ace';
+  import { EXECUTE_ACTIVE_EXECUTABLE_TOPIC } from '../events';
 
   import { attachPredictTypeahead } from './acePredict';
   import AceAutocomplete from './autocomplete/AceAutocomplete.vue';
@@ -236,8 +237,7 @@
             aceLocationHandler.refreshStatementLocations();
             if (editor && executor.value.activeExecutable) {
               triggerChange();
-              await executor.value.activeExecutable.reset();
-              await executor.value.activeExecutable.execute();
+              huePubSub.publish(EXECUTE_ACTIVE_EXECUTABLE_TOPIC, executor.value.activeExecutable);
             }
           }
         });

+ 20 - 0
desktop/core/src/desktop/js/apps/editor/components/events.ts

@@ -0,0 +1,20 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Executable from '../execution/executable';
+
+export const EXECUTE_ACTIVE_EXECUTABLE_TOPIC = 'execute.active.executable';
+export type ExecuteActiveExecutableEvent = Executable;

+ 2 - 3
desktop/core/src/desktop/js/apps/editor/snippet.js

@@ -14,6 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { EXECUTE_ACTIVE_EXECUTABLE_TOPIC } from 'apps/editor/components/events';
 import $ from 'jquery';
 import * as ko from 'knockout';
 import komapping from 'knockout.mapping';
@@ -190,8 +191,6 @@ const getDefaultSnippetProperties = snippetType => {
   return properties;
 };
 
-const EXECUTE_ACTIVE_EXECUTABLE_EVENT = 'executable.active.executable';
-
 const ERROR_REGEX = /line ([0-9]+)(:([0-9]+))?/i;
 
 export default class Snippet {
@@ -814,7 +813,7 @@ export default class Snippet {
 
   execute() {
     // From ctrl + enter
-    huePubSub.publish(EXECUTE_ACTIVE_EXECUTABLE_EVENT, this.activeExecutable());
+    huePubSub.publish(EXECUTE_ACTIVE_EXECUTABLE_TOPIC, this.activeExecutable());
   }
 
   fetchExecutionAnalysis() {