config: implement group actions for vm, event and alerts

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

ui/src/components/view/ActionButton.vue

@@ -31,9 +31,10 @@
         :overflowCount="9"
         :count="actionBadge[action.api] ? actionBadge[action.api].badgeNum : 0"
         v-if="action.api in $store.getters.apis &&
-          action.showBadge &&
-          ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)) &&
-          ('show' in action ? action.show(resource, $store.getters) : true)">
+          action.showBadge && (
+            (!dataView && (action.listView || (action.groupAction && selectedRowKeys.length > 0))) ||
+            (dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
+          )" >
         <a-button
           :icon="action.icon"
           :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
@@ -47,9 +48,10 @@
       </a-badge>
       <a-button
         v-if="action.api in $store.getters.apis &&
-          !action.showBadge &&
-          ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)) &&
-          ('show' in action ? action.show(resource, $store.getters) : true)"
+          !action.showBadge && (
+            (!dataView && (action.listView || (action.groupAction && selectedRowKeys.length > 0))) ||
+            (dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
+          )"
         :icon="action.icon"
         :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
         :shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"

ui/src/components/view/ListView.vue

@@ -23,7 +23,7 @@
     :dataSource="items"
     :rowKey="record => record.id || record.name"
     :pagination="false"
-    :rowSelection="['vm-tbd', 'event-tbd', 'alert-tbd'].includes($route.name) ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+    :rowSelection="['vm', 'event', 'alert'].includes($route.name) ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
     :rowClassName="getRowClassName"
     style="overflow-y: auto"
   >
@@ -287,9 +287,15 @@ export default {
       }
       return 'dark-row'
     },
-    onSelectChange (selectedRowKeys) {
-      console.log('selectedRowKeys changed: ', selectedRowKeys)
-      this.selectedRowKeys = selectedRowKeys
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
     },
     changeProject (project) {
       this.$store.dispatch('SetProject', project)

ui/src/config/section/compute.js

@@ -108,6 +108,7 @@ export default {
           docHelp: 'adminguide/virtual_machines.html#stopping-and-starting-vms',
           dataView: true,
           groupAction: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) },
           show: (record) => { return ['Stopped'].includes(record.state) },
           args: (record, store) => {
             var fields = []
@@ -131,6 +132,7 @@ export default {
           docHelp: 'adminguide/virtual_machines.html#stopping-and-starting-vms',
           dataView: true,
           groupAction: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) },
           args: ['forced'],
           show: (record) => { return ['Running'].includes(record.state) }
         },
@@ -387,7 +389,6 @@ export default {
           icon: 'disconnect',
           label: 'label.action.unmanage.virtualmachine',
           dataView: true,
-          groupAction: true,
           show: (record) => { return ['Running', 'Stopped'].includes(record.state) && record.hypervisor === 'VMware' }
         },
         {
@@ -414,6 +415,7 @@ export default {
           },
           dataView: true,
           groupAction: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x, expunge: true } }) },
           show: (record) => { return ['Running', 'Stopped', 'Error'].includes(record.state) }
         }
       ]

ui/src/config/section/event.js

@@ -35,8 +35,9 @@ export default {
       label: 'label.archive.events',
       message: 'message.confirm.archive.selected.events',
       docHelp: 'adminguide/events.html#deleting-and-archiving-events-and-alerts',
-      listView: false,
       dataView: true,
+      groupAction: true,
+      groupMap: (selection) => { return [{ ids: selection.join(',') }] },
       args: ['ids'],
       mapping: {
         ids: {
@@ -50,8 +51,9 @@ export default {
       label: 'label.delete.events',
       message: 'message.confirm.remove.selected.events',
       docHelp: 'adminguide/events.html#deleting-and-archiving-events-and-alerts',
-      listView: false,
       dataView: true,
+      groupAction: true,
+      groupMap: (selection) => { return [{ ids: selection.join(',') }] },
       args: ['ids'],
       mapping: {
         ids: {

ui/src/config/section/infra.js

@@ -82,6 +82,8 @@ export default {
           message: 'message.confirm.archive.selected.alerts',
           docHelp: 'adminguide/events.html#deleting-and-archiving-events-and-alerts',
           dataView: true,
+          groupAction: true,
+          groupMap: (selection) => { return [{ ids: selection.join(',') }] },
           args: ['ids'],
           mapping: {
             ids: {
@@ -96,6 +98,8 @@ export default {
           message: 'message.confirm.remove.selected.alerts',
           docHelp: 'adminguide/events.html#deleting-and-archiving-events-and-alerts',
           dataView: true,
+          groupAction: true,
+          groupMap: (selection) => { return [{ ids: selection.join(',') }] },
           args: ['ids'],
           mapping: {
             ids: {

ui/src/views/AutogenView.vue

@@ -142,6 +142,7 @@
           <a-form
             :form="form"
             @submit="handleSubmit"
+            v-show="dataView || !currentAction.groupAction || this.selectedRowKeys.length === 0"
             layout="vertical" >
             <a-form-item
               v-for="(field, fieldIndex) in currentAction.paramFields"
@@ -292,6 +293,8 @@
         :loading="loading"
         :columns="columns"
         :items="items"
+        ref="listview"
+        @selection-change="onRowSelectionChange"
         @refresh="this.fetchData" />
       <a-pagination
         class="row-element"
@@ -364,11 +367,6 @@ export default {
       confirmDirty: false
     }
   },
-  computed: {
-    hasSelected () {
-      return this.selectedRowKeys.length > 0
-    }
-  },
   beforeCreate () {
     this.form = this.$form.createForm(this)
   },
@@ -451,6 +449,10 @@ export default {
         this.dataView = false
       }
 
+      if ('listview' in this.$refs && this.$refs.listview) {
+        this.$refs.listview.resetSelection()
+      }
+
       if (this.$route && this.$route.meta && this.$route.meta.permission) {
         this.apiName = this.$route.meta.permission[0]
         if (this.$route.meta.columns) {
@@ -623,6 +625,9 @@ export default {
       this.showAction = false
       this.currentAction = {}
     },
+    onRowSelectionChange (selection) {
+      this.selectedRowKeys = selection
+    },
     execAction (action) {
       const self = this
       this.form = this.$form.createForm(this)
@@ -783,6 +788,30 @@ export default {
       })
     },
     handleSubmit (e) {
+      if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
+        const paramsList = this.currentAction.groupMap(this.selectedRowKeys)
+        this.actionLoading = true
+        for (const params of paramsList) {
+          api(this.currentAction.api, params).then(json => {
+          }).catch(error => {
+            this.$notifyError(error)
+          })
+        }
+        this.$message.info({
+          content: this.$t(this.currentAction.label),
+          key: this.currentAction.label,
+          duration: 3
+        })
+        setTimeout(() => {
+          this.actionLoading = false
+          this.closeAction()
+          this.fetchData()
+        }, 2000)
+      } else {
+        this.execSubmit(e)
+      }
+    },
+    execSubmit (e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
         console.log(values)