From 67deb512116bcc55f5bb3f6796003bb1f0f8f6ad Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 5 Oct 2021 09:08:48 +0700
Subject: [PATCH 1/6] add clear all notification button

---
 ui/src/components/header/UserMenu.vue         | 32 ++++++++++-
 ui/src/components/view/DetailSettings.vue     |  3 +-
 ui/src/components/view/ListView.vue           |  3 +-
 ui/src/components/view/ResourceLimitTab.vue   |  3 +-
 ui/src/components/view/SettingsTab.vue        |  3 +-
 ui/src/components/view/UploadResourceIcon.vue | 12 ++--
 ui/src/config/section/compute.js              |  6 +-
 ui/src/permission.js                          | 10 +++-
 ui/src/store/getters.js                       |  3 +-
 ui/src/store/modules/user.js                  |  6 +-
 ui/src/utils/plugins.js                       | 57 ++++++++++++++++++-
 ui/src/utils/request.js                       | 57 +++++++++++++++++--
 ui/src/views/AutogenView.vue                  |  3 +-
 ui/src/views/compute/AssignInstance.vue       |  3 +-
 ui/src/views/compute/ChangeAffinity.vue       |  3 +-
 ui/src/views/compute/CreateSSHKeyPair.vue     |  3 +-
 ui/src/views/compute/CreateSnapshotWizard.vue |  3 +-
 ui/src/views/compute/DeployVM.vue             | 24 +++++---
 ui/src/views/compute/KubernetesServiceTab.vue |  3 +-
 ui/src/views/compute/MigrateWizard.vue        |  3 +-
 ui/src/views/compute/ScaleVM.vue              |  3 +-
 ui/src/views/compute/StartVirtualMachine.vue  |  9 ++-
 .../views/compute/backup/BackupSchedule.vue   |  3 +-
 ui/src/views/compute/backup/FormSchedule.vue  |  3 +-
 ui/src/views/iam/AddAccount.vue               | 15 +++--
 ui/src/views/iam/AddLdapAccount.vue           |  6 +-
 ui/src/views/iam/AddUser.vue                  | 18 ++++--
 ui/src/views/iam/ChangeUserPassword.vue       |  3 +-
 ui/src/views/iam/ConfigureSamlSsoAuth.vue     |  6 +-
 ui/src/views/iam/CreateRole.vue               |  3 +-
 ui/src/views/iam/DomainActionForm.vue         |  6 +-
 ui/src/views/iam/DomainView.vue               |  3 +-
 ui/src/views/iam/EditUser.vue                 |  6 +-
 ui/src/views/iam/ImportRole.vue               |  6 +-
 ui/src/views/image/IsoZones.vue               |  3 +-
 ui/src/views/image/RegisterOrUploadIso.vue    | 15 +++--
 .../views/image/RegisterOrUploadTemplate.vue  | 12 ++--
 ui/src/views/image/TemplateZones.vue          |  3 +-
 .../image/UpdateTemplateIsoPermissions.vue    |  3 +-
 ui/src/views/infra/AddPrimaryStorage.vue      |  3 +-
 ui/src/views/infra/AddSecondaryStorage.vue    |  3 +-
 ui/src/views/infra/ClusterAdd.vue             |  9 ++-
 ui/src/views/infra/HostAdd.vue                |  6 +-
 ui/src/views/infra/InfraSummary.vue           |  6 +-
 ui/src/views/infra/MigrateData.vue            |  6 +-
 ui/src/views/infra/PodAdd.vue                 |  6 +-
 .../views/infra/network/DedicatedVLANTab.vue  |  3 +-
 .../views/infra/network/EditTrafficLabel.vue  |  3 +-
 .../views/infra/network/IpRangesTabPublic.vue | 15 +++--
 .../infra/network/ServiceProvidersTab.vue     |  6 +-
 .../network/providers/AddF5LoadBalancer.vue   |  3 +-
 .../providers/AddNetscalerLoadBalancer.vue    |  3 +-
 .../network/providers/AddNiciraNvpDevice.vue  |  3 +-
 .../network/providers/AddPaloAltoFirewall.vue |  3 +-
 .../network/providers/AddSrxFirewall.vue      |  3 +-
 .../infra/network/providers/ProviderItem.vue  |  3 +-
 .../network/providers/ProviderListView.vue    |  6 +-
 .../views/infra/zone/ZoneWizardLaunchZone.vue |  3 +-
 ui/src/views/network/AclListRulesTab.vue      |  3 +-
 .../network/CreateIsolatedNetworkForm.vue     |  3 +-
 ui/src/views/network/CreateL2NetworkForm.vue  |  3 +-
 .../views/network/CreateSharedNetworkForm.vue |  6 +-
 ui/src/views/network/CreateVlanIpRange.vue    |  6 +-
 .../views/network/InternalLBAssignVmForm.vue  |  3 +-
 ui/src/views/network/IpAddressesTab.vue       |  6 +-
 ui/src/views/network/VpcTiersTab.vue          |  3 +-
 ui/src/views/network/VpnDetails.vue           |  3 +-
 .../views/offering/UpdateOfferingAccess.vue   |  3 +-
 .../plugins/quota/EditTariffValueWizard.vue   |  3 +-
 ui/src/views/project/iam/ProjectRoleTab.vue   |  9 ++-
 ui/src/views/storage/FormSchedule.vue         |  3 +-
 ui/src/views/storage/ResizeVolume.vue         |  3 +-
 ui/src/views/storage/ScheduledSnapshots.vue   |  3 +-
 ui/src/views/storage/UploadLocalVolume.vue    |  9 ++-
 .../views/tools/ImportUnmanagedInstance.vue   | 21 ++++---
 ui/tests/unit/views/AutogenView.spec.js       | 36 +++++-------
 .../unit/views/compute/MigrateWizard.spec.js  |  9 ++-
 77 files changed, 428 insertions(+), 166 deletions(-)

diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index 782fab45c56a..f185b9cc7a58 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -18,6 +18,10 @@
 <template>
   <div class="user-menu">
 
+    <a-tooltip v-if="countNotify > 0" title="Clear all notification" class="action button-clear-notification" @click="clearAllNotify">
+      <a-icon type="bell" class="bell-icon" />
+      <a-icon type="stop" class="clear-icon" />
+    </a-tooltip>
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <label class="user-menu-server-info action" v-if="$config.multipleServer">
@@ -84,7 +88,8 @@ export default {
   },
   data () {
     return {
-      image: ''
+      image: '',
+      countNotify: 0
     }
   },
   created () {
@@ -92,6 +97,12 @@ export default {
     eventBus.$on('refresh-header', () => {
       this.getIcon()
     })
+    this.$store.watch(
+      (state, getters) => getters.countNotify,
+      (newValue, oldValue) => {
+        this.countNotify = newValue
+      }
+    )
   },
   watch: {
     image () {
@@ -137,6 +148,10 @@ export default {
           description: err.message
         })
       })
+    },
+    clearAllNotify () {
+      this.$store.commit('SET_COUNT_NOTIFY', 0)
+      this.$notification.destroy()
     }
   }
 }
@@ -168,4 +183,19 @@ export default {
     }
   }
 }
+
+.button-clear-notification {
+  position: relative;
+
+  .bell-icon {
+    position: absolute;
+    left: 18px;
+    font-size: 12px;
+  }
+
+  .clear-icon {
+    font-size: 20px;
+    padding: 4px;
+  }
+}
 </style>
diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index 2588c11fb2e4..07f0a49cefd6 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -219,7 +219,8 @@ export default {
         apiName = 'updateTemplate'
       }
       if (!(apiName in this.$store.getters.apis)) {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('error.execute.api.failed') + ' ' + apiName,
           description: this.$t('message.user.not.permitted.api')
         })
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 335d53107e38..4333cc8f03c2 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -510,7 +510,8 @@ export default {
           json.updateconfigurationresponse.configuration &&
           !json.updateconfigurationresponse.configuration.isdynamic &&
           ['Admin'].includes(this.$store.getters.userInfo.roletype)) {
-          this.$notification.warning({
+          this.$showNotification({
+            type: 'warning',
             message: this.$t('label.status'),
             description: this.$t('message.restart.mgmt.server')
           })
diff --git a/ui/src/components/view/ResourceLimitTab.vue b/ui/src/components/view/ResourceLimitTab.vue
index fefe93770f78..67a5f96a1e3f 100644
--- a/ui/src/components/view/ResourceLimitTab.vue
+++ b/ui/src/components/view/ResourceLimitTab.vue
@@ -107,7 +107,8 @@ export default {
         this.dataResource = await this.listResourceLimits(params)
         this.formLoading = false
       } catch (e) {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.request.failed'),
           description: e
         })
diff --git a/ui/src/components/view/SettingsTab.vue b/ui/src/components/view/SettingsTab.vue
index 349d51691dd4..4f71e1957f32 100644
--- a/ui/src/components/view/SettingsTab.vue
+++ b/ui/src/components/view/SettingsTab.vue
@@ -164,7 +164,8 @@ export default {
       }).catch(error => {
         console.error(error)
         this.$message.error(this.$t('message.error.save.setting'))
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('label.error'),
           description: this.$t('message.error.try.save.setting')
         })
diff --git a/ui/src/components/view/UploadResourceIcon.vue b/ui/src/components/view/UploadResourceIcon.vue
index ecf6d6668e0a..cd8eb2f8902a 100644
--- a/ui/src/components/view/UploadResourceIcon.vue
+++ b/ui/src/components/view/UploadResourceIcon.vue
@@ -234,13 +234,15 @@ export default {
       }).then(json => {
         console.log(this.resource)
         if (json?.uploadresourceiconresponse?.success) {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.upload.icon'),
             description: `${this.$t('message.success.upload.icon')} ${resourceType}: ` + (this.resource.name || this.resource.username || resourceid)
           })
         }
       }).catch((error) => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('label.upload.icon'),
           description: error?.response?.data?.uploadresourceiconresponse?.errortext || '',
           duration: 0
@@ -264,13 +266,15 @@ export default {
         resourceids: resourceid
       }).then(json => {
         if (json?.deleteresourceiconresponse?.success) {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.delete.icon'),
             description: `${this.$t('message.success.delete.icon')} ${resourceType}: ` + (this.resource.name || this.resource.username || resourceid)
           })
         }
       }).catch((error) => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('label.delete.icon'),
           description: error?.response?.data?.deleteresourceiconresponse?.errortext || '',
           duration: 0
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 8bd694e03712..9f7598840353 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -152,7 +152,8 @@ export default {
             const vm = result.jobresult.virtualmachine || {}
             if (result.jobstatus === 1 && vm.password) {
               const name = vm.displayname || vm.name || vm.id
-              obj.$notification.success({
+              obj.$showNotification({
+                type: 'success',
                 message: `${obj.$t('label.reinstall.vm')}: ` + name,
                 description: `${obj.$t('label.password.reset.confirm')}: ` + vm.password,
                 duration: 0
@@ -361,7 +362,8 @@ export default {
             const vm = result.jobresult.virtualmachine || {}
             if (result.jobstatus === 1 && vm.password) {
               const name = vm.displayname || vm.name || vm.id
-              obj.$notification.success({
+              obj.$showNotification({
+                type: 'success',
                 message: `${obj.$t('label.reset.ssh.key.pair.on.vm')}: ` + name,
                 description: `${obj.$t('label.password.reset.confirm')}: ` + vm.password,
                 duration: 0
diff --git a/ui/src/permission.js b/ui/src/permission.js
index 291102ae94e2..bd07ad1d81d3 100644
--- a/ui/src/permission.js
+++ b/ui/src/permission.js
@@ -78,10 +78,18 @@ router.beforeEach((to, from, next) => {
             })
           })
           .catch(() => {
+            let countNotify = store.getters.countNotify
+            countNotify++
+            store.commit('SET_COUNT_NOTIFY', countNotify)
             notification.error({
               message: 'Error',
               description: i18n.t('message.error.discovering.feature'),
-              duration: 0
+              duration: 0,
+              onClose: () => {
+                let countNotify = store.getters.countNotify
+                countNotify > 0 ? countNotify-- : countNotify = 0
+                store.commit('SET_COUNT_NOTIFY', countNotify)
+              }
             })
             store.dispatch('Logout').then(() => {
               next({ path: '/user/login', query: { redirect: to.fullPath } })
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index b6c1fb58be6f..b3734d6ffe4f 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -40,7 +40,8 @@ const getters = {
   domainStore: state => state.user.domainStore,
   darkMode: state => state.user.darkMode,
   themeSetting: state => state.user.themeSetting,
-  defaultListViewPageSize: state => state.user.defaultListViewPageSize
+  defaultListViewPageSize: state => state.user.defaultListViewPageSize,
+  countNotify: state => state.user.countNotify
 }
 
 export default getters
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index ba421ea02d72..85ab35851c06 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -56,7 +56,8 @@ const user = {
     domainStore: {},
     darkMode: false,
     themeSetting: {},
-    defaultListViewPageSize: 20
+    defaultListViewPageSize: 20,
+    countNotify: 0
   },
 
   mutations: {
@@ -122,6 +123,9 @@ const user = {
     },
     SET_DEFAULT_LISTVIEW_PAGE_SIZE: (state, defaultListViewPageSize) => {
       state.defaultListViewPageSize = defaultListViewPageSize
+    },
+    SET_COUNT_NOTIFY (state, number) {
+      state.countNotify = number
     }
   },
 
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 99db8f7eb6e3..bf1defa767ef 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -22,6 +22,8 @@ import { message, notification } from 'ant-design-vue'
 import eventBus from '@/config/eventBus'
 import store from '@/store'
 
+let countNotify = 0
+
 export const pollJobPlugin = {
   install (Vue) {
     Vue.prototype.$pollJob = function (options) {
@@ -132,11 +134,18 @@ export const pollJobPlugin = {
             desc = `(${name}) ${desc}`
           }
           if (!bulkAction) {
+            countNotify++
+            store.commit('SET_COUNT_NOTIFY', countNotify)
             notification.error({
               message: errMessage,
               description: desc,
               key: jobId,
-              duration: 0
+              duration: 0,
+              onClose: () => {
+                let countNotify = store.getters.countNotify
+                countNotify > 0 ? countNotify-- : countNotify = 0
+                store.commit('SET_COUNT_NOTIFY', countNotify)
+              }
             })
           }
           store.dispatch('AddHeaderNotice', {
@@ -168,10 +177,17 @@ export const pollJobPlugin = {
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)
+        countNotify++
+        store.commit('SET_COUNT_NOTIFY', countNotify)
         notification.error({
           message: i18n.t('label.error'),
           description: catchMessage,
-          duration: 0
+          duration: 0,
+          onClose: () => {
+            let countNotify = store.getters.countNotify
+            countNotify > 0 ? countNotify-- : countNotify = 0
+            store.commit('SET_COUNT_NOTIFY', countNotify)
+          }
         })
         catchMethod && catchMethod()
       })
@@ -203,12 +219,47 @@ export const notifierPlugin = {
           }
         }
       }
+      countNotify++
+      store.commit('SET_COUNT_NOTIFY', countNotify)
       notification.error({
         message: msg,
         description: desc,
-        duration: 0
+        duration: 0,
+        onClose: () => {
+          let countNotify = store.getters.countNotify
+          countNotify > 0 ? countNotify-- : countNotify = 0
+          store.commit('SET_COUNT_NOTIFY', countNotify)
+        }
       })
     }
+
+    Vue.prototype.$showNotification = function (config) {
+      const defaultConfig = {
+        top: '65px',
+        onClose: () => {
+          let countNotify = store.getters.countNotify
+          countNotify > 0 ? countNotify-- : countNotify = 0
+          store.commit('SET_COUNT_NOTIFY', countNotify)
+        }
+      }
+      config = Object.assign({}, defaultConfig, config)
+      switch (config.type) {
+        case 'info':
+          notification.info(config)
+          break
+        case 'error':
+          notification.error(config)
+          break
+        case 'success':
+          notification.success(config)
+          break
+        case 'warning':
+          notification.warning(config)
+          break
+      }
+      countNotify++
+      store.commit('SET_COUNT_NOTIFY', countNotify)
+    }
   }
 }
 
diff --git a/ui/src/utils/request.js b/ui/src/utils/request.js
index 116a17117a6b..402e0ef02fc5 100644
--- a/ui/src/utils/request.js
+++ b/ui/src/utils/request.js
@@ -30,11 +30,23 @@ const service = axios.create({
 
 const err = (error) => {
   const response = error.response
+  let countNotify = store.getters.countNotify
   if (response) {
     console.log(response)
     if (response.status === 403) {
       const data = response.data
-      notification.error({ message: i18n.t('label.forbidden'), description: data.message })
+      countNotify++
+      store.commit('SET_COUNT_NOTIFY', countNotify)
+      notification.error({
+        top: '65px',
+        message: i18n.t('label.forbidden'),
+        description: data.message,
+        onClose: () => {
+          let countNotify = store.getters.countNotify
+          countNotify > 0 ? countNotify-- : countNotify = 0
+          store.commit('SET_COUNT_NOTIFY', countNotify)
+        }
+      })
     }
     if (response.status === 401) {
       if (response.config && response.config.params && ['listIdps', 'cloudianIsEnabled'].includes(response.config.params.command)) {
@@ -43,20 +55,36 @@ const err = (error) => {
       for (const key in response.data) {
         if (key.includes('response')) {
           if (response.data[key].errortext.includes('not available for user')) {
+            countNotify++
+            store.commit('SET_COUNT_NOTIFY', countNotify)
             notification.error({
+              top: '65px',
               message: 'Error',
               description: response.data[key].errortext + ' ' + i18n.t('error.unable.to.proceed'),
-              duration: 0
+              duration: 0,
+              onClose: () => {
+                let countNotify = store.getters.countNotify
+                countNotify > 0 ? countNotify-- : countNotify = 0
+                store.commit('SET_COUNT_NOTIFY', countNotify)
+              }
             })
             return
           }
         }
       }
+      countNotify++
+      store.commit('SET_COUNT_NOTIFY', countNotify)
       notification.error({
+        top: '65px',
         message: i18n.t('label.unauthorized'),
         description: i18n.t('message.authorization.failed'),
         key: 'http-401',
-        duration: 0
+        duration: 0,
+        onClose: () => {
+          let countNotify = store.getters.countNotify
+          countNotify > 0 ? countNotify-- : countNotify = 0
+          store.commit('SET_COUNT_NOTIFY', countNotify)
+        }
       })
       store.dispatch('Logout').then(() => {
         if (router.history.current.path !== '/user/login') {
@@ -65,15 +93,34 @@ const err = (error) => {
       })
     }
     if (response.status === 404) {
-      notification.error({ message: i18n.t('label.not.found'), description: i18n.t('message.resource.not.found') })
+      countNotify++
+      store.commit('SET_COUNT_NOTIFY', countNotify)
+      notification.error({
+        top: '65px',
+        message: i18n.t('label.not.found'),
+        description: i18n.t('message.resource.not.found'),
+        onClose: () => {
+          let countNotify = store.getters.countNotify
+          countNotify > 0 ? countNotify-- : countNotify = 0
+          store.commit('SET_COUNT_NOTIFY', countNotify)
+        }
+      })
       router.push({ path: '/exception/404' })
     }
   }
   if (error.isAxiosError && !error.response) {
+    countNotify++
+    store.commit('SET_COUNT_NOTIFY', countNotify)
     notification.warn({
+      top: '65px',
       message: error.message || i18n.t('message.network.error'),
       description: i18n.t('message.network.error.description'),
-      key: 'network-error'
+      key: 'network-error',
+      onClose: () => {
+        let countNotify = store.getters.countNotify
+        countNotify > 0 ? countNotify-- : countNotify = 0
+        store.commit('SET_COUNT_NOTIFY', countNotify)
+      }
     })
   }
   return Promise.reject(error)
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 833085763e77..29a681c779c8 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -1121,7 +1121,8 @@ export default {
             if (action.response) {
               const description = action.response(result.jobresult)
               if (description) {
-                this.$notification.info({
+                this.$showNotification({
+                  type: 'info',
                   message: this.$t(action.label),
                   description: (<span domPropsInnerHTML={description}></span>),
                   duration: 0
diff --git a/ui/src/views/compute/AssignInstance.vue b/ui/src/views/compute/AssignInstance.vue
index 9341064b3fd5..bba7ee4cbbbf 100644
--- a/ui/src/views/compute/AssignInstance.vue
+++ b/ui/src/views/compute/AssignInstance.vue
@@ -294,7 +294,8 @@ export default {
         [variableKey]: variableValue,
         networkids: this.selectedNetwork
       }).then(response => {
-        this.$notification.success({
+        this.$showNotification({
+          type: 'success',
           message: this.$t('label.loadbalancerinstance')
         })
         this.$parent.$parent.close()
diff --git a/ui/src/views/compute/ChangeAffinity.vue b/ui/src/views/compute/ChangeAffinity.vue
index d1dabebe70b0..5f97c255abc3 100644
--- a/ui/src/views/compute/ChangeAffinity.vue
+++ b/ui/src/views/compute/ChangeAffinity.vue
@@ -149,7 +149,8 @@ export default {
         id: this.resource.id,
         affinitygroupids: this.selectedRowKeys.join(',')
       }).then(response => {
-        this.$notification.success({
+        this.$showNotification({
+          type: 'success',
           message: this.$t('message.success.change.affinity.group')
         })
         this.$parent.$parent.close()
diff --git a/ui/src/views/compute/CreateSSHKeyPair.vue b/ui/src/views/compute/CreateSSHKeyPair.vue
index 2aa673146766..6cb3289decb5 100644
--- a/ui/src/views/compute/CreateSSHKeyPair.vue
+++ b/ui/src/views/compute/CreateSSHKeyPair.vue
@@ -198,7 +198,8 @@ export default {
       this.hiddenElement.click()
     },
     notifyCopied () {
-      this.$notification.info({
+      this.$showNotification({
+        type: 'info',
         message: this.$t('message.success.copy.clipboard')
       })
     },
diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
index af2765f44b09..171b133647db 100644
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -141,7 +141,8 @@ export default {
                   const volumeId = result.jobresult.snapshot.volumeid
                   const snapshotId = result.jobresult.snapshot.id
                   const message = `${this.$t('label.create.snapshot.for.volume')} ${volumeId} ${this.$t('label.with.snapshotid')} ${snapshotId}`
-                  this.$notification.success({
+                  this.$showNotification({
+                    type: 'success',
                     message: message,
                     duration: 0
                   })
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index 00ed65f6c20e..d36d312ee2fc 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -1480,14 +1480,16 @@ export default {
       this.form.validateFields(async (err, values) => {
         if (err) {
           if (err.licensesaccepted) {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.license.agreements.not.accepted'),
               description: this.$t('message.step.license.agreements.continue')
             })
             return
           }
 
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: this.$t('error.form.message')
           })
@@ -1495,27 +1497,31 @@ export default {
         }
 
         if (!values.templateid && !values.isoid) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: this.$t('message.template.iso')
           })
           return
         } else if (values.isoid && (!values.diskofferingid || values.diskofferingid === '0')) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: this.$t('message.step.3.continue')
           })
           return
         }
         if (!values.computeofferingid) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: this.$t('message.step.2.continue')
           })
           return
         }
         if (this.error) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: this.$t('error.form.message')
           })
@@ -1628,7 +1634,8 @@ export default {
                 }
               }
             } else {
-              this.$notification.error({
+              this.$showNotification({
+                type: 'error',
                 message: this.$t('message.request.failed'),
                 description: this.$t('message.step.4.continue')
               })
@@ -1690,7 +1697,8 @@ export default {
                 const vm = result.jobresult.virtualmachine
                 const name = vm.displayname || vm.name || vm.id
                 if (vm.password) {
-                  this.$notification.success({
+                  this.$showNotification({
+                    type: 'success',
                     message: password + ` ${this.$t('label.for')} ` + name,
                     description: vm.password,
                     duration: 0
diff --git a/ui/src/views/compute/KubernetesServiceTab.vue b/ui/src/views/compute/KubernetesServiceTab.vue
index e725e38aa7a8..1c904092c6d8 100644
--- a/ui/src/views/compute/KubernetesServiceTab.vue
+++ b/ui/src/views/compute/KubernetesServiceTab.vue
@@ -297,7 +297,8 @@ export default {
             config.configdata !== '') {
             this.clusterConfig = config.configdata
           } else {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.request.failed'),
               description: this.$t('message.error.retrieve.kubeconfig')
             })
diff --git a/ui/src/views/compute/MigrateWizard.vue b/ui/src/views/compute/MigrateWizard.vue
index 310799859ba6..39493b8b2f4c 100644
--- a/ui/src/views/compute/MigrateWizard.vue
+++ b/ui/src/views/compute/MigrateWizard.vue
@@ -220,7 +220,8 @@ export default {
         })
         this.$emit('close-action')
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.request.failed'),
           description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
           duration: 0
diff --git a/ui/src/views/compute/ScaleVM.vue b/ui/src/views/compute/ScaleVM.vue
index a0cf5b197a1e..4a9087d9fd87 100644
--- a/ui/src/views/compute/ScaleVM.vue
+++ b/ui/src/views/compute/ScaleVM.vue
@@ -166,7 +166,8 @@ export default {
           this.$pollJob({
             jobId,
             successMethod: result => {
-              this.$notification.success({
+              this.$showNotification({
+                type: 'success',
                 message: this.$t('message.success.change.offering')
               })
             },
diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index 8c905f6df685..445edd2be035 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -143,7 +143,8 @@ export default {
       api('listPods', params).then(json => {
         this.pods = json.listpodsresponse.pod || []
         if (this.pods.length === 0) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: 'No pods found',
             duration: 0
           })
@@ -162,7 +163,8 @@ export default {
       api('listClusters', params).then(json => {
         this.clusters = json.listclustersresponse.cluster || []
         if (this.clusters.length === 0) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: 'No clusters found',
             duration: 0
           })
@@ -184,7 +186,8 @@ export default {
       api('listHosts', params).then(json => {
         this.hosts = json.listhostsresponse.host || []
         if (this.hosts.length === 0) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: 'No hosts found',
             duration: 0
           })
diff --git a/ui/src/views/compute/backup/BackupSchedule.vue b/ui/src/views/compute/backup/BackupSchedule.vue
index 66b7dc7d44ea..d1d78d8d53e1 100644
--- a/ui/src/views/compute/backup/BackupSchedule.vue
+++ b/ui/src/views/compute/backup/BackupSchedule.vue
@@ -157,7 +157,8 @@ export default {
       this.actionLoading = true
       api('deleteBackupSchedule', params).then(json => {
         if (json.deletebackupscheduleresponse.success) {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.scheduled.backups'),
             description: this.$t('message.success.delete.backup.schedule')
           })
diff --git a/ui/src/views/compute/backup/FormSchedule.vue b/ui/src/views/compute/backup/FormSchedule.vue
index d816f2b8f486..be64fc0f8301 100644
--- a/ui/src/views/compute/backup/FormSchedule.vue
+++ b/ui/src/views/compute/backup/FormSchedule.vue
@@ -284,7 +284,8 @@ export default {
         }
         this.actionLoading = true
         api('createBackupSchedule', params).then(json => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.scheduled.backups'),
             description: this.$t('message.success.config.backup.schedule')
           })
diff --git a/ui/src/views/iam/AddAccount.vue b/ui/src/views/iam/AddAccount.vue
index 89ebcb68a85a..8fcc16948fe7 100644
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@@ -266,7 +266,8 @@ export default {
         this.domainsList = response.listdomainsresponse.domain || []
         this.selectedDomain = this.domainsList[0].id || ''
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext
         })
@@ -336,7 +337,8 @@ export default {
 
         api('createAccount', {}, 'POST', params).then(response => {
           this.$emit('refresh-data')
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.create.account'),
             description: `${this.$t('message.success.create.account')} ${params.username}`
           })
@@ -348,12 +350,14 @@ export default {
                 entityid: values.samlentity,
                 userid: users[i].id
               }).then(response => {
-                this.$notification.success({
+                this.$showNotification({
+                  type: 'success',
                   message: this.$t('label.samlenable'),
                   description: this.$t('message.success.enable.saml.auth')
                 })
               }).catch(error => {
-                this.$notification.error({
+                this.$showNotification({
+                  type: 'error',
                   message: this.$t('message.request.failed'),
                   description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
                   duration: 0
@@ -363,7 +367,8 @@ export default {
           }
           this.closeAction()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
             duration: 0
diff --git a/ui/src/views/iam/AddLdapAccount.vue b/ui/src/views/iam/AddLdapAccount.vue
index 2290c63a271f..c29b2f229c6b 100644
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@@ -410,13 +410,15 @@ export default {
                 this.authorizeUsersForSamlSSO(users, entityId)
               }
             } else if (apiName === 'importLdapUsers' && response.ldapuserresponse && values.samlEnable) {
-              this.$notification.error({
+              this.$showNotification({
+                type: 'error',
                 message: this.$t('message.request.failed'),
                 description: this.$t('message.error.enable.saml')
               })
             } else {
               if (apiName === 'ldapCreateAccount') {
-                this.$notification.success({
+                this.$showNotification({
+                  type: 'success',
                   message: this.$t('label.add.ldap.account'),
                   description: response.createaccountresponse.account.name
                 })
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index ec0e1b87ef20..91e3f746ea80 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -238,7 +238,8 @@ export default {
         this.domainsList = response.listdomainsresponse.domain || []
         this.selectedDomain = this.domainsList[0].id || ''
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext
         })
@@ -252,7 +253,8 @@ export default {
       api('listAccounts', { listAll: true, showicon: true }).then(response => {
         this.accountList = response.listaccountsresponse.account || []
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext
         })
@@ -319,7 +321,8 @@ export default {
 
         api('createUser', {}, 'POST', params).then(response => {
           this.$emit('refresh-data')
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.create.user'),
             description: `${this.$t('message.success.create.user')} ${params.username}`
           })
@@ -330,12 +333,14 @@ export default {
               entityid: values.samlentity,
               userid: user.id
             }).then(response => {
-              this.$notification.success({
+              this.$showNotification({
+                type: 'success',
                 message: this.$t('label.samlenable'),
                 description: this.$t('message.success.enable.saml.auth')
               })
             }).catch(error => {
-              this.$notification.error({
+              this.$showNotification({
+                type: 'error',
                 message: this.$t('message.request.failed'),
                 description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
                 duration: 0
@@ -344,7 +349,8 @@ export default {
           }
           this.closeAction()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
             duration: 0
diff --git a/ui/src/views/iam/ChangeUserPassword.vue b/ui/src/views/iam/ChangeUserPassword.vue
index c9f21d216d97..98e6e1348d44 100644
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@@ -128,7 +128,8 @@ export default {
           params.currentpassword = values.currentpassword
         }
         api('updateUser', {}, 'POST', params).then(json => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.action.change.password'),
             description: `${this.$t('message.success.change.password')} ${this.resource.username}`
           })
diff --git a/ui/src/views/iam/ConfigureSamlSsoAuth.vue b/ui/src/views/iam/ConfigureSamlSsoAuth.vue
index 546cf9a0ecb1..cfc298b1b2e5 100644
--- a/ui/src/views/iam/ConfigureSamlSsoAuth.vue
+++ b/ui/src/views/iam/ConfigureSamlSsoAuth.vue
@@ -108,14 +108,16 @@ export default {
           userid: this.resource.id,
           entityid: values.samlEntity
         }).then(response => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: values.samlEnable ? this.$t('label.saml.enable') : this.$t('label.saml.disable'),
             description: values.samlEnable ? `${this.$t('message.success.enable.saml.auth')} ${this.$t('label.for')} ${this.resource.username}`
               : `${this.$t('message.success.disable.saml.auth')} ${this.$t('label.for')} ${this.resource.username}`
           })
           this.handleClose()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
             duration: 0
diff --git a/ui/src/views/iam/CreateRole.vue b/ui/src/views/iam/CreateRole.vue
index 34a8897ee88f..80ed4d802f87 100644
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@@ -174,7 +174,8 @@ export default {
         const role = json.createroleresponse.role
         if (role) {
           this.$emit('refresh-data')
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: 'Create Role',
             description: 'Sucessfully created role ' + params.name
           })
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index b3803d7ff8ed..cda327e6d420 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -254,7 +254,8 @@ export default {
                       if (this.action.response) {
                         const description = this.action.response(result.jobresult)
                         if (description) {
-                          this.$notification.info({
+                          this.$showNotification({
+                            type: 'info',
                             message: this.$t(this.action.label),
                             description: (<span domPropsInnerHTML={description}></span>),
                             duration: 0
@@ -290,7 +291,8 @@ export default {
           }
           this.parentCloseAction()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/iam/DomainView.vue b/ui/src/views/iam/DomainView.vue
index e69edc55ac14..6f11967431c0 100644
--- a/ui/src/views/iam/DomainView.vue
+++ b/ui/src/views/iam/DomainView.vue
@@ -187,7 +187,8 @@ export default {
           return
         }
 
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.request.failed'),
           description: error.response.headers['x-description'],
           duration: 0
diff --git a/ui/src/views/iam/EditUser.vue b/ui/src/views/iam/EditUser.vue
index 5a7f26f910e2..faf56743545e 100644
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@@ -178,13 +178,15 @@ export default {
 
         api('updateUser', params).then(response => {
           this.$emit('refresh-data')
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.edit.user'),
             description: `${this.$t('message.success.update.user')} ${params.username}`
           })
           this.closeAction()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
             duration: 0
diff --git a/ui/src/views/iam/ImportRole.vue b/ui/src/views/iam/ImportRole.vue
index 26a1ca65cc18..59b4df19b6e4 100644
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@@ -128,7 +128,8 @@ export default {
     },
     handleChange (info) {
       if (info.file.status === 'error') {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('label.error.file.upload'),
           description: this.$t('label.error.file.upload')
         })
@@ -185,7 +186,8 @@ export default {
         const role = json.importroleresponse.role
         if (role) {
           this.$emit('refresh-data')
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: 'Import Role',
             description: 'Sucessfully imported role ' + params.name
           })
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index bf98cc33b7a8..aa9b42ecbf21 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -455,7 +455,8 @@ export default {
             catchMessage: this.$t('error.fetching.async.job.result')
           })
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/image/RegisterOrUploadIso.vue b/ui/src/views/image/RegisterOrUploadIso.vue
index 39dc878f9369..2fa036aff765 100644
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@@ -271,7 +271,8 @@ export default {
     handleUpload () {
       const { fileList } = this
       if (this.fileList.length > 1) {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.upload.iso.failed'),
           description: this.$t('message.error.upload.iso.description'),
           duration: 0
@@ -296,14 +297,16 @@ export default {
           },
           timeout: 86400000
         }).then((json) => {
-        this.$notification.success({
+        this.$showNotification({
+          type: 'success',
           message: this.$t('message.success.upload'),
           description: this.$t('message.success.upload.description')
         })
         this.closeAction()
         this.$emit('refresh-data')
       }).catch(e => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.upload.failed'),
           description: `${this.$t('message.upload.iso.failed.description')} -  ${e}`,
           duration: 0
@@ -343,7 +346,8 @@ export default {
         if (this.currentForm === 'Create') {
           this.loading = true
           api('registerIso', params).then(json => {
-            this.$notification.success({
+            this.$showNotification({
+              type: 'success',
               message: this.$t('label.action.register.iso'),
               description: `${this.$t('message.success.register.iso')} ${params.name}`
             })
@@ -364,7 +368,8 @@ export default {
             this.uploadParams = (json.postuploadisoresponse && json.postuploadisoresponse.getuploadparams) ? json.postuploadisoresponse.getuploadparams : ''
             const response = this.handleUpload()
             if (response === 'upload successful') {
-              this.$notification.success({
+              this.$showNotification({
+                type: 'success',
                 message: this.$t('message.success.upload'),
                 description: this.$t('message.success.upload.iso.description')
               })
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue b/ui/src/views/image/RegisterOrUploadTemplate.vue
index 8620616413c0..f553bac8c537 100644
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -516,14 +516,16 @@ export default {
           },
           timeout: 86400000
         }).then((json) => {
-        this.$notification.success({
+        this.$showNotification({
+          type: 'success',
           message: this.$t('message.success.upload'),
           description: this.$t('message.success.upload.template.description')
         })
         this.$emit('refresh-data')
         this.closeAction()
       }).catch(e => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.upload.failed'),
           description: `${this.$t('message.upload.template.failed.description')} -  ${e}`,
           duration: 0
@@ -892,7 +894,8 @@ export default {
         if (this.currentForm === 'Create') {
           this.loading = true
           api('registerTemplate', params).then(json => {
-            this.$notification.success({
+            this.$showNotification({
+              type: 'success',
               message: this.$t('label.register.template'),
               description: `${this.$t('message.success.register.template')} ${params.name}`
             })
@@ -906,7 +909,8 @@ export default {
         } else {
           this.loading = true
           if (this.fileList.length > 1) {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.error.upload.template'),
               description: this.$t('message.error.upload.template.description'),
               duration: 0
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 8ee7cf4f2b47..e184c7fb1653 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -554,7 +554,8 @@ export default {
             catchMessage: this.$t('error.fetching.async.job.result')
           })
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/image/UpdateTemplateIsoPermissions.vue b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
index f731f7e84f33..f27e72ee3a7d 100644
--- a/ui/src/views/image/UpdateTemplateIsoPermissions.vue
+++ b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
@@ -289,7 +289,8 @@ export default {
         featured: this.resource.featured,
         op: this.selectedOperation.toLowerCase()
       }).then(response => {
-        this.$notification.success({
+        this.$showNotification({
+          type: 'success',
           message: `${this.$t('label.success.updated')} ${resourceType} ${this.$t('label.permissions')}`
         })
         this.closeModal()
diff --git a/ui/src/views/infra/AddPrimaryStorage.vue b/ui/src/views/infra/AddPrimaryStorage.vue
index 96cd9471ba9c..decede16f4ef 100644
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@@ -719,7 +719,8 @@ export default {
         }
         this.loading = true
         api('createStoragePool', {}, 'POST', params).then(json => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.add.primary.storage'),
             description: this.$t('label.add.primary.storage')
           })
diff --git a/ui/src/views/infra/AddSecondaryStorage.vue b/ui/src/views/infra/AddSecondaryStorage.vue
index e229bb78f3da..e89165a6cf79 100644
--- a/ui/src/views/infra/AddSecondaryStorage.vue
+++ b/ui/src/views/infra/AddSecondaryStorage.vue
@@ -293,7 +293,8 @@ export default {
 
         this.loading = true
         api('addImageStore', data).then(json => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.add.secondary.storage'),
             description: this.$t('label.add.secondary.storage')
           })
diff --git a/ui/src/views/infra/ClusterAdd.vue b/ui/src/views/infra/ClusterAdd.vue
index d3c25c6c6104..8e6642862b41 100644
--- a/ui/src/views/infra/ClusterAdd.vue
+++ b/ui/src/views/infra/ClusterAdd.vue
@@ -257,7 +257,8 @@ export default {
             }
             this.addCluster()
           }).catch(error => {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: `${this.$t('label.error')} ${error.response.status}`,
               description: error.response.data.listvmwaredcsresponse.errortext,
               duration: 0
@@ -308,7 +309,8 @@ export default {
         this.parentToggleLoading()
         this.$parent.$parent.close()
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.addclusterresponse.errortext,
           duration: 0
@@ -343,7 +345,8 @@ export default {
           }
         })
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext,
           duration: 0
diff --git a/ui/src/views/infra/HostAdd.vue b/ui/src/views/infra/HostAdd.vue
index bafe2ba9f2f5..c9819980adc5 100644
--- a/ui/src/views/infra/HostAdd.vue
+++ b/ui/src/views/infra/HostAdd.vue
@@ -331,7 +331,8 @@ export default {
         this.parentFetchData()
         this.$parent.$parent.close()
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.addhostresponse.errortext,
           duration: 0
@@ -366,7 +367,8 @@ export default {
           }
         })
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext,
           duration: 0
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 81f4a2d33eee..a1f9c9e61a2a 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -241,12 +241,14 @@ export default {
         const result = json.queryasyncjobresultresponse
         if (result.jobstatus === 1 && this.maxCerts === count) {
           this.$message.success(`${this.$t('label.certificate.upload')}: ${result.jobresult.customcertificate.message}`)
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.certificate.upload'),
             description: result.jobresult.customcertificate.message || this.$t('message.success.certificate.upload')
           })
         } else if (result.jobstatus === 2) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('label.certificate.upload.failed'),
             description: result.jobresult.errortext || this.$t('label.certificate.upload.failed.description'),
             duration: 0
diff --git a/ui/src/views/infra/MigrateData.vue b/ui/src/views/infra/MigrateData.vue
index a1cb693bb323..f1cf725af37a 100644
--- a/ui/src/views/infra/MigrateData.vue
+++ b/ui/src/views/infra/MigrateData.vue
@@ -154,12 +154,14 @@ export default {
           const success = result.imagestore.success || false
           const message = result.imagestore.message || ''
           if (success) {
-            this.$notification.success({
+            this.$showNotification({
+              type: 'success',
               message: title,
               description: message
             })
           } else {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: title,
               description: message,
               duration: 0
diff --git a/ui/src/views/infra/PodAdd.vue b/ui/src/views/infra/PodAdd.vue
index b1fe31522843..d9538da7f4ec 100644
--- a/ui/src/views/infra/PodAdd.vue
+++ b/ui/src/views/infra/PodAdd.vue
@@ -207,7 +207,8 @@ export default {
           this.parentFetchData()
           this.$parent.$parent.close()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: `${this.$t('label.error')} ${error.response.status}`,
             description: error.response.data.createpodresponse.errortext,
             duration: 0
@@ -242,7 +243,8 @@ export default {
           }
         })
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext,
           duration: 0
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index 74fd444956d5..7ee016ea0f39 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -254,7 +254,8 @@ export default {
         this.items = response.listdedicatedguestvlanrangesresponse.dedicatedguestvlanrange || []
         this.totalCount = response.listdedicatedguestvlanrangesresponse.count || 0
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext,
           duration: 0
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index 706131bc6827..80f4cba235e3 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -133,7 +133,8 @@ export default {
           this.traffictype = this.trafficTypes[0].traffictype || undefined
         })
         .catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: `${this.$t('label.error')} ${error.response.status}`,
             description: error.response.data.errorresponse.errortext
           })
diff --git a/ui/src/views/infra/network/IpRangesTabPublic.vue b/ui/src/views/infra/network/IpRangesTabPublic.vue
index 1e4e03c8804d..df89a706be1c 100644
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@@ -504,7 +504,8 @@ export default {
     handleDeleteIpRange (id) {
       this.componentLoading = true
       api('deleteVlanIpRange', { id }).then(() => {
-        this.$notification.success({
+        this.$showNotification({
+          type: 'success',
           message: 'Removed IP Range'
         })
       }).catch(error => {
@@ -540,11 +541,13 @@ export default {
           params.networkid = this.network.id
         }
         api('createVlanIpRange', params).then(() => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('message.success.add.iprange')
           })
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: `${this.$t('label.error')} ${error.response.status}`,
             description: error.response.data.createvlaniprangeresponse
               ? error.response.data.createvlaniprangeresponse.errortext : error.response.data.errorresponse.errortext,
@@ -572,11 +575,13 @@ export default {
           forsystemvms: values.forsystemvms
         }
         api('updateVlanIpRange', params).then(() => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('message.success.update.iprange')
           })
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: `${this.$t('label.error')} ${error.response.status}`,
             description: error.response.data.updatevlaniprangeresponse
               ? error.response.data.updatevlaniprangeresponse.errortext : error.response.data.errorresponse.errortext,
diff --git a/ui/src/views/infra/network/ServiceProvidersTab.vue b/ui/src/views/infra/network/ServiceProvidersTab.vue
index 0410c39e4d28..50300d3ffe9f 100644
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@@ -1218,7 +1218,8 @@ export default {
           this.onCloseAction()
         } catch (error) {
           this.actionLoading = false
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: error
           })
@@ -1354,7 +1355,8 @@ export default {
         this.onCloseAction()
       } catch (message) {
         this.actionLoading = false
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.request.failed'),
           description: message
         })
diff --git a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
index 0332ad2b15b7..28d92a6d169c 100644
--- a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
@@ -253,7 +253,8 @@ export default {
           this.loading = false
         } catch (error) {
           this.loading = false
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
index aa0699acbe87..cb2d2298ef69 100644
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@@ -288,7 +288,8 @@ export default {
           this.loading = false
         } catch (error) {
           this.loading = false
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
index 01c21fb3fd77..0cab7050fddd 100644
--- a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
+++ b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
@@ -160,7 +160,8 @@ export default {
           this.loading = false
         } catch (error) {
           this.loading = false
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
index fe6a11378d31..bd434bc94b55 100644
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@@ -377,7 +377,8 @@ export default {
           this.loading = false
         } catch (error) {
           this.loading = false
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/infra/network/providers/AddSrxFirewall.vue b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
index e50e14f0909f..2b0408558b0a 100644
--- a/ui/src/views/infra/network/providers/AddSrxFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
@@ -322,7 +322,8 @@ export default {
           this.loading = false
         } catch (error) {
           this.loading = false
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/infra/network/providers/ProviderItem.vue b/ui/src/views/infra/network/providers/ProviderItem.vue
index 73931bd071c5..ec4a84ecbd18 100644
--- a/ui/src/views/infra/network/providers/ProviderItem.vue
+++ b/ui/src/views/infra/network/providers/ProviderItem.vue
@@ -188,7 +188,8 @@ export default {
         this.listData[args.title].loading = false
       } catch (error) {
         this.listData[args.title].loading = false
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: this.$t('message.request.failed'),
           description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
         })
diff --git a/ui/src/views/infra/network/providers/ProviderListView.vue b/ui/src/views/infra/network/providers/ProviderListView.vue
index ac235456352d..a1a498b2004f 100644
--- a/ui/src/views/infra/network/providers/ProviderListView.vue
+++ b/ui/src/views/infra/network/providers/ProviderListView.vue
@@ -300,7 +300,8 @@ export default {
               this.actionLoading = false
             } catch (error) {
               this.actionLoading = false
-              this.$notification.error({
+              this.$showNotification({
+                type: 'error',
                 message: this.$t('message.request.failed'),
                 description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
               })
@@ -336,7 +337,8 @@ export default {
             this.actionLoading = false
           } catch (error) {
             this.actionLoading = false
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.request.failed'),
               description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
             })
diff --git a/ui/src/views/infra/zone/ZoneWizardLaunchZone.vue b/ui/src/views/infra/zone/ZoneWizardLaunchZone.vue
index 95c3be7d8cd4..9675b1cc2b23 100644
--- a/ui/src/views/infra/zone/ZoneWizardLaunchZone.vue
+++ b/ui/src/views/infra/zone/ZoneWizardLaunchZone.vue
@@ -1546,7 +1546,8 @@ export default {
         this.$emit('refresh-data')
       } catch (e) {
         this.loading = false
-        await this.$notification.error({
+        await this.$showNotification({
+          type: 'error',
           message: this.$t('message.request.failed'),
           description: e
         })
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index dbe11caee154..831fd5074368 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -571,7 +571,8 @@ export default {
         data.aclid = this.resource.id
 
         api('createNetworkACL', {}, 'POST', data).then(() => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.success'),
             description: this.$t('message.success.add.rule')
           })
diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index e421ca6db666..f369d7560d79 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -439,7 +439,8 @@ export default {
           }
         }
         api('createNetwork', params).then(json => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: 'Network',
             description: this.$t('message.success.create.isolated.network')
           })
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 0b0ff04dcf86..7990d0a887ef 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -395,7 +395,8 @@ export default {
           }
         }
         api('createNetwork', params).then(json => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: 'Network',
             description: this.$t('message.success.create.l2.network')
           })
diff --git a/ui/src/views/network/CreateSharedNetworkForm.vue b/ui/src/views/network/CreateSharedNetworkForm.vue
index c6f2b27d8764..299288067130 100644
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@@ -704,7 +704,8 @@ export default {
             !this.isValidTextValueForKey(values, 'ip6gateway') && !this.isValidTextValueForKey(values, 'ip6cidr') &&
             !this.isValidTextValueForKey(values, 'startipv6') && !this.isValidTextValueForKey(values, 'endipv6'))
         ) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: this.$t('message.error.add.guest.network')
           })
@@ -789,7 +790,8 @@ export default {
           params.hideipaddressusage = true
         }
         api('createNetwork', params).then(json => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.network'),
             description: this.$t('message.success.add.guest.network')
           })
diff --git a/ui/src/views/network/CreateVlanIpRange.vue b/ui/src/views/network/CreateVlanIpRange.vue
index 61f7f87560b9..a88d475ebca2 100644
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@@ -248,13 +248,15 @@ export default {
 
         api('createVlanIpRange', params)
           .then(() => {
-            this.$notification.success({
+            this.$showNotification({
+              type: 'success',
               message: this.$t('message.success.add.iprange')
             })
             this.closeAction()
             this.$emit('refresh-data')
           }).catch(error => {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: `${this.$t('label.error')} ${error.response.status}`,
               description: error.response.data.createvlaniprangeresponse
                 ? error.response.data.createvlaniprangeresponse.errortext : error.response.data.errorresponse.errortext,
diff --git a/ui/src/views/network/InternalLBAssignVmForm.vue b/ui/src/views/network/InternalLBAssignVmForm.vue
index ff6894080dee..cb07fa496e77 100644
--- a/ui/src/views/network/InternalLBAssignVmForm.vue
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@@ -223,7 +223,8 @@ export default {
         })
         this.closeModal()
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext,
           duration: 0
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 65c69336f097..ebea8d4330f6 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -359,7 +359,8 @@ export default {
         })
         this.onCloseModal()
       }).catch(error => {
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext,
           duration: 0
@@ -426,7 +427,8 @@ export default {
         })
       }).catch(error => {
         this.fetchLoading = false
-        this.$notification.error({
+        this.$showNotification({
+          type: 'error',
           message: `${this.$t('label.error')} ${error.response.status}`,
           description: error.response.data.errorresponse.errortext,
           duration: 0
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index ea36560b0bb0..339fbc03b3b8 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -664,7 +664,8 @@ export default {
         }
 
         api('createNetwork', params).then(() => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('message.success.add.vpc.network')
           })
         }).catch(error => {
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
index 7f112feaa037..d0633a28dfc7 100644
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@@ -132,7 +132,8 @@ export default {
           jobId: response.createremoteaccessvpnresponse.jobid,
           successMethod: result => {
             const res = result.jobresult.remoteaccessvpn
-            this.$notification.success({
+            this.$showNotification({
+              type: 'success',
               message: this.$t('label.status'),
               description:
                 `${this.$t('message.enabled.vpn')} ${res.publicip}. ${this.$t('message.enabled.vpn.ip.sec')} ${res.presharedkey}`,
diff --git a/ui/src/views/offering/UpdateOfferingAccess.vue b/ui/src/views/offering/UpdateOfferingAccess.vue
index e35c305b19a5..8e0393475c63 100644
--- a/ui/src/views/offering/UpdateOfferingAccess.vue
+++ b/ui/src/views/offering/UpdateOfferingAccess.vue
@@ -296,7 +296,8 @@ export default {
         this.loading = true
         api('update' + this.offeringType, params).then(json => {
           this.$emit('refresh-data')
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.action.update.offering.access'),
             description: this.$t('label.action.update.offering.access')
           })
diff --git a/ui/src/views/plugins/quota/EditTariffValueWizard.vue b/ui/src/views/plugins/quota/EditTariffValueWizard.vue
index 250a79e31e08..5b55953e753c 100644
--- a/ui/src/views/plugins/quota/EditTariffValueWizard.vue
+++ b/ui/src/views/plugins/quota/EditTariffValueWizard.vue
@@ -125,7 +125,8 @@ export default {
           this.$message.success(`${this.$t('message.setting.updated')} ${this.resource.description}`)
           this.onClose()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
diff --git a/ui/src/views/project/iam/ProjectRoleTab.vue b/ui/src/views/project/iam/ProjectRoleTab.vue
index 2ac2349c450b..0d999b0aa0f1 100644
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@@ -229,7 +229,8 @@ export default {
           params[key] = input
         }
         api('updateProjectRole', params).then(response => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.update.project.role'),
             description: this.$t('label.update.project.role')
           })
@@ -268,7 +269,8 @@ export default {
           params[key] = input
         }
         api('createProjectRole', params).then(response => {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.create.project.role'),
             description: this.$t('label.create.project.role')
           })
@@ -287,7 +289,8 @@ export default {
         projectid: this.resource.id,
         id: role.id
       }).then(response => {
-        this.$notification.success({
+        this.$showNotification({
+          type: 'success',
           message: this.$t('label.delete.project.role'),
           description: this.$t('label.delete.project.role')
         })
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index 273a62f51ac9..829f48cb9f4f 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -385,7 +385,8 @@ export default {
         this.actionLoading = true
         api('createSnapshotPolicy', params).then(json => {
           this.$emit('refresh')
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.action.recurring.snapshot'),
             description: this.$t('message.success.recurring.snapshot')
           })
diff --git a/ui/src/views/storage/ResizeVolume.vue b/ui/src/views/storage/ResizeVolume.vue
index 9b0771a3295f..49af842ed82f 100644
--- a/ui/src/views/storage/ResizeVolume.vue
+++ b/ui/src/views/storage/ResizeVolume.vue
@@ -125,7 +125,8 @@ export default {
           })
           this.closeModal()
         }).catch(error => {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: `${this.$t('label.error')} ${error.response.status}`,
             description: error.response.data.errorresponse.errortext,
             duration: 0
diff --git a/ui/src/views/storage/ScheduledSnapshots.vue b/ui/src/views/storage/ScheduledSnapshots.vue
index fc1610fd4622..ea1f429c482f 100644
--- a/ui/src/views/storage/ScheduledSnapshots.vue
+++ b/ui/src/views/storage/ScheduledSnapshots.vue
@@ -162,7 +162,8 @@ export default {
       this.actionLoading = true
       api('deleteSnapshotPolicies', params).then(json => {
         if (json.deletesnapshotpoliciesresponse.success) {
-          this.$notification.success({
+          this.$showNotification({
+            type: 'success',
             message: this.$t('label.delete.snapshot.policy'),
             description: this.$t('message.success.delete.snapshot.policy')
           })
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index dfb2cb0bfdb7..68876876f9ed 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -191,7 +191,8 @@ export default {
           this.uploadParams = (json.postuploadvolumeresponse && json.postuploadvolumeresponse.getuploadparams) ? json.postuploadvolumeresponse.getuploadparams : ''
           const { fileList } = this
           if (this.fileList.length > 1) {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.upload.volume.failed'),
               description: this.$t('message.upload.file.limit'),
               duration: 0
@@ -216,13 +217,15 @@ export default {
               },
               timeout: 86400000
             }).then((json) => {
-            this.$notification.success({
+            this.$showNotification({
+              type: 'success',
               message: this.$t('message.success.upload'),
               description: this.$t('message.success.upload.volume.description')
             })
             this.closeAction()
           }).catch(e => {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.upload.failed'),
               description: `${this.$t('message.upload.iso.failed.description')} -  ${e}`,
               duration: 0
diff --git a/ui/src/views/tools/ImportUnmanagedInstance.vue b/ui/src/views/tools/ImportUnmanagedInstance.vue
index 6edb065ef145..e1dd3056d9a5 100644
--- a/ui/src/views/tools/ImportUnmanagedInstance.vue
+++ b/ui/src/views/tools/ImportUnmanagedInstance.vue
@@ -631,7 +631,8 @@ export default {
           displayname: values.displayname
         }
         if (!this.computeOffering || !this.computeOffering.id) {
-          this.$notification.error({
+          this.$showNotification({
+            type: 'error',
             message: this.$t('message.request.failed'),
             description: this.$t('message.step.2.continue')
           })
@@ -642,7 +643,8 @@ export default {
           var details = [this.cpuNumberKey, this.cpuSpeedKey, this.memoryKey]
           for (var detail of details) {
             if (!(values[detail] || this.computeOffering[detail])) {
-              this.$notification.error({
+              this.$showNotification({
+                type: 'error',
                 message: this.$t('message.request.failed'),
                 description: this.$t('message.please.enter.valid.value') + ': ' + this.$t('label.' + detail.toLowerCase())
               })
@@ -657,7 +659,8 @@ export default {
           var iopsDetails = [this.minIopsKey, this.maxIopsKey]
           for (var iopsDetail of iopsDetails) {
             if (!values[iopsDetail] || values[iopsDetail] < 0) {
-              this.$notification.error({
+              this.$showNotification({
+                type: 'error',
                 message: this.$t('message.request.failed'),
                 description: this.$t('message.please.enter.valid.value') + ': ' + this.$t('label.' + iopsDetail.toLowerCase())
               })
@@ -666,7 +669,8 @@ export default {
             params['details[0].' + iopsDetail] = values[iopsDetail]
           }
           if (values[this.minIopsKey] > values[this.maxIopsKey]) {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.request.failed'),
               description: this.$t('error.form.message')
             })
@@ -684,7 +688,8 @@ export default {
         var diskOfferingIndex = 0
         for (var diskId in this.dataDisksOfferingsMapping) {
           if (!this.dataDisksOfferingsMapping[diskId]) {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.request.failed'),
               description: this.$t('message.select.disk.offering') + ': ' + diskId
             })
@@ -698,7 +703,8 @@ export default {
         var nicIpIndex = 0
         for (var nicId in this.nicsNetworksMapping) {
           if (!this.nicsNetworksMapping[nicId].network) {
-            this.$notification.error({
+            this.$showNotification({
+              type: 'error',
               message: this.$t('message.request.failed'),
               description: this.$t('message.select.nic.network') + ': ' + nicId
             })
@@ -709,7 +715,8 @@ export default {
           nicNetworkIndex++
           if ('ipAddress' in this.nicsNetworksMapping[nicId]) {
             if (!this.nicsNetworksMapping[nicId].ipAddress) {
-              this.$notification.error({
+              this.$showNotification({
+                type: 'error',
                 message: this.$t('message.request.failed'),
                 description: this.$t('message.enter.valid.nic.ip') + ': ' + nicId
               })
diff --git a/ui/tests/unit/views/AutogenView.spec.js b/ui/tests/unit/views/AutogenView.spec.js
index ba4d68c3b5d3..f8a67cd950df 100644
--- a/ui/tests/unit/views/AutogenView.spec.js
+++ b/ui/tests/unit/views/AutogenView.spec.js
@@ -52,21 +52,14 @@ mocks = {
   $notifyError: jest.fn((error) => {
     return error
   }),
-  $notification: {
-    info: jest.fn((option) => {
-      return {
-        message: option.message,
-        description: 'test-description',
-        duration: option.duration
-      }
-    }),
-    success: jest.fn((option) => {
-      return {
-        message: option.message,
-        description: option.description
-      }
-    })
-  },
+  $showNotification: jest.fn((option) => {
+    return {
+      type: option.type,
+      message: option.message,
+      description: 'test-description',
+      duration: option.duration
+    }
+  }),
   $message: {
     success: jest.fn((obj) => {
       return obj
@@ -1577,7 +1570,7 @@ describe('Views > AutogenView.vue', () => {
     })
 
     describe('pollActionCompletion()', () => {
-      it('check $notification when pollActionCompletion() is called with action is empty', (done) => {
+      it('check $showNotification when pollActionCompletion() is called with action is empty', (done) => {
         const mockData = {
           queryasyncjobresultresponse: {
             jobstatus: 1,
@@ -1595,7 +1588,7 @@ describe('Views > AutogenView.vue', () => {
         wrapper.vm.pollActionCompletion(jobId, action)
 
         setTimeout(() => {
-          expect(mocks.$notification.info).not.toHaveBeenCalled()
+          expect(mocks.$showNotification).not.toHaveBeenCalled()
           expect(mockAxios).toHaveBeenCalled()
           expect(mockAxios).toHaveBeenCalledWith({
             url: '/',
@@ -1612,7 +1605,7 @@ describe('Views > AutogenView.vue', () => {
         })
       })
 
-      it('check $notification when pollActionCompletion() is called with action is not empty', (done) => {
+      it('check $showNotification when pollActionCompletion() is called with action is not empty', (done) => {
         const mockData = {
           queryasyncjobresultresponse: {
             jobstatus: 1,
@@ -1633,8 +1626,9 @@ describe('Views > AutogenView.vue', () => {
         wrapper.vm.pollActionCompletion(jobId, action)
 
         setTimeout(() => {
-          expect(mocks.$notification.info).toHaveBeenCalled()
-          expect(mocks.$notification.info).toHaveLastReturnedWith({
+          expect(mocks.$showNotification).toHaveBeenCalled()
+          expect(mocks.$showNotification).toHaveLastReturnedWith({
+            type: 'info',
             message: 'test-name-en',
             description: 'test-description',
             duration: 0
@@ -2787,7 +2781,7 @@ describe('Views > AutogenView.vue', () => {
         })
       })
 
-      it('check $notification when api is called and response have not jobId result', async (done) => {
+      it('check $message when api is called and response have not jobId result', async (done) => {
         wrapper = factory({
           data: {
             showAction: true,
diff --git a/ui/tests/unit/views/compute/MigrateWizard.spec.js b/ui/tests/unit/views/compute/MigrateWizard.spec.js
index 57f7397efbab..6a99fc675f70 100644
--- a/ui/tests/unit/views/compute/MigrateWizard.spec.js
+++ b/ui/tests/unit/views/compute/MigrateWizard.spec.js
@@ -29,9 +29,7 @@ mocks = {
   $message: {
     error: jest.fn((message) => {})
   },
-  $notification: {
-    error: jest.fn((message) => {})
-  },
+  $showNotification: jest.fn((obj) => {}),
   $pollJob: jest.fn((obj) => {
     switch (obj.jobId) {
       case 'test-job-id-case-1':
@@ -754,8 +752,9 @@ describe('Views > compute > MigrateWizard.vue', () => {
         await wrapper.vm.submitForm()
 
         setTimeout(() => {
-          expect(mocks.$notification.error).toHaveBeenCalled()
-          expect(mocks.$notification.error).toHaveBeenCalledWith({
+          expect(mocks.$showNotification).toHaveBeenCalled()
+          expect(mocks.$showNotification).toHaveBeenCalledWith({
+            type: 'error',
             message: i18n.t('message.request.failed'),
             description: 'Error: throw error message',
             duration: 0

From bdacdd6370d7a26ff38449be0562a31ec74135fe Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 5 Oct 2021 09:13:36 +0700
Subject: [PATCH 2/6] change position set count notify

---
 ui/src/utils/plugins.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index bf1defa767ef..7359133323e9 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -234,6 +234,8 @@ export const notifierPlugin = {
     }
 
     Vue.prototype.$showNotification = function (config) {
+      countNotify++
+      store.commit('SET_COUNT_NOTIFY', countNotify)
       const defaultConfig = {
         top: '65px',
         onClose: () => {
@@ -257,8 +259,6 @@ export const notifierPlugin = {
           notification.warning(config)
           break
       }
-      countNotify++
-      store.commit('SET_COUNT_NOTIFY', countNotify)
     }
   }
 }

From 0183801f7c8c3735c6b45b0cf02c2db2ec8cb4e9 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 5 Oct 2021 09:19:08 +0700
Subject: [PATCH 3/6] get notification count

---
 ui/src/utils/plugins.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 7359133323e9..93183801ff17 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -22,8 +22,6 @@ import { message, notification } from 'ant-design-vue'
 import eventBus from '@/config/eventBus'
 import store from '@/store'
 
-let countNotify = 0
-
 export const pollJobPlugin = {
   install (Vue) {
     Vue.prototype.$pollJob = function (options) {
@@ -134,6 +132,7 @@ export const pollJobPlugin = {
             desc = `(${name}) ${desc}`
           }
           if (!bulkAction) {
+            let countNotify = store.getters.countNotify
             countNotify++
             store.commit('SET_COUNT_NOTIFY', countNotify)
             notification.error({
@@ -177,6 +176,7 @@ export const pollJobPlugin = {
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)
+        let countNotify = store.getters.countNotify
         countNotify++
         store.commit('SET_COUNT_NOTIFY', countNotify)
         notification.error({
@@ -219,6 +219,7 @@ export const notifierPlugin = {
           }
         }
       }
+      let countNotify = store.getters.countNotify
       countNotify++
       store.commit('SET_COUNT_NOTIFY', countNotify)
       notification.error({
@@ -234,6 +235,7 @@ export const notifierPlugin = {
     }
 
     Vue.prototype.$showNotification = function (config) {
+      let countNotify = store.getters.countNotify
       countNotify++
       store.commit('SET_COUNT_NOTIFY', countNotify)
       const defaultConfig = {

From f98fe1dac48e8d651f0571157d3fc52658eadafe Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 5 Oct 2021 09:21:44 +0700
Subject: [PATCH 4/6] set label transliteration

---
 ui/public/locales/en.json             | 1 +
 ui/src/components/header/UserMenu.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index ba60c9cdb1d1..4fa554b60678 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -570,6 +570,7 @@
 "label.cks.cluster.size": "Cluster size (Worker nodes)",
 "label.cleanup": "Clean up",
 "label.clear": "Clear",
+"label.clear.all.notify": "Clear all notification",
 "label.clear.list": "Clear list",
 "label.close": "Close",
 "label.cloud.console": "Cloud Management Console",
diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index f185b9cc7a58..15c17b8202ee 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -18,7 +18,7 @@
 <template>
   <div class="user-menu">
 
-    <a-tooltip v-if="countNotify > 0" title="Clear all notification" class="action button-clear-notification" @click="clearAllNotify">
+    <a-tooltip v-if="countNotify > 0" :title="$t('label.clear.all.notify')" class="action button-clear-notification" @click="clearAllNotify">
       <a-icon type="bell" class="bell-icon" />
       <a-icon type="stop" class="clear-icon" />
     </a-tooltip>

From e74168cbd44cb4917487b256a7a5e4a16130a827 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 5 Oct 2021 12:55:19 +0700
Subject: [PATCH 5/6] add margin for notification

---
 ui/src/permission.js    | 1 +
 ui/src/utils/plugins.js | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/ui/src/permission.js b/ui/src/permission.js
index bd07ad1d81d3..883badad0c47 100644
--- a/ui/src/permission.js
+++ b/ui/src/permission.js
@@ -82,6 +82,7 @@ router.beforeEach((to, from, next) => {
             countNotify++
             store.commit('SET_COUNT_NOTIFY', countNotify)
             notification.error({
+              top: '65px',
               message: 'Error',
               description: i18n.t('message.error.discovering.feature'),
               duration: 0,
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 93183801ff17..5f32cf2b9318 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -136,6 +136,7 @@ export const pollJobPlugin = {
             countNotify++
             store.commit('SET_COUNT_NOTIFY', countNotify)
             notification.error({
+              top: '65px',
               message: errMessage,
               description: desc,
               key: jobId,
@@ -180,6 +181,7 @@ export const pollJobPlugin = {
         countNotify++
         store.commit('SET_COUNT_NOTIFY', countNotify)
         notification.error({
+          top: '65px',
           message: i18n.t('label.error'),
           description: catchMessage,
           duration: 0,
@@ -223,6 +225,7 @@ export const notifierPlugin = {
       countNotify++
       store.commit('SET_COUNT_NOTIFY', countNotify)
       notification.error({
+        top: '65px',
         message: msg,
         description: desc,
         duration: 0,

From b1131fb440fc6da10c7dbeb252b61c8429e51c4d Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 6 Oct 2021 08:29:11 +0700
Subject: [PATCH 6/6] change position of clear notification button

---
 ui/public/locales/en.json               |  2 +-
 ui/src/components/header/UserMenu.vue   | 19 -------------------
 ui/src/components/page/GlobalLayout.vue | 20 +++++++++++++++++++-
 ui/src/layouts/UserLayout.vue           | 22 +++++++++++++++++++++-
 ui/src/style/dark-mode.less             |  4 ++++
 ui/src/style/vars.less                  |  7 +++++++
 6 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 4fa554b60678..33d7ba93d0f5 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -570,7 +570,7 @@
 "label.cks.cluster.size": "Cluster size (Worker nodes)",
 "label.cleanup": "Clean up",
 "label.clear": "Clear",
-"label.clear.all.notify": "Clear all notification",
+"label.clear.notification": "Clear notification",
 "label.clear.list": "Clear list",
 "label.close": "Close",
 "label.cloud.console": "Cloud Management Console",
diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index 15c17b8202ee..24b63ead5d47 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -18,10 +18,6 @@
 <template>
   <div class="user-menu">
 
-    <a-tooltip v-if="countNotify > 0" :title="$t('label.clear.all.notify')" class="action button-clear-notification" @click="clearAllNotify">
-      <a-icon type="bell" class="bell-icon" />
-      <a-icon type="stop" class="clear-icon" />
-    </a-tooltip>
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <label class="user-menu-server-info action" v-if="$config.multipleServer">
@@ -183,19 +179,4 @@ export default {
     }
   }
 }
-
-.button-clear-notification {
-  position: relative;
-
-  .bell-icon {
-    position: absolute;
-    left: 18px;
-    font-size: 12px;
-  }
-
-  .clear-icon {
-    font-size: 20px;
-    padding: 4px;
-  }
-}
 </style>
diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index 3eac55a109c7..87c5ef8ebfb7 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -91,6 +91,13 @@
         />
       </a-affix>
 
+      <a-button
+        v-if="showClear"
+        type="default"
+        size="small"
+        class="button-clear-notification"
+        @click="onClearNotification">{{ $t('label.clear.notification') }}</a-button>
+
       <!-- layout content -->
       <a-layout-content class="layout-content" :class="{'is-header-fixed': fixedHeader}">
         <slot></slot>
@@ -128,7 +135,8 @@ export default {
     return {
       collapsed: false,
       menus: [],
-      showSetting: false
+      showSetting: false,
+      showClear: false
     }
   },
   computed: {
@@ -161,6 +169,12 @@ export default {
       } else {
         document.body.classList.remove('dark-mode')
       }
+    },
+    '$store.getters.countNotify' (countNotify) {
+      this.showClear = false
+      if (countNotify && countNotify > 0) {
+        this.showClear = true
+      }
     }
   },
   provide: function () {
@@ -212,6 +226,10 @@ export default {
     },
     toggleSetting (showSetting) {
       this.showSetting = showSetting
+    },
+    onClearNotification () {
+      this.$notification.destroy()
+      this.$store.commit('SET_COUNT_NOTIFY', 0)
     }
   }
 }
diff --git a/ui/src/layouts/UserLayout.vue b/ui/src/layouts/UserLayout.vue
index e25bab4c8cbb..12b93e2086a9 100644
--- a/ui/src/layouts/UserLayout.vue
+++ b/ui/src/layouts/UserLayout.vue
@@ -17,6 +17,12 @@
 
 <template>
   <div id="userLayout" :class="['user-layout', device]">
+    <a-button
+      v-if="showClear"
+      type="default"
+      size="small"
+      class="button-clear-notification"
+      @click="onClearNotification">{{ $t('label.clear.notification') }}</a-button>
     <div class="user-layout-container">
       <div class="user-layout-header">
         <img
@@ -45,7 +51,9 @@ export default {
   components: { RouteView },
   mixins: [mixinDevice],
   data () {
-    return {}
+    return {
+      showClear: false
+    }
   },
   watch: {
     '$store.getters.darkMode' (darkMode) {
@@ -54,6 +62,12 @@ export default {
       } else {
         document.body.classList.remove('dark-mode')
       }
+    },
+    '$store.getters.countNotify' (countNotify) {
+      this.showClear = false
+      if (countNotify && countNotify > 0) {
+        this.showClear = true
+      }
     }
   },
   mounted () {
@@ -66,6 +80,12 @@ export default {
   beforeDestroy () {
     document.body.classList.remove('userLayout')
     document.body.classList.remove('dark-mode')
+  },
+  methods: {
+    onClearNotification () {
+      this.$notification.destroy()
+      this.$store.commit('SET_COUNT_NOTIFY', 0)
+    }
   }
 }
 </script>
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index 10534f7a27a0..db2d942373ec 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -901,4 +901,8 @@
   .ant-empty-normal {
     color: @dark-text-color-3;
   }
+
+  .button-clear-notification {
+    background-color: @dark-secondary-bgColor;
+  }
 }
\ No newline at end of file
diff --git a/ui/src/style/vars.less b/ui/src/style/vars.less
index 5422b2233d78..abf123540297 100644
--- a/ui/src/style/vars.less
+++ b/ui/src/style/vars.less
@@ -344,3 +344,10 @@ a {
     border-color: @primary-color;
   }
 }
+
+.button-clear-notification {
+  position: fixed;
+  right: 287px;
+  top: 35px;
+  z-index: 1001;
+}