ソースを参照

HUE-9291 [editor] Introduce 'streaming' execution status in the UI

Johan Ahlen 5 年 前
コミット
434ed73a1c

+ 15 - 2
desktop/core/src/desktop/js/apps/notebook2/components/ko.executableActions.js

@@ -30,12 +30,12 @@ export const EXECUTE_ACTIVE_EXECUTABLE_EVENT = 'executable.active.executable';
 const TEMPLATE = `
 <div class="snippet-execute-actions" data-test="${ NAME }">
   <div class="btn-group">
-    <!-- ko if: status() !== '${ EXECUTION_STATUS.running }' && !waiting() -->
+    <!-- ko if: showExecute -->
     <button class="btn btn-primary btn-mini btn-execute disable-feedback" data-test="execute" data-bind="click: execute, disable: disabled"><i class="fa fa-play fa-fw"></i> ${I18n(
       'Execute'
     )}</button>
     <!-- /ko -->
-    <!-- ko if: status() === '${ EXECUTION_STATUS.running }' || waiting() -->
+    <!-- ko if: showStop -->
       <!-- ko ifnot: stopping -->
       <button class="btn btn-danger btn-mini btn-execute disable-feedback" data-test="stop" data-bind="click: stop"><i class="fa fa-stop fa-fw"></i>
       <!-- ko ifnot: waiting -->
@@ -83,6 +83,19 @@ class ExecutableActions extends DisposableComponent {
         this.partOfRunningExecution()
     );
 
+    this.showExecute = ko.pureComputed(
+      () =>
+        this.status() !== EXECUTION_STATUS.running &&
+        this.status() !== EXECUTION_STATUS.streaming &&
+        !this.waiting()
+    );
+    this.showStop = ko.pureComputed(
+      () =>
+        this.status() === EXECUTION_STATUS.running ||
+        this.status() === EXECUTION_STATUS.streaming ||
+        this.waiting()
+    );
+
     this.disabled = ko.pureComputed(() => {
       const executable = this.activeExecutable();
 

+ 3 - 1
desktop/core/src/desktop/js/apps/notebook2/components/ko.executableProgressBar.js

@@ -46,7 +46,9 @@ class ExecutableProgressBar extends DisposableComponent {
       }
       if (
         this.progress() === 0 &&
-        (this.status() === EXECUTION_STATUS.running || this.status() === EXECUTION_STATUS.starting)
+        (this.status() === EXECUTION_STATUS.running ||
+          this.status() === EXECUTION_STATUS.streaming ||
+          this.status() === EXECUTION_STATUS.starting)
       ) {
         return 'progress-starting';
       }

+ 1 - 1
desktop/core/src/desktop/js/apps/notebook2/components/ko.queryHistory.js

@@ -275,7 +275,7 @@ class QueryHistory extends DisposableComponent {
 
     this.loadingHistory(false);
     this.refreshStatus(
-      [EXECUTION_STATUS.starting, EXECUTION_STATUS.running],
+      [EXECUTION_STATUS.starting, EXECUTION_STATUS.running, EXECUTION_STATUS.streaming],
       STARTING_RUNNING_INTERVAL
     );
     this.refreshStatus([EXECUTION_STATUS.available], AVAILABLE_INTERVAL);

+ 14 - 4
desktop/core/src/desktop/js/apps/notebook2/execution/executable.js

@@ -36,6 +36,7 @@ export const EXECUTION_STATUS = {
   starting: 'starting',
   waiting: 'waiting',
   ready: 'ready',
+  streaming: 'streaming',
   canceled: 'canceled',
   canceling: 'canceling',
   closed: 'closed'
@@ -122,7 +123,7 @@ export default class Executable {
   }
 
   isRunning() {
-    return this.status === EXECUTION_STATUS.running;
+    return this.status === EXECUTION_STATUS.running || this.status === EXECUTION_STATUS.streaming;
   }
 
   isSuccess() {
@@ -260,6 +261,11 @@ export default class Executable {
 
     this.cancellables.push(
       apiHelper.checkExecutionStatus({ executable: this }).done(async queryStatus => {
+        // TODO: Remove once backend reports 'streaming' status
+        if (queryStatus.status === EXECUTION_STATUS.running && queryStatus.data) {
+          queryStatus.status = EXECUTION_STATUS.streaming;
+        }
+
         switch (queryStatus.status) {
           case EXECUTION_STATUS.success:
             this.executeEnded = Date.now();
@@ -286,10 +292,11 @@ export default class Executable {
             this.executeEnded = Date.now();
             this.setStatus(queryStatus.status);
             break;
-          case EXECUTION_STATUS.running:
-            if (queryStatus.data) {
+          case EXECUTION_STATUS.streaming:
+            if (window.WEB_SOCKETS_ENABLED) {
               huePubSub.publish('editor.ws.query.fetch_result', queryStatus);
             }
+          case EXECUTION_STATUS.running:
           case EXECUTION_STATUS.starting:
           case EXECUTION_STATUS.waiting:
             this.setStatus(queryStatus.status);
@@ -333,7 +340,10 @@ export default class Executable {
   }
 
   async cancel() {
-    if (this.cancellables.length && this.status === EXECUTION_STATUS.running) {
+    if (
+      this.cancellables.length &&
+      (this.status === EXECUTION_STATUS.running || this.status === EXECUTION_STATUS.streaming)
+    ) {
       hueAnalytics.log(
         'notebook',
         'cancel/' + (this.executor.connector() ? this.executor.connector().dialect : '')

+ 1 - 0
desktop/core/src/desktop/js/apps/notebook2/execution/executionLogs.js

@@ -71,6 +71,7 @@ export default class ExecutionLogs {
     if (!finalFetch) {
       const delay = this.executable.getExecutionTime() > 45000 ? 5000 : 1000;
       const fetchLogsTimeout = window.setTimeout(async () => {
+        // TODO: Fetch logs for EXECUTION_STATUS.streaming?
         await this.fetchLogs(
           this.executable.status !== EXECUTION_STATUS.running &&
             this.executable.status !== EXECUTION_STATUS.starting &&