[cloudstack] branch 4.16 updated: [UI] Cancel all requests api, async jobs in UI when user logs out (#5663)

[sureshanaparti]

This is an automated email from the ASF dual-hosted git repository.

sureshanaparti pushed a commit to branch 4.16
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/4.16 by this push:
     new 4746509  [UI] Cancel all requests api, async jobs in UI when user logs 
out (#5663)
4746509 is described below

commit 4746509c828a98ee275676ec5398b1d10a0add90
Author: Hoang Nguyen <hoan...@unitech.vn>
AuthorDate: Thu Jan 13 19:14:49 2022 +0700

    [UI] Cancel all requests api, async jobs in UI when user logs out (#5663)
    
    * cancel requests in UI when user logs out
    
    * clear notification, message from UI after logout
---
 ui/src/api/index.js     |  8 +++++++-
 ui/src/utils/plugins.js | 31 +++++++++++++++++--------------
 ui/src/utils/request.js | 21 ++++++++++++++++++++-
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/ui/src/api/index.js b/ui/src/api/index.js
index 6c4818a..7cb2ede 100644
--- a/ui/src/api/index.js
+++ b/ui/src/api/index.js
@@ -15,7 +15,8 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { axios } from '@/utils/request'
+import { axios, sourceToken } from '@/utils/request'
+import { message, notification } from 'ant-design-vue'
 
 export function api (command, args = {}, method = 'GET', data = {}) {
   let params = {}
@@ -40,6 +41,8 @@ export function api (command, args = {}, method = 'GET', data 
= {}) {
 }
 
 export function login (arg) {
+  sourceToken.init()
+
   const params = new URLSearchParams()
   params.append('command', 'login')
   params.append('username', arg.username || arg.email)
@@ -57,5 +60,8 @@ export function login (arg) {
 }
 
 export function logout () {
+  sourceToken.cancel()
+  message.destroy()
+  notification.destroy()
   return api('logout')
 }
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 1693750..556996a 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -21,6 +21,7 @@ import { api } from '@/api'
 import { message, notification } from 'ant-design-vue'
 import eventBus from '@/config/eventBus'
 import store from '@/store'
+import { sourceToken } from '@/utils/request'
 
 export const pollJobPlugin = {
   install (Vue) {
@@ -177,20 +178,22 @@ export const pollJobPlugin = {
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)
-        let countNotify = store.getters.countNotify
-        countNotify++
-        store.commit('SET_COUNT_NOTIFY', countNotify)
-        notification.error({
-          top: '65px',
-          message: i18n.t('label.error'),
-          description: catchMessage,
-          duration: 0,
-          onClose: () => {
-            let countNotify = store.getters.countNotify
-            countNotify > 0 ? countNotify-- : countNotify = 0
-            store.commit('SET_COUNT_NOTIFY', countNotify)
-          }
-        })
+        if (!sourceToken.isCancel(e)) {
+          let countNotify = store.getters.countNotify
+          countNotify++
+          store.commit('SET_COUNT_NOTIFY', countNotify)
+          notification.error({
+            top: '65px',
+            message: i18n.t('label.error'),
+            description: catchMessage,
+            duration: 0,
+            onClose: () => {
+              let countNotify = store.getters.countNotify
+              countNotify > 0 ? countNotify-- : countNotify = 0
+              store.commit('SET_COUNT_NOTIFY', countNotify)
+            }
+          })
+        }
         catchMethod && catchMethod()
       })
     }
diff --git a/ui/src/utils/request.js b/ui/src/utils/request.js
index 402e0ef..8176465 100644
--- a/ui/src/utils/request.js
+++ b/ui/src/utils/request.js
@@ -24,6 +24,7 @@ import { CURRENT_PROJECT } from '@/store/mutation-types'
 import { i18n } from '@/locales'
 import store from '@/store'
 
+let source
 const service = axios.create({
   timeout: 600000
 })
@@ -128,6 +129,8 @@ const err = (error) => {
 
 // request interceptor
 service.interceptors.request.use(config => {
+  source = sourceToken.getSource()
+  config.cancelToken = source.token
   if (config && config.params) {
     config.params.response = 'json'
     const project = Vue.ls.get(CURRENT_PROJECT)
@@ -154,7 +157,23 @@ const installer = {
   }
 }
 
+const sourceToken = {
+  init: () => { source = axios.CancelToken.source() },
+  isCancel: (e) => {
+    return axios.isCancel(e)
+  },
+  getSource: () => {
+    if (!source) sourceToken.init()
+    return source
+  },
+  cancel: () => {
+    if (!source) sourceToken.init()
+    source.cancel()
+  }
+}
+
 export {
   installer as VueAxios,
-  service as axios
+  service as axios,
+  sourceToken
 }