[ui] Vue 3 - Migrated ExecutionAnalysisPanel components

desktop/core/src/desktop/js/apps/editor/components/executionAnalysis/ExecutionAnalysisPanel.vue

@@ -46,13 +46,11 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
   import { ExecutionJob } from 'apps/editor/execution/api';
   import HueLink from 'components/HueLink.vue';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop, Watch } from 'vue-property-decorator';
 
-  import './ExecutionAnalysisPanel.scss';
   import Executable, {
     EXECUTABLE_UPDATED_EVENT,
     ExecutionStatus
@@ -65,20 +63,68 @@
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
   import I18n from 'utils/i18n';
 
-  @Component({
-    components: { HueLink, LogsPanel },
-    methods: { I18n }
-  })
-  export default class ExecutionAnalysisPanel extends Vue {
-    @Prop()
-    executable?: Executable;
+  export default defineComponent({
+    components: {
+      HueLink,
+      LogsPanel
+    },
 
-    logs = '';
-    jobs: ExecutionJob[] = [];
-    errors: ExecutionError[] = [];
-    notifiedErrors = false;
+    props: {
+      executable: {
+        type: Object as PropType<Executable>,
+        default: undefined
+      }
+    },
+
+    emits: ['execution-error'],
+
+    setup(): {
+      subTracker: SubscriptionTracker;
+    } {
+      return {
+        subTracker: new SubscriptionTracker()
+      };
+    },
+
+    data(): {
+      logs: string;
+      jobs: ExecutionJob[];
+      errors: ExecutionError[];
+      notifiedErrors: boolean;
+    } {
+      return {
+        logs: '',
+        jobs: [],
+        errors: [],
+        notifiedErrors: false
+      };
+    },
+
+    computed: {
+      analysisAvailable(): boolean {
+        return (
+          (!!this.executable && this.executable.status !== ExecutionStatus.ready) ||
+          !!this.errors.length
+        );
+      },
+
+      jobsWithUrls(): ExecutionJob[] {
+        return (this.jobs && this.jobs.filter(job => job.url)) || [];
+      },
+
+      jobsAvailable(): boolean {
+        return !!this.jobsWithUrls.length;
+      }
+    },
 
-    subTracker = new SubscriptionTracker();
+    watch: {
+      errors(errors: ExecutionError[]): void {
+        if (errors.length && !this.notifiedErrors) {
+          this.$emit('execution-error');
+        }
+        this.notifiedErrors = !!errors.length;
+      }
+    },
 
     mounted(): void {
       this.subTracker.subscribe(EXECUTABLE_UPDATED_EVENT, (executable: Executable) => {
@@ -88,41 +134,25 @@
       });
 
       this.subTracker.subscribe(LOGS_UPDATED_EVENT, this.updateFromExecutionLogs.bind(this));
-    }
+    },
 
-    updateFromExecutionLogs(executionLogs: ExecutionLogs): void {
-      if (this.executable === executionLogs.executable) {
-        this.logs = executionLogs.fullLog;
-        this.jobs = executionLogs.jobs;
-        this.errors = executionLogs.errors;
-      }
-    }
-
-    @Watch('errors')
-    executionError(errors: ExecutionError[]): void {
-      if (errors.length && !this.notifiedErrors) {
-        this.$emit('execution-error');
-      }
-      this.notifiedErrors = !!errors.length;
-    }
-
-    destroyed(): void {
+    unmounted(): void {
       this.subTracker.dispose();
+    },
+
+    methods: {
+      I18n,
+      updateFromExecutionLogs(executionLogs: ExecutionLogs): void {
+        if (this.executable === executionLogs.executable) {
+          this.logs = executionLogs.fullLog;
+          this.jobs = executionLogs.jobs;
+          this.errors = executionLogs.errors;
+        }
+      }
     }
-
-    get analysisAvailable(): boolean {
-      return (
-        (!!this.executable && this.executable.status !== ExecutionStatus.ready) ||
-        !!this.errors.length
-      );
-    }
-
-    get jobsWithUrls(): ExecutionJob[] {
-      return (this.jobs && this.jobs.filter(job => job.url)) || [];
-    }
-
-    get jobsAvailable(): boolean {
-      return !!this.jobsWithUrls.length;
-    }
-  }
+  });
 </script>
+
+<style lang="scss">
+  @import './ExecutionAnalysisPanel.scss';
+</style>

desktop/core/src/desktop/js/apps/editor/components/executionAnalysis/ExecutionAnalysisPanelKoBridge.vue

@@ -21,26 +21,43 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
-  import { wrap } from 'vue/webComponentWrapper';
+  import { defineComponent, PropType } from 'vue';
+
+  import { wrap } from 'vue/webComponentWrap';
 
   import ExecutionAnalysisPanel from './ExecutionAnalysisPanel.vue';
   import SqlExecutable from 'apps/editor/execution/sqlExecutable';
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
 
-  @Component({
-    components: { ExecutionAnalysisPanel }
-  })
-  export default class ExecutionAnalysisPanelKoBridge extends Vue {
-    @Prop()
-    executableObservable?: KnockoutObservable<SqlExecutable | undefined>;
+  const ExecutionAnalysisPanelKoBridge = defineComponent({
+    components: {
+      ExecutionAnalysisPanel
+    },
+
+    props: {
+      executableObservable: {
+        type: Object as PropType<KnockoutObservable<SqlExecutable | undefined>>,
+        default: undefined
+      }
+    },
 
-    initialized = false;
-    executable: SqlExecutable | null = null;
+    setup(): {
+      subTracker: SubscriptionTracker;
+    } {
+      return {
+        subTracker: new SubscriptionTracker()
+      };
+    },
 
-    subTracker = new SubscriptionTracker();
+    data(): {
+      initialized: boolean;
+      executable: SqlExecutable | null;
+    } {
+      return {
+        initialized: false,
+        executable: null
+      };
+    },
 
     updated(): void {
       if (!this.initialized && this.executableObservable) {
@@ -50,17 +67,21 @@
         });
         this.initialized = true;
       }
-    }
+    },
 
-    destroyed(): void {
+    unmounted(): void {
       this.subTracker.dispose();
-    }
+    },
 
-    onExecutionError(): void {
-      this.$el.dispatchEvent(new CustomEvent('execution-error', { bubbles: true }));
+    methods: {
+      onExecutionError(): void {
+        this.$el.dispatchEvent(new CustomEvent('execution-error', { bubbles: true }));
+      }
     }
-  }
+  });
 
   export const COMPONENT_NAME = 'execution-analysis-panel-ko-bridge';
   wrap(COMPONENT_NAME, ExecutionAnalysisPanelKoBridge);
+
+  export default ExecutionAnalysisPanelKoBridge;
 </script>