update api calls for SystemUpdate and Diagnosis views

app/src/views/diagnosis/Diagnosis.vue

@@ -1,7 +1,7 @@
 <template>
   <view-base
-    :loading="loading" ref="view"
+    :queries="queries" @queries-response="onQueriesResponse" queries-wait
-    :queries="queries" @queries-response="formatData"
+    ref="view"
   >
     <template #top-bar-group-right>
       <b-button @click="shareLogs" variant="success">
@@ -11,10 +11,10 @@
 
     <template #top>
       <div class="alert alert-info">
-        {{ $t(reports || loading ? 'diagnosis_explanation' : 'diagnosis_first_run') }}
+        {{ $t(reports ? 'diagnosis_explanation' : 'diagnosis_first_run') }}
         <b-button
           v-if="reports === null" class="d-block mt-2" variant="info"
-          @click="runDiagnosis"
+          @click="runDiagnosis()"
         >
           <icon iname="stethoscope" /> {{ $t('run_first_diagnosis') }}
         </b-button>
@@ -114,8 +114,10 @@ export default {
 
   data () {
     return {
-      queries: ['diagnosis/show?full'],
+      queries: [
-      loading: true,
+        ['POST', 'diagnosis/run?except_if_never_ran_yet'],
+        ['GET', 'diagnosis/show?full']
+      ],
       reports: undefined
     }
   },
@@ -149,14 +151,13 @@ export default {
       item.icon = icon
     },
 
-    formatData (data) {
+    onQueriesResponse (_, reportsData) {
-      if (data === null) {
+      if (reportsData === null) {
         this.reports = null
-        this.loading = false
         return
       }
 
-      const reports = data.reports
+      const reports = reportsData.reports
       for (const report of reports) {
         report.warnings = 0
         report.errors = 0
@@ -168,7 +169,6 @@ export default {
         report.noIssues = report.warnings + report.errors === 0
       }
       this.reports = reports
-      this.loading = false
     },
 
     runDiagnosis (id = null) {
@@ -202,10 +202,6 @@ export default {
     }
   },
 
-  created () {
-    api.post('diagnosis/run?except_if_never_ran_yet')
-  },
-
   filters: { distanceToNow }
 }
 </script>

app/src/views/update/SystemUpdate.vue

@@ -1,5 +1,8 @@
 <template>
-  <view-base :loading="loading" skeleton="card-list-skeleton">
+  <view-base
+    :queries="queries" queries-wait @queries-response="onQueriesResponse"
+    skeleton="card-list-skeleton"
+  >
     <!-- MIGRATIONS WARN -->
     <b-alert variant="warning" :show="migrationsNotDone">
       <icon iname="exclamation-triangle" /> <span v-html="$t('pending_migrations')" />
@@ -69,7 +72,10 @@ export default {
 
   data () {
     return {
-      loading: true,
+      queries: [
+        ['GET', 'migrations?pending'],
+        ['PUT', 'update']
+      ],
       // API data
       migrationsNotDone: undefined,
       system: undefined,
@@ -78,6 +84,12 @@ export default {
   },
 
   methods: {
+    onQueriesResponse ({ migrations }, { apps, system }) {
+      this.migrationsNotDone = migrations.length !== 0
+      this.apps = apps.length ? apps : null
+      this.system = system.length ? system : null
+    },
+
     async performUpgrade ({ type, id = null }) {
       const confirmMsg = this.$i18n.t('confirm_update_' + type, id ? { app: id } : {})
       const confirmed = await this.$askConfirmation(confirmMsg)
@@ -91,20 +103,6 @@ export default {
         this.$router.push({ name: 'tool-logs' })
       })
     }
-  },
-
-  created () {
-    // Since we need to query a `PUT` method, we won't use ViewBase's `queries` prop and
-    // its automatic loading handling.
-    Promise.all([
-      api.get('migrations?pending'),
-      api.put('update')
-    ]).then(([{ migrations }, { apps, system }]) => {
-      this.migrationsNotDone = migrations.length !== 0
-      this.apps = apps.length ? apps : null
-      this.system = system.length ? system : null
-      this.loading = false
-    })
   }
 }
 </script>