notification: job messaging improvements

With this change, pollJob and notification widget will end up displaying
the same message (instead of notification). Notifications on right-top
side will only be shown in case of error or response (such as a password
or a download link etc).

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/header/HeaderNotice.vue

@@ -88,9 +88,12 @@ export default {
             var result = json.queryasyncjobresultresponse
             if (result.jobstatus === 1 && this.jobs[i].status !== 'done') {
               hasUpdated = true
-              this.$notification.success({
-                message: this.jobs[i].title,
-                description: this.jobs[i].description
+              const title = this.jobs[i].title
+              const description = this.jobs[i].description
+              this.$message.success({
+                content: title + (description ? ' - ' + description : ''),
+                key: this.jobs[i].jobid,
+                duration: 2
               })
               this.jobs[i].status = 'done'
             } else if (result.jobstatus === 2 && this.jobs[i].status !== 'failed') {
@@ -101,7 +104,8 @@ export default {
               }
               this.$notification.error({
                 message: this.jobs[i].title,
-                description: this.jobs[i].description
+                description: this.jobs[i].description,
+                duration: 0
               })
             }
           }).catch(function (e) {

ui/src/utils/plugins.js

@@ -16,6 +16,7 @@
 // under the License.
 
 import _ from 'lodash'
+import i18n from '@/locales'
 import { api } from '@/api'
 import { message, notification } from 'ant-design-vue'
 
@@ -25,6 +26,7 @@ export const pollJobPlugin = {
     Vue.prototype.$pollJob = function (options) {
       /**
        * @param {String} jobId
+       * @param {String} [name='']
        * @param {String} [successMessage=Success]
        * @param {Function} [successMethod=() => {}]
        * @param {String} [errorMessage=Error]
@@ -32,11 +34,11 @@ export const pollJobPlugin = {
        * @param {String} [loadingMessage=Loading...]
        * @param {String} [catchMessage=Error caught]
        * @param {Function} [catchMethod=() => {}]
-       * @param {Number} [loadingDuration=3]
        * @param {Object} [action=null]
        */
       const {
         jobId,
+        name = '',
         successMessage = 'Success',
         successMethod = () => {},
         errorMessage = 'Error',
@@ -44,26 +46,41 @@ export const pollJobPlugin = {
         loadingMessage = 'Loading...',
         catchMessage = 'Error caught',
         catchMethod = () => {},
-        loadingDuration = 3,
         action = null
       } = options
 
       api('queryAsyncJobResult', { jobId }).then(json => {
         const result = json.queryasyncjobresultresponse
-
         if (result.jobstatus === 1) {
-          message.success(successMessage)
+          var content = successMessage
+          if (successMessage === 'Success' && action && action.label) {
+            content = i18n.t(action.label)
+          }
+          if (name) {
+            content = content + ' - ' + name
+          }
+          message.success({
+            content: content,
+            key: jobId,
+            duration: 2
+          })
           successMethod(result)
         } else if (result.jobstatus === 2) {
           notification.error({
             message: errorMessage,
-            description: result.jobresult.errortext
+            description: result.jobresult.errortext,
+            duration: 0
           })
           errorMethod(result)
         } else if (result.jobstatus === 0) {
-          message
-            .loading(loadingMessage, loadingDuration)
-            .then(() => this.$pollJob(options, action))
+          message.loading({
+            content: loadingMessage,
+            key: jobId,
+            duration: 0
+          })
+          setTimeout(() => {
+            this.$pollJob(options, action)
+          }, 3000)
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)

ui/src/utils/request.js

@@ -17,8 +17,8 @@
 
 import Vue from 'vue'
 import axios from 'axios'
-import store from '@/store'
 import config from '@/config/settings'
+import store from '@/store'
 import { VueAxios } from './axios'
 import notification from 'ant-design-vue/es/notification'
 import { ACCESS_TOKEN, CURRENT_PROJECT } from '@/store/mutation-types'

ui/src/views/AutogenView.vue

@@ -701,6 +701,7 @@ export default {
     pollActionCompletion (jobId, action, resourceName) {
       this.$pollJob({
         jobId,
+        name: resourceName,
         successMethod: result => {
           this.fetchData()
           if (action.response) {
@@ -715,7 +716,7 @@ export default {
           }
         },
         errorMethod: () => this.fetchData(),
-        loadingMessage: `${this.$t(action.label)} in progress for ${resourceName}`,
+        loadingMessage: `${this.$t(action.label)} - ${resourceName}`,
         catchMessage: 'Error encountered while fetching async job result',
         action
       })
@@ -808,10 +809,7 @@ export default {
                     hasJobId = true
                     break
                   } else {
-                    this.$notification.success({
-                      message: this.$t(this.currentAction.label),
-                      description: resourceName
-                    })
+                    this.$message.success(this.$t(this.currentAction.label) + (resourceName ? ' - ' + resourceName : ''))
                   }
                 }
                 break