feat(ui): parallel loading of template data

Author: fiftin

web/src/components/NewTaskDialog.vue

@@ -9,7 +9,7 @@
   >
     <template v-slot:title={}>
       <v-icon small class="mr-4">{{ TEMPLATE_TYPE_ICONS[template?.type || ''] }}</v-icon>
-      <span class="breadcrumbs__item">{{ template?.alias || '' }}</span>
+      <span class="breadcrumbs__item">{{ template?.name || '' }}</span>
       <v-icon>mdi-chevron-right</v-icon>
       <span class="breadcrumbs__item">{{ $t('newTask') }}</span>
     </template>

web/src/components/ProjectMixin.js

@@ -6,19 +6,20 @@ export default {
   },
 
   methods: {
-    async loadProjectResources(name) {
+    async loadProjectEndpoint(endpoint) {
       return (await axios({
         method: 'get',
-        url: `/api/project/${this.projectId}/${name}`,
+        url: `/api/project/${this.projectId}${endpoint}`,
         responseType: 'json',
       })).data;
     },
+
+    async loadProjectResources(name) {
+      return this.loadProjectEndpoint(`/${name}`);
+    },
+
     async loadProjectResource(name, id) {
-      return (await axios({
-        method: 'get',
-        url: `/api/project/${this.projectId}/${name}/${id}`,
-        responseType: 'json',
-      })).data;
+      return this.loadProjectEndpoint(`/${name}/${id}`);
     },
   },
 };

web/src/components/TemplateForm.vue

@@ -606,10 +606,7 @@ export default {
 
     async afterLoadData() {
       if (this.sourceItemId) {
-        const item = (await axios({
-          url: `/api/project/${this.projectId}/templates/${this.sourceItemId}`,
-          responseType: 'json',
-        })).data;
+        const item = await this.loadProjectResource('templates', this.sourceItemId);
 
         item.id = null;
 
@@ -619,10 +616,7 @@ export default {
           }
         }
 
-        const sourceSchedule = (await axios({
-          url: `/api/project/${this.projectId}/templates/${this.sourceItemId}/schedules`,
-          responseType: 'json',
-        })).data[0];
+        const sourceSchedule = (await this.loadProjectEndpoint(`/templates/${this.sourceItemId}/schedules`))[0];
 
         if (sourceSchedule != null) {
           this.cronFormat = sourceSchedule.cron_format;
@@ -637,36 +631,33 @@ export default {
         this.item.task_params = {};
       }
 
-      this.repositories = (await axios({
-        url: `/api/project/${this.projectId}/repositories`,
-        responseType: 'json',
-      })).data;
-
-      this.inventory = [
-        ...(await axios({
-          url: `/api/project/${this.projectId}/inventory?app=${this.app}&template_id=${this.itemId}`,
-          responseType: 'json',
-        })).data,
-
-        ...(await axios({
-          url: `/api/project/${this.projectId}/inventory?app=${this.app}`,
-          responseType: 'json',
-        })).data,
-      ];
-
-      this.environment = (await axios({
-        url: `/api/project/${this.projectId}/environment`,
-        responseType: 'json',
-      })).data;
-
-      const template = (await axios({
-        url: `/api/project/${this.projectId}/templates`,
-        responseType: 'json',
-      })).data;
+      let templates;
+      let inventory1;
+      let inventory2;
+
+      [
+        this.repositories,
+        inventory1,
+        inventory2,
+        this.schedules,
+        this.views,
+        this.environment,
+        templates,
+      ] = await Promise.all([
+        this.loadProjectResources('repositories'),
+        this.loadProjectEndpoint(`/inventory?app=${this.app}&template_id=${this.itemId}`),
+        this.loadProjectEndpoint(`/inventory?app=${this.app}`),
+        this.isNew ? [] : this.loadProjectEndpoint(`/templates/${this.itemId}/schedules`),
+        this.loadProjectResources('views'),
+        this.loadProjectResources('environment'),
+        this.loadProjectResources('templates'),
+      ]);
+
+      this.inventory = [...inventory1, ...inventory2];
 
       const builds = [];
       const deploys = [];
-      template.forEach((t) => {
+      templates.forEach((t) => {
         switch (t.type) {
           case 'build':
             if (builds.length === 0) {
@@ -693,16 +684,6 @@ export default {
       }
       this.buildTemplates.push(...deploys);
 
-      this.schedules = this.isNew ? [] : (await axios({
-        url: `/api/project/${this.projectId}/templates/${this.itemId}/schedules`,
-        responseType: 'json',
-      })).data;
-
-      this.views = (await axios({
-        url: `/api/project/${this.projectId}/views`,
-        responseType: 'json',
-      })).data;
-
       if (this.schedules.length > 0) {
         const schedule = this.schedules.find((s) => s.repository_id != null);
         if (schedule != null) {