FIX - The multiple requests fetchData() when async job completed or execute callGroupApi

src/components/view/ActionButton.vue

@@ -135,6 +135,7 @@ export default {
       const dataBadge = {}
       const arrAsync = []
       const actionBadge = this.actions.filter(action => action.showBadge === true)
+      if ((actionBadge.dataView ? actionBadge.dataView : false) !== this.dataView) return
 
       if (actionBadge && actionBadge.length > 0) {
         const dataLength = actionBadge.length

src/components/view/DedicateData.vue

@@ -177,7 +177,6 @@ export default {
           jobId: response.releasededicatedzoneresponse.jobid,
           successMessage: this.$t('message.dedicated.zone.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
             this.$store.dispatch('AddAsyncJob', {
               title: this.$t('message.dedicated.zone.released'),
@@ -186,9 +185,6 @@ export default {
             })
           },
           errorMessage: this.$t('error.release.dedicate.zone'),
-          errorMethod: () => {
-            this.parentFetchData()
-          },
           loadingMessage: this.$t('message.releasing.dedicated.zone'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
@@ -207,7 +203,6 @@ export default {
           jobId: response.releasededicatedpodresponse.jobid,
           successMessage: this.$t('message.pod.dedication.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
             this.$store.dispatch('AddAsyncJob', {
               title: this.$t('message.pod.dedication.released'),
@@ -216,9 +211,6 @@ export default {
             })
           },
           errorMessage: this.$t('error.release.dedicate.pod'),
-          errorMethod: () => {
-            this.parentFetchData()
-          },
           loadingMessage: this.$t('message.releasing.dedicated.pod'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
@@ -237,7 +229,6 @@ export default {
           jobId: response.releasededicatedclusterresponse.jobid,
           successMessage: this.$t('message.cluster.dedication.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
             this.$store.dispatch('AddAsyncJob', {
               title: this.$t('message.cluster.dedication.released'),
@@ -246,9 +237,6 @@ export default {
             })
           },
           errorMessage: this.$t('error.release.dedicate.cluster'),
-          errorMethod: () => {
-            this.parentFetchData()
-          },
           loadingMessage: this.$t('message.releasing.dedicated.cluster'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
@@ -267,7 +255,6 @@ export default {
           jobId: response.releasededicatedhostresponse.jobid,
           successMessage: this.$t('message.host.dedication.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
             this.$store.dispatch('AddAsyncJob', {
               title: this.$t('message.host.dedication.released'),
@@ -276,9 +263,6 @@ export default {
             })
           },
           errorMessage: this.$t('error.release.dedicate.host'),
-          errorMethod: () => {
-            this.parentFetchData()
-          },
           loadingMessage: this.$t('message.releasing.dedicated.host'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {

src/components/view/DedicateModal.vue

@@ -95,7 +95,6 @@ export default {
           jobId: response.dedicatezoneresponse.jobid,
           successMessage: this.$t('label.zone.dedicated'),
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
@@ -108,7 +107,6 @@ export default {
           },
           errorMessage: this.$t('error.dedicate.zone.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },
@@ -139,7 +137,6 @@ export default {
           jobId: response.dedicatepodresponse.jobid,
           successMessage: this.$t('label.pod.dedicated'),
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
@@ -152,7 +149,6 @@ export default {
           },
           errorMessage: this.$t('error.dedicate.pod.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },
@@ -183,7 +179,6 @@ export default {
           jobId: response.dedicateclusterresponse.jobid,
           successMessage: this.$t('message.cluster.dedicated'),
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
@@ -196,7 +191,6 @@ export default {
           },
           errorMessage: this.$t('error.dedicate.cluster.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },
@@ -227,7 +221,6 @@ export default {
           jobId: response.dedicatehostresponse.jobid,
           successMessage: this.$t('message.host.dedicated'),
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
@@ -240,7 +233,6 @@ export default {
           },
           errorMessage: this.$t('error.dedicate.host.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },

src/utils/plugins.js

@@ -66,7 +66,9 @@ export const pollJobPlugin = {
             key: jobId,
             duration: 2
           })
-          eventBus.$emit('async-job-complete', action)
+          if (!action || !('isFetchData' in action) || ('isFetchData' in action && action.isFetchData)) {
+            eventBus.$emit('async-job-complete')
+          }
           successMethod(result)
         } else if (result.jobstatus === 2) {
           message.error({
@@ -88,7 +90,9 @@ export const pollJobPlugin = {
             key: jobId,
             duration: 0
           })
-          eventBus.$emit('async-job-complete', action)
+          if (!action || !('isFetchData' in action) || ('isFetchData' in action && action.isFetchData)) {
+            eventBus.$emit('async-job-complete')
+          }
           errorMethod(result)
         } else if (result.jobstatus === 0) {
           if (showLoading) {

src/views/AutogenView.vue

@@ -394,24 +394,25 @@ export default {
       searchParams: {},
       actions: [],
       formModel: {},
-      confirmDirty: false
+      confirmDirty: false,
+      promises: []
     }
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
   },
+  beforeDestroy () {
+    eventBus.$off('vm-refresh-data')
+    eventBus.$off('async-job-complete')
+    eventBus.$off('exec-action')
+  },
   created () {
     eventBus.$on('vm-refresh-data', () => {
       if (this.$route.path === '/vm' || this.$route.path.includes('/vm/')) {
         this.fetchData()
       }
     })
     eventBus.$on('async-job-complete', (action) => {
-      if (this.$route.path.includes('/vm/')) {
-        if (action && 'api' in action && ['destroyVirtualMachine'].includes(action.api)) {
-          return
-        }
-      }
       this.fetchData()
     })
     eventBus.$on('exec-action', (action, isGroupAction) => {
@@ -831,27 +832,29 @@ export default {
       })
     },
     pollActionCompletion (jobId, action, resourceName, showLoading = true) {
-      this.$pollJob({
-        jobId,
-        name: resourceName,
-        successMethod: result => {
-          this.fetchData()
-          if (action.response) {
-            const description = action.response(result.jobresult)
-            if (description) {
-              this.$notification.info({
-                message: this.$t(action.label),
-                description: (<span domPropsInnerHTML={description}></span>),
-                duration: 0
-              })
+      return new Promise((resolve, reject) => {
+        this.$pollJob({
+          jobId,
+          name: resourceName,
+          successMethod: result => {
+            if (action.response) {
+              const description = action.response(result.jobresult)
+              if (description) {
+                this.$notification.info({
+                  message: this.$t(action.label),
+                  description: (<span domPropsInnerHTML={description}></span>),
+                  duration: 0
+                })
+              }
             }
-          }
-        },
-        errorMethod: () => this.fetchData(),
-        loadingMessage: `${this.$t(action.label)} - ${resourceName}`,
-        showLoading: showLoading,
-        catchMessage: this.$t('error.fetching.async.job.result'),
-        action
+            resolve()
+          },
+          errorMethod: () => resolve,
+          loadingMessage: `${this.$t(action.label)} - ${resourceName}`,
+          showLoading: showLoading,
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          action
+        })
       })
     },
     fillEditFormFieldValues () {
@@ -872,6 +875,7 @@ export default {
       })
     },
     handleSubmit (e) {
+      this.promises = []
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
         this.form.validateFields((err, values) => {
           if (!err) {
@@ -884,43 +888,47 @@ export default {
             for (const params of paramsList) {
               var resourceName = itemsNameMap[params.id]
               // Using a method for this since it's an async call and don't want wrong prarms to be passed
-              this.callGroupApi(params, resourceName)
+              this.promises.push(this.callGroupApi(params, resourceName))
             }
             this.$message.info({
               content: this.$t(this.currentAction.label),
               key: this.currentAction.label,
               duration: 3
             })
-            setTimeout(() => {
+            Promise.all(this.promises).finally(() => {
               this.actionLoading = false
               this.closeAction()
               this.fetchData()
-            }, 500)
+            })
           }
         })
       } else {
         this.execSubmit(e)
       }
     },
     callGroupApi (params, resourceName) {
-      const action = this.currentAction
-      api(action.api, params).then(json => {
-        this.handleResponse(json, resourceName, action, false)
-      }).catch(error => {
-        if ([401].includes(error.response.status)) {
-          return
-        }
-        this.$notifyError(error)
+      return new Promise((resolve, reject) => {
+        const action = this.currentAction
+        action.isFetchData = false
+        api(action.api, params).then(json => {
+          resolve(this.handleResponse(json, resourceName, action, false))
+        }).catch(error => {
+          if ([401].includes(error.response.status)) {
+            return
+          }
+          this.$notifyError(error)
+        })
       })
     },
     handleResponse (response, resourceName, action, showLoading = true) {
       for (const obj in response) {
         if (obj.includes('response')) {
           if (response[obj].jobid) {
-            const jobid = response[obj].jobid
-            this.$store.dispatch('AddAsyncJob', { title: this.$t(action.label), jobid: jobid, description: resourceName, status: 'progress' })
-            this.pollActionCompletion(jobid, action, resourceName, showLoading)
-            return true
+            return new Promise(resolve => {
+              const jobid = response[obj].jobid
+              this.$store.dispatch('AddAsyncJob', { title: this.$t(action.label), jobid: jobid, description: resourceName, status: 'progress' })
+              resolve(this.pollActionCompletion(jobid, action, resourceName, showLoading))
+            })
           } else {
             var message = action.successMessage ? this.$t(action.successMessage) : this.$t(action.label) +
               (resourceName ? ' - ' + resourceName : '')

src/views/compute/AttachIso.vue

@@ -128,7 +128,6 @@ export default {
                   jobid: jobId,
                   status: this.$t('progress')
                 })
-                this.parentFetchData()
               },
               successMessage: `${this.$t('label.action.attach.iso')} ${this.$t('label.success')}`,
               loadingMessage: `${title} ${this.$t('label.in.progress')}`,

src/views/compute/CreateKubernetesCluster.vue

@@ -546,13 +546,9 @@ export default {
             jobId,
             loadingMessage: `${this.$t('label.kubernetes.cluster.create')} ${values.name} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
-            successMessage: this.$t('message.success.create.kubernetes.cluter') + ' ' + values.name,
-            successMethod: result => {
-              this.$emit('refresh-data')
-            }
+            successMessage: this.$t('message.success.create.kubernetes.cluter') + ' ' + values.name
           })
           this.closeAction()
-          this.$emit('refresh-data')
         }).catch(error => {
           this.$notifyError(error)
         }).finally(() => {

src/views/compute/DeployVM.vue

@@ -1546,15 +1546,14 @@ export default {
                     duration: 0
                   })
                 }
-                eventBus.$emit('vm-refresh-data')
-              },
-              errorMethod: () => {
-                eventBus.$emit('vm-refresh-data')
               },
               loadingMessage: `${title} ${this.$t('label.in.progress')}`,
               catchMessage: this.$t('error.fetching.async.job.result'),
               catchMethod: () => {
                 eventBus.$emit('vm-refresh-data')
+              },
+              action: {
+                isFetchData: false
               }
             })
             this.$store.dispatch('AddAsyncJob', {

src/views/compute/DestroyVM.vue

@@ -144,7 +144,7 @@ export default {
               }
             },
             action: {
-              api: 'destroyVirtualMachine'
+              isFetchData: false
             }
           })
           this.closeAction()