feat(ui): optimize loading tasks

Author: fiftin

web/src/components/ItemFormBase.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { getErrorMessage } from '@/lib/error';
+import ProjectMixin from '@/components/ProjectMixin';
 
 /**
  * Most of Semaphore entities (keys, environments, etc) have similar REST API for
@@ -23,6 +24,9 @@ import { getErrorMessage } from '@/lib/error';
  *                        (GET, POST, PUT, DELETE methods).
  */
 export default {
+
+  mixins: [ProjectMixin],
+
   props: {
     itemId: [Number, String],
     projectId: [Number, String],

web/src/components/NewTaskDialog.vue

@@ -1,15 +1,15 @@
 <template>
   <EditDialog
     v-model="dialog"
-    :save-button-text="$t(TEMPLATE_TYPE_ACTION_TITLES[templateType])"
+    :save-button-text="$t(TEMPLATE_TYPE_ACTION_TITLES[template?.type || ''])"
     :title="$t('newTask')"
     @save="closeDialog"
     @close="closeDialog"
     test-id="newTaskDialog"
   >
     <template v-slot:title={}>
-      <v-icon small class="mr-4">{{ TEMPLATE_TYPE_ICONS[templateType] }}</v-icon>
-      <span class="breadcrumbs__item">{{ templateAlias }}</span>
+      <v-icon small class="mr-4">{{ TEMPLATE_TYPE_ICONS[template?.type || ''] }}</v-icon>
+      <span class="breadcrumbs__item">{{ template?.alias || '' }}</span>
       <v-icon>mdi-chevron-right</v-icon>
       <span class="breadcrumbs__item">{{ $t('newTask') }}</span>
     </template>
@@ -18,7 +18,7 @@
       <TaskForm
         :project-id="projectId"
         item-id="new"
-        :template-id="templateId"
+        :template="template"
         @save="onSave"
         @error="onError"
         :need-save="needSave"
@@ -43,10 +43,7 @@ export default {
   props: {
     value: Boolean,
     projectId: Number,
-    templateId: [Number, String],
-    templateType: String,
-    templateAlias: String,
-    templateApp: String,
+    template: Object,
     sourceTask: Object,
   },
   data() {

web/src/components/TaskForm.vue

@@ -117,7 +117,7 @@
       dense
       required
       :disabled="formSaving"
-      v-if="needField('inventory') && (template.task_params || {}).allow_override_inventory"
+      v-if="needInventory"
     ></v-select>
 
     <ArgsPicker
@@ -183,7 +183,7 @@ export default {
   mixins: [ItemFormBase, AppFieldsMixin],
 
   props: {
-    templateId: Number,
+    template: Object,
     sourceTask: Object,
   },
 
@@ -194,7 +194,6 @@ export default {
 
   data() {
     return {
-      template: null,
       buildTasks: null,
       hasCommit: null,
       editedEnvironment: null,
@@ -212,6 +211,10 @@ export default {
   },
 
   computed: {
+    needInventory() {
+      return this.needField('inventory') && this.template.task_params?.allow_override_inventory;
+    },
+
     args() {
       return JSON.parse(this.item.arguments || '[]');
     },
@@ -243,16 +246,16 @@ export default {
     needReset(val) {
       if (val) {
         if (this.item) {
-          this.item.template_id = this.templateId;
+          this.item.template_id = this.template.id;
         }
         this.inventory = null;
-        this.template = null;
+        // this.template = null;
       }
     },
 
-    templateId(val) {
+    template(val) {
       if (this.item) {
-        this.item.template_id = val;
+        this.item.template_id = val?.id;
       }
     },
 
@@ -330,29 +333,29 @@ export default {
     async afterLoadData() {
       this.assignItem(this.sourceTask);
 
-      this.item.template_id = this.templateId;
+      this.item.template_id = this.template.id;
 
       if (!this.item.params) {
         this.item.params = {};
       }
 
-      this.template = (await axios({
-        keys: 'get',
-        url: `/api/project/${this.projectId}/templates/${this.templateId}`,
-        responseType: 'json',
-      })).data;
+      [
+        this.buildTasks,
+        this.inventory,
+      ] = await Promise.all([
 
-      this.buildTasks = this.template.type === 'deploy' ? (await axios({
-        keys: 'get',
-        url: `/api/project/${this.projectId}/templates/${this.template.build_template_id}/tasks?status=success`,
-        responseType: 'json',
-      })).data.filter((task) => task.status === 'success') : [];
+        this.template.type === 'deploy' ? (await axios({
+          keys: 'get',
+          url: `/api/project/${this.projectId}/templates/${this.template.build_template_id}/tasks?status=success`,
+          responseType: 'json',
+        })).data.filter((task) => task.status === 'success') : [],
 
-      this.inventory = (await axios({
-        keys: 'get',
-        url: this.getInventoryUrl(),
-        responseType: 'json',
-      })).data;
+        this.needInventory ? (await axios({
+          keys: 'get',
+          url: this.getInventoryUrl(),
+          responseType: 'json',
+        })).data : [],
+      ]);
 
       if (this.item.build_task_id == null
         && this.buildTasks.length > 0
@@ -384,7 +387,7 @@ export default {
       switch (this.app) {
         case 'terraform':
         case 'tofu':
-          res += `&template_id=${this.templateId}`;
+          res += `&template_id=${this.template.id}`;
           break;
         default:
           break;

web/src/components/TaskList.vue

@@ -4,10 +4,7 @@
     <NewTaskDialog
       v-model="newTaskDialog"
       :project-id="template.project_id"
-      :template-id="template.id"
-      :template-alias="template.name"
-      :template-type="template.type"
-      :template-app="template.app"
+      :template="template"
       :source-task="sourceTask"
     />
 

web/src/views/project/TemplateView.vue

@@ -6,10 +6,7 @@
     <NewTaskDialog
       v-model="newTaskDialog"
       :project-id="projectId"
-      :template-id="itemId"
-      :template-alias="item.name"
-      :template-type="item.type"
-      :template-app="item.app"
+      :template="item"
     />
 
     <EditTemplateDialog

web/src/views/project/Templates.vue

@@ -40,10 +40,8 @@
       @save="itemId = null"
       @close="itemId = null"
       :project-id="projectId"
+      :template="template"
       :template-id="itemId"
-      :template-alias="templateAlias"
-      :template-type="templateType"
-      :template-app="templateApp"
     />
 
     <v-toolbar flat>
@@ -315,32 +313,19 @@ export default {
     };
   },
   computed: {
+
     viewId() {
       if (/^-?\d+$/.test(this.$route.params.viewId)) {
         return parseInt(this.$route.params.viewId, 10);
       }
       return this.$route.params.viewId;
     },
 
-    templateType() {
-      if (this.itemId == null || this.itemId === 'new') {
-        return '';
-      }
-      return this.items.find((x) => x.id === this.itemId).type;
-    },
-
-    templateAlias() {
-      if (this.itemId == null || this.itemId === 'new') {
-        return '';
-      }
-      return this.items.find((x) => x.id === this.itemId).name;
-    },
-
-    templateApp() {
+    template() {
       if (this.itemId == null || this.itemId === 'new') {
-        return '';
+        return null;
       }
-      return this.items.find((x) => x.id === this.itemId).app;
+      return this.items.find((x) => x.id === this.itemId);
     },
 
     isLoaded() {