Pārlūkot izejas kodu

[editor] Add errors to the execution analysis tab in editor v2

Johan Ahlen 4 gadi atpakaļ
vecāks
revīzija
a1f2e6ad91

+ 23 - 2
desktop/core/src/desktop/js/apps/editor/components/executionAnalysis/ExecutionAnalysisPanel.scss

@@ -5,12 +5,20 @@
   @include fillAbsolute;
   @include flexRowLayout;
 
+  .execution-analysis-errors,
   .execution-analysis-jobs,
   .execution-analysis-logs {
     @include flexRowLayout;
 
     h4 {
-      @include flexRowLayoutRow(15px);
+      @include flexRowLayoutRow(0 0 auto);
+
+      margin: 0;
+      padding-bottom: 10px;
+    }
+
+    .execution-analysis-logs-panel {
+      font-size: 12px;
     }
 
     .execution-analysis-jobs-panel,
@@ -19,8 +27,21 @@
     }
   }
 
+  .execution-analysis-errors,
   .execution-analysis-jobs {
-    @include flexRowLayoutRow(0 1 80px);
+    @include flexRowLayoutRow(1 0 auto);
+
+    padding-bottom: 10px;
+  }
+
+  .execution-analysis-errors {
+    ul {
+      background-color: $fluid-red-050;
+      color: $fluid-red-700;
+      list-style: none;
+      padding: 5px 10px;
+      margin: 0;
+    }
   }
 
   .execution-analysis-logs {

+ 21 - 2
desktop/core/src/desktop/js/apps/editor/components/executionAnalysis/ExecutionAnalysisPanel.vue

@@ -22,6 +22,13 @@
       <h1 class="empty">{{ I18n('Select and execute a query to see the analysis.') }}</h1>
     </div>
 
+    <div v-if="analysisAvailable && errors.length" class="execution-analysis-errors">
+      <h4>{{ I18n('Errors') }}</h4>
+      <ul>
+        <li v-for="error of errors" :key="error.message">{{ error.message }}</li>
+      </ul>
+    </div>
+
     <div v-if="analysisAvailable && jobsAvailable" class="execution-analysis-jobs">
       <h4>{{ I18n('Jobs') }}</h4>
       <div class="execution-analysis-jobs-panel">
@@ -43,7 +50,7 @@
   import HueLink from 'components/HueLink.vue';
   import Vue from 'vue';
   import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
+  import { Prop, Watch } from 'vue-property-decorator';
 
   import './ExecutionAnalysisPanel.scss';
   import Executable, {
@@ -69,6 +76,7 @@
     logs = '';
     jobs: ExecutionJob[] = [];
     errors: ExecutionError[] = [];
+    notifiedErrors = false;
 
     subTracker = new SubscriptionTracker();
 
@@ -90,12 +98,23 @@
       }
     }
 
+    @Watch('errors')
+    executionError(errors: ExecutionError[]): void {
+      if (errors.length && !this.notifiedErrors) {
+        this.$emit('execution-error');
+      }
+      this.notifiedErrors = !!errors.length;
+    }
+
     destroyed(): void {
       this.subTracker.dispose();
     }
 
     get analysisAvailable(): boolean {
-      return !!this.executable && this.executable.status !== ExecutionStatus.ready;
+      return (
+        (!!this.executable && this.executable.status !== ExecutionStatus.ready) ||
+        !!this.errors.length
+      );
     }
 
     get jobsWithUrls(): ExecutionJob[] {

+ 5 - 1
desktop/core/src/desktop/js/apps/editor/components/executionAnalysis/ExecutionAnalysisPanelKoBridge.vue

@@ -17,7 +17,7 @@
 -->
 
 <template>
-  <ExecutionAnalysisPanel :executable="executable" />
+  <ExecutionAnalysisPanel :executable="executable" @execution-error="onExecutionError" />
 </template>
 
 <script lang="ts">
@@ -55,6 +55,10 @@
     destroyed(): void {
       this.subTracker.dispose();
     }
+
+    onExecutionError(): void {
+      this.$el.dispatchEvent(new CustomEvent('execution-error', { bubbles: true }));
+    }
   }
 
   export const COMPONENT_NAME = 'execution-analysis-panel-ko-bridge';

+ 7 - 2
desktop/libs/notebook/src/notebook/templates/editor2.mako

@@ -1058,9 +1058,14 @@
 
         <div class="tab-pane" id="executionAnalysis" data-bind="css: {'active': currentQueryTab() == 'executionAnalysis'}">
           <div class="execution-analysis-tab-panel">
-            <execution-analysis-panel-ko-bridge class="execution-analysis-bridge" data-bind="vueKoProps: {
+            <execution-analysis-panel-ko-bridge class="execution-analysis-bridge" data-bind="
+              vueKoProps: {
                 executableObservable: activeExecutable
-              }"></execution-analysis-panel-ko-bridge>
+              },
+              vueEvents: {
+                'execution-error': function () { currentQueryTab('executionAnalysis') }
+              }
+            "></execution-analysis-panel-ko-bridge>
           </div>
         </div>