ui: refactoring $notification according to the old version (apache#5819)

Related to PR apache#5549 changed the notification from $notification to $showNotification. This PR aims to change it back to the way it was for easier use while keeping the delete all button.
liangfengmic · Jan 3, 2022 · 4392cc4 · 4392cc4
1 parent 5f93bc8
commit 4392cc4
Show file tree

Hide file tree

Showing 73 changed files with 198 additions and 295 deletions.
diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
@@ -219,8 +219,7 @@ export default {
         apiName = 'updateTemplate'
       }
       if (!(apiName in this.$store.getters.apis)) {
-        this.$showNotification({
-          type: 'error',
+        this.$notification.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
@@ -514,8 +514,7 @@ export default {
           json.updateconfigurationresponse.configuration &&
           !json.updateconfigurationresponse.configuration.isdynamic &&
           ['Admin'].includes(this.$store.getters.userInfo.roletype)) {
-          this.$showNotification({
-            type: 'warning',
+          this.$notification.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
@@ -107,8 +107,7 @@ export default {
         this.dataResource = await this.listResourceLimits(params)
         this.formLoading = false
       } catch (e) {
-        this.$showNotification({
-          type: 'error',
+        this.$notification.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
@@ -164,8 +164,7 @@ export default {
       }).catch(error => {
         console.error(error)
         this.$message.error(this.$t('message.error.save.setting'))
-        this.$showNotification({
-          type: 'error',
+        this.$notification.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
@@ -234,15 +234,13 @@ export default {
       }).then(json => {
         console.log(this.resource)
         if (json?.uploadresourceiconresponse?.success) {
-          this.$showNotification({
-            type: 'success',
+          this.$notification.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.$showNotification({
-          type: 'error',
+        this.$notification.error({
           message: this.$t('label.upload.icon'),
           description: error?.response?.data?.uploadresourceiconresponse?.errortext || '',
           duration: 0
@@ -266,15 +264,13 @@ export default {
         resourceids: resourceid
       }).then(json => {
         if (json?.deleteresourceiconresponse?.success) {
-          this.$showNotification({
-            type: 'success',
+          this.$notification.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.$showNotification({
-          type: 'error',
+        this.$notification.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
@@ -152,8 +152,7 @@ export default {
             const vm = result.jobresult.virtualmachine || {}
             if (result.jobstatus === 1 && vm.password) {
               const name = vm.displayname || vm.name || vm.id
-              obj.$showNotification({
-                type: 'success',
+              obj.$notification.success({
                 message: `${obj.$t('label.reinstall.vm')}: ` + name,
                 description: `${obj.$t('label.password.reset.confirm')}: ` + vm.password,
                 duration: 0
@@ -362,8 +361,7 @@ export default {
             const vm = result.jobresult.virtualmachine || {}
             if (result.jobstatus === 1 && vm.password) {
               const name = vm.displayname || vm.name || vm.id
-              obj.$showNotification({
-                type: 'success',
+              obj.$notification.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/core/lazy_lib/components_use.js b/ui/src/core/lazy_lib/components_use.js
@@ -122,7 +122,6 @@ Vue.use(VueCropper)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message
-Vue.prototype.$notification = notification
 Vue.prototype.$info = Modal.info
 Vue.prototype.$success = Modal.success
 Vue.prototype.$error = Modal.error

diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
@@ -237,33 +237,47 @@ export const notifierPlugin = {
       })
     }
 
-    Vue.prototype.$showNotification = function (config) {
-      let countNotify = store.getters.countNotify
-      countNotify++
-      store.commit('SET_COUNT_NOTIFY', countNotify)
-      const defaultConfig = {
+    Vue.prototype.$notification = {
+      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
-      }
+      },
+      setCountNotify: () => {
+        let countNotify = store.getters.countNotify
+        countNotify++
+        store.commit('SET_COUNT_NOTIFY', countNotify)
+      },
+      info: (config) => {
+        Vue.prototype.$notification.setCountNotify()
+        config = Object.assign({}, Vue.prototype.$notification.defaultConfig, config)
+        notification.info(config)
+      },
+      error: (config) => {
+        Vue.prototype.$notification.setCountNotify()
+        config = Object.assign({}, Vue.prototype.$notification.defaultConfig, config)
+        notification.error(config)
+      },
+      success: (config) => {
+        Vue.prototype.$notification.setCountNotify()
+        config = Object.assign({}, Vue.prototype.$notification.defaultConfig, config)
+        notification.success(config)
+      },
+      warning: (config) => {
+        Vue.prototype.$notification.setCountNotify()
+        config = Object.assign({}, Vue.prototype.$notification.defaultConfig, config)
+        notification.warning(config)
+      },
+      warn: (config) => {
+        Vue.prototype.$notification.setCountNotify()
+        config = Object.assign({}, Vue.prototype.$notification.defaultConfig, config)
+        notification.warn(config)
+      },
+      close: (key) => notification.close(key),
+      destroy: () => notification.destroy()
     }
   }
 }

diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
@@ -1128,8 +1128,7 @@ export default {
             if (action.response) {
               const description = action.response(result.jobresult)
               if (description) {
-                this.$showNotification({
-                  type: 'info',
+                this.$notification.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
@@ -294,8 +294,7 @@ export default {
         [variableKey]: variableValue,
         networkids: this.selectedNetwork
       }).then(response => {
-        this.$showNotification({
-          type: 'success',
+        this.$notification.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
@@ -149,8 +149,7 @@ export default {
         id: this.resource.id,
         affinitygroupids: this.selectedRowKeys.join(',')
       }).then(response => {
-        this.$showNotification({
-          type: 'success',
+        this.$notification.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
@@ -198,8 +198,7 @@ export default {
       this.hiddenElement.click()
     },
     notifyCopied () {
-      this.$showNotification({
-        type: 'info',
+      this.$notification.info({
         message: this.$t('message.success.copy.clipboard')
       })
     },

diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -141,8 +141,7 @@ 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.$showNotification({
-                    type: 'success',
+                  this.$notification.success({
                     message: message,
                     duration: 0
                   })

diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
@@ -1491,48 +1491,43 @@ export default {
       this.form.validateFieldsAndScroll(options, async (err, values) => {
         if (err) {
           if (err.licensesaccepted) {
-            this.$showNotification({
+            this.$notification.error({
               type: 'error',
               message: this.$t('message.license.agreements.not.accepted'),
               description: this.$t('message.step.license.agreements.continue')
             })
             return
           }
 
-          this.$showNotification({
-            type: 'error',
+          this.$notification.error({
             message: this.$t('message.request.failed'),
             description: this.$t('error.form.message')
           })
           return
         }
 
         if (!values.templateid && !values.isoid) {
-          this.$showNotification({
-            type: 'error',
+          this.$notification.error({
             message: this.$t('message.request.failed'),
             description: this.$t('message.template.iso')
           })
           return
         } else if (values.isoid && (!values.diskofferingid || values.diskofferingid === '0')) {
-          this.$showNotification({
-            type: 'error',
+          this.$notification.error({
             message: this.$t('message.request.failed'),
             description: this.$t('message.step.3.continue')
           })
           return
         }
         if (!values.computeofferingid) {
-          this.$showNotification({
-            type: 'error',
+          this.$notification.error({
             message: this.$t('message.request.failed'),
             description: this.$t('message.step.2.continue')
           })
           return
         }
         if (this.error) {
-          this.$showNotification({
-            type: 'error',
+          this.$notification.error({
             message: this.$t('message.request.failed'),
             description: this.$t('error.form.message')
           })
@@ -1645,8 +1640,7 @@ export default {
                 }
               }
             } else {
-              this.$showNotification({
-                type: 'error',
+              this.$notification.error({
                 message: this.$t('message.request.failed'),
                 description: this.$t('message.step.4.continue')
               })
@@ -1708,8 +1702,7 @@ export default {
                 const vm = result.jobresult.virtualmachine
                 const name = vm.displayname || vm.name || vm.id
                 if (vm.password) {
-                  this.$showNotification({
-                    type: 'success',
+                  this.$notification.error({
                     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
@@ -321,8 +321,7 @@ export default {
             config.configdata !== '') {
             this.clusterConfig = config.configdata
           } else {
-            this.$showNotification({
-              type: 'error',
+            this.$notification.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
@@ -220,8 +220,7 @@ export default {
         })
         this.$emit('close-action')
       }).catch(error => {
-        this.$showNotification({
-          type: 'error',
+        this.$notification.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
@@ -166,8 +166,7 @@ export default {
           this.$pollJob({
             jobId,
             successMethod: result => {
-              this.$showNotification({
-                type: 'success',
+              this.$notification.success({
                 message: this.$t('message.success.change.offering')
               })
             },

diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
@@ -143,8 +143,7 @@ export default {
       api('listPods', params).then(json => {
         this.pods = json.listpodsresponse.pod || []
         if (this.pods.length === 0) {
-          this.$showNotification({
-            type: 'error',
+          this.$notification.error({
             message: 'No pods found',
             duration: 0
           })
@@ -163,8 +162,7 @@ export default {
       api('listClusters', params).then(json => {
         this.clusters = json.listclustersresponse.cluster || []
         if (this.clusters.length === 0) {
-          this.$showNotification({
-            type: 'error',
+          this.$notification.error({
             message: 'No clusters found',
             duration: 0
           })
@@ -186,8 +184,7 @@ export default {
       api('listHosts', params).then(json => {
         this.hosts = json.listhostsresponse.host || []
         if (this.hosts.length === 0) {
-          this.$showNotification({
-            type: 'error',
+          this.$notification.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
@@ -157,8 +157,7 @@ export default {
       this.actionLoading = true
       api('deleteBackupSchedule', params).then(json => {
         if (json.deletebackupscheduleresponse.success) {
-          this.$showNotification({
-            type: 'success',
+          this.$notification.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
@@ -284,8 +284,7 @@ export default {
         }
         this.actionLoading = true
         api('createBackupSchedule', params).then(json => {
-          this.$showNotification({
-            type: 'success',
+          this.$notification.success({
             message: this.$t('label.scheduled.backups'),
             description: this.$t('message.success.config.backup.schedule')
           })