autogen: implement action response handler notification framework

This fixes #35
This fixes #51
This closes #78

This adds the following:
- Download iso, template, volume handler to show link
- Show VM password on VM start and upon reset password action

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

Author: yadvr

ui/src/config/section/compute.js

@@ -81,7 +81,8 @@ export default {
           dataView: true,
           groupAction: true,
           show: (record) => { return ['Stopped'].includes(record.state) },
-          args: ['podid', 'clusterid', 'hostid']
+          args: ['podid', 'clusterid', 'hostid'],
+          response: (result) => { return result.virtualmachine && result.virtualmachine.password ? `Password of the VM is ${result.virtualmachine.password}` : null }
         },
         {
           api: 'stopVirtualMachine',
@@ -214,7 +215,8 @@ export default {
           icon: 'key',
           label: 'Reset Instance Password',
           dataView: true,
-          show: (record) => { return ['Stopped'].includes(record.state) }
+          show: (record) => { return ['Stopped'].includes(record.state) },
+          response: (result) => { return result.virtualmachine && result.virtualmachine.password ? `Password of the VM is ${result.virtualmachine.password}` : null }
         },
         {
           api: 'resetSSHKeyForVirtualMachine',

ui/src/config/section/image.js

@@ -72,7 +72,17 @@ export default {
           icon: 'cloud-download',
           label: 'Download Template',
           dataView: true,
-          args: ['zoneid', 'mode']
+          show: (record) => { return record && record.isextractable },
+          args: ['zoneid', 'mode'],
+          mapping: {
+            zoneid: {
+              value: (record) => { return record.zoneid }
+            },
+            mode: {
+              value: (record) => { return 'HTTP_DOWNLOAD' }
+            }
+          },
+          response: (result) => { return `Please click <a href="${result.template.url}" target="_blank">${result.template.url}</a> to download.` }
         },
         {
           api: 'updateTemplatePermissions',
@@ -140,12 +150,17 @@ export default {
           icon: 'cloud-download',
           label: 'Download ISO',
           dataView: true,
+          show: (record) => { return record && record.isextractable },
           args: ['zoneid', 'mode'],
           mapping: {
+            zoneid: {
+              value: (record) => { return record.zoneid }
+            },
             mode: {
               value: (record) => { return 'HTTP_DOWNLOAD' }
             }
-          }
+          },
+          response: (result) => { return `Please click <a href="${result.iso.url}" target="_blank">${result.iso.url}</a> to download.` }
         },
         {
           api: 'updateIsoPermissions',

ui/src/config/section/storage.js

@@ -133,6 +133,7 @@ export default {
           icon: 'cloud-download',
           label: 'Download Volume',
           dataView: true,
+          show: (record) => { return record && record.state === 'Ready' },
           args: ['zoneid', 'mode'],
           mapping: {
             zoneid: {
@@ -141,7 +142,8 @@ export default {
             mode: {
               value: (record) => { return 'HTTP_DOWNLOAD' }
             }
-          }
+          },
+          response: (result) => { return `Please click <a href="${result.volume.url}" target="_blank">${result.volume.url}</a> to download.` }
         },
         {
           api: 'createTemplate',

ui/src/utils/plugins.js

@@ -32,6 +32,7 @@ export const pollJobPlugin = {
        * @param {String} [catchMessage=Error caught]
        * @param {Function} [catchMethod=() => {}]
        * @param {Number} [loadingDuration=3]
+       * @param {Object} [action=null]
        */
       const {
         jobId,
@@ -42,25 +43,26 @@ export const pollJobPlugin = {
         loadingMessage = 'Loading...',
         catchMessage = 'Error caught',
         catchMethod = () => {},
-        loadingDuration = 3
+        loadingDuration = 3,
+        action = null
       } = options
 
       api('queryAsyncJobResult', { jobId }).then(json => {
         const result = json.queryasyncjobresultresponse
 
         if (result.jobstatus === 1) {
           message.success(successMessage)
-          successMethod()
+          successMethod(result)
         } else if (result.jobstatus === 2) {
           notification.error({
             message: errorMessage,
             description: result.jobresult.errortext
           })
-          errorMethod()
+          errorMethod(result)
         } else if (result.jobstatus === 0) {
           message
             .loading(loadingMessage, loadingDuration)
-            .then(() => this.$pollJob(options))
+            .then(() => this.$pollJob(options, action))
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)

ui/src/views/AutogenView.vue

@@ -243,6 +243,7 @@
 <script>
 import { api } from '@/api'
 import { mixinDevice } from '@/utils/mixin.js'
+import { genericCompare } from '@/utils/sort.js'
 import config from '@/config/settings'
 import store from '@/store'
 
@@ -252,7 +253,6 @@ import Status from '@/components/widgets/Status'
 import ListView from '@/components/view/ListView'
 import ResourceView from '@/components/view/ResourceView'
 import TreeView from '@/components/view/TreeView'
-import { genericCompare } from '@/utils/sort.js'
 
 export default {
   name: 'Resource',
@@ -577,19 +577,25 @@ export default {
       })
     },
     pollActionCompletion (jobId, action) {
-      api('queryAsyncJobResult', { jobid: jobId }).then(json => {
-        var result = json.queryasyncjobresultresponse
-        if (result.jobstatus === 1) {
-          this.fetchData()
-        } else if (result.jobstatus === 2) {
+      this.$pollJob({
+        jobId,
+        successMethod: result => {
           this.fetchData()
-        } else if (result.jobstatus === 0) {
-          this.$message
-            .loading(this.$t(action.label) + ' in progress for ' + this.resource.name, 3)
-            .then(() => this.pollActionCompletion(jobId, action))
-        }
-      }).catch(function (e) {
-        console.log('Error encountered while fetching async job result' + e)
+          if (action.response) {
+            const description = action.response(result.jobresult)
+            if (description) {
+              this.$notification.info({
+                message: action.label,
+                description: (<span domPropsInnerHTML={description}></span>),
+                duration: 0
+              })
+            }
+          }
+        },
+        errorMethod: () => this.fetchData(),
+        loadingMessage: `${this.$t(action.label)} in progress for ${this.resource.name}`,
+        catchMessage: 'Error encountered while fetching async job result',
+        action
       })
     },
     handleSubmit (e) {