From 243a4731773030a047ec1c2074540952d1c9eef9 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 10 Mar 2021 09:38:26 +0700
Subject: [PATCH 1/9] refactor async job polling codebase-wide

---
 ui/src/components/header/HeaderNotice.vue     | 70 +++----------------
 ui/src/components/view/DedicateData.vue       | 28 +++-----
 ui/src/components/view/DedicateModal.vue      | 34 +++------
 ui/src/core/bootstrap.js                      |  4 +-
 ui/src/store/getters.js                       |  2 +-
 ui/src/store/modules/user.js                  | 41 ++++++++---
 ui/src/store/mutation-types.js                |  2 +-
 ui/src/utils/plugins.js                       | 32 ++++++++-
 ui/src/views/AutogenView.vue                  |  3 +-
 ui/src/views/compute/AttachIso.vue            |  7 +-
 .../views/compute/CreateKubernetesCluster.vue |  8 +--
 ui/src/views/compute/CreateSnapshotWizard.vue |  8 +--
 ui/src/views/compute/DeployVM.vue             |  8 +--
 ui/src/views/compute/DestroyVM.vue            |  8 +--
 ui/src/views/compute/MigrateWizard.vue        |  8 +--
 .../views/compute/ScaleKubernetesCluster.vue  |  8 +--
 ui/src/views/compute/StartVirtualMachine.vue  |  8 +--
 .../compute/UpgradeKubernetesCluster.vue      |  8 +--
 ui/src/views/iam/DomainActionForm.vue         | 53 ++++++--------
 ui/src/views/image/IsoZones.vue               | 16 ++---
 ui/src/views/image/TemplateZones.vue          | 16 ++---
 ui/src/views/infra/ClusterAdd.vue             |  8 +--
 ui/src/views/infra/HostAdd.vue                |  8 +--
 ui/src/views/infra/MigrateData.vue            | 41 ++++-------
 ui/src/views/infra/PodAdd.vue                 |  8 +--
 .../views/infra/network/DedicatedVLANTab.vue  |  7 +-
 .../views/infra/network/EditTrafficLabel.vue  |  8 +--
 .../infra/network/IpRangesTabManagement.vue   | 16 ++---
 .../infra/network/IpRangesTabStorage.vue      | 16 ++---
 .../infra/network/ServiceProvidersTab.vue     |  8 +--
 .../network/providers/AddF5LoadBalancer.vue   |  8 +--
 .../providers/AddNetscalerLoadBalancer.vue    |  8 +--
 .../network/providers/AddNiciraNvpDevice.vue  |  8 +--
 .../network/providers/AddPaloAltoFirewall.vue |  8 +--
 .../network/providers/AddSrxFirewall.vue      |  8 +--
 .../network/providers/ProviderListView.vue    | 22 +++---
 ui/src/views/network/AclListRulesTab.vue      | 35 +++-------
 ui/src/views/network/CreateVpc.vue            | 10 +--
 .../network/CreateVpnCustomerGateway.vue      |  8 +--
 ui/src/views/network/StaticRoutesTab.vue      | 14 ++--
 ui/src/views/network/VpcTab.vue               | 28 +++-----
 ui/src/views/network/VpcTiersTab.vue          |  8 +--
 .../views/offering/ImportBackupOffering.vue   |  9 +--
 ui/src/views/project/AccountsTab.vue          | 10 +--
 .../views/project/InvitationTokenTemplate.vue |  4 +-
 ui/src/views/project/InvitationsTemplate.vue  |  4 +-
 ui/src/views/storage/AttachVolume.vue         |  7 +-
 .../storage/CreateSnapshotFromVMSnapshot.vue  |  8 +--
 ui/src/views/storage/CreateVolume.vue         |  8 +--
 ui/src/views/storage/ResizeVolume.vue         | 11 +--
 .../storage/RestoreAttachBackupVolume.vue     |  9 +--
 ui/src/views/storage/TakeSnapshot.vue         | 12 +---
 52 files changed, 247 insertions(+), 492 deletions(-)

diff --git a/ui/src/components/header/HeaderNotice.vue b/ui/src/components/header/HeaderNotice.vue
index 03a5acd2017a..d20f60691d4b 100644
--- a/ui/src/components/header/HeaderNotice.vue
+++ b/ui/src/components/header/HeaderNotice.vue
@@ -32,16 +32,16 @@
               <a-button size="small" slot="description" @click="clearJobs">{{ $t('label.clear.list') }}</a-button>
             </a-list-item-meta>
           </a-list-item>
-          <a-list-item v-for="(job, index) in jobs" :key="index">
-            <a-list-item-meta :title="job.title" :description="job.description">
-              <a-avatar :style="notificationAvatar[job.status].style" :icon="notificationAvatar[job.status].icon" slot="avatar"/>
+          <a-list-item v-for="(notice, index) in notices" :key="index">
+            <a-list-item-meta :title="notice.title" :description="notice.description">
+              <a-avatar :style="notificationAvatar[notice.status].style" :icon="notificationAvatar[notice.status].icon" slot="avatar"/>
             </a-list-item-meta>
           </a-list-item>
         </a-list>
       </a-spin>
     </template>
     <span @click="showNotifications" class="header-notice-opener">
-      <a-badge :count="jobs.length">
+      <a-badge :count="notices.length">
         <a-icon class="header-notice-icon" type="bell" />
       </a-badge>
     </span>
@@ -49,7 +49,6 @@
 </template>
 
 <script>
-import { api } from '@/api'
 import store from '@/store'
 
 export default {
@@ -58,7 +57,7 @@ export default {
     return {
       loading: false,
       visible: false,
-      jobs: [],
+      notices: [],
       poller: null,
       notificationAvatar: {
         done: { icon: 'check-circle', style: 'backgroundColor:#87d068' },
@@ -72,66 +71,17 @@ export default {
       this.visible = !this.visible
     },
     clearJobs () {
-      this.jobs = this.jobs.filter(x => x.status === 'progress')
-      this.$store.commit('SET_ASYNC_JOB_IDS', this.jobs)
-    },
-    startPolling () {
-      this.poller = setInterval(() => {
-        this.pollJobs()
-      }, 4000)
-    },
-    async pollJobs () {
-      var hasUpdated = false
-      for (var i in this.jobs) {
-        if (this.jobs[i].status === 'progress') {
-          await api('queryAsyncJobResult', { jobid: this.jobs[i].jobid }).then(json => {
-            var result = json.queryasyncjobresultresponse
-            if (result.jobstatus === 1 && this.jobs[i].status !== 'done') {
-              hasUpdated = true
-              const title = this.jobs[i].title
-              const description = this.jobs[i].description
-              this.$message.success({
-                content: title + (description ? ' - ' + description : ''),
-                key: this.jobs[i].jobid,
-                duration: 2
-              })
-              this.jobs[i].status = 'done'
-            } else if (result.jobstatus === 2 && this.jobs[i].status !== 'failed') {
-              hasUpdated = true
-              this.jobs[i].status = 'failed'
-              if (result.jobresult.errortext !== null) {
-                this.jobs[i].description = '(' + this.jobs[i].description + ') ' + result.jobresult.errortext
-              }
-              this.$notification.error({
-                message: this.jobs[i].title,
-                description: this.jobs[i].description,
-                key: this.jobs[i].jobid,
-                duration: 0
-              })
-            }
-          }).catch(function (e) {
-            console.log(this.$t('error.fetching.async.job.result') + e)
-          })
-        }
-      }
-      if (hasUpdated) {
-        this.$store.commit('SET_ASYNC_JOB_IDS', this.jobs.reverse())
-      }
+      this.notices = this.notices.filter(x => x.status === 'progress')
+      this.$store.commit('SET_HEADER_NOTICES', this.notices)
     }
   },
-  beforeDestroy () {
-    clearInterval(this.poller)
-  },
-  created () {
-    this.startPolling()
-  },
   mounted () {
-    this.jobs = (store.getters.asyncJobIds || []).reverse()
+    this.notices = (store.getters.headerNotices || []).reverse()
     this.$store.watch(
-      (state, getters) => getters.asyncJobIds,
+      (state, getters) => getters.headerNotices,
       (newValue, oldValue) => {
         if (oldValue !== newValue && newValue !== undefined) {
-          this.jobs = newValue.reverse()
+          this.notices = newValue.reverse()
         }
       }
     )
diff --git a/ui/src/components/view/DedicateData.vue b/ui/src/components/view/DedicateData.vue
index af50eac2b41b..7ff34402f224 100644
--- a/ui/src/components/view/DedicateData.vue
+++ b/ui/src/components/view/DedicateData.vue
@@ -175,15 +175,12 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.releasededicatedzoneresponse.jobid,
+          title: this.$t('label.release.dedicated.zone'),
+          description: this.resource.id,
           successMessage: this.$t('message.dedicated.zone.released'),
           successMethod: () => {
             this.parentFetchData()
             this.dedicatedDomainId = null
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.dedicated.zone.released'),
-              jobid: response.releasededicatedzoneresponse.jobid,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.release.dedicate.zone'),
           errorMethod: () => {
@@ -205,15 +202,12 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.releasededicatedpodresponse.jobid,
+          title: this.$t('label.release.dedicated.pod'),
+          description: this.resource.id,
           successMessage: this.$t('message.pod.dedication.released'),
           successMethod: () => {
             this.parentFetchData()
             this.dedicatedDomainId = null
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.pod.dedication.released'),
-              jobid: response.releasededicatedpodresponse.jobid,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.release.dedicate.pod'),
           errorMethod: () => {
@@ -235,15 +229,12 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.releasededicatedclusterresponse.jobid,
+          title: this.$t('label.release.dedicated.cluster'),
+          description: this.resource.id,
           successMessage: this.$t('message.cluster.dedication.released'),
           successMethod: () => {
             this.parentFetchData()
             this.dedicatedDomainId = null
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.cluster.dedication.released'),
-              jobid: response.releasededicatedclusterresponse.jobid,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.release.dedicate.cluster'),
           errorMethod: () => {
@@ -265,15 +256,12 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.releasededicatedhostresponse.jobid,
+          title: this.$t('label.release.dedicated.host'),
+          description: this.resource.id,
           successMessage: this.$t('message.host.dedication.released'),
           successMethod: () => {
             this.parentFetchData()
             this.dedicatedDomainId = null
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.host.dedication.released'),
-              jobid: response.releasededicatedhostresponse.jobid,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.release.dedicate.host'),
           errorMethod: () => {
diff --git a/ui/src/components/view/DedicateModal.vue b/ui/src/components/view/DedicateModal.vue
index 9443e42cb1ac..0a48fdd32463 100644
--- a/ui/src/components/view/DedicateModal.vue
+++ b/ui/src/components/view/DedicateModal.vue
@@ -93,18 +93,14 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.dedicatezoneresponse.jobid,
-          successMessage: this.$t('label.zone.dedicated'),
+          title: this.$t('label.dedicate.zone'),
+          description: `${this.$t('label.domain.id')} : ${this.domainId}`,
+          successMessage: `${this.$t('label.zone.dedicated')}`,
           successMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('label.zone.dedicated'),
-              jobid: response.dedicatezoneresponse.jobid,
-              description: `${this.$t('label.domain.id')} : ${this.dedicatedDomainId}`,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.dedicate.zone.failed'),
           errorMethod: () => {
@@ -137,18 +133,14 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.dedicatepodresponse.jobid,
+          title: this.$t('label.dedicate.pod'),
+          description: `${this.$t('label.domain.id')} : ${this.domainId}`,
           successMessage: this.$t('label.pod.dedicated'),
           successMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('label.pod.dedicated'),
-              jobid: response.dedicatepodresponse.jobid,
-              description: `${this.$t('label.domainid')}: ${this.dedicatedDomainId}`,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.dedicate.pod.failed'),
           errorMethod: () => {
@@ -181,18 +173,14 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.dedicateclusterresponse.jobid,
+          title: this.$t('label.dedicate.cluster'),
+          description: `${this.$t('label.domain.id')} : ${this.domainId}`,
           successMessage: this.$t('message.cluster.dedicated'),
           successMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.cluster.dedicated'),
-              jobid: response.dedicateclusterresponse.jobid,
-              description: `${this.$t('label.domainid')}: ${this.dedicatedDomainId}`,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.dedicate.cluster.failed'),
           errorMethod: () => {
@@ -225,18 +213,14 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.dedicatehostresponse.jobid,
+          title: this.$t('label.dedicate.host'),
+          description: `${this.$t('label.domain.id')} : ${this.domainId}`,
           successMessage: this.$t('message.host.dedicated'),
           successMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.host.dedicated'),
-              jobid: response.dedicatehostresponse.jobid,
-              description: `${this.$t('label.domainid')}: ${this.dedicatedDomainId}`,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.dedicate.host.failed'),
           errorMethod: () => {
diff --git a/ui/src/core/bootstrap.js b/ui/src/core/bootstrap.js
index ceefe3fa6c88..db492773a2a5 100644
--- a/ui/src/core/bootstrap.js
+++ b/ui/src/core/bootstrap.js
@@ -31,7 +31,7 @@ import {
   DEFAULT_FIXED_SIDEMENU,
   DEFAULT_CONTENT_WIDTH_TYPE,
   DEFAULT_MULTI_TAB,
-  ASYNC_JOB_IDS
+  HEADER_NOTICES
 } from '@/store/mutation-types'
 
 export default function Initializer () {
@@ -47,5 +47,5 @@ export default function Initializer () {
   store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
   store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
   store.commit('SET_PROJECT', Vue.ls.get(CURRENT_PROJECT))
-  store.commit('SET_ASYNC_JOB_IDS', Vue.ls.get(ASYNC_JOB_IDS) || [])
+  store.commit('SET_HEADER_NOTICES', Vue.ls.get(HEADER_NOTICES) || [])
 }
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index 4e2d5eb21a60..c1048f0b37f9 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -30,7 +30,7 @@ const getters = {
   userInfo: state => state.user.info,
   addRouters: state => state.permission.addRouters,
   multiTab: state => state.app.multiTab,
-  asyncJobIds: state => state.user.asyncJobIds,
+  headerNotices: state => state.user.headerNotices,
   isLdapEnabled: state => state.user.isLdapEnabled,
   cloudian: state => state.user.cloudian,
   zones: state => state.user.zones,
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index 9ed40e38c443..47dc7ea36f92 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -24,7 +24,16 @@ import router from '@/router'
 import store from '@/store'
 import { login, logout, api } from '@/api'
 import { i18n } from '@/locales'
-import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE } from '@/store/mutation-types'
+import {
+  ACCESS_TOKEN,
+  CURRENT_PROJECT,
+  DEFAULT_THEME,
+  APIS,
+  ZONES,
+  TIMEZONE_OFFSET,
+  USE_BROWSER_TIMEZONE,
+  HEADER_NOTICES
+} from '@/store/mutation-types'
 
 const user = {
   state: {
@@ -36,6 +45,7 @@ const user = {
     features: {},
     project: {},
     asyncJobIds: [],
+    headerNotices: [],
     isLdapEnabled: false,
     cloudian: {},
     zones: {},
@@ -75,9 +85,9 @@ const user = {
     SET_FEATURES: (state, features) => {
       state.features = features
     },
-    SET_ASYNC_JOB_IDS: (state, jobsJsonArray) => {
-      Vue.ls.set(ASYNC_JOB_IDS, jobsJsonArray)
-      state.asyncJobIds = jobsJsonArray
+    SET_HEADER_NOTICES: (state, noticeJsonArray) => {
+      Vue.ls.set(HEADER_NOTICES, noticeJsonArray)
+      state.headerNotices = noticeJsonArray
     },
     SET_LDAP: (state, isLdapEnabled) => {
       state.isLdapEnabled = isLdapEnabled
@@ -122,7 +132,7 @@ const user = {
           commit('SET_AVATAR', '')
           commit('SET_INFO', {})
           commit('SET_PROJECT', {})
-          commit('SET_ASYNC_JOB_IDS', [])
+          commit('SET_HEADER_NOTICES', [])
           commit('SET_FEATURES', {})
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
@@ -245,14 +255,14 @@ const user = {
         commit('SET_TOKEN', '')
         commit('SET_APIS', {})
         commit('SET_PROJECT', {})
-        commit('SET_ASYNC_JOB_IDS', [])
+        commit('SET_HEADER_NOTICES', [])
         commit('SET_FEATURES', {})
         commit('SET_LDAP', {})
         commit('SET_CLOUDIAN', {})
         commit('RESET_THEME')
         Vue.ls.remove(CURRENT_PROJECT)
         Vue.ls.remove(ACCESS_TOKEN)
-        Vue.ls.remove(ASYNC_JOB_IDS)
+        Vue.ls.remove(HEADER_NOTICES)
 
         logout(state.token).then(() => {
           message.destroy()
@@ -266,10 +276,19 @@ const user = {
         })
       })
     },
-    AddAsyncJob ({ commit }, jobJson) {
-      var jobsArray = Vue.ls.get(ASYNC_JOB_IDS, [])
-      jobsArray.push(jobJson)
-      commit('SET_ASYNC_JOB_IDS', jobsArray)
+    AddHeaderNotice ({ commit }, noticeJson) {
+      if (!noticeJson || !noticeJson.title) {
+        return
+      }
+      const noticeArray = Vue.ls.get(HEADER_NOTICES, [])
+      const noticeIdx = noticeArray.findIndex(notice => notice.key === noticeJson.key)
+      if (noticeIdx === -1) {
+        noticeArray.push(noticeJson)
+      } else {
+        noticeArray[noticeIdx] = noticeJson
+      }
+
+      commit('SET_HEADER_NOTICES', noticeArray)
     },
     ProjectView ({ commit }, projectid) {
       return new Promise((resolve, reject) => {
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
index 9d735610e072..32455efdae1f 100644
--- a/ui/src/store/mutation-types.js
+++ b/ui/src/store/mutation-types.js
@@ -29,7 +29,7 @@ export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
 export const DEFAULT_MULTI_TAB = 'DEFAULT_MULTI_TAB'
 export const APIS = 'APIS'
 export const ZONES = 'ZONES'
-export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS'
+export const HEADER_NOTICES = 'HEADER_NOTICES'
 export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
 export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
 
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index d32217f6ba1d..f7be1a70bb7b 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -20,6 +20,7 @@ import { i18n } from '@/locales'
 import { api } from '@/api'
 import { message, notification } from 'ant-design-vue'
 import eventBus from '@/config/eventBus'
+import store from '@/store'
 
 export const pollJobPlugin = {
   install (Vue) {
@@ -27,6 +28,8 @@ export const pollJobPlugin = {
       /**
        * @param {String} jobId
        * @param {String} [name='']
+       * @param {String} [title='']
+       * @param {String} [description='']
        * @param {String} [successMessage=Success]
        * @param {Function} [successMethod=() => {}]
        * @param {String} [errorMessage=Error]
@@ -40,6 +43,8 @@ export const pollJobPlugin = {
       const {
         jobId,
         name = '',
+        title = '',
+        description = '',
         successMessage = i18n.t('label.success'),
         successMethod = () => {},
         errorMessage = i18n.t('label.error'),
@@ -51,6 +56,13 @@ export const pollJobPlugin = {
         action = null
       } = options
 
+      store.dispatch('AddHeaderNotice', {
+        key: jobId,
+        title: title,
+        description: description,
+        status: 'progress'
+      })
+
       api('queryAsyncJobResult', { jobId }).then(json => {
         const result = json.queryasyncjobresultresponse
         if (result.jobstatus === 1) {
@@ -66,6 +78,13 @@ export const pollJobPlugin = {
             key: jobId,
             duration: 2
           })
+          store.dispatch('AddHeaderNotice', {
+            key: jobId,
+            title: title,
+            description: description,
+            status: 'done',
+            duration: 2
+          })
           eventBus.$emit('async-job-complete', action)
           successMethod(result)
         } else if (result.jobstatus === 2) {
@@ -74,20 +93,27 @@ export const pollJobPlugin = {
             key: jobId,
             duration: 1
           })
-          var title = errorMessage
+          var errTitle = errorMessage
           if (action && action.label) {
-            title = i18n.t(action.label)
+            errTitle = i18n.t(action.label)
           }
           var desc = result.jobresult.errortext
           if (name) {
             desc = `(${name}) ${desc}`
           }
           notification.error({
-            message: title,
+            message: errTitle,
             description: desc,
             key: jobId,
             duration: 0
           })
+          store.dispatch('AddHeaderNotice', {
+            key: jobId,
+            title: title,
+            description: desc,
+            status: 'failed',
+            duration: 0
+          })
           eventBus.$emit('async-job-complete', action)
           errorMethod(result)
         } else if (result.jobstatus === 0) {
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index a41b17d47bfc..9eccd6e19b88 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -833,6 +833,8 @@ export default {
     pollActionCompletion (jobId, action, resourceName, showLoading = true) {
       this.$pollJob({
         jobId,
+        title: this.$t(action.label),
+        description: resourceName,
         name: resourceName,
         successMethod: result => {
           this.fetchData()
@@ -918,7 +920,6 @@ export default {
         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
           } else {
diff --git a/ui/src/views/compute/AttachIso.vue b/ui/src/views/compute/AttachIso.vue
index 947201171df3..948e43fad1fb 100644
--- a/ui/src/views/compute/AttachIso.vue
+++ b/ui/src/views/compute/AttachIso.vue
@@ -122,12 +122,9 @@ export default {
           if (jobId) {
             this.$pollJob({
               jobId,
+              title: title,
+              description: values.id,
               successMethod: result => {
-                this.$store.dispatch('AddAsyncJob', {
-                  title: title,
-                  jobid: jobId,
-                  status: this.$t('progress')
-                })
                 this.parentFetchData()
               },
               successMessage: `${this.$t('label.action.attach.iso')} ${this.$t('label.success')}`,
diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
index 9759a5d90554..bcd21ad6d93a 100644
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@@ -536,14 +536,10 @@ export default {
 
         api('createKubernetesCluster', params).then(json => {
           const jobId = json.createkubernetesclusterresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.kubernetes.cluster.create'),
-            jobid: jobId,
-            description: values.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.kubernetes.cluster.create'),
+            description: values.name,
             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,
diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
index bf9d9ddd25b5..9022a1ea7525 100644
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -145,6 +145,8 @@ export default {
             if (jobId) {
               this.$pollJob({
                 jobId,
+                title: title,
+                description: description,
                 successMethod: result => {
                   const volumeId = result.jobresult.snapshot.volumeid
                   const snapshotId = result.jobresult.snapshot.id
@@ -157,12 +159,6 @@ export default {
                 loadingMessage: `${title} ${this.$t('label.in.progress')}`,
                 catchMessage: this.$t('error.fetching.async.job.result')
               })
-              this.$store.dispatch('AddAsyncJob', {
-                title: title,
-                jobid: jobId,
-                description: description,
-                status: 'progress'
-              })
             }
           }).catch(error => {
             this.$notifyError(error)
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index bee2a386579b..0141bb0eae10 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -1536,6 +1536,8 @@ export default {
           if (jobId) {
             this.$pollJob({
               jobId,
+              title: title,
+              description: description,
               successMethod: result => {
                 const vm = result.jobresult.virtualmachine
                 const name = vm.displayname || vm.name || vm.id
@@ -1557,12 +1559,6 @@ export default {
                 eventBus.$emit('vm-refresh-data')
               }
             })
-            this.$store.dispatch('AddAsyncJob', {
-              title: title,
-              jobid: jobId,
-              description: description,
-              status: 'progress'
-            })
           }
           // Sending a refresh in case it hasn't picked up the new VM
           new Promise(resolve => setTimeout(resolve, 3000)).then(() => {
diff --git a/ui/src/views/compute/DestroyVM.vue b/ui/src/views/compute/DestroyVM.vue
index 638097d2947d..d57c51b814ea 100644
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@@ -125,14 +125,10 @@ export default {
 
         api('destroyVirtualMachine', params).then(json => {
           const jobId = json.destroyvirtualmachineresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.action.destroy.instance'),
-            jobid: jobId,
-            description: this.resource.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.action.destroy.instance'),
+            description: this.resource.name,
             loadingMessage: `${this.$t('message.deleting.vm')} ${this.resource.name}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
             successMessage: `${this.$t('message.success.delete.vm')} ${this.resource.name}`,
diff --git a/ui/src/views/compute/MigrateWizard.vue b/ui/src/views/compute/MigrateWizard.vue
index 46346e941a1a..75fc3ef99dce 100644
--- a/ui/src/views/compute/MigrateWizard.vue
+++ b/ui/src/views/compute/MigrateWizard.vue
@@ -154,14 +154,10 @@ export default {
         virtualmachineid: this.resource.id
       }).then(response => {
         const jobid = this.selectedHost.requiresStorageMotion ? response.migratevirtualmachinewithvolumeresponse.jobid : response.migratevirtualmachineresponse.jobid
-        this.$store.dispatch('AddAsyncJob', {
-          title: `${this.$t('label.migrating')} ${this.resource.name}`,
-          jobid: jobid,
-          description: this.resource.name,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: jobid,
+          title: `${this.$t('label.migrating')} ${this.resource.name}`,
+          description: this.resource.name,
           successMessage: `${this.$t('message.success.migrating')} ${this.resource.name}`,
           successMethod: () => {
             this.$emit('close-action')
diff --git a/ui/src/views/compute/ScaleKubernetesCluster.vue b/ui/src/views/compute/ScaleKubernetesCluster.vue
index 8ebc1fb29e89..7909500d49cb 100644
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@@ -187,14 +187,10 @@ export default {
         }
         api('scaleKubernetesCluster', params).then(json => {
           const jobId = json.scalekubernetesclusterresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.kubernetes.cluster.scale'),
-            jobid: jobId,
-            description: this.resource.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.kubernetes.cluster.scale'),
+            description: this.resource.name,
             loadingMessage: `${this.$t('label.kubernetes.cluster.scale')} ${this.resource.name} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
             successMessage: `${this.$t('message.success.scale.kubernetes')} ${this.resource.name}`,
diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index 5bca86084196..300f44eba266 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -241,14 +241,10 @@ export default {
         }
         api('startVirtualMachine', params).then(json => {
           const jobId = json.startvirtualmachineresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.action.start.instance'),
-            jobid: jobId,
-            description: this.resource.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.action.start.instance'),
+            description: this.resource.name,
             loadingMessage: `${this.$t('label.action.start.instance')} ${this.resource.name}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
             successMessage: `${this.$t('label.action.start.instance')} ${this.resource.name}`,
diff --git a/ui/src/views/compute/UpgradeKubernetesCluster.vue b/ui/src/views/compute/UpgradeKubernetesCluster.vue
index 18b51b21ca1a..eb3910d0f01e 100644
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@@ -159,14 +159,10 @@ export default {
         api('upgradeKubernetesCluster', params).then(json => {
           this.$emit('refresh-data')
           const jobId = json.upgradekubernetesclusterresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.kubernetes.cluster.upgrade'),
-            jobid: jobId,
-            description: this.resource.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.kubernetes.cluster.upgrade'),
+            description: this.resource.name,
             loadingMessage: `${this.$t('label.kubernetes.cluster.upgrade')} ${this.resource.name} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
             successMessage: `${this.$t('message.success.upgrade.kubernetes')} ${this.resource.name}`,
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index 900a5908fd34..0bf781a588bb 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -155,32 +155,6 @@ export default {
   },
   inject: ['parentCloseAction', 'parentFetchData', 'parentUpdActionData'],
   methods: {
-    pollActionCompletion (jobId, action) {
-      this.$pollJob({
-        jobId,
-        successMethod: result => {
-          if (this.action.api === 'deleteDomain') {
-            this.$set(this.resource, 'isDel', true)
-            this.parentUpdActionData(this.resource)
-          }
-          this.parentFetchData()
-          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.parentFetchData(),
-        loadingMessage: `${this.$t(action.label)} ${this.$t('label.in.progress')} ${this.$t('label.for')} ${this.resource.name}`,
-        catchMessage: this.$t('error.fetching.async.job.result'),
-        action
-      })
-    },
     handleSubmit (e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
@@ -239,13 +213,32 @@ export default {
             if (obj.includes('response')) {
               for (const res in json[obj]) {
                 if (res === 'jobid') {
-                  this.$store.dispatch('AddAsyncJob', {
+                  this.$pollJob({
+                    jobId: json[obj][res],
                     title: this.$t(this.action.label),
-                    jobid: json[obj][res],
                     description: this.resource.name,
-                    status: 'progress'
+                    successMethod: result => {
+                      if (this.action.api === 'deleteDomain') {
+                        this.$set(this.resource, 'isDel', true)
+                        this.parentUpdActionData(this.resource)
+                      }
+                      this.parentFetchData()
+                      if (this.action.response) {
+                        const description = this.action.response(result.jobresult)
+                        if (description) {
+                          this.$notification.info({
+                            message: this.$t(this.action.label),
+                            description: (<span domPropsInnerHTML={description}></span>),
+                            duration: 0
+                          })
+                        }
+                      }
+                    },
+                    errorMethod: () => this.parentFetchData(),
+                    loadingMessage: `${this.$t(this.action.label)} ${this.$t('label.in.progress')} ${this.$t('label.for')} ${this.resource.name}`,
+                    catchMessage: this.$t('error.fetching.async.job.result'),
+                    action: this.action
                   })
-                  this.pollActionCompletion(json[obj][res], this.action)
                   hasJobId = true
                   break
                 }
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 6808724bd8fb..907dbdd211f6 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -247,15 +247,11 @@ export default {
       this.deleteLoading = true
       api('deleteIso', params).then(json => {
         const jobId = json.deleteisoresponse.jobid
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('label.action.delete.iso'),
-          jobid: jobId,
-          description: this.resource.name,
-          status: 'progress'
-        })
         const singleZone = (this.dataSource.length === 1)
         this.$pollJob({
           jobId,
+          title: this.$t('label.action.delete.iso'),
+          description: this.resource.name,
           successMethod: result => {
             if (singleZone) {
               this.$router.go(-1)
@@ -310,14 +306,10 @@ export default {
         this.copyLoading = true
         api('copyIso', params).then(json => {
           const jobId = json.copytemplateresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.action.copy.iso'),
-            jobid: jobId,
-            description: this.resource.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.action.copy.iso'),
+            description: this.resource.name,
             successMethod: result => {
               this.fetchData()
             },
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 047d39f23b1e..a16a37ae4739 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -261,15 +261,11 @@ export default {
       this.deleteLoading = true
       api('deleteTemplate', params).then(json => {
         const jobId = json.deletetemplateresponse.jobid
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('label.action.delete.template'),
-          jobid: jobId,
-          description: this.resource.name,
-          status: 'progress'
-        })
         const singleZone = (this.dataSource.length === 1)
         this.$pollJob({
           jobId,
+          title: this.$t('label.action.delete.template'),
+          description: this.resource.name,
           successMethod: result => {
             if (singleZone) {
               const isResourcePage = (this.$route.params && this.$route.params.id)
@@ -334,14 +330,10 @@ export default {
         this.copyLoading = true
         api('copyTemplate', params).then(json => {
           const jobId = json.copytemplateresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.action.copy.template'),
-            jobid: jobId,
-            description: this.resource.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.action.copy.template'),
+            description: this.resource.name,
             successMethod: result => {
               this.fetchData()
             },
diff --git a/ui/src/views/infra/ClusterAdd.vue b/ui/src/views/infra/ClusterAdd.vue
index f4c03fe96a04..096d8d6cfd42 100644
--- a/ui/src/views/infra/ClusterAdd.vue
+++ b/ui/src/views/infra/ClusterAdd.vue
@@ -286,15 +286,11 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.dedicateclusterresponse.jobid,
+          title: this.$t('message.cluster.dedicated'),
+          description: `${this.$t('label.domainid')} : ${this.dedicatedDomainId}`,
           successMessage: this.$t('message.cluster.dedicated'),
           successMethod: () => {
             this.loading = false
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.cluster.dedicated'),
-              jobid: response.dedicateclusterresponse.jobid,
-              description: `${this.$t('label.domainid')} : ${this.dedicatedDomainId}`,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.dedicate.cluster.failed'),
           errorMethod: () => {
diff --git a/ui/src/views/infra/HostAdd.vue b/ui/src/views/infra/HostAdd.vue
index 73b11f2e9c93..eba4e05f794b 100644
--- a/ui/src/views/infra/HostAdd.vue
+++ b/ui/src/views/infra/HostAdd.vue
@@ -315,15 +315,11 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.dedicatehostresponse.jobid,
+          title: this.$t('message.host.dedicated'),
+          description: `${this.$t('label.domainid')} : ${this.dedicatedDomainId}`,
           successMessage: this.$t('message.host.dedicated'),
           successMethod: () => {
             this.loading = false
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.host.dedicated'),
-              jobid: response.dedicatehostresponse.jobid,
-              description: `${this.$t('label.domainid')} : ${this.dedicatedDomainId}`,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.dedicate.host.failed'),
           errorMethod: () => {
diff --git a/ui/src/views/infra/MigrateData.vue b/ui/src/views/infra/MigrateData.vue
index 56449d497b97..9ad2e5161bf7 100644
--- a/ui/src/views/infra/MigrateData.vue
+++ b/ui/src/views/infra/MigrateData.vue
@@ -132,6 +132,7 @@ export default {
 
         const title = this.$t('message.data.migration')
         this.loading = true
+        const loadingJob = this.$message.loading({ content: this.$t('label.migrating.data'), duration: 0 })
 
         const result = this.migrateData(params, title)
         result.then(json => {
@@ -154,12 +155,11 @@ export default {
           this.closeAction()
         }).catch(error => {
           console.log(error)
-        })
-        setTimeout(() => {
-          this.$message.loading({ content: this.$t('label.migrating.data'), duration: 1 })
+        }).finally(() => {
           this.loading = false
+          setTimeout(loadingJob)
           this.closeAction()
-        }, 200)
+        })
       })
     },
     migrateData (args, title) {
@@ -167,39 +167,22 @@ export default {
         api('migrateSecondaryStorageData', args).then(async json => {
           const jobId = json.migratesecondarystoragedataresponse.jobid
           if (jobId) {
-            this.$store.dispatch('AddAsyncJob', {
-              title: title,
-              jobid: jobId,
+            this.$pollJob({
+              jobId,
+              title,
               description: this.$t('message.data.migration.progress'),
-              status: 'progress',
-              silent: true
+              successMethod: (result) => resolve(result),
+              errorMethod: (result) => reject(result.jobresult.errortext),
+              showLoading: false,
+              catchMessage: this.$t('error.fetching.async.job.result'),
+              catchMethod: () => { this.closeAction() }
             })
-            const result = await this.pollJob(jobId, title)
-            if (result.jobstatus === 2) {
-              reject(result.jobresult.errortext)
-              return
-            }
-            resolve(result)
           }
         }).catch(error => {
           reject(error)
         })
       })
     },
-    async pollJob (jobId, title) {
-      return new Promise(resolve => {
-        const asyncJobInterval = setInterval(() => {
-          api('queryAsyncJobResult', { jobId }).then(async json => {
-            const result = json.queryasyncjobresultresponse
-            if (result.jobstatus === 0) {
-              return
-            }
-            clearInterval(asyncJobInterval)
-            resolve(result)
-          })
-        }, 1000)
-      })
-    },
     closeAction () {
       this.$emit('close-action')
     }
diff --git a/ui/src/views/infra/PodAdd.vue b/ui/src/views/infra/PodAdd.vue
index b06373f6ae1d..e8b914bce43c 100644
--- a/ui/src/views/infra/PodAdd.vue
+++ b/ui/src/views/infra/PodAdd.vue
@@ -211,15 +211,11 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.dedicatepodresponse.jobid,
+          title: this.$t('message.pod.dedicated'),
+          description: `${this.$t('label.domainid')} : ${this.dedicatedDomainId}`,
           successMessage: this.$t('message.pod.dedicated'),
           successMethod: () => {
             this.loading = false
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.pod.dedicated'),
-              jobid: response.dedicatepodresponse.jobid,
-              description: `${this.$t('label.domainid')} : ${this.dedicatedDomainId}`,
-              status: 'progress'
-            })
           },
           errorMessage: this.$t('error.dedicate.pod.failed'),
           errorMethod: () => {
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index f82c2249deae..d1121cfb114e 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -289,13 +289,10 @@ export default {
       api('releaseDedicatedGuestVlanRange', {
         id: item.id
       }).then(response => {
-        this.$store.dispatch('AddAsyncJob', {
-          title: `${this.$t('label.delete.dedicated.vlan.range')} ${item.guestvlanrange} ${this.$t('label.for')} ${item.account}`,
-          jobid: response.releasededicatedguestvlanrangeresponse.jobid,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: response.releasededicatedguestvlanrangeresponse.jobid,
+          title: this.$t('label.delete.dedicated.vlan.range'),
+          description: `${this.$t('label.delete.dedicated.vlan.range')} ${item.guestvlanrange} ${this.$t('label.for')} ${item.account}`,
           successMethod: () => {
             this.fetchData()
             this.parentFinishLoading()
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index e36b70b8ba33..a57eb0223d07 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -189,13 +189,9 @@ export default {
         api('updateTrafficType', params).then(response => {
           this.$pollJob({
             jobId: response.updatetraffictyperesponse.jobid,
+            title: title,
+            description: description,
             successMethod: result => {
-              this.$store.dispatch('AddAsyncJob', {
-                title: title,
-                description: description,
-                jobid: response.updatetraffictyperesponse.jobid,
-                status: this.$t('progress')
-              })
               this.parentFetchData()
             },
             successMessage: `${this.$t('label.update.traffic.label')} ${this.traffictype} ${this.$t('label.success')}`,
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index 27a1b0c79057..364c0db24761 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -254,13 +254,11 @@ export default {
         endip: record.endip,
         vlan: record.vlanid
       }).then(response => {
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('message.success.remove.iprange'),
-          jobid: response.deletemanagementnetworkiprangeresponse.jobid,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: response.deletemanagementnetworkiprangeresponse.jobid,
+          title: this.$t('label.remove.ip.range'),
+          description: record.id,
+          successMessage: this.$t('message.success.remove.iprange'),
           successMethod: () => {
             this.componentLoading = false
             this.fetchData()
@@ -298,13 +296,11 @@ export default {
           forsystemvms: values.vms,
           vlan: values.vlan || null
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('message.success.add.iprange'),
-            jobid: response.createmanagementnetworkiprangeresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createmanagementnetworkiprangeresponse.jobid,
+            title: this.$t('label.add.ip.range'),
+            description: values.pod,
+            successMessage: this.$t('message.success.add.iprange'),
             successMethod: () => {
               this.componentLoading = false
               this.fetchData()
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index 8b381349ade3..167bf198f57c 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -236,13 +236,11 @@ export default {
     handleDeleteIpRange (id) {
       this.componentLoading = true
       api('deleteStorageNetworkIpRange', { id }).then(response => {
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('message.success.remove.iprange'),
-          jobid: response.deletestoragenetworkiprangeresponse.jobid,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: response.deletestoragenetworkiprangeresponse.jobid,
+          title: this.$t('label.remove.ip.range'),
+          description: id,
+          successMessage: this.$t('message.success.remove.iprange'),
           successMethod: () => {
             this.componentLoading = false
             this.fetchData()
@@ -280,13 +278,11 @@ export default {
           endip: values.endip,
           vlan: values.vlan || null
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('message.success.add.iprange'),
-            jobid: response.createstoragenetworkiprangeresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createstoragenetworkiprangeresponse.jobid,
+            title: this.$t('label.add.ip.range'),
+            description: values.pod,
+            successMessage: this.$t('message.success.add.iprange'),
             successMethod: () => {
               this.componentLoading = false
               this.fetchData()
diff --git a/ui/src/views/infra/network/ServiceProvidersTab.vue b/ui/src/views/infra/network/ServiceProvidersTab.vue
index 89c92d418190..63745d9d32df 100644
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@@ -1354,13 +1354,7 @@ export default {
             if (obj.includes('response') || obj.includes(apiName)) {
               for (const res in json[obj]) {
                 if (res === 'jobid') {
-                  this.$store.dispatch('AddAsyncJob', {
-                    title: this.$t(this.currentAction.label),
-                    jobid: json[obj][res],
-                    description: this.$t(this.nsp.name),
-                    status: 'progress'
-                  })
-                  this.parentPollActionCompletion(json[obj][res], this.currentAction)
+                  this.parentPollActionCompletion(json[obj][res], this.currentAction, this.$t(this.nsp.name))
                   hasJobId = true
                   break
                 }
diff --git a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
index d2f49e77d005..6c206f8a6f57 100644
--- a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
@@ -242,13 +242,7 @@ export default {
           params.id = this.nsp.id
           const jobId = await this.addF5LoadBalancer(params)
           if (jobId) {
-            await this.$store.dispatch('AddAsyncJob', {
-              title: this.$t(this.action.label),
-              jobid: jobId,
-              description: this.$t(this.nsp.name),
-              status: 'progress'
-            })
-            await this.parentPollActionCompletion(jobId, this.action)
+            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           }
           this.loading = false
           await this.provideCloseAction()
diff --git a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
index 786c0d46fe9d..b9931ebe9475 100644
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@@ -277,13 +277,7 @@ export default {
           params.id = this.nsp.id
           const jobId = await this.addNetscalerLoadBalancer(params)
           if (jobId) {
-            await this.$store.dispatch('AddAsyncJob', {
-              title: this.$t(this.action.label),
-              jobid: jobId,
-              description: this.$t(this.nsp.name),
-              status: 'progress'
-            })
-            await this.parentPollActionCompletion(jobId, this.action)
+            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           }
           this.loading = false
           await this.provideCloseAction()
diff --git a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
index d3d70f669a7e..af2a29cc9419 100644
--- a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
+++ b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
@@ -154,13 +154,7 @@ export default {
           params.id = this.nsp.id
           const jobId = await this.addNiciraNvpDevice(params)
           if (jobId) {
-            await this.$store.dispatch('AddAsyncJob', {
-              title: this.$t(this.action.label),
-              jobid: jobId,
-              description: this.$t(this.nsp.name),
-              status: 'progress'
-            })
-            await this.parentPollActionCompletion(jobId, this.action)
+            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           }
           this.loading = false
           await this.provideCloseAction()
diff --git a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
index 36c48d758825..e0ef7ade3648 100644
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@@ -366,13 +366,7 @@ export default {
           params.id = this.nsp.id
           const jobId = await this.addPaloAltoFirewall(params)
           if (jobId) {
-            await this.$store.dispatch('AddAsyncJob', {
-              title: this.$t(this.action.label),
-              jobid: jobId,
-              description: this.$t(this.nsp.name),
-              status: 'progress'
-            })
-            await this.parentPollActionCompletion(jobId, this.action)
+            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           }
           this.loading = false
           await this.provideCloseAction()
diff --git a/ui/src/views/infra/network/providers/AddSrxFirewall.vue b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
index 19a5cb95b527..a745ffed7381 100644
--- a/ui/src/views/infra/network/providers/AddSrxFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
@@ -311,13 +311,7 @@ export default {
           params.id = this.nsp.id
           const jobId = await this.addSrxFirewall(params)
           if (jobId) {
-            await this.$store.dispatch('AddAsyncJob', {
-              title: this.$t(this.action.label),
-              jobid: jobId,
-              description: this.$t(this.nsp.name),
-              status: 'progress'
-            })
-            await this.parentPollActionCompletion(jobId, this.action)
+            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           }
           this.loading = false
           await this.provideCloseAction()
diff --git a/ui/src/views/infra/network/providers/ProviderListView.vue b/ui/src/views/infra/network/providers/ProviderListView.vue
index a2d1142672ab..700828b44f40 100644
--- a/ui/src/views/infra/network/providers/ProviderListView.vue
+++ b/ui/src/views/infra/network/providers/ProviderListView.vue
@@ -188,7 +188,7 @@ export default {
       return columns
     }
   },
-  inject: ['providerChangePage', 'provideReload', 'parentPollActionCompletion'],
+  inject: ['providerChangePage', 'provideReload', 'parentFetchData'],
   methods: {
     changePage (page, pageSize) {
       this.providerChangePage(this.title, page, pageSize)
@@ -286,13 +286,15 @@ export default {
             try {
               const jobId = await this.executeDeleteRecord(apiName, params)
               if (jobId) {
-                this.$store.dispatch('AddAsyncJob', {
+                this.$pollJob({
+                  jobId,
                   title: this.$t(label),
-                  jobid: jobId,
                   description: this.$t(name),
-                  status: 'progress'
+                  successMethod: () => this.parentFetchData(),
+                  errorMethod: () => this.parentFetchData(),
+                  loadingMessage: `${this.$t(label)} - ${this.$t(name)}`,
+                  catchMessage: this.$t('error.fetching.async.job.result')
                 })
-                this.parentPollActionCompletion(jobId, this.action)
               } else {
                 this.$success('Success')
                 this.provideReload()
@@ -322,13 +324,15 @@ export default {
           try {
             const jobId = await this.configureOvsElement(params)
             if (jobId) {
-              this.$store.dispatch('AddAsyncJob', {
+              this.$pollJob({
+                jobId,
                 title: this.$t('label.configure.ovs'),
-                jobid: jobId,
                 description: this.$t(record.id),
-                status: 'progress'
+                successMethod: () => this.parentFetchData(),
+                errorMethod: () => this.parentFetchData(),
+                loadingMessage: `${this.$t('label.configure.ovs')} - ${this.$t(record.id)}`,
+                catchMessage: this.$t('error.fetching.async.job.result')
               })
-              this.parentPollActionCompletion(jobId, this.action)
             } else {
               this.$success('Success')
               this.provideReload()
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index 62448d769048..504dbc3464d2 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -312,13 +312,10 @@ export default {
         resourceIds: this.selectedAcl.id,
         resourceType: 'NetworkACL'
       }).then(response => {
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('message.delete.tag.for.networkacl'),
-          jobid: response.deletetagsresponse.jobid,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: response.deletetagsresponse.jobid,
+          title: this.$t('message.delete.tag.for.networkacl'),
+          description: `${tag.key} = ${tag.value}`,
           successMessage: this.$t('message.success.delete.tag'),
           successMethod: () => {
             this.fetchTags(this.selectedAcl)
@@ -357,13 +354,10 @@ export default {
           resourceIds: this.selectedAcl.id,
           resourceType: 'NetworkACL'
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('message.add.tag.for.networkacl'),
-            jobid: response.createtagsresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createtagsresponse.jobid,
+            title: this.$t('message.add.tag.for.networkacl'),
+            description: `${values.key} = ${values.value}`,
             successMessage: this.$t('message.success.add.tag'),
             successMethod: () => {
               this.fetchTags(this.selectedAcl)
@@ -445,13 +439,10 @@ export default {
         data.partialupgrade = false
 
         api('updateNetworkACLItem', {}, 'POST', data).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.edit.acl.rule'),
-            jobid: response.createnetworkaclresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createnetworkaclresponse.jobid,
+            title: this.$t('label.edit.acl.rule'),
+            description: this.selectedAcl.id,
             successMessage: this.$t('message.success.edit.acl'),
             successMethod: () => {
               this.fetchData()
@@ -478,13 +469,10 @@ export default {
     handleDeleteRule (id) {
       this.fetchLoading = true
       api('deleteNetworkACL', { id }).then(response => {
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('message.delete.acl.rule'),
-          jobid: response.deletenetworkaclresponse.jobid,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: response.deletenetworkaclresponse.jobid,
+          title: this.$t('message.delete.acl.rule'),
+          description: id,
           successMessage: this.$t('message.success.delete.acl.rule'),
           successMethod: () => {
             this.fetchData()
@@ -566,13 +554,10 @@ export default {
         previousaclruleid,
         nextaclruleid
       }).then(response => {
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('message.move.acl.order'),
-          jobid: response.moveNetworkAclItemResponse.jobid,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: response.moveNetworkAclItemResponse.jobid,
+          title: this.$t('message.move.acl.order'),
+          description: id,
           successMessage: this.$t('message.success.move.acl.order'),
           successMethod: () => {
             this.fetchData()
diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue
index d3697f350bb2..03f562876010 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@@ -209,14 +209,8 @@ export default {
           if (jobId) {
             this.$pollJob({
               jobId,
-              successMethod: result => {
-                this.$store.dispatch('AddAsyncJob', {
-                  title: title,
-                  jobid: jobId,
-                  description: description,
-                  status: this.$t('progress')
-                })
-              },
+              title: title,
+              description: description,
               loadingMessage: `${title} ${this.$t('label.in.progress')}`,
               catchMessage: this.$t('error.fetching.async.job.result')
             })
diff --git a/ui/src/views/network/CreateVpnCustomerGateway.vue b/ui/src/views/network/CreateVpnCustomerGateway.vue
index ebbb7be12167..e038a5314eba 100644
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@@ -318,14 +318,10 @@ export default {
           ikepolicy: ikepolicy,
           esppolicy: esppolicy
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('message.add.vpn.customer.gateway'),
-            jobid: response.createvpncustomergatewayresponse.jobid,
-            description: values.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createvpncustomergatewayresponse.jobid,
+            title: this.$t('message.add.vpn.customer.gateway'),
+            description: values.name,
             successMessage: this.$t('message.success.add.vpn.customer.gateway'),
             successMethod: () => {
               this.closeModal()
diff --git a/ui/src/views/network/StaticRoutesTab.vue b/ui/src/views/network/StaticRoutesTab.vue
index 814dd07ca650..f5710bf6cd61 100644
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@@ -130,13 +130,10 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.createstaticrouteresponse.jobid,
+          title: this.$t('message.success.add.static.route'),
+          description: this.newRoute,
           successMethod: () => {
             this.fetchData()
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.success.add.static.route'),
-              jobid: response.createstaticrouteresponse.jobid,
-              status: 'progress'
-            })
             this.componentLoading = false
             this.newRoute = null
           },
@@ -165,13 +162,10 @@ export default {
       }).then(response => {
         this.$pollJob({
           jobId: response.deletestaticrouteresponse.jobid,
+          title: this.$t('message.success.delete.static.route'),
+          description: route.id,
           successMethod: () => {
             this.fetchData()
-            this.$store.dispatch('AddAsyncJob', {
-              title: this.$t('message.success.delete.static.route'),
-              jobid: response.deletestaticrouteresponse.jobid,
-              status: 'progress'
-            })
             this.componentLoading = false
           },
           errorMessage: this.$t('message.delete.static.route.failed'),
diff --git a/ui/src/views/network/VpcTab.vue b/ui/src/views/network/VpcTab.vue
index d75dae8dbc92..9c9b0f08564b 100644
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@@ -588,13 +588,10 @@ export default {
         }
 
         api('createPrivateGateway', params).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('message.success.add.private.gateway'),
-            jobid: response.createprivategatewayresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createprivategatewayresponse.jobid,
+            title: this.$t('message.success.add.private.gateway'),
+            description: this.resource.id,
             successMethod: () => {
               this.modals.gateway = false
               this.handleFetchData()
@@ -635,13 +632,10 @@ export default {
           s2scustomergatewayid: values.vpncustomergateway,
           passive: values.passive ? values.passive : false
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.vpn.connection'),
-            jobid: response.createvpnconnectionresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createvpnconnectionresponse.jobid,
+            title: this.$t('label.vpn.connection'),
+            description: this.vpnGateways[0].id,
             successMethod: () => {
               this.fetchVpnConnections()
               this.fetchLoading = false
@@ -680,13 +674,10 @@ export default {
           description: values.description,
           vpcid: this.resource.id
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('message.success.add.network.acl'),
-            jobid: response.createnetworkacllistresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createnetworkacllistresponse.jobid,
+            title: this.$t('message.success.add.network.acl'),
+            description: values.name || values.description,
             successMethod: () => {
               this.fetchLoading = false
             },
@@ -713,13 +704,10 @@ export default {
       api('createVpnGateway', {
         vpcid: this.resource.id
       }).then(response => {
-        this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('message.success.add.vpn.gateway'),
-          jobid: response.createvpngatewayresponse.jobid,
-          status: 'progress'
-        })
         this.$pollJob({
           jobId: response.createvpngatewayresponse.jobid,
+          title: this.$t('message.success.add.vpn.gateway'),
+          description: this.resource.id,
           successMethod: () => {
             this.fetchLoading = false
           },
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index ae67a8f87a2e..a1f228af42be 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -533,14 +533,10 @@ export default {
           sourceipaddressnetworkid: this.networkid,
           scheme: 'Internal'
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('message.create.internallb'),
-            jobid: response.createloadbalancerresponse.jobid,
-            description: values.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.createloadbalancerresponse.jobid,
+            title: this.$t('message.create.internallb'),
+            description: values.name,
             successMessage: this.$t('message.success.create.internallb'),
             successMethod: () => {
               this.fetchData()
diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index 782df3a2e4a8..0951e653e52b 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -185,14 +185,9 @@ export default {
           if (jobId) {
             this.$pollJob({
               jobId,
+              title: title,
+              description: values.name,
               successMethod: result => {
-                const successDescription = result.jobresult.backupoffering.name
-                this.$store.dispatch('AddAsyncJob', {
-                  title: title,
-                  jobid: jobId,
-                  description: successDescription,
-                  status: 'progress'
-                })
                 this.parentFetchData()
                 this.closeAction()
               },
diff --git a/ui/src/views/project/AccountsTab.vue b/ui/src/views/project/AccountsTab.vue
index 8c986c5f393b..947ec4ef1dc6 100644
--- a/ui/src/views/project/AccountsTab.vue
+++ b/ui/src/views/project/AccountsTab.vue
@@ -359,11 +359,11 @@ export default {
             if (res === 'jobid') {
               hasJobId = true
               const jobId = json[obj][res]
-              this.$store.dispatch('AddAsyncJob', {
-                title: title,
-                jobid: jobId,
-                description: description,
-                status: 'progress'
+              this.$pollJob({
+                jobId,
+                title,
+                description,
+                showLoading: false
               })
             }
           }
diff --git a/ui/src/views/project/InvitationTokenTemplate.vue b/ui/src/views/project/InvitationTokenTemplate.vue
index 2c249f216315..3d3994b8ca84 100644
--- a/ui/src/views/project/InvitationTokenTemplate.vue
+++ b/ui/src/views/project/InvitationTokenTemplate.vue
@@ -102,11 +102,11 @@ export default {
             if (res === 'jobid') {
               hasJobId = true
               const jobId = json[obj][res]
-              this.$store.dispatch('AddAsyncJob', {
+              this.$pollJob({
                 title: title,
                 jobid: jobId,
                 description: description,
-                status: 'progress'
+                showLoading: false
               })
             }
           }
diff --git a/ui/src/views/project/InvitationsTemplate.vue b/ui/src/views/project/InvitationsTemplate.vue
index b640457e80d0..f51d6d1092ff 100644
--- a/ui/src/views/project/InvitationsTemplate.vue
+++ b/ui/src/views/project/InvitationsTemplate.vue
@@ -306,11 +306,11 @@ export default {
             if (res === 'jobid') {
               hasJobId = true
               const jobId = json[obj][res]
-              this.$store.dispatch('AddAsyncJob', {
+              this.$pollJob({
                 title: title,
                 jobid: jobId,
                 description: description,
-                status: 'progress'
+                showLoading: false
               })
             }
           }
diff --git a/ui/src/views/storage/AttachVolume.vue b/ui/src/views/storage/AttachVolume.vue
index 43ca3cd85230..e864fe7fa19b 100644
--- a/ui/src/views/storage/AttachVolume.vue
+++ b/ui/src/views/storage/AttachVolume.vue
@@ -113,13 +113,10 @@ export default {
           id: this.resource.id,
           virtualmachineid: values.virtualmachineid
         }).then(response => {
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.action.attach.disk'),
-            jobid: response.attachvolumeresponse.jobid,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId: response.attachvolumeresponse.jobid,
+            title: this.$t('label.action.attach.disk'),
+            description: this.resource.id,
             successMethod: () => {
               this.parentFetchData()
             },
diff --git a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
index 93d2e2979051..e40c41c6767c 100644
--- a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
+++ b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
@@ -99,14 +99,10 @@ export default {
         }).then(response => {
           this.$pollJob({
             jobId: response.createsnapshotfromvmsnapshotresponse.jobid,
+            title: this.$t('message.success.create.snapshot.from.vmsnapshot'),
+            description: values.name,
             successMessage: this.$t('message.success.create.snapshot.from.vmsnapshot'),
             successMethod: () => {
-              this.$store.dispatch('AddAsyncJob', {
-                title: this.$t('message.success.create.snapshot.from.vmsnapshot'),
-                jobid: response.createsnapshotfromvmsnapshotresponse.jobid,
-                description: values.name,
-                status: 'progress'
-              })
               this.$emit('refresh-data')
             },
             errorMessage: this.$t('message.create.snapshot.from.vmsnapshot.failed'),
diff --git a/ui/src/views/storage/CreateVolume.vue b/ui/src/views/storage/CreateVolume.vue
index ef22b07ef761..35f7db94dd14 100644
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@@ -155,14 +155,10 @@ export default {
         api('createVolume', values).then(response => {
           this.$pollJob({
             jobId: response.createvolumeresponse.jobid,
+            title: this.$t('message.success.create.volume'),
+            description: values.name,
             successMessage: this.$t('message.success.create.volume'),
             successMethod: () => {
-              this.$store.dispatch('AddAsyncJob', {
-                title: this.$t('message.success.create.volume'),
-                jobid: response.createvolumeresponse.jobid,
-                description: values.name,
-                status: 'progress'
-              })
               this.$emit('refresh-data')
             },
             errorMessage: this.$t('message.create.volume.failed'),
diff --git a/ui/src/views/storage/ResizeVolume.vue b/ui/src/views/storage/ResizeVolume.vue
index b30514a0fcb9..cc3b0d0d396c 100644
--- a/ui/src/views/storage/ResizeVolume.vue
+++ b/ui/src/views/storage/ResizeVolume.vue
@@ -101,15 +101,10 @@ export default {
         api('resizeVolume', values).then(response => {
           this.$pollJob({
             jobId: response.resizevolumeresponse.jobid,
+            title: this.$t('message.success.resize.volume'),
+            description: values.name,
             successMessage: this.$t('message.success.resize.volume'),
-            successMethod: () => {
-              this.$store.dispatch('AddAsyncJob', {
-                title: this.$t('message.success.resize.volume'),
-                jobid: response.resizevolumeresponse.jobid,
-                description: values.name,
-                status: 'progress'
-              })
-            },
+            successMethod: () => {},
             errorMessage: this.$t('message.resize.volume.failed'),
             errorMethod: () => {
               this.closeModal()
diff --git a/ui/src/views/storage/RestoreAttachBackupVolume.vue b/ui/src/views/storage/RestoreAttachBackupVolume.vue
index d56b75db8e67..5c693a23a52f 100644
--- a/ui/src/views/storage/RestoreAttachBackupVolume.vue
+++ b/ui/src/views/storage/RestoreAttachBackupVolume.vue
@@ -143,14 +143,9 @@ export default {
           if (jobId) {
             this.$pollJob({
               jobId,
+              title: title,
+              description: values.volumeid,
               successMethod: result => {
-                const successDescription = result.jobresult.storagebackup.name
-                this.$store.dispatch('AddAsyncJob', {
-                  title: title,
-                  jobid: jobId,
-                  description: successDescription,
-                  status: 'progress'
-                })
                 this.parentFetchData()
                 this.closeAction()
               },
diff --git a/ui/src/views/storage/TakeSnapshot.vue b/ui/src/views/storage/TakeSnapshot.vue
index 8aec2363531a..ce9a0849205a 100644
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/ui/src/views/storage/TakeSnapshot.vue
@@ -168,15 +168,9 @@ export default {
           if (jobId) {
             this.$pollJob({
               jobId,
-              successMethod: result => {
-                const successDescription = result.jobresult.snapshot.name
-                this.$store.dispatch('AddAsyncJob', {
-                  title: title,
-                  jobid: jobId,
-                  description: successDescription,
-                  status: 'progress'
-                })
-              },
+              title: title,
+              description: values.name || this.resource.id,
+              successMethod: result => {},
               loadingMessage: `${title} ${this.$t('label.in.progress.for')} ${description}`,
               catchMessage: this.$t('error.fetching.async.job.result')
             })

From cae9d3622c1918c63e50ec7bd9e3405d1c4b1e00 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 10 Mar 2021 11:18:53 +0700
Subject: [PATCH 2/9] fix multiple call fetchData() when async job completed

---
 ui/src/components/view/ActionButton.vue       |   1 +
 ui/src/components/view/DedicateData.vue       |  16 ---
 ui/src/components/view/DedicateModal.vue      |   8 --
 ui/src/utils/plugins.js                       |   8 +-
 ui/src/views/AutogenView.vue                  | 112 ++++++++++--------
 ui/src/views/compute/AttachIso.vue            |   4 -
 .../views/compute/CreateKubernetesCluster.vue |   6 +-
 ui/src/views/compute/DeployVM.vue             |   7 +-
 ui/src/views/compute/DestroyVM.vue            |   2 +-
 ui/src/views/compute/InstanceTab.vue          |  12 --
 .../views/compute/ScaleKubernetesCluster.vue  |   6 +-
 .../compute/UpgradeKubernetesCluster.vue      |   6 +-
 ui/src/views/iam/DomainActionForm.vue         |   2 -
 ui/src/views/network/CreateVpc.vue            |   1 -
 .../network/CreateVpnCustomerGateway.vue      |   3 -
 ui/src/views/network/FirewallRules.vue        |   4 -
 .../network/IngressEgressRuleConfigure.vue    |  10 --
 .../views/network/InternalLBAssignVmForm.vue  |   7 --
 ui/src/views/network/LoadBalancing.vue        |  15 ---
 ui/src/views/network/PortForwarding.vue       |   6 -
 ui/src/views/network/VpnDetails.vue           |   4 -
 .../views/offering/ImportBackupOffering.vue   |   2 -
 .../project/AddAccountOrUserToProject.vue     |   2 -
 ui/src/views/storage/AttachVolume.vue         |   5 -
 .../storage/CreateSnapshotFromVMSnapshot.vue  |   7 --
 ui/src/views/storage/CreateVolume.vue         |   7 --
 ui/src/views/storage/MigrateVolume.vue        |   7 --
 .../storage/RestoreAttachBackupVolume.vue     |   1 -
 28 files changed, 76 insertions(+), 195 deletions(-)

diff --git a/ui/src/components/view/ActionButton.vue b/ui/src/components/view/ActionButton.vue
index 570dae1b2050..5571e9f7b0a0 100644
--- a/ui/src/components/view/ActionButton.vue
+++ b/ui/src/components/view/ActionButton.vue
@@ -135,6 +135,7 @@ export default {
       this.actionBadge = {}
       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
diff --git a/ui/src/components/view/DedicateData.vue b/ui/src/components/view/DedicateData.vue
index 7ff34402f224..0818c70f1515 100644
--- a/ui/src/components/view/DedicateData.vue
+++ b/ui/src/components/view/DedicateData.vue
@@ -179,13 +179,9 @@ export default {
           description: this.resource.id,
           successMessage: this.$t('message.dedicated.zone.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
           },
           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: () => {
@@ -206,13 +202,9 @@ export default {
           description: this.resource.id,
           successMessage: this.$t('message.pod.dedication.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
           },
           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: () => {
@@ -233,13 +225,9 @@ export default {
           description: this.resource.id,
           successMessage: this.$t('message.cluster.dedication.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
           },
           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: () => {
@@ -260,13 +248,9 @@ export default {
           description: this.resource.id,
           successMessage: this.$t('message.host.dedication.released'),
           successMethod: () => {
-            this.parentFetchData()
             this.dedicatedDomainId = null
           },
           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: () => {
diff --git a/ui/src/components/view/DedicateModal.vue b/ui/src/components/view/DedicateModal.vue
index 0a48fdd32463..caf564eefaf0 100644
--- a/ui/src/components/view/DedicateModal.vue
+++ b/ui/src/components/view/DedicateModal.vue
@@ -97,14 +97,12 @@ export default {
           description: `${this.$t('label.domain.id')} : ${this.domainId}`,
           successMessage: `${this.$t('label.zone.dedicated')}`,
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
           },
           errorMessage: this.$t('error.dedicate.zone.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },
@@ -137,14 +135,12 @@ export default {
           description: `${this.$t('label.domain.id')} : ${this.domainId}`,
           successMessage: this.$t('label.pod.dedicated'),
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
           },
           errorMessage: this.$t('error.dedicate.pod.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },
@@ -177,14 +173,12 @@ export default {
           description: `${this.$t('label.domain.id')} : ${this.domainId}`,
           successMessage: this.$t('message.cluster.dedicated'),
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
           },
           errorMessage: this.$t('error.dedicate.cluster.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },
@@ -217,14 +211,12 @@ export default {
           description: `${this.$t('label.domain.id')} : ${this.domainId}`,
           successMessage: this.$t('message.host.dedicated'),
           successMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
           },
           errorMessage: this.$t('error.dedicate.host.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
           },
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index f7be1a70bb7b..45c9af94b8f7 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -85,7 +85,9 @@ export const pollJobPlugin = {
             status: 'done',
             duration: 2
           })
-          eventBus.$emit('async-job-complete', action)
+          if (!action || !('isFetchData' in action) || (action.isFetchData)) {
+            eventBus.$emit('async-job-complete')
+          }
           successMethod(result)
         } else if (result.jobstatus === 2) {
           message.error({
@@ -114,7 +116,9 @@ export const pollJobPlugin = {
             status: 'failed',
             duration: 0
           })
-          eventBus.$emit('async-job-complete', action)
+          if (!action || !('isFetchData' in action) || (action.isFetchData)) {
+            eventBus.$emit('async-job-complete')
+          }
           errorMethod(result)
         } else if (result.jobstatus === 0) {
           if (showLoading) {
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 9eccd6e19b88..59df6e9f3e92 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -394,12 +394,18 @@ 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/')) {
@@ -407,11 +413,6 @@ export default {
       }
     })
     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,29 +832,34 @@ export default {
       })
     },
     pollActionCompletion (jobId, action, resourceName, showLoading = true) {
-      this.$pollJob({
-        jobId,
-        title: this.$t(action.label),
-        description: resourceName,
-        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) => {
+        this.$pollJob({
+          jobId,
+          title: this.$t(action.label),
+          description: resourceName,
+          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(true)
+          },
+          errorMethod: () => {
+            resolve(true)
+          },
+          loadingMessage: `${this.$t(action.label)} - ${resourceName}`,
+          showLoading: showLoading,
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          action
+        })
       })
     },
     fillEditFormFieldValues () {
@@ -874,6 +880,7 @@ export default {
       })
     },
     handleSubmit (e) {
+      this.promises = []
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
         this.form.validateFields((err, values) => {
           if (!err) {
@@ -886,18 +893,18 @@ 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 {
@@ -905,23 +912,26 @@ export default {
       }
     },
     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
+        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.pollActionCompletion(jobid, action, resourceName, showLoading)
-            return true
+            return new Promise(resolve => {
+              const jobid = response[obj].jobid
+              resolve(this.pollActionCompletion(jobid, action, resourceName, showLoading))
+            })
           } else {
             var message = action.successMessage ? this.$t(action.successMessage) : this.$t(action.label) +
               (resourceName ? ' - ' + resourceName : '')
@@ -1014,15 +1024,17 @@ export default {
           args = [action.api, params]
         }
         api(...args).then(json => {
-          hasJobId = this.handleResponse(json, resourceName, action)
-          if ((action.icon === 'delete' || ['archiveEvents', 'archiveAlerts', 'unmanageVirtualMachine'].includes(action.api)) && this.dataView) {
-            this.$router.go(-1)
-          } else {
-            if (!hasJobId) {
-              this.fetchData()
+          this.handleResponse(json, resourceName, action).then(jobId => {
+            hasJobId = jobId
+            if ((action.icon === 'delete' || ['archiveEvents', 'archiveAlerts', 'unmanageVirtualMachine'].includes(action.api)) && this.dataView) {
+              this.$router.go(-1)
+            } else {
+              if (!hasJobId) {
+                this.fetchData()
+              }
             }
-          }
-          this.closeAction()
+            this.closeAction()
+          })
         }).catch(error => {
           if ([401].includes(error.response.status)) {
             return
diff --git a/ui/src/views/compute/AttachIso.vue b/ui/src/views/compute/AttachIso.vue
index 948e43fad1fb..d59d2a44e1b7 100644
--- a/ui/src/views/compute/AttachIso.vue
+++ b/ui/src/views/compute/AttachIso.vue
@@ -52,7 +52,6 @@ export default {
       required: true
     }
   },
-  inject: ['parentFetchData'],
   data () {
     return {
       loading: false,
@@ -124,9 +123,6 @@ export default {
               jobId,
               title: title,
               description: values.id,
-              successMethod: result => {
-                this.parentFetchData()
-              },
               successMessage: `${this.$t('label.action.attach.iso')} ${this.$t('label.success')}`,
               loadingMessage: `${title} ${this.$t('label.in.progress')}`,
               catchMessage: this.$t('error.fetching.async.job.result')
diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
index bcd21ad6d93a..6001167e39cc 100644
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@@ -542,13 +542,9 @@ export default {
             description: values.name,
             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(() => {
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index 0141bb0eae10..11663d04a35c 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -1548,15 +1548,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
               }
             })
           }
diff --git a/ui/src/views/compute/DestroyVM.vue b/ui/src/views/compute/DestroyVM.vue
index d57c51b814ea..26506f7cb472 100644
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@@ -140,7 +140,7 @@ export default {
               }
             },
             action: {
-              api: 'destroyVirtualMachine'
+              isFetchData: false
             }
           })
           this.closeAction()
diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
index fd11d762c44a..ebcaa5c07b1e 100644
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -458,13 +458,11 @@ export default {
           successMethod: () => {
             this.loadingNic = false
             this.closeModals()
-            this.parentFetchData()
           },
           errorMessage: this.$t('message.add.network.failed'),
           errorMethod: () => {
             this.loadingNic = false
             this.closeModals()
-            this.parentFetchData()
           },
           loadingMessage: this.$t('message.add.network.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -490,12 +488,10 @@ export default {
           successMessage: `${this.$t('label.success.set')} ${item.networkname} ${this.$t('label.as.default')}. ${this.$t('message.set.default.nic.manual')}.`,
           successMethod: () => {
             this.loadingNic = false
-            this.parentFetchData()
           },
           errorMessage: `${this.$t('label.error.setting')} ${item.networkname} ${this.$t('label.as.default')}`,
           errorMethod: () => {
             this.loadingNic = false
-            this.parentFetchData()
           },
           loadingMessage: `${this.$t('label.setting')} ${item.networkname} ${this.$t('label.as.default')}...`,
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -522,13 +518,11 @@ export default {
           successMethod: () => {
             this.loadingNic = false
             this.closeModals()
-            this.parentFetchData()
           },
           errorMessage: this.$t('label.error'),
           errorMethod: () => {
             this.loadingNic = false
             this.closeModals()
-            this.parentFetchData()
           },
           loadingMessage: this.$t('message.update.ipaddress.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -556,12 +550,10 @@ export default {
           successMessage: this.$t('message.success.remove.nic'),
           successMethod: () => {
             this.loadingNic = false
-            this.parentFetchData()
           },
           errorMessage: this.$t('message.error.remove.nic'),
           errorMethod: () => {
             this.loadingNic = false
-            this.parentFetchData()
           },
           loadingMessage: this.$t('message.remove.nic.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -592,13 +584,11 @@ export default {
           successMethod: () => {
             this.loadingNic = false
             this.fetchSecondaryIPs(this.selectedNicId)
-            this.parentFetchData()
           },
           errorMessage: this.$t('message.error.add.secondary.ipaddress'),
           errorMethod: () => {
             this.loadingNic = false
             this.fetchSecondaryIPs(this.selectedNicId)
-            this.parentFetchData()
           },
           loadingMessage: this.$t('message.add.secondary.ipaddress.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -623,13 +613,11 @@ export default {
           successMethod: () => {
             this.loadingNic = false
             this.fetchSecondaryIPs(this.selectedNicId)
-            this.parentFetchData()
           },
           errorMessage: this.$t('message.error.remove.secondary.ipaddress'),
           errorMethod: () => {
             this.loadingNic = false
             this.fetchSecondaryIPs(this.selectedNicId)
-            this.parentFetchData()
           },
           loadingMessage: this.$t('message.remove.secondary.ipaddress.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
diff --git a/ui/src/views/compute/ScaleKubernetesCluster.vue b/ui/src/views/compute/ScaleKubernetesCluster.vue
index 7909500d49cb..567e0b9befbd 100644
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@@ -193,13 +193,9 @@ export default {
             description: this.resource.name,
             loadingMessage: `${this.$t('label.kubernetes.cluster.scale')} ${this.resource.name} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
-            successMessage: `${this.$t('message.success.scale.kubernetes')} ${this.resource.name}`,
-            successMethod: result => {
-              this.$emit('refresh-data')
-            }
+            successMessage: `${this.$t('message.success.scale.kubernetes')} ${this.resource.name}`
           })
           this.closeAction()
-          this.$emit('refresh-data')
         }).catch(error => {
           this.$notifyError(error)
         }).finally(() => {
diff --git a/ui/src/views/compute/UpgradeKubernetesCluster.vue b/ui/src/views/compute/UpgradeKubernetesCluster.vue
index eb3910d0f01e..0706fa81410d 100644
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@@ -165,12 +165,8 @@ export default {
             description: this.resource.name,
             loadingMessage: `${this.$t('label.kubernetes.cluster.upgrade')} ${this.resource.name} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
-            successMessage: `${this.$t('message.success.upgrade.kubernetes')} ${this.resource.name}`,
-            successMethod: result => {
-              this.$emit('refresh-data')
-            }
+            successMessage: `${this.$t('message.success.upgrade.kubernetes')} ${this.resource.name}`
           })
-          this.$emit('refresh-data')
           this.closeAction()
         }).catch(error => {
           this.$notifyError(error)
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index 0bf781a588bb..1bdd66295159 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -222,7 +222,6 @@ export default {
                         this.$set(this.resource, 'isDel', true)
                         this.parentUpdActionData(this.resource)
                       }
-                      this.parentFetchData()
                       if (this.action.response) {
                         const description = this.action.response(result.jobresult)
                         if (description) {
@@ -234,7 +233,6 @@ export default {
                         }
                       }
                     },
-                    errorMethod: () => this.parentFetchData(),
                     loadingMessage: `${this.$t(this.action.label)} ${this.$t('label.in.progress')} ${this.$t('label.for')} ${this.resource.name}`,
                     catchMessage: this.$t('error.fetching.async.job.result'),
                     action: this.action
diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue
index 03f562876010..41a649a0e87e 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@@ -214,7 +214,6 @@ export default {
               loadingMessage: `${title} ${this.$t('label.in.progress')}`,
               catchMessage: this.$t('error.fetching.async.job.result')
             })
-            this.$emit('refresh-data')
           }
           this.closeAction()
         }).catch(error => {
diff --git a/ui/src/views/network/CreateVpnCustomerGateway.vue b/ui/src/views/network/CreateVpnCustomerGateway.vue
index e038a5314eba..6b05b1c35463 100644
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@@ -253,7 +253,6 @@ export default {
       required: true
     }
   },
-  inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
       encryptionAlgo: [
@@ -325,12 +324,10 @@ export default {
             successMessage: this.$t('message.success.add.vpn.customer.gateway'),
             successMethod: () => {
               this.closeModal()
-              this.parentFetchData()
             },
             errorMessage: `${this.$t('message.create.vpn.customer.gateway.failed')} ` + response,
             errorMethod: () => {
               this.closeModal()
-              this.parentFetchData()
             },
             loadingMessage: this.$t('message.add.vpn.customer.gateway.processing'),
             catchMessage: this.$t('error.fetching.async.job.result'),
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 48e30a6b3a0f..ec766eea007b 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -323,13 +323,11 @@ export default {
           jobId: response.createtagsresponse.jobid,
           successMessage: this.$t('message.success.add.tag'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.openTagsModal(this.selectedRule)
           },
           errorMessage: this.$t('message.add.tag.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.closeModal()
           },
@@ -358,13 +356,11 @@ export default {
           jobId: response.deletetagsresponse.jobid,
           successMessage: this.$t('message.success.delete.tag'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.openTagsModal(this.selectedRule)
           },
           errorMessage: this.$t('message.delete.tag.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.closeModal()
           },
diff --git a/ui/src/views/network/IngressEgressRuleConfigure.vue b/ui/src/views/network/IngressEgressRuleConfigure.vue
index 7b9965ad60aa..f5c9cbfe6db4 100644
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@@ -278,12 +278,10 @@ export default {
             : response.authorizesecuritygroupegressresponse.jobid,
           successMessage: this.$t('message.success.add.rule'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           errorMessage: this.$t('message.add.rule.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           loadingMessage: this.$t('message.add.rule.processing'),
@@ -310,12 +308,10 @@ export default {
             : response.revokesecuritygroupegressresponse.jobid,
           successMessage: this.$t('message.success.remove.rule'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           errorMessage: this.$t('message.remove.rule.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           loadingMessage: this.$t('message.remove.securitygroup.rule.processing'),
@@ -354,14 +350,12 @@ export default {
           jobId: response.deletetagsresponse.jobid,
           successMessage: this.$t('message.success.delete.tag'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchTags(this.selectedRule)
             this.tagsLoading = false
           },
           errorMessage: this.$t('message.delete.tag.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchTags(this.selectedRule)
             this.tagsLoading = false
@@ -369,7 +363,6 @@ export default {
           loadingMessage: this.$t('message.delete.tag.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchTags(this.selectedRule)
             this.tagsLoading = false
@@ -402,14 +395,12 @@ export default {
             jobId: response.createtagsresponse.jobid,
             successMessage: this.$t('message.success.add.tag'),
             successMethod: () => {
-              this.parentFetchData()
               this.parentToggleLoading()
               this.fetchTags(this.selectedRule)
               this.tagsLoading = false
             },
             errorMessage: this.$t('message.add.tag.failed'),
             errorMethod: () => {
-              this.parentFetchData()
               this.parentToggleLoading()
               this.fetchTags(this.selectedRule)
               this.tagsLoading = false
@@ -417,7 +408,6 @@ export default {
             loadingMessage: this.$t('message.add.tag.processing'),
             catchMessage: this.$t('error.fetching.async.job.result'),
             catchMethod: () => {
-              this.parentFetchData()
               this.parentToggleLoading()
               this.fetchTags(this.selectedRule)
               this.tagsLoading = false
diff --git a/ui/src/views/network/InternalLBAssignVmForm.vue b/ui/src/views/network/InternalLBAssignVmForm.vue
index b1e1fa26a510..8819000e7ae1 100644
--- a/ui/src/views/network/InternalLBAssignVmForm.vue
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@@ -206,17 +206,10 @@ export default {
         this.$pollJob({
           jobId: response.assigntoloadbalancerruleresponse.jobid,
           successMessage: `${this.$t('message.success.assigned.vms')} ${this.$t('label.to')} ${this.resource.name}`,
-          successMethod: () => {
-            this.$emit('refresh-data')
-          },
           errorMessage: `${this.$t('message.failed.to.assign.vms')} ${this.$t('label.to')} ${this.resource.name}`,
-          errorMethod: () => {
-            this.$emit('refresh-data')
-          },
           loadingMessage: `${this.$t('label.assigning.vms')} ${this.$t('label.to')} ${this.resource.name}`,
           catchMessage: this.$t('error.fetching.async.job.result')
         })
-        this.$emit('refresh-data')
         this.closeModal()
       }).catch(error => {
         this.$notification.error({
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 7bf183bc814d..9508d66f0085 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -671,13 +671,11 @@ export default {
             jobId: response.createtagsresponse.jobid,
             successMessage: this.$t('message.success.add.tag'),
             successMethod: () => {
-              this.parentFetchData()
               this.parentToggleLoading()
               this.openTagsModal(this.selectedRule)
             },
             errorMessage: this.$t('message.add.tag.failed'),
             errorMethod: () => {
-              this.parentFetchData()
               this.parentToggleLoading()
               this.closeModal()
             },
@@ -706,13 +704,11 @@ export default {
           jobId: response.deletetagsresponse.jobid,
           successMessage: this.$t('message.success.delete.tag'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.openTagsModal(this.selectedRule)
           },
           errorMessage: this.$t('message.delete.tag.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.closeModal()
           },
@@ -763,14 +759,12 @@ export default {
           jobId: response.createLBStickinessPolicy.jobid,
           successMessage: this.$t('message.success.config.sticky.policy'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
           },
           errorMessage: this.$t('message.config.sticky.policy.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
@@ -795,14 +789,12 @@ export default {
           jobId: response.deleteLBstickinessrruleresponse.jobid,
           successMessage: this.$t('message.success.remove.sticky.policy'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
           },
           errorMessage: this.$t('message.remove.sticky.policy.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
@@ -907,14 +899,12 @@ export default {
           jobId: response.updateloadbalancerruleresponse.jobid,
           successMessage: this.$t('message.success.edit.rule'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
           },
           errorMessage: this.$t('message.edit.rule.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
@@ -942,14 +932,12 @@ export default {
           jobId: response.deleteloadbalancerruleresponse.jobid,
           successMessage: this.$t('message.success.remove.rule'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
           },
           errorMessage: this.$t('message.remove.rule.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
@@ -957,7 +945,6 @@ export default {
           loadingMessage: this.$t('message.delete.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
@@ -1078,14 +1065,12 @@ export default {
           jobId: response.assigntoloadbalancerruleresponse.jobid,
           successMessage: this.$t('message.success.asign.vm'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
           },
           errorMessage: this.$t('message.assign.vm.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index ef5c66f852b5..af665c398178 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -456,13 +456,11 @@ export default {
           successMessage: this.$t('message.success.add.port.forward'),
           successMethod: () => {
             this.closeModal()
-            this.parentFetchData()
             this.fetchData()
           },
           errorMessage: this.$t('message.add.port.forward.failed'),
           errorMethod: () => {
             this.closeModal()
-            this.parentFetchData()
             this.fetchData()
           },
           loadingMessage: this.$t('message.add.port.forward.processing'),
@@ -532,13 +530,11 @@ export default {
           jobId: response.createtagsresponse.jobid,
           successMessage: this.$t('message.success.add.tag'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.openTagsModal(this.selectedRule)
           },
           errorMessage: this.$t('message.add.tag.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.closeModal()
           },
@@ -566,13 +562,11 @@ export default {
           jobId: response.deletetagsresponse.jobid,
           successMessage: this.$t('message.success.delete.tag'),
           successMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.openTagsModal(this.selectedRule)
           },
           errorMessage: this.$t('message.delete.tag.failed'),
           errorMethod: () => {
-            this.parentFetchData()
             this.parentToggleLoading()
             this.closeModal()
           },
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
index 0159f6ec4bb6..e92db9aabbda 100644
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@@ -130,13 +130,11 @@ export default {
               duration: 0
             })
             this.fetchData()
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           errorMessage: this.$t('message.enable.vpn.failed'),
           errorMethod: () => {
             this.fetchData()
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           loadingMessage: this.$t('message.enable.vpn.processing'),
@@ -166,13 +164,11 @@ export default {
           successMessage: this.$t('message.success.disable.vpn'),
           successMethod: () => {
             this.fetchData()
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           errorMessage: this.$t('message.disable.vpn.failed'),
           errorMethod: () => {
             this.fetchData()
-            this.parentFetchData()
             this.parentToggleLoading()
           },
           loadingMessage: this.$t('message.disable.vpn.processing'),
diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index 0951e653e52b..3b081818040e 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -131,7 +131,6 @@ export default {
   mounted () {
     this.fetchData()
   },
-  inject: ['parentFetchData'],
   methods: {
     fetchData () {
       this.fetchZone()
@@ -188,7 +187,6 @@ export default {
               title: title,
               description: values.name,
               successMethod: result => {
-                this.parentFetchData()
                 this.closeAction()
               },
               loadingMessage: `${title} ${this.$t('label.in.progress')} ${this.$t('label.for')} ${params.name}`,
diff --git a/ui/src/views/project/AddAccountOrUserToProject.vue b/ui/src/views/project/AddAccountOrUserToProject.vue
index dcd0ba91dec5..8662b7e60200 100644
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@@ -267,7 +267,6 @@ export default {
             loadingMessage: `Adding Account: ${params.account} to project...`,
             catchMessage: 'Error encountered while fetching async job result'
           })
-          this.$emit('refresh-data')
           this.closeAction()
         }).catch(error => {
           this.$notifyError(error)
@@ -302,7 +301,6 @@ export default {
             loadingMessage: `Adding User ${params.username} to project...`,
             catchMessage: 'Error encountered while fetching async job result'
           })
-          this.$emit('refresh-data')
           this.closeAction()
         }).catch(error => {
           console.log('catch')
diff --git a/ui/src/views/storage/AttachVolume.vue b/ui/src/views/storage/AttachVolume.vue
index e864fe7fa19b..5bd5c151f74d 100644
--- a/ui/src/views/storage/AttachVolume.vue
+++ b/ui/src/views/storage/AttachVolume.vue
@@ -52,7 +52,6 @@ export default {
       required: true
     }
   },
-  inject: ['parentFetchData'],
   data () {
     return {
       virtualmachines: [],
@@ -117,9 +116,6 @@ export default {
             jobId: response.attachvolumeresponse.jobid,
             title: this.$t('label.action.attach.disk'),
             description: this.resource.id,
-            successMethod: () => {
-              this.parentFetchData()
-            },
             errorMessage: `${this.$t('message.attach.volume.failed')}: ${this.resource.name || this.resource.id}`,
             loadingMessage: `${this.$t('message.attach.volume.progress')}: ${this.resource.name || this.resource.id}`,
             catchMessage: this.$t('error.fetching.async.job.result')
@@ -129,7 +125,6 @@ export default {
           this.$notifyError(error)
         }).finally(() => {
           this.loading = false
-          this.parentFetchData()
         })
       })
     }
diff --git a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
index e40c41c6767c..00675ba93868 100644
--- a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
+++ b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
@@ -102,17 +102,10 @@ export default {
             title: this.$t('message.success.create.snapshot.from.vmsnapshot'),
             description: values.name,
             successMessage: this.$t('message.success.create.snapshot.from.vmsnapshot'),
-            successMethod: () => {
-              this.$emit('refresh-data')
-            },
             errorMessage: this.$t('message.create.snapshot.from.vmsnapshot.failed'),
-            errorMethod: () => {
-              this.$emit('refresh-data')
-            },
             loadingMessage: this.$t('message.create.snapshot.from.vmsnapshot.progress'),
             catchMessage: this.$t('error.fetching.async.job.result')
           })
-          this.$emit('refresh-data')
           this.closeModal()
         }).catch(error => {
           this.$notifyError(error)
diff --git a/ui/src/views/storage/CreateVolume.vue b/ui/src/views/storage/CreateVolume.vue
index 35f7db94dd14..d78f0c930da3 100644
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@@ -158,17 +158,10 @@ export default {
             title: this.$t('message.success.create.volume'),
             description: values.name,
             successMessage: this.$t('message.success.create.volume'),
-            successMethod: () => {
-              this.$emit('refresh-data')
-            },
             errorMessage: this.$t('message.create.volume.failed'),
-            errorMethod: () => {
-              this.$emit('refresh-data')
-            },
             loadingMessage: this.$t('message.create.volume.processing'),
             catchMessage: this.$t('error.fetching.async.job.result')
           })
-          this.$emit('refresh-data')
           this.closeModal()
         }).catch(error => {
           this.$notifyError(error)
diff --git a/ui/src/views/storage/MigrateVolume.vue b/ui/src/views/storage/MigrateVolume.vue
index 88a8266dd501..9a011bb792c0 100644
--- a/ui/src/views/storage/MigrateVolume.vue
+++ b/ui/src/views/storage/MigrateVolume.vue
@@ -143,13 +143,7 @@ export default {
         this.$pollJob({
           jobId: response.migratevolumeresponse.jobid,
           successMessage: this.$t('message.success.migrate.volume'),
-          successMethod: () => {
-            this.parentFetchData()
-          },
           errorMessage: this.$t('message.migrate.volume.failed'),
-          errorMethod: () => {
-            this.parentFetchData()
-          },
           loadingMessage: this.$t('message.migrate.volume.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
@@ -157,7 +151,6 @@ export default {
           }
         })
         this.closeModal()
-        this.parentFetchData()
       }).catch(error => {
         this.$notifyError(error)
       })
diff --git a/ui/src/views/storage/RestoreAttachBackupVolume.vue b/ui/src/views/storage/RestoreAttachBackupVolume.vue
index 5c693a23a52f..de3668b1e27d 100644
--- a/ui/src/views/storage/RestoreAttachBackupVolume.vue
+++ b/ui/src/views/storage/RestoreAttachBackupVolume.vue
@@ -146,7 +146,6 @@ export default {
               title: title,
               description: values.volumeid,
               successMethod: result => {
-                this.parentFetchData()
                 this.closeAction()
               },
               loadingMessage: `${title} ${this.$t('label.in.progress.for')} ${this.resource.id}`,

From f6522df4f025fd21c8c8a64ab3389c7a8d81c6cb Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 10 Mar 2021 12:52:21 +0700
Subject: [PATCH 3/9] remove unnecessary functions

---
 ui/src/views/compute/StartVirtualMachine.vue              | 4 ----
 ui/src/views/infra/network/EditTrafficLabel.vue           | 4 ----
 ui/src/views/infra/network/providers/ProviderListView.vue | 6 +-----
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index 300f44eba266..830bb530f0d1 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -139,7 +139,6 @@ export default {
       loading: false
     }
   },
-  inject: ['parentFetchData'],
   beforeCreate () {
     this.form = this.$form.createForm(this)
     this.apiConfig = this.$store.getters.apis.startVirtualMachine || {}
@@ -248,9 +247,6 @@ export default {
             loadingMessage: `${this.$t('label.action.start.instance')} ${this.resource.name}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
             successMessage: `${this.$t('label.action.start.instance')} ${this.resource.name}`,
-            successMethod: () => {
-              this.parentFetchData()
-            },
             response: (result) => { return result.virtualmachine && result.virtualmachine.password ? `Password of the VM is ${result.virtualmachine.password}` : null }
           })
           this.closeAction()
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index a57eb0223d07..90a93bfc5b62 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -143,7 +143,6 @@ export default {
       })
     }
   },
-  inject: ['parentFetchData'],
   mounted () {
     this.fetchData()
   },
@@ -191,9 +190,6 @@ export default {
             jobId: response.updatetraffictyperesponse.jobid,
             title: title,
             description: description,
-            successMethod: result => {
-              this.parentFetchData()
-            },
             successMessage: `${this.$t('label.update.traffic.label')} ${this.traffictype} ${this.$t('label.success')}`,
             loadingMessage: `${title} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result')
diff --git a/ui/src/views/infra/network/providers/ProviderListView.vue b/ui/src/views/infra/network/providers/ProviderListView.vue
index 700828b44f40..597c13950993 100644
--- a/ui/src/views/infra/network/providers/ProviderListView.vue
+++ b/ui/src/views/infra/network/providers/ProviderListView.vue
@@ -188,7 +188,7 @@ export default {
       return columns
     }
   },
-  inject: ['providerChangePage', 'provideReload', 'parentFetchData'],
+  inject: ['providerChangePage', 'provideReload'],
   methods: {
     changePage (page, pageSize) {
       this.providerChangePage(this.title, page, pageSize)
@@ -290,8 +290,6 @@ export default {
                   jobId,
                   title: this.$t(label),
                   description: this.$t(name),
-                  successMethod: () => this.parentFetchData(),
-                  errorMethod: () => this.parentFetchData(),
                   loadingMessage: `${this.$t(label)} - ${this.$t(name)}`,
                   catchMessage: this.$t('error.fetching.async.job.result')
                 })
@@ -328,8 +326,6 @@ export default {
                 jobId,
                 title: this.$t('label.configure.ovs'),
                 description: this.$t(record.id),
-                successMethod: () => this.parentFetchData(),
-                errorMethod: () => this.parentFetchData(),
                 loadingMessage: `${this.$t('label.configure.ovs')} - ${this.$t(record.id)}`,
                 catchMessage: this.$t('error.fetching.async.job.result')
               })

From 306a922dea59a14159a13bfe05da5c1c86e3ced5 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 15 Jul 2021 08:20:14 +0700
Subject: [PATCH 4/9] remove const not use

---
 ui/src/store/modules/user.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index 39dadb7d906b..d2a5fd642de5 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -33,7 +33,6 @@ import {
   TIMEZONE_OFFSET,
   USE_BROWSER_TIMEZONE,
   HEADER_NOTICES,
-  ASYNC_JOB_IDS,
   DOMAIN_STORE
 } from '@/store/mutation-types'
 

From ba9bb98713c1e027c1864461ec8ef16838973cce Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Fri, 16 Jul 2021 07:57:15 +0700
Subject: [PATCH 5/9] move closeaction out of handleResponse

---
 ui/src/views/AutogenView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 835301c5fc68..41265a168109 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -1060,8 +1060,8 @@ export default {
                 this.fetchData()
               }
             }
-            this.closeAction()
           })
+          this.closeAction()
         }).catch(error => {
           if ([401].includes(error.response.status)) {
             return

From c5d32a6251a6ab0ac10bf6fe95b7d438ff64f77e Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Fri, 16 Jul 2021 16:48:30 +0700
Subject: [PATCH 6/9] call closeAction without waiting for all group actions to
 complete

---
 ui/src/views/AutogenView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 41265a168109..f274ecf54443 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -926,7 +926,6 @@ export default {
             })
             Promise.all(this.promises).finally(() => {
               this.actionLoading = false
-              this.closeAction()
               this.fetchData()
             })
           }
@@ -940,6 +939,7 @@ export default {
         const action = this.currentAction
         api(action.api, params).then(json => {
           resolve(this.handleResponse(json, resourceName, action, false))
+          this.closeAction()
         }).catch(error => {
           if ([401].includes(error.response.status)) {
             return

From 8ff1bce6ce12b57e338808d95d86d699c939a83b Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 19 Jul 2021 09:40:33 +0700
Subject: [PATCH 7/9] refactor polljob network provider

---
 .../network/providers/AddF5LoadBalancer.vue   | 39 +++++++------------
 .../providers/AddNetscalerLoadBalancer.vue    | 38 +++++++-----------
 .../network/providers/AddNiciraNvpDevice.vue  | 39 +++++++------------
 .../network/providers/AddPaloAltoFirewall.vue | 38 +++++++-----------
 .../network/providers/AddSrxFirewall.vue      | 39 +++++++------------
 5 files changed, 65 insertions(+), 128 deletions(-)

diff --git a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
index 364f488316ec..3f61db9ae895 100644
--- a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
@@ -242,11 +242,9 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addF5LoadBalancer(params)
-          if (jobId) {
-            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          }
-          this.loading = false
+          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           await this.provideCloseAction()
+          this.loading = false
         } catch (error) {
           this.loading = false
           this.$notification.error({
@@ -259,15 +257,19 @@ export default {
     addNetworkServiceProvider (args) {
       return new Promise((resolve, reject) => {
         api('addNetworkServiceProvider', args).then(async json => {
-          const jobId = json.addnetworkserviceproviderresponse.jobid
-          if (jobId) {
-            const result = await this.pollJob(jobId)
-            if (result.jobstatus === 2) {
+          this.$pollJob({
+            jobId: json.addnetworkserviceproviderresponse.jobid,
+            successMethod: (result) => {
+              resolve(result.jobresult.networkserviceprovider)
+            },
+            errorMethod: (result) => {
               reject(result.jobresult.errortext)
-              return
+            },
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            action: {
+              isFetchData: false
             }
-            resolve(result.jobresult.networkserviceprovider)
-          }
+          })
         }).catch(error => {
           reject(error)
         })
@@ -282,21 +284,6 @@ export default {
           reject(error)
         })
       })
-    },
-    async pollJob (jobId) {
-      return new Promise(resolve => {
-        const asyncJobInterval = setInterval(() => {
-          api('queryAsyncJobResult', { jobId }).then(async json => {
-            const result = json.queryasyncjobresultresponse
-            if (result.jobstatus === 0) {
-              return
-            }
-
-            clearInterval(asyncJobInterval)
-            resolve(result)
-          })
-        }, 1000)
-      })
     }
   }
 }
diff --git a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
index 228369ed9fe4..e43d4f8c00ae 100644
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@@ -277,11 +277,9 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addNetscalerLoadBalancer(params)
-          if (jobId) {
-            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          }
-          this.loading = false
+          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           await this.provideCloseAction()
+          this.loading = false
         } catch (error) {
           this.loading = false
           this.$notification.error({
@@ -295,14 +293,19 @@ export default {
       return new Promise((resolve, reject) => {
         api('addNetworkServiceProvider', args).then(async json => {
           const jobId = json.addnetworkserviceproviderresponse.jobid
-          if (jobId) {
-            const result = await this.pollJob(jobId)
-            if (result.jobstatus === 2) {
+          this.$pollJob({
+            jobId: json.addnetworkserviceproviderresponse.jobid,
+            successMethod: (result) => {
+              resolve(result.jobresult.networkserviceprovider)
+            },
+            errorMethod: (result) => {
               reject(result.jobresult.errortext)
-              return
+            },
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            action: {
+              isFetchData: false
             }
-            resolve(result.jobresult.networkserviceprovider)
-          }
+          })
         }).catch(error => {
           reject(error)
         })
@@ -317,21 +320,6 @@ export default {
           reject(error)
         })
       })
-    },
-    async pollJob (jobId) {
-      return new Promise(resolve => {
-        const asyncJobInterval = setInterval(() => {
-          api('queryAsyncJobResult', { jobId }).then(async json => {
-            const result = json.queryasyncjobresultresponse
-            if (result.jobstatus === 0) {
-              return
-            }
-
-            clearInterval(asyncJobInterval)
-            resolve(result)
-          })
-        }, 1000)
-      })
     }
   }
 }
diff --git a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
index 1e9f3069ead4..868081eae46d 100644
--- a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
+++ b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
@@ -154,11 +154,9 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addNiciraNvpDevice(params)
-          if (jobId) {
-            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          }
-          this.loading = false
+          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           await this.provideCloseAction()
+          this.loading = false
         } catch (error) {
           this.loading = false
           this.$notification.error({
@@ -171,15 +169,19 @@ export default {
     addNetworkServiceProvider (args) {
       return new Promise((resolve, reject) => {
         api('addNetworkServiceProvider', args).then(async json => {
-          const jobId = json.addnetworkserviceproviderresponse.jobid
-          if (jobId) {
-            const result = await this.pollJob(jobId)
-            if (result.jobstatus === 2) {
+          this.$pollJob({
+            jobId: json.addnetworkserviceproviderresponse.jobid,
+            successMethod: (result) => {
+              resolve(result.jobresult.networkserviceprovider)
+            },
+            errorMethod: (result) => {
               reject(result.jobresult.errortext)
-              return
+            },
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            action: {
+              isFetchData: false
             }
-            resolve(result.jobresult.networkserviceprovider)
-          }
+          })
         }).catch(error => {
           reject(error)
         })
@@ -194,21 +196,6 @@ export default {
           reject(error)
         })
       })
-    },
-    async pollJob (jobId) {
-      return new Promise(resolve => {
-        const asyncJobInterval = setInterval(() => {
-          api('queryAsyncJobResult', { jobId }).then(async json => {
-            const result = json.queryasyncjobresultresponse
-            if (result.jobstatus === 0) {
-              return
-            }
-
-            clearInterval(asyncJobInterval)
-            resolve(result)
-          })
-        }, 1000)
-      })
     }
   }
 }
diff --git a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
index f3923811e5c1..47e3f3676cc3 100644
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@@ -366,11 +366,9 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addPaloAltoFirewall(params)
-          if (jobId) {
-            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          }
-          this.loading = false
+          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           await this.provideCloseAction()
+          this.loading = false
         } catch (error) {
           this.loading = false
           this.$notification.error({
@@ -384,14 +382,19 @@ export default {
       return new Promise((resolve, reject) => {
         api('addNetworkServiceProvider', args).then(async json => {
           const jobId = json.addnetworkserviceproviderresponse.jobid
-          if (jobId) {
-            const result = await this.pollJob(jobId)
-            if (result.jobstatus === 2) {
+          this.$pollJob({
+            jobId: json.addnetworkserviceproviderresponse.jobid,
+            successMethod: (result) => {
+              resolve(result.jobresult.networkserviceprovider)
+            },
+            errorMethod: (result) => {
               reject(result.jobresult.errortext)
-              return
+            },
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            action: {
+              isFetchData: false
             }
-            resolve(result.jobresult.networkserviceprovider)
-          }
+          })
         }).catch(error => {
           reject(error)
         })
@@ -406,21 +409,6 @@ export default {
           reject(error)
         })
       })
-    },
-    async pollJob (jobId) {
-      return new Promise(resolve => {
-        const asyncJobInterval = setInterval(() => {
-          api('queryAsyncJobResult', { jobId }).then(async json => {
-            const result = json.queryasyncjobresultresponse
-            if (result.jobstatus === 0) {
-              return
-            }
-
-            clearInterval(asyncJobInterval)
-            resolve(result)
-          })
-        }, 1000)
-      })
     }
   }
 }
diff --git a/ui/src/views/infra/network/providers/AddSrxFirewall.vue b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
index 5ad1323da233..4b5e75072ca7 100644
--- a/ui/src/views/infra/network/providers/AddSrxFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
@@ -311,11 +311,9 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addSrxFirewall(params)
-          if (jobId) {
-            await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          }
-          this.loading = false
+          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
           await this.provideCloseAction()
+          this.loading = false
         } catch (error) {
           this.loading = false
           this.$notification.error({
@@ -328,15 +326,19 @@ export default {
     addNetworkServiceProvider (args) {
       return new Promise((resolve, reject) => {
         api('addNetworkServiceProvider', args).then(async json => {
-          const jobId = json.addnetworkserviceproviderresponse.jobid
-          if (jobId) {
-            const result = await this.pollJob(jobId)
-            if (result.jobstatus === 2) {
+          this.$pollJob({
+            jobId: json.addnetworkserviceproviderresponse.jobid,
+            successMethod: (result) => {
+              resolve(result.jobresult.networkserviceprovider)
+            },
+            errorMethod: (result) => {
               reject(result.jobresult.errortext)
-              return
+            },
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            action: {
+              isFetchData: false
             }
-            resolve(result.jobresult.networkserviceprovider)
-          }
+          })
         }).catch(error => {
           reject(error)
         })
@@ -351,21 +353,6 @@ export default {
           reject(error)
         })
       })
-    },
-    async pollJob (jobId) {
-      return new Promise(resolve => {
-        const asyncJobInterval = setInterval(() => {
-          api('queryAsyncJobResult', { jobId }).then(async json => {
-            const result = json.queryasyncjobresultresponse
-            if (result.jobstatus === 0) {
-              return
-            }
-
-            clearInterval(asyncJobInterval)
-            resolve(result)
-          })
-        }, 1000)
-      })
     }
   }
 }

From cfc1112d00e1c8dc5b40bfee1d33211c639cfb26 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 19 Jul 2021 11:24:50 +0700
Subject: [PATCH 8/9] removed variable not use

---
 .../views/infra/network/providers/AddNetscalerLoadBalancer.vue   | 1 -
 ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
index e43d4f8c00ae..3a7b4a1b4abf 100644
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@@ -292,7 +292,6 @@ export default {
     addNetworkServiceProvider (args) {
       return new Promise((resolve, reject) => {
         api('addNetworkServiceProvider', args).then(async json => {
-          const jobId = json.addnetworkserviceproviderresponse.jobid
           this.$pollJob({
             jobId: json.addnetworkserviceproviderresponse.jobid,
             successMethod: (result) => {
diff --git a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
index 47e3f3676cc3..36a812eb5e98 100644
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@@ -381,7 +381,6 @@ export default {
     addNetworkServiceProvider (args) {
       return new Promise((resolve, reject) => {
         api('addNetworkServiceProvider', args).then(async json => {
-          const jobId = json.addnetworkserviceproviderresponse.jobid
           this.$pollJob({
             jobId: json.addnetworkserviceproviderresponse.jobid,
             successMethod: (result) => {

From f08d236601c1954c5ebe10ff28c6f1784e36dedd Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 19 Jul 2021 14:35:41 +0700
Subject: [PATCH 9/9] remove await

---
 ui/src/views/infra/network/providers/AddF5LoadBalancer.vue    | 4 ++--
 .../infra/network/providers/AddNetscalerLoadBalancer.vue      | 4 ++--
 ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue   | 4 ++--
 ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue  | 4 ++--
 ui/src/views/infra/network/providers/AddSrxFirewall.vue       | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
index 3f61db9ae895..7ba96ada3857 100644
--- a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
@@ -242,8 +242,8 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addF5LoadBalancer(params)
-          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          await this.provideCloseAction()
+          this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
+          this.provideCloseAction()
           this.loading = false
         } catch (error) {
           this.loading = false
diff --git a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
index 3a7b4a1b4abf..8a9a5e784174 100644
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@@ -277,8 +277,8 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addNetscalerLoadBalancer(params)
-          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          await this.provideCloseAction()
+          this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
+          this.provideCloseAction()
           this.loading = false
         } catch (error) {
           this.loading = false
diff --git a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
index 868081eae46d..7c2384520e5c 100644
--- a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
+++ b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
@@ -154,8 +154,8 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addNiciraNvpDevice(params)
-          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          await this.provideCloseAction()
+          this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
+          this.provideCloseAction()
           this.loading = false
         } catch (error) {
           this.loading = false
diff --git a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
index 36a812eb5e98..121a3ca61f33 100644
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@@ -366,8 +366,8 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addPaloAltoFirewall(params)
-          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          await this.provideCloseAction()
+          this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
+          this.provideCloseAction()
           this.loading = false
         } catch (error) {
           this.loading = false
diff --git a/ui/src/views/infra/network/providers/AddSrxFirewall.vue b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
index 4b5e75072ca7..2fb1fe801208 100644
--- a/ui/src/views/infra/network/providers/AddSrxFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
@@ -311,8 +311,8 @@ export default {
           }
           params.id = this.nsp.id
           const jobId = await this.addSrxFirewall(params)
-          await this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
-          await this.provideCloseAction()
+          this.parentPollActionCompletion(jobId, this.action, this.$t(this.nsp.name))
+          this.provideCloseAction()
           this.loading = false
         } catch (error) {
           this.loading = false