From ff4b49bdb7e05eb0f6664a1f60c4e5ceb1ddf0f2 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Tue, 7 Sep 2021 09:26:12 +0530
Subject: [PATCH] UI: Add router links to notifications and show error
 description (#5402)

---
 ui/src/components/header/HeaderNotice.vue    |  9 ++++---
 ui/src/utils/plugins.js                      | 27 +++++++++++++++++---
 ui/src/views/AutogenView.vue                 | 18 ++-----------
 ui/src/views/compute/StartVirtualMachine.vue |  3 ---
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/ui/src/components/header/HeaderNotice.vue b/ui/src/components/header/HeaderNotice.vue
index fb6b3c51e5b..72ea2a34815 100644
--- a/ui/src/components/header/HeaderNotice.vue
+++ b/ui/src/components/header/HeaderNotice.vue
@@ -33,11 +33,12 @@
             </a-list-item-meta>
           </a-list-item>
           <a-list-item v-for="(notice, index) in notices" :key="index">
-            <a-list-item-meta :title="notice.title" :description="notice.description">
+            <div slot="title"> {{ notice.path }} </div>
+            <a-list-item-meta :title="notice.title">
               <a-avatar :style="notificationAvatar[notice.status].style" :icon="notificationAvatar[notice.status].icon" slot="avatar"/>
-              <span v-if="getResourceName(notice.description, 'name') && notice.path" slot="description"><router-link :to="{ path: notice.path}"> {{ getResourceName(notice.description, "name") + ' - ' }}</router-link></span>
-              <span v-if="getResourceName(notice.description, 'name') && notice.path" slot="description"> {{ getResourceName(notice.description, "msg") }}</span>
-              <span v-else slot="description"> {{ notice.description }} </span>
+              <span slot="description" v-if="getResourceName(notice.description, 'name') && notice.path"><router-link :to="{ path: notice.path}"> {{ getResourceName(notice.description, "name") + ' - ' }}</router-link></span>
+              <span slot="description" v-if="getResourceName(notice.description, 'name') && notice.path"> {{ getResourceName(notice.description, "msg") }}</span>
+              <span slot="description" v-else> {{ notice.description }} </span>
             </a-list-item-meta>
           </a-list-item>
         </a-list>
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 947052ce0ac..8d196157fa0 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -40,6 +40,7 @@ export const pollJobPlugin = {
        * @param {Function} [catchMethod=() => {}]
        * @param {Object} [action=null]
        * @param {Object} [bulkAction=false]
+       * @param {String} resourceId
        */
       const {
         jobId,
@@ -55,7 +56,8 @@ export const pollJobPlugin = {
         catchMessage = i18n.t('label.error.caught'),
         catchMethod = () => {},
         action = null,
-        bulkAction = false
+        bulkAction = false,
+        resourceId = null
       } = options
 
       store.dispatch('AddHeaderNotice', {
@@ -65,9 +67,26 @@ export const pollJobPlugin = {
         status: 'progress'
       })
 
+      eventBus.$on('update-job-details', (jobId, resourceId) => {
+        const fullPath = this.$route.fullPath
+        const path = this.$route.path
+        var jobs = this.$store.getters.headerNotices.map(job => {
+          if (job.key === jobId) {
+            if (resourceId && !path.includes(resourceId)) {
+              job.path = path + '/' + resourceId
+            } else {
+              job.path = fullPath
+            }
+          }
+          return job
+        })
+        this.$store.commit('SET_HEADER_NOTICES', jobs)
+      })
+
       options.originalPage = options.originalPage || this.$router.currentRoute.path
       api('queryAsyncJobResult', { jobId }).then(json => {
         const result = json.queryasyncjobresultresponse
+        eventBus.$emit('update-job-details', jobId, resourceId)
         if (result.jobstatus === 1) {
           var content = successMessage
           if (successMessage === 'Success' && action && action.label) {
@@ -88,7 +107,7 @@ export const pollJobPlugin = {
             status: 'done',
             duration: 2
           })
-
+          eventBus.$emit('update-job-details', jobId, resourceId)
           // Ensure we refresh on the same / parent page
           const currentPage = this.$router.currentRoute.path
           const samePage = options.originalPage === currentPage || options.originalPage.startsWith(currentPage + '/')
@@ -123,11 +142,11 @@ export const pollJobPlugin = {
           store.dispatch('AddHeaderNotice', {
             key: jobId,
             title: title,
-            description: description,
+            description: desc,
             status: 'failed',
             duration: 2
           })
-
+          eventBus.$emit('update-job-details', jobId, resourceId)
           // Ensure we refresh on the same / parent page
           const currentPage = this.$router.currentRoute.path
           const samePage = options.originalPage === currentPage || options.originalPage.startsWith(currentPage + '/')
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 3a2900ca37e..c8216382fa1 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -500,21 +500,6 @@ export default {
         })
       }
     })
-    eventBus.$on('update-job-details', (jobId, resourceId) => {
-      const fullPath = this.$route.fullPath
-      const path = this.$route.path
-      var jobs = this.$store.getters.headerNotices.map(job => {
-        if (job.jobid === jobId) {
-          if (resourceId && !path.includes(resourceId)) {
-            job.path = path + '/' + resourceId
-          } else {
-            job.path = fullPath
-          }
-        }
-        return job
-      })
-      this.$store.commit('SET_HEADER_NOTICES', jobs)
-    })
 
     eventBus.$on('update-resource-state', (selectedItems, resource, state, jobid) => {
       if (selectedItems.length === 0) {
@@ -1064,7 +1049,8 @@ export default {
           showLoading: showLoading,
           catchMessage: this.$t('error.fetching.async.job.result'),
           action,
-          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
+          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal,
+          resourceId: resource
         })
       })
     },
diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index c1e7d3de124..8c905f6df68 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -100,7 +100,6 @@
 
 <script>
 import { api } from '@/api'
-import eventBus from '@/config/eventBus'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
@@ -232,8 +231,6 @@ export default {
             successMessage: `${this.$t('label.action.start.instance')} ${this.resource.name}`,
             response: (result) => { return result.virtualmachine && result.virtualmachine.password ? `The password of VM <b>${result.virtualmachine.displayname}</b> is <b>${result.virtualmachine.password}</b>` : null }
           })
-          const resourceId = this.resource.id
-          eventBus.$emit('update-job-details', jobId, resourceId)
           this.closeAction()
         }).catch(error => {
           this.$notifyError(error)