From 301bbc6fe4e26abd5f6150e38092f5e216e3fa51 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Mon, 10 May 2021 18:50:00 +0530
Subject: [PATCH 01/15] ui: support bulk action for various resources

---
 ui/public/locales/en.json                |  2 +
 ui/src/components/view/DetailsTab.vue    |  2 +-
 ui/src/components/view/ListView.vue      |  9 ++++-
 ui/src/config/section/account.js         | 20 ++++++++--
 ui/src/config/section/compute.js         | 36 ++++++++++++++---
 ui/src/config/section/infra/routers.js   | 21 ++++++++--
 ui/src/config/section/infra/systemVms.js | 20 ++++++++--
 ui/src/config/section/network.js         | 45 +++++++++++++++++----
 ui/src/config/section/offering.js        | 50 +++++++++++++++++++-----
 ui/src/config/section/project.js         | 15 +++++--
 ui/src/config/section/storage.js         | 16 ++++++--
 ui/src/views/AutogenView.vue             |  3 +-
 ui/src/views/network/EgressRulesTab.vue  | 35 ++++++++++++++++-
 ui/src/views/network/FirewallRules.vue   | 35 ++++++++++++++++-
 ui/src/views/network/LoadBalancing.vue   | 35 ++++++++++++++++-
 ui/src/views/network/PortForwarding.vue  | 35 ++++++++++++++++-
 16 files changed, 331 insertions(+), 48 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 8115739da8db..215bc7d915a4 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -690,6 +690,7 @@
 "label.delete.opendaylight.device": "Delete OpenDaylight Controller",
 "label.delete.pa": "Delete Palo Alto",
 "label.delete.portable.ip.range": "Delete Portable IP Range",
+"label.delete.portforward.rules": "Delete Port Forward Rules",
 "label.delete.project": "Delete project",
 "label.delete.project.role": "Delete Project Role",
 "label.delete.role": "Delete Role",
@@ -2384,6 +2385,7 @@
 "message.action.delete.external.firewall": "Please confirm that you would like to remove this external firewall. Warning: If you are planning to add back the same external firewall, you must reset usage data on the device.",
 "message.action.delete.external.load.balancer": "Please confirm that you would like to remove this external load balancer. Warning: If you are planning to add back the same external load balancer, you must reset usage data on the device.",
 "message.action.delete.ingress.rule": "Please confirm that you want to delete this ingress rule.",
+"message.action.delete.instance.group": "Please confirm that you want to delete the instance group",
 "message.action.delete.iso": "Please confirm that you want to delete this ISO.",
 "message.action.delete.iso.for.all.zones": "The ISO is used by all zones. Please confirm that you want to delete it from all zones.",
 "message.action.delete.network": "Please confirm that you want to delete this network.",
diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index 015b44e24d67..563acac947e6 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -50,7 +50,7 @@
         </div>
       </div>
     </a-list-item>
-    <a-list-item slot="renderItem" slot-scope="item" v-else-if="item === 'ip6address' && ipV6Address.length > 0">
+    <a-list-item slot="renderItem" slot-scope="item" v-else-if="item === 'ip6address' && ipV6Address && ipV6Address.length > 0">
       <div>
         <strong>{{ $t('label.' + String(item).toLowerCase()) }}</strong>
         <br/>
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index c92c852797c2..af48db032314 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -23,7 +23,7 @@
     :dataSource="items"
     :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
     :pagination="false"
-    :rowSelection="['vm', 'alert'].includes($route.name) || $route.name === 'event' && $store.getters.userInfo.roletype === 'Admin'
+    :rowSelection=" enableGroupAction() || $route.name === 'event' && $store.getters.userInfo.roletype === 'Admin'
       ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
     :rowClassName="getRowClassName"
     style="overflow-y: auto"
@@ -421,6 +421,13 @@ export default {
         '/computeoffering', '/systemoffering', '/diskoffering', '/backupoffering', '/networkoffering', '/vpcoffering'].join('|'))
         .test(this.$route.path)
     },
+    enableGroupAction () {
+      return ['vm', 'alert', 'vmgroup', 'ssh', 'affinitygroup', 'volume', 'snapshot',
+        'vmsnapshot', 'guestnetwork', 'vpc', 'publicip', 'vpnuser', 'vpncustomergateway',
+        'project', 'account', 'systemvm', 'router', 'computeoffering', 'systemoffering',
+        'diskoffering', 'backupoffering', 'networkoffering', 'vpcoffering'
+      ].includes(this.$route.name)
+    },
     fetchColumns () {
       if (this.isOrderUpdatable()) {
         return this.columns
diff --git a/ui/src/config/section/account.js b/ui/src/config/section/account.js
index 1fce57aad7b6..12da562c894c 100644
--- a/ui/src/config/section/account.js
+++ b/ui/src/config/section/account.js
@@ -116,7 +116,10 @@ export default {
           !(record.domain === 'ROOT' && record.name === 'admin' && record.accounttype === 1) &&
           (record.state === 'disabled' || record.state === 'locked')
       },
-      params: { lock: 'false' }
+      params: { lock: 'false' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'disableAccount',
@@ -134,7 +137,10 @@ export default {
         lock: {
           value: (record) => { return false }
         }
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x, lock: false } }) }
     },
     {
       api: 'disableAccount',
@@ -152,7 +158,10 @@ export default {
         lock: {
           value: (record) => { return true }
         }
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x, lock: true } }) }
     },
     {
       api: 'uploadSslCert',
@@ -180,7 +189,10 @@ export default {
       show: (record, store) => {
         return ['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) && !record.isdefault &&
           !(record.domain === 'ROOT' && record.name === 'admin' && record.accounttype === 1)
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 77d86337b1f9..ff1f4cb95729 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -437,7 +437,10 @@ export default {
           message: 'message.kubernetes.cluster.start',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#starting-a-stopped-kubernetes-cluster',
           dataView: true,
-          show: (record) => { return ['Stopped'].includes(record.state) }
+          show: (record) => { return ['Stopped'].includes(record.state) },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         },
         {
           api: 'stopKubernetesCluster',
@@ -446,7 +449,10 @@ export default {
           message: 'message.kubernetes.cluster.stop',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#stopping-kubernetes-cluster',
           dataView: true,
-          show: (record) => { return !['Stopped', 'Destroyed', 'Destroying'].includes(record.state) }
+          show: (record) => { return !['Stopped', 'Destroyed', 'Destroying'].includes(record.state) },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         },
         {
           api: 'scaleKubernetesCluster',
@@ -477,7 +483,10 @@ export default {
           message: 'message.kubernetes.cluster.delete',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#deleting-kubernetes-cluster',
           dataView: true,
-          show: (record) => { return !['Destroyed', 'Destroying'].includes(record.state) }
+          show: (record) => { return !['Destroyed', 'Destroying'].includes(record.state) },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -513,7 +522,11 @@ export default {
           api: 'deleteInstanceGroup',
           icon: 'delete',
           label: 'label.delete.instance.group',
-          dataView: true
+          message: 'message.action.delete.instance.group',
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -563,6 +576,16 @@ export default {
             domainid: {
               value: (record, params) => { return record.domainid }
             }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values, record) => {
+            return selection.map(x => {
+              const data = record.filter(y => { return y.name === x })
+              return {
+                name: x, account: data[0].account, domainid: data[0].domainid
+              }
+            })
           }
         }
       ]
@@ -606,7 +629,10 @@ export default {
           label: 'label.delete.affinity.group',
           docHelp: 'adminguide/virtual_machines.html#delete-an-affinity-group',
           message: 'message.delete.affinity.group',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     }
diff --git a/ui/src/config/section/infra/routers.js b/ui/src/config/section/infra/routers.js
index 09f4fff8755c..abbfa1d763c1 100644
--- a/ui/src/config/section/infra/routers.js
+++ b/ui/src/config/section/infra/routers.js
@@ -49,7 +49,10 @@ export default {
       label: 'label.action.start.router',
       message: 'message.action.start.router',
       dataView: true,
-      show: (record) => { return record.state === 'Stopped' }
+      show: (record) => { return record.state === 'Stopped' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'stopRouter',
@@ -58,7 +61,10 @@ export default {
       message: 'message.action.stop.router',
       dataView: true,
       args: ['forced'],
-      show: (record) => { return record.state === 'Running' }
+      show: (record) => { return record.state === 'Running' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
     },
     {
       api: 'rebootRouter',
@@ -66,7 +72,11 @@ export default {
       label: 'label.action.reboot.router',
       message: 'message.action.reboot.router',
       dataView: true,
-      hidden: (record) => { return record.state === 'Running' }
+      hidden: (record) => { return record.state === 'Running' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
+
     },
     {
       api: 'scaleSystemVm',
@@ -154,7 +164,10 @@ export default {
       label: 'label.destroy.router',
       message: 'message.confirm.destroy.router',
       dataView: true,
-      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) }
+      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/infra/systemVms.js b/ui/src/config/section/infra/systemVms.js
index 8d519ca5f49c..f8225653010e 100644
--- a/ui/src/config/section/infra/systemVms.js
+++ b/ui/src/config/section/infra/systemVms.js
@@ -30,7 +30,10 @@ export default {
       label: 'label.action.start.systemvm',
       message: 'message.action.start.systemvm',
       dataView: true,
-      show: (record) => { return record.state === 'Stopped' }
+      show: (record) => { return record.state === 'Stopped' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'stopSystemVm',
@@ -39,7 +42,10 @@ export default {
       message: 'message.action.stop.systemvm',
       dataView: true,
       show: (record) => { return record.state === 'Running' },
-      args: ['forced']
+      args: ['forced'],
+      groupAction: true,
+      popup: true,
+      groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
     },
     {
       api: 'rebootSystemVm',
@@ -47,7 +53,10 @@ export default {
       label: 'label.action.reboot.systemvm',
       message: 'message.action.reboot.systemvm',
       dataView: true,
-      show: (record) => { return record.state === 'Running' }
+      show: (record) => { return record.state === 'Running' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'scaleSystemVm',
@@ -119,7 +128,10 @@ export default {
       label: 'label.action.destroy.systemvm',
       message: 'message.action.destroy.systemvm',
       dataView: true,
-      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) }
+      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index 4076509ad211..d24a176ccd61 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -88,7 +88,10 @@ export default {
           message: 'message.restart.network',
           dataView: true,
           args: ['cleanup'],
-          show: (record) => record.type !== 'L2'
+          show: (record) => record.type !== 'L2',
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values) => { return selection.map(x => { return { id: x, cleanup: values.cleanup } }) }
         },
         {
           api: 'replaceNetworkACLList',
@@ -114,7 +117,10 @@ export default {
           icon: 'delete',
           label: 'label.action.delete.network',
           message: 'message.action.delete.network',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -174,14 +180,20 @@ export default {
               fields.push('makeredundant')
             }
             return fields
-          }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values) => { return selection.map(x => { return { id: x, cleanup: values.cleanup, makeredundant: values.makeredundant } }) }
         },
         {
           api: 'deleteVPC',
           icon: 'delete',
           label: 'label.remove.vpc',
           message: 'message.remove.vpc',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -257,7 +269,10 @@ export default {
       }, {
         name: 'firewall',
         component: () => import('@/views/network/FirewallRules.vue'),
-        networkServiceFilter: networkService => networkService.filter(x => x.name === 'Firewall').length > 0
+        networkServiceFilter: networkService => networkService.filter(x => x.name === 'Firewall').length > 0,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       },
       {
         name: 'portforwarding',
@@ -305,7 +320,10 @@ export default {
           message: 'message.action.release.ip',
           docHelp: 'adminguide/networking_and_traffic.html#releasing-an-ip-address-alloted-to-a-vpc',
           dataView: true,
-          show: (record) => { return !record.issourcenat }
+          show: (record) => { return !record.issourcenat },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -583,6 +601,16 @@ export default {
             account: {
               value: (record) => { return record.account }
             }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values, record) => {
+            return selection.map(x => {
+              const data = record.filter(y => { return y.username === x })
+              return {
+                username: x, account: data[0].account, domainid: data[0].domainid
+              }
+            })
           }
         }
       ]
@@ -624,7 +652,10 @@ export default {
           label: 'label.delete.vpn.customer.gateway',
           message: 'message.delete.vpn.customer.gateway',
           docHelp: 'adminguide/networking_and_traffic.html#updating-and-removing-a-vpn-customer-gateway',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     }
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index 64678de2daf8..eaa423ddd8e8 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -76,7 +76,10 @@ export default {
         label: 'label.action.delete.service.offering',
         message: 'message.action.delete.service.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -112,7 +115,10 @@ export default {
         message: 'message.action.delete.system.service.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
         dataView: true,
-        params: { issystem: 'true' }
+        params: { issystem: 'true' },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -165,7 +171,10 @@ export default {
         label: 'label.action.delete.disk.offering',
         message: 'message.action.delete.disk.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -190,7 +199,10 @@ export default {
         label: 'label.action.delete.backup.offering',
         message: 'message.action.delete.backup.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -234,7 +246,10 @@ export default {
           state: {
             value: (record) => { return 'Enabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Enabled' } }) }
       }, {
         api: 'updateNetworkOffering',
         icon: 'pause-circle',
@@ -247,7 +262,10 @@ export default {
           state: {
             value: (record) => { return 'Disabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Disabled' } }) }
       }, {
         api: 'updateNetworkOffering',
         icon: 'lock',
@@ -262,7 +280,10 @@ export default {
         label: 'label.remove.network.offering',
         message: 'message.confirm.remove.network.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -306,7 +327,10 @@ export default {
           state: {
             value: (record) => { return 'Enabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Enabled' } }) }
       }, {
         api: 'updateVPCOffering',
         icon: 'pause-circle',
@@ -319,7 +343,10 @@ export default {
           state: {
             value: (record) => { return 'Disabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Disabled' } }) }
       }, {
         api: 'updateVPCOffering',
         icon: 'lock',
@@ -332,7 +359,10 @@ export default {
         icon: 'delete',
         label: 'label.remove.vpc.offering',
         message: 'message.confirm.remove.vpc.offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     }
   ]
diff --git a/ui/src/config/section/project.js b/ui/src/config/section/project.js
index 72cdd713ad2c..531901c50b68 100644
--- a/ui/src/config/section/project.js
+++ b/ui/src/config/section/project.js
@@ -104,7 +104,10 @@ export default {
       dataView: true,
       show: (record, store) => {
         return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin) && record.state === 'Suspended'
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'suspendProject',
@@ -116,7 +119,10 @@ export default {
       show: (record, store) => {
         return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) ||
         record.isCurrentUserProjectAdmin) && record.state !== 'Suspended'
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'addAccountToProject',
@@ -139,7 +145,10 @@ export default {
       dataView: true,
       show: (record, store) => {
         return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index 976cab9acde9..f22d702a4662 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -223,12 +223,14 @@ export default {
           label: 'label.action.delete.volume',
           message: 'message.action.delete.volume',
           dataView: true,
-          groupAction: true,
           show: (record, store) => {
             return ['Expunging', 'Expunged', 'UploadError'].includes(record.state) ||
               ['Allocated', 'Uploaded'].includes(record.state) && record.type !== 'ROOT' && !record.virtualmachineid ||
               ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) || store.features.allowuserexpungerecovervolume) && record.state === 'Destroy')
-          }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         },
         {
           api: 'destroyVolume',
@@ -311,7 +313,10 @@ export default {
           label: 'label.action.delete.snapshot',
           message: 'message.action.delete.snapshot',
           dataView: true,
-          show: (record) => { return record.state !== 'Destroyed' }
+          show: (record) => { return record.state !== 'Destroyed' },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -369,7 +374,10 @@ export default {
             vmsnapshotid: {
               value: (record) => { return record.id }
             }
-          }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { vmsnapshotid: x } }) }
         }
       ]
     },
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index c51487c3b7a5..7314d56fd245 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -905,7 +905,8 @@ export default {
             this.items.map(x => {
               itemsNameMap[x.id] = x.name || x.displaytext || x.id
             })
-            const paramsList = this.currentAction.groupMap(this.selectedRowKeys, values)
+            console.log(this.items)
+            const paramsList = this.currentAction.groupMap(this.selectedRowKeys, values, this.items)
             for (const params of paramsList) {
               var resourceName = itemsNameMap[params.id]
               // Using a method for this since it's an async call and don't want wrong prarms to be passed
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 9634c489f4ed..28b1d20514f1 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -59,7 +59,14 @@
     </div>
 
     <a-divider/>
-
+    <a-button
+      :disabled="!(('deleteEgressFirewallRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.action.delete.firewall') + 's' }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -67,6 +74,7 @@
       :columns="columns"
       :dataSource="egressRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="protocol" slot-scope="record">
         {{ record.protocol | capitalise }}
@@ -113,6 +121,7 @@ export default {
   },
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       egressRules: [],
       newRule: {
@@ -156,6 +165,11 @@ export default {
       ]
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -189,6 +203,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.egressRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.deleteRule(rule)
+      }
+    },
     deleteRule (rule) {
       this.loading = true
       api('deleteEgressFirewallRule', { id: rule.id }).then(response => {
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 385be4e04050..2acc2e19040f 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -54,7 +54,14 @@
     </div>
 
     <a-divider/>
-
+    <a-button
+      :disabled="!(('deleteFirewallRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.action.delete.firewall') + 's' }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -62,6 +69,7 @@
       :columns="columns"
       :dataSource="firewallRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="protocol" slot-scope="record">
         {{ record.protocol | capitalise }}
@@ -148,6 +156,7 @@ export default {
   inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       addTagLoading: false,
       firewallRules: [],
@@ -198,6 +207,11 @@ export default {
       ]
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -233,6 +247,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.firewallRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.deleteRule(rule)
+      }
+    },
     deleteRule (rule) {
       this.loading = true
       api('deleteFirewallRule', { id: rule.id }).then(response => {
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index ddbcf3861e26..031bf05a9912 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -62,7 +62,14 @@
     </div>
 
     <a-divider />
-
+    <a-button
+      :disabled="!(('deleteLoadBalancerRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.action.delete.load.balancer') + 's' }}
+    </a-button>
     <a-table
       size="small"
       class="list-view"
@@ -70,6 +77,7 @@
       :columns="columns"
       :dataSource="lbRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="algorithm" slot-scope="record">
         {{ returnAlgorithmName(record.algorithm) }}
@@ -399,6 +407,7 @@ export default {
   inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       lbRules: [],
       newTagsForm: this.$form.createForm(this),
@@ -521,6 +530,11 @@ export default {
       searchQuery: null
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -937,6 +951,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.lbRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.handleDeleteRule(rule)
+      }
+    },
     handleDeleteRule (rule) {
       this.loading = true
       api('deleteLoadBalancerRule', {
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 29208d96006b..541dfc3951c7 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -71,7 +71,14 @@
     </div>
 
     <a-divider/>
-
+    <a-button
+      :disabled="!(('deletePortForwardingRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.delete.portforward.rules') }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -79,6 +86,7 @@
       :columns="columns"
       :dataSource="portForwardRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="privateport" slot-scope="record">
         {{ record.privateport }} - {{ record.privateendport }}
@@ -266,6 +274,7 @@ export default {
   inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       portForwardRules: [],
       newRule: {
@@ -367,6 +376,11 @@ export default {
       searchQuery: null
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -427,6 +441,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.portForwardRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.deleteRule(rule)
+      }
+    },
     deleteRule (rule) {
       this.loading = true
       api('deletePortForwardingRule', { id: rule.id }).then(response => {

From 62e6e303e5ba322c63bd258a4729f5cd5719191b Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Mon, 10 May 2021 18:50:00 +0530
Subject: [PATCH 02/15] ui: support bulk action for various resources

---
 ui/public/locales/en.json                |  2 +
 ui/src/components/view/DetailsTab.vue    |  2 +-
 ui/src/components/view/ListView.vue      |  9 ++++-
 ui/src/config/section/account.js         | 20 ++++++++--
 ui/src/config/section/compute.js         | 36 ++++++++++++++---
 ui/src/config/section/infra/routers.js   | 21 ++++++++--
 ui/src/config/section/infra/systemVms.js | 20 ++++++++--
 ui/src/config/section/network.js         | 45 +++++++++++++++++----
 ui/src/config/section/offering.js        | 50 +++++++++++++++++++-----
 ui/src/config/section/project.js         | 15 +++++--
 ui/src/config/section/storage.js         | 16 ++++++--
 ui/src/views/AutogenView.vue             |  3 +-
 ui/src/views/network/EgressRulesTab.vue  | 35 ++++++++++++++++-
 ui/src/views/network/FirewallRules.vue   | 35 ++++++++++++++++-
 ui/src/views/network/LoadBalancing.vue   | 36 ++++++++++++++++-
 ui/src/views/network/PortForwarding.vue  | 35 ++++++++++++++++-
 16 files changed, 331 insertions(+), 49 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 8115739da8db..215bc7d915a4 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -690,6 +690,7 @@
 "label.delete.opendaylight.device": "Delete OpenDaylight Controller",
 "label.delete.pa": "Delete Palo Alto",
 "label.delete.portable.ip.range": "Delete Portable IP Range",
+"label.delete.portforward.rules": "Delete Port Forward Rules",
 "label.delete.project": "Delete project",
 "label.delete.project.role": "Delete Project Role",
 "label.delete.role": "Delete Role",
@@ -2384,6 +2385,7 @@
 "message.action.delete.external.firewall": "Please confirm that you would like to remove this external firewall. Warning: If you are planning to add back the same external firewall, you must reset usage data on the device.",
 "message.action.delete.external.load.balancer": "Please confirm that you would like to remove this external load balancer. Warning: If you are planning to add back the same external load balancer, you must reset usage data on the device.",
 "message.action.delete.ingress.rule": "Please confirm that you want to delete this ingress rule.",
+"message.action.delete.instance.group": "Please confirm that you want to delete the instance group",
 "message.action.delete.iso": "Please confirm that you want to delete this ISO.",
 "message.action.delete.iso.for.all.zones": "The ISO is used by all zones. Please confirm that you want to delete it from all zones.",
 "message.action.delete.network": "Please confirm that you want to delete this network.",
diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index 015b44e24d67..563acac947e6 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -50,7 +50,7 @@
         </div>
       </div>
     </a-list-item>
-    <a-list-item slot="renderItem" slot-scope="item" v-else-if="item === 'ip6address' && ipV6Address.length > 0">
+    <a-list-item slot="renderItem" slot-scope="item" v-else-if="item === 'ip6address' && ipV6Address && ipV6Address.length > 0">
       <div>
         <strong>{{ $t('label.' + String(item).toLowerCase()) }}</strong>
         <br/>
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index c92c852797c2..af48db032314 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -23,7 +23,7 @@
     :dataSource="items"
     :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
     :pagination="false"
-    :rowSelection="['vm', 'alert'].includes($route.name) || $route.name === 'event' && $store.getters.userInfo.roletype === 'Admin'
+    :rowSelection=" enableGroupAction() || $route.name === 'event' && $store.getters.userInfo.roletype === 'Admin'
       ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
     :rowClassName="getRowClassName"
     style="overflow-y: auto"
@@ -421,6 +421,13 @@ export default {
         '/computeoffering', '/systemoffering', '/diskoffering', '/backupoffering', '/networkoffering', '/vpcoffering'].join('|'))
         .test(this.$route.path)
     },
+    enableGroupAction () {
+      return ['vm', 'alert', 'vmgroup', 'ssh', 'affinitygroup', 'volume', 'snapshot',
+        'vmsnapshot', 'guestnetwork', 'vpc', 'publicip', 'vpnuser', 'vpncustomergateway',
+        'project', 'account', 'systemvm', 'router', 'computeoffering', 'systemoffering',
+        'diskoffering', 'backupoffering', 'networkoffering', 'vpcoffering'
+      ].includes(this.$route.name)
+    },
     fetchColumns () {
       if (this.isOrderUpdatable()) {
         return this.columns
diff --git a/ui/src/config/section/account.js b/ui/src/config/section/account.js
index 1fce57aad7b6..12da562c894c 100644
--- a/ui/src/config/section/account.js
+++ b/ui/src/config/section/account.js
@@ -116,7 +116,10 @@ export default {
           !(record.domain === 'ROOT' && record.name === 'admin' && record.accounttype === 1) &&
           (record.state === 'disabled' || record.state === 'locked')
       },
-      params: { lock: 'false' }
+      params: { lock: 'false' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'disableAccount',
@@ -134,7 +137,10 @@ export default {
         lock: {
           value: (record) => { return false }
         }
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x, lock: false } }) }
     },
     {
       api: 'disableAccount',
@@ -152,7 +158,10 @@ export default {
         lock: {
           value: (record) => { return true }
         }
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x, lock: true } }) }
     },
     {
       api: 'uploadSslCert',
@@ -180,7 +189,10 @@ export default {
       show: (record, store) => {
         return ['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) && !record.isdefault &&
           !(record.domain === 'ROOT' && record.name === 'admin' && record.accounttype === 1)
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 77d86337b1f9..ff1f4cb95729 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -437,7 +437,10 @@ export default {
           message: 'message.kubernetes.cluster.start',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#starting-a-stopped-kubernetes-cluster',
           dataView: true,
-          show: (record) => { return ['Stopped'].includes(record.state) }
+          show: (record) => { return ['Stopped'].includes(record.state) },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         },
         {
           api: 'stopKubernetesCluster',
@@ -446,7 +449,10 @@ export default {
           message: 'message.kubernetes.cluster.stop',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#stopping-kubernetes-cluster',
           dataView: true,
-          show: (record) => { return !['Stopped', 'Destroyed', 'Destroying'].includes(record.state) }
+          show: (record) => { return !['Stopped', 'Destroyed', 'Destroying'].includes(record.state) },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         },
         {
           api: 'scaleKubernetesCluster',
@@ -477,7 +483,10 @@ export default {
           message: 'message.kubernetes.cluster.delete',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#deleting-kubernetes-cluster',
           dataView: true,
-          show: (record) => { return !['Destroyed', 'Destroying'].includes(record.state) }
+          show: (record) => { return !['Destroyed', 'Destroying'].includes(record.state) },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -513,7 +522,11 @@ export default {
           api: 'deleteInstanceGroup',
           icon: 'delete',
           label: 'label.delete.instance.group',
-          dataView: true
+          message: 'message.action.delete.instance.group',
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -563,6 +576,16 @@ export default {
             domainid: {
               value: (record, params) => { return record.domainid }
             }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values, record) => {
+            return selection.map(x => {
+              const data = record.filter(y => { return y.name === x })
+              return {
+                name: x, account: data[0].account, domainid: data[0].domainid
+              }
+            })
           }
         }
       ]
@@ -606,7 +629,10 @@ export default {
           label: 'label.delete.affinity.group',
           docHelp: 'adminguide/virtual_machines.html#delete-an-affinity-group',
           message: 'message.delete.affinity.group',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     }
diff --git a/ui/src/config/section/infra/routers.js b/ui/src/config/section/infra/routers.js
index 09f4fff8755c..abbfa1d763c1 100644
--- a/ui/src/config/section/infra/routers.js
+++ b/ui/src/config/section/infra/routers.js
@@ -49,7 +49,10 @@ export default {
       label: 'label.action.start.router',
       message: 'message.action.start.router',
       dataView: true,
-      show: (record) => { return record.state === 'Stopped' }
+      show: (record) => { return record.state === 'Stopped' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'stopRouter',
@@ -58,7 +61,10 @@ export default {
       message: 'message.action.stop.router',
       dataView: true,
       args: ['forced'],
-      show: (record) => { return record.state === 'Running' }
+      show: (record) => { return record.state === 'Running' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
     },
     {
       api: 'rebootRouter',
@@ -66,7 +72,11 @@ export default {
       label: 'label.action.reboot.router',
       message: 'message.action.reboot.router',
       dataView: true,
-      hidden: (record) => { return record.state === 'Running' }
+      hidden: (record) => { return record.state === 'Running' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
+
     },
     {
       api: 'scaleSystemVm',
@@ -154,7 +164,10 @@ export default {
       label: 'label.destroy.router',
       message: 'message.confirm.destroy.router',
       dataView: true,
-      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) }
+      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/infra/systemVms.js b/ui/src/config/section/infra/systemVms.js
index 8d519ca5f49c..f8225653010e 100644
--- a/ui/src/config/section/infra/systemVms.js
+++ b/ui/src/config/section/infra/systemVms.js
@@ -30,7 +30,10 @@ export default {
       label: 'label.action.start.systemvm',
       message: 'message.action.start.systemvm',
       dataView: true,
-      show: (record) => { return record.state === 'Stopped' }
+      show: (record) => { return record.state === 'Stopped' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'stopSystemVm',
@@ -39,7 +42,10 @@ export default {
       message: 'message.action.stop.systemvm',
       dataView: true,
       show: (record) => { return record.state === 'Running' },
-      args: ['forced']
+      args: ['forced'],
+      groupAction: true,
+      popup: true,
+      groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
     },
     {
       api: 'rebootSystemVm',
@@ -47,7 +53,10 @@ export default {
       label: 'label.action.reboot.systemvm',
       message: 'message.action.reboot.systemvm',
       dataView: true,
-      show: (record) => { return record.state === 'Running' }
+      show: (record) => { return record.state === 'Running' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'scaleSystemVm',
@@ -119,7 +128,10 @@ export default {
       label: 'label.action.destroy.systemvm',
       message: 'message.action.destroy.systemvm',
       dataView: true,
-      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) }
+      show: (record) => { return ['Running', 'Error', 'Stopped'].includes(record.state) },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index 4076509ad211..d24a176ccd61 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -88,7 +88,10 @@ export default {
           message: 'message.restart.network',
           dataView: true,
           args: ['cleanup'],
-          show: (record) => record.type !== 'L2'
+          show: (record) => record.type !== 'L2',
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values) => { return selection.map(x => { return { id: x, cleanup: values.cleanup } }) }
         },
         {
           api: 'replaceNetworkACLList',
@@ -114,7 +117,10 @@ export default {
           icon: 'delete',
           label: 'label.action.delete.network',
           message: 'message.action.delete.network',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -174,14 +180,20 @@ export default {
               fields.push('makeredundant')
             }
             return fields
-          }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values) => { return selection.map(x => { return { id: x, cleanup: values.cleanup, makeredundant: values.makeredundant } }) }
         },
         {
           api: 'deleteVPC',
           icon: 'delete',
           label: 'label.remove.vpc',
           message: 'message.remove.vpc',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -257,7 +269,10 @@ export default {
       }, {
         name: 'firewall',
         component: () => import('@/views/network/FirewallRules.vue'),
-        networkServiceFilter: networkService => networkService.filter(x => x.name === 'Firewall').length > 0
+        networkServiceFilter: networkService => networkService.filter(x => x.name === 'Firewall').length > 0,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       },
       {
         name: 'portforwarding',
@@ -305,7 +320,10 @@ export default {
           message: 'message.action.release.ip',
           docHelp: 'adminguide/networking_and_traffic.html#releasing-an-ip-address-alloted-to-a-vpc',
           dataView: true,
-          show: (record) => { return !record.issourcenat }
+          show: (record) => { return !record.issourcenat },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -583,6 +601,16 @@ export default {
             account: {
               value: (record) => { return record.account }
             }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values, record) => {
+            return selection.map(x => {
+              const data = record.filter(y => { return y.username === x })
+              return {
+                username: x, account: data[0].account, domainid: data[0].domainid
+              }
+            })
           }
         }
       ]
@@ -624,7 +652,10 @@ export default {
           label: 'label.delete.vpn.customer.gateway',
           message: 'message.delete.vpn.customer.gateway',
           docHelp: 'adminguide/networking_and_traffic.html#updating-and-removing-a-vpn-customer-gateway',
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     }
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index 64678de2daf8..eaa423ddd8e8 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -76,7 +76,10 @@ export default {
         label: 'label.action.delete.service.offering',
         message: 'message.action.delete.service.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -112,7 +115,10 @@ export default {
         message: 'message.action.delete.system.service.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
         dataView: true,
-        params: { issystem: 'true' }
+        params: { issystem: 'true' },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -165,7 +171,10 @@ export default {
         label: 'label.action.delete.disk.offering',
         message: 'message.action.delete.disk.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -190,7 +199,10 @@ export default {
         label: 'label.action.delete.backup.offering',
         message: 'message.action.delete.backup.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -234,7 +246,10 @@ export default {
           state: {
             value: (record) => { return 'Enabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Enabled' } }) }
       }, {
         api: 'updateNetworkOffering',
         icon: 'pause-circle',
@@ -247,7 +262,10 @@ export default {
           state: {
             value: (record) => { return 'Disabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Disabled' } }) }
       }, {
         api: 'updateNetworkOffering',
         icon: 'lock',
@@ -262,7 +280,10 @@ export default {
         label: 'label.remove.network.offering',
         message: 'message.confirm.remove.network.offering',
         docHelp: 'adminguide/service_offerings.html#modifying-or-deleting-a-service-offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     },
     {
@@ -306,7 +327,10 @@ export default {
           state: {
             value: (record) => { return 'Enabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Enabled' } }) }
       }, {
         api: 'updateVPCOffering',
         icon: 'pause-circle',
@@ -319,7 +343,10 @@ export default {
           state: {
             value: (record) => { return 'Disabled' }
           }
-        }
+        },
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Disabled' } }) }
       }, {
         api: 'updateVPCOffering',
         icon: 'lock',
@@ -332,7 +359,10 @@ export default {
         icon: 'delete',
         label: 'label.remove.vpc.offering',
         message: 'message.confirm.remove.vpc.offering',
-        dataView: true
+        dataView: true,
+        groupAction: true,
+        popup: true,
+        groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
       }]
     }
   ]
diff --git a/ui/src/config/section/project.js b/ui/src/config/section/project.js
index 72cdd713ad2c..531901c50b68 100644
--- a/ui/src/config/section/project.js
+++ b/ui/src/config/section/project.js
@@ -104,7 +104,10 @@ export default {
       dataView: true,
       show: (record, store) => {
         return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin) && record.state === 'Suspended'
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'suspendProject',
@@ -116,7 +119,10 @@ export default {
       show: (record, store) => {
         return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) ||
         record.isCurrentUserProjectAdmin) && record.state !== 'Suspended'
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'addAccountToProject',
@@ -139,7 +145,10 @@ export default {
       dataView: true,
       show: (record, store) => {
         return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin
-      }
+      },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     }
   ]
 }
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index 976cab9acde9..f22d702a4662 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -223,12 +223,14 @@ export default {
           label: 'label.action.delete.volume',
           message: 'message.action.delete.volume',
           dataView: true,
-          groupAction: true,
           show: (record, store) => {
             return ['Expunging', 'Expunged', 'UploadError'].includes(record.state) ||
               ['Allocated', 'Uploaded'].includes(record.state) && record.type !== 'ROOT' && !record.virtualmachineid ||
               ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) || store.features.allowuserexpungerecovervolume) && record.state === 'Destroy')
-          }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         },
         {
           api: 'destroyVolume',
@@ -311,7 +313,10 @@ export default {
           label: 'label.action.delete.snapshot',
           message: 'message.action.delete.snapshot',
           dataView: true,
-          show: (record) => { return record.state !== 'Destroyed' }
+          show: (record) => { return record.state !== 'Destroyed' },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
     },
@@ -369,7 +374,10 @@ export default {
             vmsnapshotid: {
               value: (record) => { return record.id }
             }
-          }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection) => { return selection.map(x => { return { vmsnapshotid: x } }) }
         }
       ]
     },
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index c51487c3b7a5..7314d56fd245 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -905,7 +905,8 @@ export default {
             this.items.map(x => {
               itemsNameMap[x.id] = x.name || x.displaytext || x.id
             })
-            const paramsList = this.currentAction.groupMap(this.selectedRowKeys, values)
+            console.log(this.items)
+            const paramsList = this.currentAction.groupMap(this.selectedRowKeys, values, this.items)
             for (const params of paramsList) {
               var resourceName = itemsNameMap[params.id]
               // Using a method for this since it's an async call and don't want wrong prarms to be passed
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 9634c489f4ed..28b1d20514f1 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -59,7 +59,14 @@
     </div>
 
     <a-divider/>
-
+    <a-button
+      :disabled="!(('deleteEgressFirewallRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.action.delete.firewall') + 's' }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -67,6 +74,7 @@
       :columns="columns"
       :dataSource="egressRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="protocol" slot-scope="record">
         {{ record.protocol | capitalise }}
@@ -113,6 +121,7 @@ export default {
   },
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       egressRules: [],
       newRule: {
@@ -156,6 +165,11 @@ export default {
       ]
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -189,6 +203,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.egressRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.deleteRule(rule)
+      }
+    },
     deleteRule (rule) {
       this.loading = true
       api('deleteEgressFirewallRule', { id: rule.id }).then(response => {
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 385be4e04050..2acc2e19040f 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -54,7 +54,14 @@
     </div>
 
     <a-divider/>
-
+    <a-button
+      :disabled="!(('deleteFirewallRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.action.delete.firewall') + 's' }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -62,6 +69,7 @@
       :columns="columns"
       :dataSource="firewallRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="protocol" slot-scope="record">
         {{ record.protocol | capitalise }}
@@ -148,6 +156,7 @@ export default {
   inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       addTagLoading: false,
       firewallRules: [],
@@ -198,6 +207,11 @@ export default {
       ]
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -233,6 +247,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.firewallRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.deleteRule(rule)
+      }
+    },
     deleteRule (rule) {
       this.loading = true
       api('deleteFirewallRule', { id: rule.id }).then(response => {
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index ddbcf3861e26..288e155cfa99 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -62,7 +62,14 @@
     </div>
 
     <a-divider />
-
+    <a-button
+      :disabled="!(('deleteLoadBalancerRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.action.delete.load.balancer') + 's' }}
+    </a-button>
     <a-table
       size="small"
       class="list-view"
@@ -70,6 +77,7 @@
       :columns="columns"
       :dataSource="lbRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="algorithm" slot-scope="record">
         {{ returnAlgorithmName(record.algorithm) }}
@@ -399,6 +407,7 @@ export default {
   inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       lbRules: [],
       newTagsForm: this.$form.createForm(this),
@@ -521,6 +530,11 @@ export default {
       searchQuery: null
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -937,6 +951,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.lbRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.handleDeleteRule(rule)
+      }
+    },
     handleDeleteRule (rule) {
       this.loading = true
       api('deleteLoadBalancerRule', {
@@ -947,7 +980,6 @@ export default {
           successMessage: this.$t('message.success.remove.rule'),
           successMethod: () => {
             this.parentFetchData()
-            this.parentToggleLoading()
             this.fetchData()
             this.closeModal()
           },
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 29208d96006b..541dfc3951c7 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -71,7 +71,14 @@
     </div>
 
     <a-divider/>
-
+    <a-button
+      :disabled="!(('deletePortForwardingRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="deleteRules">
+      {{ $t('label.delete.portforward.rules') }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -79,6 +86,7 @@
       :columns="columns"
       :dataSource="portForwardRules"
       :pagination="false"
+      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
       :rowKey="record => record.id">
       <template slot="privateport" slot-scope="record">
         {{ record.privateport }} - {{ record.privateendport }}
@@ -266,6 +274,7 @@ export default {
   inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
+      selectedRowKeys: [],
       loading: true,
       portForwardRules: [],
       newRule: {
@@ -367,6 +376,11 @@ export default {
       searchQuery: null
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   created () {
     this.fetchData()
   },
@@ -427,6 +441,25 @@ export default {
         this.loading = false
       })
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    deleteRules (e) {
+      var that = this
+      var selectedRules = (this.portForwardRules.filter(function (rule) {
+        return that.selectedRowKeys.indexOf(rule.id) !== -1
+      }))
+      for (const rule of selectedRules) {
+        this.deleteRule(rule)
+      }
+    },
     deleteRule (rule) {
       this.loading = true
       api('deletePortForwardingRule', { id: rule.id }).then(response => {

From e2aa66482103dd31a14fc45e9eac435219a13569 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Fri, 21 May 2021 18:05:30 +0530
Subject: [PATCH 03/15] Bulk actions support - progress review

---
 ui/public/locales/en.json               |   9 +
 ui/src/components/widgets/Status.vue    |   3 +
 ui/src/utils/plugins.js                 |   5 +
 ui/src/views/AutogenView.vue            | 194 +++++++++++++++++++-
 ui/src/views/network/EgressRulesTab.vue | 187 ++++++++++++++++++--
 ui/src/views/network/FirewallRules.vue  | 181 +++++++++++++++++--
 ui/src/views/network/LoadBalancing.vue  | 209 ++++++++++++++++++++--
 ui/src/views/network/PortForwarding.vue | 226 ++++++++++++++++++++++--
 8 files changed, 954 insertions(+), 60 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 215bc7d915a4..2112428caab1 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -71,6 +71,10 @@
 "label.action.attach.disk.processing": "Attaching Disk....",
 "label.action.attach.iso": "Attach ISO",
 "label.action.attach.iso.processing": "Attaching ISO....",
+"label.action.bulk.delete.egress.firewall.rules": "Bulk delete egress firewall rules",
+"label.action.bulk.delete.firewall.rules": "Bulk delete firewall rules",
+"label.action.bulk.delete.load.balancer.rules": "Bulk delete load balancer rules",
+"label.action.bulk.delete.portforward.rules": "Bulk delete Port Forward rules",
 "label.action.cancel.maintenance.mode": "Cancel Maintenance Mode",
 "label.action.cancel.maintenance.mode.processing": "Cancelling Maintenance Mode....",
 "label.action.change.password": "Change Password",
@@ -584,6 +588,10 @@
 "label.confirmdeclineinvitation": "Are you sure you want to decline this project invitation?",
 "label.confirmpassword": "Confirm Password",
 "label.confirmpassword.description": "Please type the same password again",
+"label.confirm.delete.egress.firewall.rules": "Please confirm you wish to delete the selected egress firewall rules",
+"label.confirm.delete.firewall.rules": "Please confirm you wish to delete the selected firewall rules",
+"label.confirm.delete.loadbalancer.rules": "Please confirm you wish to delete the selected load balancing rules",
+"label.confirm.delete.portforward.rules": "Please confirm you wish to delete the selected port-forward rules",
 "label.congratulations": "Congratulations!",
 "label.connectiontimeout": "Connection Timeout",
 "label.conservemode": "Conserve mode",
@@ -1165,6 +1173,7 @@
 "label.isvolatile": "Volatile",
 "label.item.listing": "Item listing",
 "label.items": "items",
+"label.items.selected": "item(s) selected",
 "label.japanese.keyboard": "Japanese keyboard",
 "label.keep": "Keep",
 "label.keep.colon": "Keep:",
diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index fa8fe1a3b20b..1653237abf5d 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@@ -96,6 +96,7 @@ export default {
         case 'True':
         case 'Up':
         case 'enabled':
+        case 'success':
           status = 'success'
           break
         case 'Alert':
@@ -107,6 +108,7 @@ export default {
         case 'False':
         case 'Stopped':
         case 'ReadOnly':
+        case 'failure':
           status = 'error'
           break
         case 'Migrating':
@@ -114,6 +116,7 @@ export default {
         case 'Starting':
         case 'Stopping':
         case 'Upgrading':
+        case 'inprogress':
           status = 'processing'
           break
         case 'Allocated':
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 905f0b1bbfde..ce2d1cc0c5cd 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -49,6 +49,7 @@ export const pollJobPlugin = {
         catchMessage = i18n.t('label.error.caught'),
         catchMethod = () => {},
         action = null
+        // bulkAction = false
       } = options
 
       api('queryAsyncJobResult', { jobId }).then(json => {
@@ -82,12 +83,14 @@ export const pollJobPlugin = {
           if (name) {
             desc = `(${name}) ${desc}`
           }
+          // if (!bulkAction) {
           notification.error({
             message: title,
             description: desc,
             key: jobId,
             duration: 0
           })
+          // }
           eventBus.$emit('async-job-complete', action)
           errorMethod(result)
         } else if (result.jobstatus === 0) {
@@ -104,12 +107,14 @@ export const pollJobPlugin = {
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)
+        // if (!bulkAction) {
         notification.error({
           message: i18n.t('label.error'),
           description: catchMessage,
           duration: 0
         })
         catchMethod && catchMethod()
+        // }
       })
     }
   }
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 7314d56fd245..39bc677d36a1 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -127,6 +127,7 @@
         :okText="$t('label.ok')"
         :cancelText="$t('label.cancel')"
         style="top: 20px;"
+        width="60vw"
         @ok="handleSubmit"
         @cancel="closeAction"
         :confirmLoading="actionLoading"
@@ -145,8 +146,22 @@
         <a-spin :spinning="actionLoading">
           <span v-if="currentAction.message">
             <a-alert type="warning">
+              <span v-if="selectedRowKeys.length > 0" slot="message" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />
               <span slot="message" v-html="$t(currentAction.message)" />
             </a-alert>
+            <div v-if="selectedRowKeys.length > 0">
+              <a-divider />
+              <a-table
+                v-if="selectedRowKeys.length > 0"
+                size="middle"
+                :columns="columns"
+                :dataSource="selectedItems"
+                :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
+                :pagination="false"
+                style="overflow-y: auto"
+              >
+              </a-table>
+            </div>
             <br v-if="currentAction.paramFields.length > 0"/>
           </span>
           <a-form
@@ -298,6 +313,7 @@
             </a-form-item>
           </a-form>
         </a-spin>
+        <br />
       </a-modal>
     </div>
 
@@ -335,6 +351,67 @@
         </template>
       </a-pagination>
     </div>
+    <a-modal
+      :visible="showGroupActionModal"
+      :closable="true"
+      :maskClosable="false"
+      :okText="$t('label.ok')"
+      :cancelText="$t('label.cancel')"
+      @cancel="handleCancel"
+      width="60vw"
+      style="top: 20px;overflow-y: auto"
+      centered
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <div v-if="showGroupActionModal">
+        <a-table
+          v-if="selectedItems.length > 0"
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
+          :pagination="false"
+          style="overflow-y: auto"
+        >
+          <div slot="status" slot-scope="text">
+            <status :text=" text ? text : 'inprogress' " displayText></status>
+          </div>
+        </a-table>
+        <a-divider />
+        <a-alert type="info">
+          <span
+            slot="message"
+            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+        </a-alert>
+        <br/>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="selectedItems.length"
+          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="changePage"
+          @showSizeChange="changePageSize"
+          showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{ $t('label.page') }}</span>
+          </template>
+        </a-pagination>
+      </div>
+      <!-- <a-progress
+        v-if="jobsState"
+        class="progress-bar"
+        size="small"
+        status="active"
+        :percent="parseFloat(getPercentUsed(jobsState))"
+        :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% '" /> -->
+    </a-modal>
   </div>
 </template>
 
@@ -384,6 +461,10 @@ export default {
       loading: false,
       actionLoading: false,
       columns: [],
+      selectedColumns: [],
+      showGroupActionModal: false,
+      showBulkActionCompletedModal: false,
+      selectedItems: {},
       items: [],
       itemCount: 0,
       page: 1,
@@ -419,6 +500,10 @@ export default {
           return
         }
       }
+
+      if (this.$route.path.includes('/publicip/') || (this.$route.path.includes('/guestnetwork/')) && this.$route.query.tab === 'egress.rules') {
+        return
+      }
       this.fetchData()
     })
     eventBus.$on('exec-action', (action, isGroupAction) => {
@@ -468,6 +553,11 @@ export default {
       this.fetchData()
     }
   },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
   methods: {
     switchProject (projectId) {
       if (!projectId || !projectId.length || projectId.length !== 36) {
@@ -711,6 +801,11 @@ export default {
     },
     onRowSelectionChange (selection) {
       this.selectedRowKeys = selection
+      if (selection?.length > 0) {
+        this.selectedItems = (this.items.filter(function (item) {
+          return selection.indexOf(item.id) !== -1
+        }))
+      }
     },
     execAction (action, isGroupAction) {
       const self = this
@@ -855,12 +950,15 @@ export default {
       }).then(function () {
       })
     },
-    pollActionCompletion (jobId, action, resourceName, showLoading = true) {
+    pollActionCompletion (jobId, action, resourceName, resource, showLoading = true) {
       this.$pollJob({
         jobId,
         name: resourceName,
         successMethod: result => {
           this.fetchData()
+          if (this.selectedItems.length > 0) {
+            this.updateResourceState(resource, 'success')
+          }
           if (action.response) {
             const description = action.response(result.jobresult)
             if (description) {
@@ -872,11 +970,17 @@ export default {
             }
           }
         },
-        errorMethod: () => this.fetchData(),
+        errorMethod: () => {
+          this.fetchData()
+          if (this.selectedItems.length > 0) {
+            this.updateResourceState(resource, 'failure')
+          }
+        },
         loadingMessage: `${this.$t(action.label)} - ${resourceName}`,
         showLoading: showLoading,
         catchMessage: this.$t('error.fetching.async.job.result'),
-        action
+        action,
+        bulkAction: `${this.selectedItems.length > 0}`
       })
     },
     fillEditFormFieldValues () {
@@ -896,8 +1000,44 @@ export default {
         }
       })
     },
+    getSelectedItems () {
+      const that = this
+      this.selectedItems = (this.items.filter(function (item) {
+        return that.selectedRowKeys.indexOf(item.id) !== -1
+      }))
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    },
+    handleCancel () {
+      this.showGroupActionModal = false
+      this.showBulkActionCompletedModal = false
+      this.jobCompletedNotificationCancel()
+    },
+    jobCompletedNotificationCancel () {
+      this.showBulkActionCompletedModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+      // this.parentFetchData()
+    },
+    updateJobsState () {
+      if (this.selectedItems) {
+        this.jobsState.inprogress = this.selectedItems.filter(item => item.status === 'inprogress')
+        this.jobsState.success = this.selectedItems.filter(item => item.status === 'success')
+        this.jobsState.failure = this.selectedItems.filter(item => item.status === 'failure')
+      }
+    },
     handleSubmit (e) {
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
+        if (this.selectedRowKeys.length > 0) {
+          this.selectedColumns = this.columns
+          this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+          this.selectedColumns.splice(0, 0, {
+            dataIndex: 'status',
+            title: this.$t('label.status'),
+            scopedSlots: { customRender: 'status' }
+          })
+          this.showGroupActionModal = true
+        }
         this.form.validateFields((err, values) => {
           if (!err) {
             this.actionLoading = true
@@ -905,7 +1045,6 @@ export default {
             this.items.map(x => {
               itemsNameMap[x.id] = x.name || x.displaytext || x.id
             })
-            console.log(this.items)
             const paramsList = this.currentAction.groupMap(this.selectedRowKeys, values, this.items)
             for (const params of paramsList) {
               var resourceName = itemsNameMap[params.id]
@@ -931,23 +1070,60 @@ export default {
     callGroupApi (params, resourceName) {
       const action = this.currentAction
       api(action.api, params).then(json => {
-        this.handleResponse(json, resourceName, action, false)
+        this.handleResponse(json, resourceName, this.getDataIdentifier(params), action, false)
       }).catch(error => {
         if ([401].includes(error.response.status)) {
           return
         }
-        this.$notifyError(error)
+        if (this.selectedItems.length !== 0) {
+          this.$notifyError(error)
+        }
+      })
+    },
+    bulkDeleteRulesConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
       })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    },
+    updateResourceState (resource, state) {
+      var tempResource = []
+      if (this.selectedItems && resource) {
+        if (resource.includes(',')) {
+          resource = resource.split(',')
+          tempResource.push(resource)
+        } else {
+          tempResource.push(resource)
+        }
+        for (var r = 0; r < tempResource.length; r++) {
+          const objIndex = this.selectedItems.findIndex(obj => obj.id === tempResource[r])
+          this.selectedItems[objIndex].status = state
+        }
+      }
     },
-    handleResponse (response, resourceName, action, showLoading = true) {
+    getDataIdentifier (params) {
+      var dataIdentifier = ''
+      if (this.selectedItems.length > 0) {
+        dataIdentifier = params.id || params.username || params.name || params.vmsnapshotid || params.ids
+      }
+      return dataIdentifier
+    },
+    handleResponse (response, resourceName, resource, action, showLoading = true) {
       for (const obj in response) {
         if (obj.includes('response')) {
           if (response[obj].jobid) {
             const jobid = response[obj].jobid
             this.$store.dispatch('AddAsyncJob', { title: this.$t(action.label), jobid: jobid, description: resourceName, status: 'progress' })
-            this.pollActionCompletion(jobid, action, resourceName, showLoading)
+            this.pollActionCompletion(jobid, action, resourceName, resource, showLoading)
             return true
           } else {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(resource, 'success')
+              if (resource) {
+                this.selectedItems.filter(item => item === resource)
+              }
+            }
             var message = action.successMessage ? this.$t(action.successMessage) : this.$t(action.label) +
               (resourceName ? ' - ' + resourceName : '')
             var duration = 2
@@ -1042,7 +1218,7 @@ export default {
           args = [action.api, params]
         }
         api(...args).then(json => {
-          hasJobId = this.handleResponse(json, resourceName, action)
+          hasJobId = this.handleResponse(json, resourceName, this.getDataIdentifier(params), action)
           if ((action.icon === 'delete' || ['archiveEvents', 'archiveAlerts', 'unmanageVirtualMachine'].includes(action.api)) && this.dataView) {
             this.$router.go(-1)
           } else {
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 28b1d20514f1..a2d89c7d7bc6 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -60,12 +60,12 @@
 
     <a-divider/>
     <a-button
-      :disabled="!(('deleteEgressFirewallRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
-      type="dashed"
+      v-if="(('deleteEgressFirewallRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="deleteRules">
-      {{ $t('label.action.delete.firewall') + 's' }}
+      @click="bulkDeleteRulesConfirmation()">
+      {{ $t('label.action.bulk.delete.egress.firewall.rules') }}
     </a-button>
     <a-table
       size="small"
@@ -105,14 +105,123 @@
       </template>
     </a-pagination>
 
+    <a-modal
+      v-if="showConfirmationAction"
+      :visible="showConfirmationAction"
+      :closable="true"
+      :maskClosable="false"
+      :okText="$t('label.ok')"
+      :cancelText="$t('label.cancel')"
+      style="top: 20px;"
+      width="60vw"
+      @ok="deleteRules"
+      @cancel="closeModal"
+      centered>
+      <span slot="title">
+        {{ $t('label.action.bulk.delete.egress.firewall.rules') }}
+      </span>
+      <span>
+        <a-alert type="warning">
+          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
+          <span slot="message" v-html="$t('label.confirm.delete.egress.firewall.rules')" />
+        </a-alert>
+        <a-divider />
+        <a-table
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto">
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="startport" slot-scope="record">
+            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : 'All' }}
+          </template>
+          <template slot="endport" slot-scope="record">
+            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : 'All' }}
+          </template>
+        </a-table>
+        <a-divider />
+        <br/>
+      </span>
+    </a-modal>
+
+    <a-modal
+      :visible="showGroupActionModal"
+      :closable="true"
+      :maskClosable="false"
+      :title="$t('label.status')"
+      :cancelText="$t('label.cancel')"
+      @cancel="handleCancel"
+      width="60vw"
+      style="top: 20px;overflow-y: auto"
+      centered
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <div v-if="showGroupActionModal">
+        <a-table
+          v-if="selectedItems.length > 0"
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto"
+        >
+          <div slot="status" slot-scope="text">
+            <status :text=" text ? text : 'inprogress' " displayText></status>
+          </div>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="startport" slot-scope="record">
+            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : 'All' }}
+          </template>
+          <template slot="endport" slot-scope="record">
+            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : 'All' }}
+          </template>
+        </a-table>
+        <a-divider />
+        <a-alert type="info">
+          <span
+            slot="message"
+            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+        </a-alert>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="selectedItems.length"
+          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{ $t('label.page') }}</span>
+          </template>
+        </a-pagination>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { api } from '@/api'
+import Status from '@/components/widgets/Status'
 
 export default {
   name: 'EgressRulesTab',
+  components: {
+    Status
+  },
   props: {
     resource: {
       type: Object,
@@ -122,6 +231,12 @@ export default {
   data () {
     return {
       selectedRowKeys: [],
+      showGroupActionModal: false,
+      showBulkActionCompletedModal: false,
+      selectedItems: {},
+      selectedColumns: [],
+      filterColumns: ['Action'],
+      showConfirmationAction: false,
       loading: true,
       egressRules: [],
       newRule: {
@@ -188,6 +303,7 @@ export default {
       this.fetchData()
     }
   },
+  inject: ['parentFetchData'],
   methods: {
     fetchData () {
       this.loading = true
@@ -206,6 +322,9 @@ export default {
     setSelection (selection) {
       this.selectedRowKeys = selection
       this.$emit('selection-change', this.selectedRowKeys)
+      this.selectedItems = (this.egressRules.filter(function (item) {
+        return selection.indexOf(item.id) !== -1
+      }))
     },
     resetSelection () {
       this.setSelection([])
@@ -213,12 +332,43 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
+    bulkDeleteRulesConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    },
+    handleCancel () {
+      this.showGroupActionModal = false
+      this.showBulkActionCompletedModal = true
+      this.showBulkActionCompletedModal = false
+      this.parentFetchData()
+    },
+    jobCompletedNotificationCancel () {
+      this.showBulkActionCompletedModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+      this.parentFetchData()
+    },
+    updateResourceState (resource, state) {
+      if (this.selectedItems && resource) {
+        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
+        this.selectedItems[objIndex].status = state
+      }
+    },
     deleteRules (e) {
-      var that = this
-      var selectedRules = (this.egressRules.filter(function (rule) {
-        return that.selectedRowKeys.indexOf(rule.id) !== -1
-      }))
-      for (const rule of selectedRules) {
+      this.showConfirmationAction = false
+      this.selectedColumns.splice(0, 0, {
+        dataIndex: 'status',
+        title: this.$t('label.status'),
+        scopedSlots: { customRender: 'status' }
+      })
+      if (this.selectedRowKeys.length > 0) {
+        this.showGroupActionModal = true
+      }
+      for (const rule of this.selectedItems) {
         this.deleteRule(rule)
       }
     },
@@ -228,9 +378,19 @@ export default {
         this.$pollJob({
           jobId: response.deleteegressfirewallruleresponse.jobid,
           successMessage: this.$t('message.success.remove.egress.rule'),
-          successMethod: () => this.fetchData(),
+          successMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'success')
+            }
+            this.fetchData()
+          },
           errorMessage: this.$t('message.remove.egress.rule.failed'),
-          errorMethod: () => this.fetchData(),
+          errorMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'failure')
+            }
+            this.fetchData()
+          },
           loadingMessage: this.$t('message.remove.egress.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => this.fetchData()
@@ -238,6 +398,8 @@ export default {
       }).catch(error => {
         this.$notifyError(error)
         this.fetchData()
+      }).finally(() => {
+        this.loading = false
       })
     },
     addRule () {
@@ -281,6 +443,9 @@ export default {
       this.newRule.startport = null
       this.newRule.endport = null
     },
+    closeModal () {
+      this.showConfirmationAction = false
+    },
     handleChangePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 2acc2e19040f..99567ba9cef0 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -55,12 +55,12 @@
 
     <a-divider/>
     <a-button
-      :disabled="!(('deleteFirewallRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
-      type="dashed"
+      v-if="(('deleteFirewallRule' in $store.getters.apis) && this.selectedItems.length > 0)"
+      type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="deleteRules">
-      {{ $t('label.action.delete.firewall') + 's' }}
+      @click="bulkDeleteRulesConfirmation()">
+      {{ $t('label.action.bulk.delete.firewall.rules') }}
     </a-button>
     <a-table
       size="small"
@@ -140,13 +140,121 @@
       <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.done') }}</a-button>
     </a-modal>
 
+    <a-modal
+      v-if="showConfirmationAction"
+      :visible="showConfirmationAction"
+      :closable="true"
+      :maskClosable="false"
+      :okText="$t('label.ok')"
+      :cancelText="$t('label.cancel')"
+      style="top: 20px;"
+      width="60vw"
+      @ok="deleteRules"
+      @cancel="closeModal"
+      centered>
+      <span slot="title">
+        {{ $t('label.action.bulk.delete.firewall.rules') }}
+      </span>
+      <span>
+        <a-alert type="warning">
+          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
+          <span slot="message" v-html="$t('label.confirm.delete.firewall.rules')" />
+        </a-alert>
+        <a-divider />
+        <a-table
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto">
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="startport" slot-scope="record">
+            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
+          </template>
+          <template slot="endport" slot-scope="record">
+            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
+          </template>
+        </a-table>
+        <a-divider />
+        <br/>
+      </span>
+    </a-modal>
+
+    <a-modal
+      :visible="showGroupActionModal"
+      :closable="true"
+      :maskClosable="false"
+      :title="$t('label.status')"
+      :cancelText="$t('label.cancel')"
+      @cancel="handleCancel"
+      width="60vw"
+      style="top: 20px;overflow-y: auto"
+      centered
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <div v-if="showGroupActionModal">
+        <a-table
+          v-if="selectedItems.length > 0"
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto">
+          <div slot="status" slot-scope="text">
+            <status :text=" text ? text : 'inprogress' " displayText></status>
+          </div>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="startport" slot-scope="record">
+            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
+          </template>
+          <template slot="endport" slot-scope="record">
+            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
+          </template>
+        </a-table>
+        <a-divider />
+        <a-alert type="info">
+          <span
+            slot="message"
+            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+        </a-alert>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="selectedItems.length"
+          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{ $t('label.page') }}</span>
+          </template>
+        </a-pagination>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { api } from '@/api'
+import Status from '@/components/widgets/Status'
 
 export default {
+  components: {
+    Status
+  },
   props: {
     resource: {
       type: Object,
@@ -157,6 +265,12 @@ export default {
   data () {
     return {
       selectedRowKeys: [],
+      showGroupActionModal: false,
+      showBulkActionCompletedModal: false,
+      selectedItems: {},
+      selectedColumns: [],
+      filterColumns: ['State', 'Action'],
+      showConfirmationAction: false,
       loading: true,
       addTagLoading: false,
       firewallRules: [],
@@ -250,6 +364,9 @@ export default {
     setSelection (selection) {
       this.selectedRowKeys = selection
       this.$emit('selection-change', this.selectedRowKeys)
+      this.selectedItems = (this.firewallRules.filter(function (item) {
+        return selection.indexOf(item.id) !== -1
+      }))
     },
     resetSelection () {
       this.setSelection([])
@@ -257,12 +374,43 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
+    bulkDeleteRulesConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    },
+    handleCancel () {
+      this.showGroupActionModal = false
+      this.showBulkActionCompletedModal = true
+      this.showBulkActionCompletedModal = false
+      this.parentFetchData()
+    },
+    jobCompletedNotificationCancel () {
+      this.showBulkActionCompletedModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+      this.parentFetchData()
+    },
+    updateResourceState (resource, state) {
+      if (this.selectedItems && resource) {
+        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
+        this.selectedItems[objIndex].status = state
+      }
+    },
     deleteRules (e) {
-      var that = this
-      var selectedRules = (this.firewallRules.filter(function (rule) {
-        return that.selectedRowKeys.indexOf(rule.id) !== -1
-      }))
-      for (const rule of selectedRules) {
+      this.showConfirmationAction = false
+      this.selectedColumns.splice(0, 0, {
+        dataIndex: 'status',
+        title: this.$t('label.status'),
+        scopedSlots: { customRender: 'status' }
+      })
+      if (this.selectedRowKeys.length > 0) {
+        this.showGroupActionModal = true
+      }
+      for (const rule of this.selectedItems) {
         this.deleteRule(rule)
       }
     },
@@ -272,9 +420,19 @@ export default {
         this.$pollJob({
           jobId: response.deletefirewallruleresponse.jobid,
           successMessage: this.$t('message.success.remove.firewall.rule'),
-          successMethod: () => this.fetchData(),
+          successMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'success')
+            }
+            this.fetchData()
+          },
           errorMessage: this.$t('message.remove.firewall.rule.failed'),
-          errorMethod: () => this.fetchData(),
+          errorMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'failure')
+            }
+            this.fetchData()
+          },
           loadingMessage: this.$t('message.remove.firewall.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => this.fetchData()
@@ -329,6 +487,7 @@ export default {
       this.tagsModalVisible = false
       this.newTag.key = null
       this.newTag.value = null
+      this.showConfirmationAction = false
     },
     openTagsModal (id) {
       this.selectedRule = id
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 031bf05a9912..bf2da4583901 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -63,12 +63,12 @@
 
     <a-divider />
     <a-button
-      :disabled="!(('deleteLoadBalancerRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
-      type="dashed"
+      v-if="(('deleteLoadBalancerRule' in $store.getters.apis) && this.selectedItems.length > 0)"
+      type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="deleteRules">
-      {{ $t('label.action.delete.load.balancer') + 's' }}
+      @click="bulkDeleteRulesConfirmation()">
+      {{ $t('label.action.bulk.delete.load.balancer.rules') }}
     </a-button>
     <a-table
       size="small"
@@ -383,9 +383,132 @@
           </template>
         </a-pagination>
       </div>
+    </a-modal>
 
+    <a-modal
+      v-if="showConfirmationAction"
+      :visible="showConfirmationAction"
+      :closable="true"
+      :maskClosable="false"
+      :okText="$t('label.ok')"
+      :cancelText="$t('label.cancel')"
+      style="top: 20px;"
+      width="60vw"
+      @ok="deleteRules"
+      @cancel="closeModal"
+      centered>
+      <span slot="title">
+        {{ $t('label.action.bulk.delete.load.balancer.rules') }}
+      </span>
+      <span>
+        <a-alert type="warning">
+          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
+          <span slot="message" v-html="$t('label.confirm.delete.loadbalancer.rules')" />
+        </a-alert>
+        <a-divider />
+        <a-table
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto">
+          <template slot="algorithm" slot-scope="record">
+            {{ returnAlgorithmName(record.algorithm) }}
+          </template>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="vm" slot-scope="record">
+            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+          </template>
+        </a-table>
+        <a-divider />
+        <br/>
+      </span>
     </a-modal>
 
+    <a-modal
+      :visible="showGroupActionModal"
+      :closable="true"
+      :maskClosable="false"
+      :title="$t('label.status')"
+      :cancelText="$t('label.cancel')"
+      @cancel="handleCancel"
+      width="60vw"
+      style="top: 20px;overflow-y: auto"
+      centered
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <div v-if="showGroupActionModal">
+        <a-table
+          v-if="selectedItems.length > 0"
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto"
+        >
+          <div slot="status" slot-scope="text">
+            <status :text=" text ? text : 'inprogress' " displayText></status>
+          </div>
+          <template slot="algorithm" slot-scope="record">
+            {{ returnAlgorithmName(record.algorithm) }}
+          </template>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="vm" slot-scope="record">
+            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+          </template>
+        </a-table>
+        <a-divider />
+        <a-alert type="info">
+          <span
+            slot="message"
+            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+          <!-- <span slot="message" v-html="`<br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}`" />
+          <span slot="message" v-html="`<br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}`" /> -->
+        </a-alert>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="selectedItems.length"
+          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{ $t('label.page') }}</span>
+          </template>
+        </a-pagination>
+      </div>
+    </a-modal>
+    <!-- <a-modal
+      :visible="showBulkActionCompletedModal && jobsState.inprogress.length === 0"
+      :closable="true"
+      title="Job Status Info"
+      :maskClosable="false"
+      :cancelText="$t('label.cancel')"
+      @cancel="jobCompletedNotificationCancel"
+      style="top: 20px;overflow-y: auto"
+      centered>
+      <template slot="footer">
+        <a-button key="back" @click="jobCompletedNotificationCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <a-alert type="info">
+        <span v-if="jobsState && jobsState.success" slot="message" v-html="`No. of jobs completed Successfully: ${jobsState.success.length}`" />
+        <span v-if="jobsState && jobsState.failure" slot="message" v-html="`<br/>No. of Jobs failed: ${jobsState.failure.length}`" />
+      </a-alert>
+    </a-modal> -->
   </div>
 </template>
 
@@ -408,6 +531,12 @@ export default {
   data () {
     return {
       selectedRowKeys: [],
+      showGroupActionModal: false,
+      showBulkActionCompletedModal: false,
+      selectedItems: {},
+      selectedColumns: [],
+      filterColumns: ['State', 'Action', 'Add VMs', 'Stickiness'],
+      showConfirmationAction: false,
       loading: true,
       lbRules: [],
       newTagsForm: this.$form.createForm(this),
@@ -954,6 +1083,9 @@ export default {
     setSelection (selection) {
       this.selectedRowKeys = selection
       this.$emit('selection-change', this.selectedRowKeys)
+      this.selectedItems = (this.lbRules.filter(function (item) {
+        return selection.indexOf(item.id) !== -1
+      }))
     },
     resetSelection () {
       this.setSelection([])
@@ -961,12 +1093,43 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
+    bulkDeleteRulesConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    },
+    handleCancel () {
+      this.showGroupActionModal = false
+      // this.showBulkActionCompletedModal = true
+      this.showBulkActionCompletedModal = false
+      this.parentFetchData()
+    },
+    jobCompletedNotificationCancel () {
+      this.showBulkActionCompletedModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+      this.parentFetchData()
+    },
+    updateResourceState (resource, state) {
+      if (this.selectedItems && resource) {
+        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
+        this.selectedItems[objIndex].status = state
+      }
+    },
     deleteRules (e) {
-      var that = this
-      var selectedRules = (this.lbRules.filter(function (rule) {
-        return that.selectedRowKeys.indexOf(rule.id) !== -1
-      }))
-      for (const rule of selectedRules) {
+      this.showConfirmationAction = false
+      this.selectedColumns.splice(0, 0, {
+        dataIndex: 'status',
+        title: this.$t('label.status'),
+        scopedSlots: { customRender: 'status' }
+      })
+      if (this.selectedRowKeys.length > 0) {
+        this.showGroupActionModal = true
+      }
+      for (const rule of this.selectedItems) {
         this.handleDeleteRule(rule)
       }
     },
@@ -979,24 +1142,33 @@ export default {
           jobId: response.deleteloadbalancerruleresponse.jobid,
           successMessage: this.$t('message.success.remove.rule'),
           successMethod: () => {
-            this.parentFetchData()
-            this.parentToggleLoading()
-            this.fetchData()
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'success')
+            }
+            if (this.selectedRowKeys.length === 0 || this.showBulkActionCompletedModal) {
+              this.parentFetchData()
+              this.parentToggleLoading()
+            }
             this.closeModal()
           },
           errorMessage: this.$t('message.remove.rule.failed'),
           errorMethod: () => {
-            this.parentFetchData()
-            this.parentToggleLoading()
-            this.fetchData()
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'failure')
+            }
+            if (this.selectedRowKeys.length === 0 || this.showBulkActionCompletedModal) {
+              this.parentFetchData()
+              this.parentToggleLoading()
+            }
             this.closeModal()
           },
           loadingMessage: this.$t('message.delete.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
-            this.parentFetchData()
-            this.parentToggleLoading()
-            this.fetchData()
+            if (this.selectedRowKeys.length === 0 || this.showBulkActionCompletedModal) {
+              this.parentFetchData()
+              this.parentToggleLoading()
+            }
             this.closeModal()
           }
         })
@@ -1180,6 +1352,7 @@ export default {
       this.editRuleModalLoading = false
       this.addVmModalLoading = false
       this.addVmModalNicLoading = false
+      this.showConfirmationAction = false
       this.vms = []
       this.nics = []
       this.addVmModalVisible = false
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 541dfc3951c7..3a532cf34e06 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -72,12 +72,12 @@
 
     <a-divider/>
     <a-button
-      :disabled="!(('deletePortForwardingRule' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
-      type="dashed"
+      v-if="(('deletePortForwardingRule' in $store.getters.apis) && this.selectedItems.length > 0)"
+      type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="deleteRules">
-      {{ $t('label.delete.portforward.rules') }}
+      @click="bulkDeleteRulesConfirmation()">
+      {{ $t('label.action.bulk.delete.portforward.rules') }}
     </a-button>
     <a-table
       size="small"
@@ -254,6 +254,138 @@
         </a-pagination>
       </div>
     </a-modal>
+
+    <a-modal
+      v-if="showConfirmationAction"
+      :visible="showConfirmationAction"
+      :closable="true"
+      :maskClosable="false"
+      :okText="$t('label.ok')"
+      :cancelText="$t('label.cancel')"
+      style="top: 20px;"
+      width="60vw"
+      @ok="deleteRules"
+      @cancel="closeModal"
+      centered>
+      <span slot="title">
+        {{ $t('label.action.bulk.delete.portforward.rules') }}
+      </span>
+      <span>
+        <a-alert type="warning">
+          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
+          <span slot="message" v-html="$t('label.confirm.delete.portforward.rules')" />
+        </a-alert>
+        <a-divider />
+        <a-table
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto">
+          <template slot="privateport" slot-scope="record">
+            {{ record.privateport }} - {{ record.privateendport }}
+          </template>
+          <template slot="publicport" slot-scope="record">
+            {{ record.publicport }} - {{ record.publicendport }}
+          </template>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="vm" slot-scope="record">
+            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+          </template>
+        </a-table>
+        <a-divider />
+        <br/>
+      </span>
+    </a-modal>
+
+    <a-modal
+      :visible="showGroupActionModal"
+      :closable="true"
+      :maskClosable="false"
+      :title="$t('label.status')"
+      :cancelText="$t('label.cancel')"
+      @cancel="handleCancel"
+      width="60vw"
+      style="top: 20px;overflow-y: auto"
+      centered
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <div v-if="showGroupActionModal">
+        <a-table
+          v-if="selectedItems.length > 0"
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto"
+        >
+          <div slot="status" slot-scope="text">
+            <status :text=" text ? text : 'inprogress' " displayText></status>
+          </div>
+          <template slot="privateport" slot-scope="record">
+            {{ record.privateport }} - {{ record.privateendport }}
+          </template>
+          <template slot="publicport" slot-scope="record">
+            {{ record.publicport }} - {{ record.publicendport }}
+          </template>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="vm" slot-scope="record">
+            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+          </template>
+        </a-table>
+        <a-divider />
+        <a-alert type="info">
+          <span
+            slot="message"
+            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+          <span slot="message" v-html="``" />
+          <span slot="message" v-html="``" />
+        </a-alert>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="selectedItems.length"
+          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{ $t('label.page') }}</span>
+          </template>
+        </a-pagination>
+      </div>
+    </a-modal>
+
+    <!-- <a-modal
+      :visible="showBulkActionCompletedModal && jobsState.inprogress.length === 0"
+      :closable="true"
+      title="Job Status Info"
+      :maskClosable="false"
+      :cancelText="$t('label.cancel')"
+      @cancel="jobCompletedNotificationCancel"
+      style="top: 20px;overflow-y: auto"
+      centered>
+      <template slot="footer">
+        <a-button key="back" @click="jobCompletedNotificationCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <a-alert type="info">
+        <span v-if="jobsState && jobsState.success" slot="message" v-html="`No. of jobs completed Successfully: ${jobsState.success.length}`" />
+        <span v-if="jobsState && jobsState.failure" slot="message" v-html="`<br/>No. of Jobs failed: ${jobsState.failure.length}`" />
+      </a-alert>
+    </a-modal> -->
   </div>
 </template>
 
@@ -275,6 +407,13 @@ export default {
   data () {
     return {
       selectedRowKeys: [],
+      showGroupActionModal: false,
+      showBulkActionCompletedModal: false,
+      selectedItems: {},
+      jobsState: {},
+      selectedColumns: [],
+      filterColumns: ['State', 'Action'],
+      showConfirmationAction: false,
       loading: true,
       portForwardRules: [],
       newRule: {
@@ -444,6 +583,9 @@ export default {
     setSelection (selection) {
       this.selectedRowKeys = selection
       this.$emit('selection-change', this.selectedRowKeys)
+      this.selectedItems = (this.portForwardRules.filter(function (item) {
+        return selection.indexOf(item.id) !== -1
+      }))
     },
     resetSelection () {
       this.setSelection([])
@@ -451,12 +593,63 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
+    // getSelectedItems () {
+    //   const that = this
+    //   this.selectedItems = (this.portForwardRules.filter(function (item) {
+    //     return that.selectedRowKeys.indexOf(item.id) !== -1
+    //   }))
+    //   this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    // },
+    bulkDeleteRulesConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    },
+    handleCancel () {
+      console.log('handle cancel')
+      this.showGroupActionModal = false
+      this.showBulkActionCompletedModal = true
+      // this.updateJobsState()
+      // if (this.jobsState?.jobsState?.inprogress?.length > 0) {
+      this.showBulkActionCompletedModal = false
+      this.parentFetchData()
+      // }
+    },
+    jobCompletedNotificationCancel () {
+      this.jobsState = {}
+      this.showBulkActionCompletedModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+      this.parentFetchData()
+    },
+    // updateJobsState () {
+    //   if (this.selectedItems) {
+    //     this.jobsState.inprogress = this.selectedItems.filter(item => item.status === 'inprogress')
+    //     this.jobsState.success = this.selectedItems.filter(item => item.status === 'success')
+    //     this.jobsState.failure = this.selectedItems.filter(item => item.status === 'failure')
+    //   }
+    // },
+    updateResourceState (resource, state) {
+      if (this.selectedItems && resource) {
+        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
+        this.selectedItems[objIndex].status = state
+      }
+    },
     deleteRules (e) {
-      var that = this
-      var selectedRules = (this.portForwardRules.filter(function (rule) {
-        return that.selectedRowKeys.indexOf(rule.id) !== -1
-      }))
-      for (const rule of selectedRules) {
+      this.showConfirmationAction = false
+      this.selectedColumns.splice(0, 0, {
+        dataIndex: 'status',
+        title: this.$t('label.status'),
+        scopedSlots: { customRender: 'status' }
+      })
+      if (this.selectedRowKeys.length > 0) {
+        // this.getSelectedItems()
+        this.showGroupActionModal = true
+      }
+      for (const rule of this.selectedItems) {
         this.deleteRule(rule)
       }
     },
@@ -466,9 +659,19 @@ export default {
         this.$pollJob({
           jobId: response.deleteportforwardingruleresponse.jobid,
           successMessage: this.$t('message.success.remove.port.forward'),
-          successMethod: () => this.fetchData(),
+          successMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'success')
+            }
+            this.fetchData()
+          },
           errorMessage: this.$t('message.remove.port.forward.failed'),
-          errorMethod: () => this.fetchData(),
+          errorMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(rule.id, 'failure')
+            }
+            this.fetchData()
+          },
           loadingMessage: this.$t('message.delete.port.forward.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => this.fetchData()
@@ -534,6 +737,7 @@ export default {
       this.newRule.virtualmachineid = null
       this.addVmModalLoading = false
       this.addVmModalNicLoading = false
+      this.showConfirmationAction = false
       this.nics = []
       this.resetTagInputs()
     },

From e9aadc8cca9adc094f5bac673cc5f6ab9c30c498 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Mon, 24 May 2021 16:10:34 +0530
Subject: [PATCH 04/15] Extract common code + suppress error notification with
 bulk actions

---
 ui/src/components/header/HeaderNotice.vue |  14 +-
 ui/src/components/view/BulkActionView.vue | 256 ++++++++++++++++++++++
 ui/src/config/section/infra/routers.js    |   3 +-
 ui/src/config/section/infra/systemVms.js  |   3 +-
 ui/src/utils/plugins.js                   |  33 +--
 ui/src/views/AutogenView.vue              |  14 +-
 ui/src/views/network/EgressRulesTab.vue   | 130 ++---------
 ui/src/views/network/FirewallRules.vue    | 129 ++---------
 ui/src/views/network/LoadBalancing.vue    | 150 ++-----------
 ui/src/views/network/PortForwarding.vue   | 175 ++-------------
 10 files changed, 383 insertions(+), 524 deletions(-)
 create mode 100644 ui/src/components/view/BulkActionView.vue

diff --git a/ui/src/components/header/HeaderNotice.vue b/ui/src/components/header/HeaderNotice.vue
index 03a5acd2017a..ac7aa37edd5e 100644
--- a/ui/src/components/header/HeaderNotice.vue
+++ b/ui/src/components/header/HeaderNotice.vue
@@ -102,12 +102,14 @@ export default {
               if (result.jobresult.errortext !== null) {
                 this.jobs[i].description = '(' + this.jobs[i].description + ') ' + result.jobresult.errortext
               }
-              this.$notification.error({
-                message: this.jobs[i].title,
-                description: this.jobs[i].description,
-                key: this.jobs[i].jobid,
-                duration: 0
-              })
+              if (!this.jobs[i].bulkAction) {
+                this.$notification.error({
+                  message: this.jobs[i].title,
+                  description: this.jobs[i].description,
+                  key: this.jobs[i].jobid,
+                  duration: 0
+                })
+              }
             }
           }).catch(function (e) {
             console.log(this.$t('error.fetching.async.job.result') + e)
diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
new file mode 100644
index 000000000000..db6b53416ce2
--- /dev/null
+++ b/ui/src/components/view/BulkActionView.vue
@@ -0,0 +1,256 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <a-modal
+      v-if="showConfirmationAction"
+      :visible="showConfirmationAction"
+      :closable="true"
+      :maskClosable="false"
+      :okText="$t('label.ok')"
+      :cancelText="$t('label.cancel')"
+      style="top: 20px;"
+      width="60vw"
+      @ok="groupAction"
+      @cancel="closeModal"
+      centered>
+      <span slot="title">
+        {{ $t(message.title) }}
+      </span>
+      <span>
+        <a-alert type="warning">
+          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
+          <span slot="message" v-html="$t(message.confirmMessage)" />
+        </a-alert>
+        <a-divider />
+        <a-table
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto">
+          <template slot="algorithm" slot-scope="record">
+            {{ returnAlgorithmName(record.algorithm) }}
+          </template>
+          <template v-for="(column, index) in selectedColumns" :slot="column" slot-scope="text" >
+            <span :key="index"> {{ text }} ==== {{ column }} </span>
+          </template>
+          <template slot="privateport" slot-scope="record">
+            {{ record.privateport }} - {{ record.privateendport }}
+          </template>
+          <template slot="publicport" slot-scope="record">
+            {{ record.publicport }} - {{ record.publicendport }}
+          </template>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="vm" slot-scope="record">
+            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+          </template>
+          <template slot="startport" slot-scope="record">
+            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
+          </template>
+          <template slot="endport" slot-scope="record">
+            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
+          </template>
+        </a-table>
+        <a-divider />
+        <br/>
+      </span>
+    </a-modal>
+
+    <a-modal
+      :visible="showGroupActionModal"
+      :closable="true"
+      :maskClosable="false"
+      :title="$t('label.status')"
+      :cancelText="$t('label.cancel')"
+      @cancel="handleCancel"
+      width="60vw"
+      style="top: 20px;overflow-y: auto"
+      centered
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
+      </template>
+      <div v-if="showGroupActionModal">
+        <a-table
+          v-if="selectedItems.length > 0"
+          size="middle"
+          :columns="selectedColumns"
+          :dataSource="selectedItems"
+          :rowKey="(record, idx) => record.id"
+          :pagination="false"
+          style="overflow-y: auto">
+          <div slot="status" slot-scope="text">
+            <status :text=" text ? text : 'inprogress' " displayText></status>
+          </div>
+          <template slot="algorithm" slot-scope="record">
+            {{ returnAlgorithmName(record.algorithm) }}
+          </template>
+          <template slot="privateport" slot-scope="record">
+            {{ record.privateport }} - {{ record.privateendport }}
+          </template>
+          <template slot="publicport" slot-scope="record">
+            {{ record.publicport }} - {{ record.publicendport }}
+          </template>
+          <template slot="protocol" slot-scope="record">
+            {{ record.protocol | capitalise }}
+          </template>
+          <template slot="startport" slot-scope="record">
+            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
+          </template>
+          <template slot="endport" slot-scope="record">
+            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
+          </template>
+          <template slot="vm" slot-scope="record">
+            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+          </template>
+        </a-table>
+        <a-divider />
+        <a-alert type="info">
+          <span
+            slot="message"
+            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+        </a-alert>
+        <br/>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="selectedItems.length"
+          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{ $t('label.page') }}</span>
+          </template>
+        </a-pagination>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import Status from '@/components/widgets/Status'
+import TooltipButton from '@/components/view/TooltipButton'
+
+export default {
+  name: 'BulkActionView',
+  components: {
+    Status,
+    TooltipButton
+  },
+  props: {
+    showConfirmationAction: {
+      type: Boolean,
+      default: false
+    },
+    showGroupActionModal: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    selectedRowKeys: {
+      type: Array,
+      default: () => []
+    },
+    selectedItems: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    selectedColumns: {
+      type: Array,
+      default: () => []
+    },
+    action: {
+      type: String,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    message: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  filters: {
+    capitalise: val => {
+      if (val === 'all') return 'All'
+      return val.toUpperCase()
+    }
+  },
+  inject: ['parentFetchData'],
+  data () {
+    return {
+      showBulkActionCompletedModal: false,
+      totalCount: 0,
+      page: 1,
+      pageSize: 10
+    }
+  },
+  methods: {
+    handleChangePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    handleChangePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    handleCancel () {
+      this.$emit('handle-cancel')
+    },
+    groupAction () {
+      this.$emit('group-action')
+    },
+    returnAlgorithmName (name) {
+      switch (name) {
+        case 'leastconn':
+          return 'Least connections'
+        case 'roundrobin' :
+          return 'Round-robin'
+        case 'source':
+          return 'Source'
+        default :
+          return ''
+      }
+    },
+    closeModal () {
+      this.$emit('close-modal')
+    }
+  }
+}
+</script>
diff --git a/ui/src/config/section/infra/routers.js b/ui/src/config/section/infra/routers.js
index 86eb1f77fb80..83da039f2081 100644
--- a/ui/src/config/section/infra/routers.js
+++ b/ui/src/config/section/infra/routers.js
@@ -72,10 +72,11 @@ export default {
       label: 'label.action.reboot.router',
       message: 'message.action.reboot.router',
       dataView: true,
-      args: ['forced'],
+      // args: ['forced'],
       hidden: (record) => { return record.state === 'Running' },
       groupAction: true,
       popup: true,
+      // groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
       groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
diff --git a/ui/src/config/section/infra/systemVms.js b/ui/src/config/section/infra/systemVms.js
index b10d4a5c58f7..942e6f15f461 100644
--- a/ui/src/config/section/infra/systemVms.js
+++ b/ui/src/config/section/infra/systemVms.js
@@ -54,9 +54,10 @@ export default {
       message: 'message.action.reboot.systemvm',
       dataView: true,
       show: (record) => { return record.state === 'Running' },
-      args: ['forced'],
+      // args: ['forced'],
       groupAction: true,
       popup: true,
+      // groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
       groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index b60b5a9a1ac2..d63f4e3a687f 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -48,8 +48,8 @@ export const pollJobPlugin = {
         showLoading = true,
         catchMessage = i18n.t('label.error.caught'),
         catchMethod = () => {},
-        action = null
-        // bulkAction = false
+        action = null,
+        bulkAction = false
       } = options
 
       api('queryAsyncJobResult', { jobId }).then(json => {
@@ -70,11 +70,13 @@ export const pollJobPlugin = {
           eventBus.$emit('async-job-complete', action)
           successMethod(result)
         } else if (result.jobstatus === 2) {
-          message.error({
-            content: errorMessage,
-            key: jobId,
-            duration: 1
-          })
+          if (!bulkAction) {
+            message.error({
+              content: errorMessage,
+              key: jobId,
+              duration: 1
+            })
+          }
           var title = errorMessage
           if (action && action.label) {
             title = i18n.t(action.label)
@@ -83,14 +85,14 @@ export const pollJobPlugin = {
           if (name) {
             desc = `(${name}) ${desc}`
           }
-          // if (!bulkAction) {
-          notification.error({
-            message: title,
-            description: desc,
-            key: jobId,
-            duration: 0
-          })
-          // }
+          if (!bulkAction) {
+            notification.error({
+              message: title,
+              description: desc,
+              key: jobId,
+              duration: 0
+            })
+          }
           eventBus.$emit('async-job-complete', action)
           errorMethod(result)
         } else if (result.jobstatus === 0) {
@@ -107,7 +109,6 @@ export const pollJobPlugin = {
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)
-        // if (!bulkAction) {
         notification.error({
           message: i18n.t('label.error'),
           description: catchMessage,
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 39bc677d36a1..d181c8e5996a 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -404,13 +404,6 @@
           </template>
         </a-pagination>
       </div>
-      <!-- <a-progress
-        v-if="jobsState"
-        class="progress-bar"
-        size="small"
-        status="active"
-        :percent="parseFloat(getPercentUsed(jobsState))"
-        :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% '" /> -->
     </a-modal>
   </div>
 </template>
@@ -501,7 +494,8 @@ export default {
         }
       }
 
-      if (this.$route.path.includes('/publicip/') || (this.$route.path.includes('/guestnetwork/')) && this.$route.query.tab === 'egress.rules') {
+      if ((this.$route.path.includes('/publicip/') && ['firewall', 'portforwarding', 'loadbalancing'].includes(this.$route.query.tab)) ||
+        (this.$route.path.includes('/guestnetwork/') && this.$route.query.tab === 'egress.rules')) {
         return
       }
       this.fetchData()
@@ -1092,7 +1086,7 @@ export default {
       if (this.selectedItems && resource) {
         if (resource.includes(',')) {
           resource = resource.split(',')
-          tempResource.push(resource)
+          tempResource = resource
         } else {
           tempResource.push(resource)
         }
@@ -1114,7 +1108,7 @@ export default {
         if (obj.includes('response')) {
           if (response[obj].jobid) {
             const jobid = response[obj].jobid
-            this.$store.dispatch('AddAsyncJob', { title: this.$t(action.label), jobid: jobid, description: resourceName, status: 'progress' })
+            this.$store.dispatch('AddAsyncJob', { title: this.$t(action.label), jobid: jobid, description: resourceName, status: 'progress', bulkAction: this.selectedItems.length > 0 })
             this.pollActionCompletion(jobid, action, resourceName, resource, showLoading)
             return true
           } else {
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 7dca99a04348..c4766e7a813c 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -105,111 +105,21 @@
       </template>
     </a-pagination>
 
-    <a-modal
-      v-if="showConfirmationAction"
-      :visible="showConfirmationAction"
-      :closable="true"
-      :maskClosable="false"
-      :okText="$t('label.ok')"
-      :cancelText="$t('label.cancel')"
-      style="top: 20px;"
-      width="60vw"
-      @ok="deleteRules"
-      @cancel="closeModal"
-      centered>
-      <span slot="title">
-        {{ $t('label.action.bulk.delete.egress.firewall.rules') }}
-      </span>
-      <span>
-        <a-alert type="warning">
-          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
-          <span slot="message" v-html="$t('label.confirm.delete.egress.firewall.rules')" />
-        </a-alert>
-        <a-divider />
-        <a-table
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto">
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="startport" slot-scope="record">
-            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : 'All' }}
-          </template>
-          <template slot="endport" slot-scope="record">
-            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : 'All' }}
-          </template>
-        </a-table>
-        <a-divider />
-        <br/>
-      </span>
-    </a-modal>
-
-    <a-modal
-      :visible="showGroupActionModal"
-      :closable="true"
-      :maskClosable="false"
-      :title="$t('label.status')"
-      :cancelText="$t('label.cancel')"
-      @cancel="handleCancel"
-      width="60vw"
-      style="top: 20px;overflow-y: auto"
-      centered
-    >
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <div v-if="showGroupActionModal">
-        <a-table
-          v-if="selectedItems.length > 0"
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto"
-        >
-          <div slot="status" slot-scope="text">
-            <status :text=" text ? text : 'inprogress' " displayText></status>
-          </div>
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="startport" slot-scope="record">
-            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : 'All' }}
-          </template>
-          <template slot="endport" slot-scope="record">
-            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : 'All' }}
-          </template>
-        </a-table>
-        <a-divider />
-        <a-alert type="info">
-          <span
-            slot="message"
-            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-        </a-alert>
-        <a-pagination
-          class="pagination"
-          size="small"
-          :current="page"
-          :pageSize="pageSize"
-          :total="selectedItems.length"
-          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
-          :pageSizeOptions="['10', '20', '40', '80', '100']"
-          @change="handleChangePage"
-          @showSizeChange="handleChangePageSize"
-          showSizeChanger>
-          <template slot="buildOptionText" slot-scope="props">
-            <span>{{ props.value }} / {{ $t('label.page') }}</span>
-          </template>
-        </a-pagination>
-      </div>
-    </a-modal>
+    <bulk-action-view
+      v-if="showConfirmationAction || showGroupActionModal"
+      :showConfirmationAction="showConfirmationAction"
+      :showGroupActionModal="showGroupActionModal"
+      :items="egressRules"
+      :selectedRowKeys="selectedRowKeys"
+      :selectedItems="selectedItems"
+      :columns="columns"
+      :selectedColumns="selectedColumns"
+      action="deleteEgressFirewallRule"
+      :loading="loading"
+      :message="message"
+      @group-action="deleteRules"
+      @handle-cancel="handleCancel"
+      @close-modal="closeModal" />
   </div>
 </template>
 
@@ -217,12 +127,14 @@
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionView from '@/components/view/BulkActionView'
 
 export default {
   name: 'EgressRulesTab',
   components: {
     Status,
-    TooltipButton
+    TooltipButton,
+    BulkActionView
   },
   props: {
     resource: {
@@ -235,10 +147,14 @@ export default {
       selectedRowKeys: [],
       showGroupActionModal: false,
       showBulkActionCompletedModal: false,
-      selectedItems: {},
+      selectedItems: [],
       selectedColumns: [],
       filterColumns: ['Action'],
       showConfirmationAction: false,
+      message: {
+        title: this.$t('label.action.bulk.delete.egress.firewall.rules'),
+        confirmMessage: this.$t('label.confirm.delete.egress.firewall.rules')
+      },
       loading: true,
       egressRules: [],
       newRule: {
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index bf21d1cecff4..92f5ff728998 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -140,110 +140,21 @@
       <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.done') }}</a-button>
     </a-modal>
 
-    <a-modal
-      v-if="showConfirmationAction"
-      :visible="showConfirmationAction"
-      :closable="true"
-      :maskClosable="false"
-      :okText="$t('label.ok')"
-      :cancelText="$t('label.cancel')"
-      style="top: 20px;"
-      width="60vw"
-      @ok="deleteRules"
-      @cancel="closeModal"
-      centered>
-      <span slot="title">
-        {{ $t('label.action.bulk.delete.firewall.rules') }}
-      </span>
-      <span>
-        <a-alert type="warning">
-          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
-          <span slot="message" v-html="$t('label.confirm.delete.firewall.rules')" />
-        </a-alert>
-        <a-divider />
-        <a-table
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto">
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="startport" slot-scope="record">
-            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
-          </template>
-          <template slot="endport" slot-scope="record">
-            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
-          </template>
-        </a-table>
-        <a-divider />
-        <br/>
-      </span>
-    </a-modal>
-
-    <a-modal
-      :visible="showGroupActionModal"
-      :closable="true"
-      :maskClosable="false"
-      :title="$t('label.status')"
-      :cancelText="$t('label.cancel')"
-      @cancel="handleCancel"
-      width="60vw"
-      style="top: 20px;overflow-y: auto"
-      centered
-    >
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <div v-if="showGroupActionModal">
-        <a-table
-          v-if="selectedItems.length > 0"
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto">
-          <div slot="status" slot-scope="text">
-            <status :text=" text ? text : 'inprogress' " displayText></status>
-          </div>
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="startport" slot-scope="record">
-            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
-          </template>
-          <template slot="endport" slot-scope="record">
-            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
-          </template>
-        </a-table>
-        <a-divider />
-        <a-alert type="info">
-          <span
-            slot="message"
-            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-        </a-alert>
-        <a-pagination
-          class="pagination"
-          size="small"
-          :current="page"
-          :pageSize="pageSize"
-          :total="selectedItems.length"
-          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
-          :pageSizeOptions="['10', '20', '40', '80', '100']"
-          @change="handleChangePage"
-          @showSizeChange="handleChangePageSize"
-          showSizeChanger>
-          <template slot="buildOptionText" slot-scope="props">
-            <span>{{ props.value }} / {{ $t('label.page') }}</span>
-          </template>
-        </a-pagination>
-      </div>
-    </a-modal>
+    <bulk-action-view
+      v-if="showConfirmationAction || showGroupActionModal"
+      :showConfirmationAction="showConfirmationAction"
+      :showGroupActionModal="showGroupActionModal"
+      :items="firewallRules"
+      :selectedRowKeys="selectedRowKeys"
+      :selectedItems="selectedItems"
+      :columns="columns"
+      :selectedColumns="selectedColumns"
+      action="deleteFirewallRule"
+      :loading="loading"
+      :message="message"
+      @group-action="deleteRules"
+      @handle-cancel="handleCancel"
+      @close-modal="closeModal" />
   </div>
 </template>
 
@@ -251,11 +162,13 @@
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionView from '@/components/view/BulkActionView'
 
 export default {
   components: {
     Status,
-    TooltipButton
+    TooltipButton,
+    BulkActionView
   },
   props: {
     resource: {
@@ -269,10 +182,14 @@ export default {
       selectedRowKeys: [],
       showGroupActionModal: false,
       showBulkActionCompletedModal: false,
-      selectedItems: {},
+      selectedItems: [],
       selectedColumns: [],
       filterColumns: ['State', 'Action'],
       showConfirmationAction: false,
+      message: {
+        title: this.$t('label.action.bulk.delete.firewall.rules'),
+        confirmMessage: this.$t('label.confirm.delete.firewall.rules')
+      },
       loading: true,
       addTagLoading: false,
       firewallRules: [],
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index e50d36afb840..465e6246d71f 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -385,130 +385,22 @@
       </div>
     </a-modal>
 
-    <a-modal
-      v-if="showConfirmationAction"
-      :visible="showConfirmationAction"
-      :closable="true"
-      :maskClosable="false"
-      :okText="$t('label.ok')"
-      :cancelText="$t('label.cancel')"
-      style="top: 20px;"
-      width="60vw"
-      @ok="deleteRules"
-      @cancel="closeModal"
-      centered>
-      <span slot="title">
-        {{ $t('label.action.bulk.delete.load.balancer.rules') }}
-      </span>
-      <span>
-        <a-alert type="warning">
-          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
-          <span slot="message" v-html="$t('label.confirm.delete.loadbalancer.rules')" />
-        </a-alert>
-        <a-divider />
-        <a-table
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto">
-          <template slot="algorithm" slot-scope="record">
-            {{ returnAlgorithmName(record.algorithm) }}
-          </template>
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="vm" slot-scope="record">
-            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
-          </template>
-        </a-table>
-        <a-divider />
-        <br/>
-      </span>
-    </a-modal>
-
-    <a-modal
-      :visible="showGroupActionModal"
-      :closable="true"
-      :maskClosable="false"
-      :title="$t('label.status')"
-      :cancelText="$t('label.cancel')"
-      @cancel="handleCancel"
-      width="60vw"
-      style="top: 20px;overflow-y: auto"
-      centered
-    >
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <div v-if="showGroupActionModal">
-        <a-table
-          v-if="selectedItems.length > 0"
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto"
-        >
-          <div slot="status" slot-scope="text">
-            <status :text=" text ? text : 'inprogress' " displayText></status>
-          </div>
-          <template slot="algorithm" slot-scope="record">
-            {{ returnAlgorithmName(record.algorithm) }}
-          </template>
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="vm" slot-scope="record">
-            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
-          </template>
-        </a-table>
-        <a-divider />
-        <a-alert type="info">
-          <span
-            slot="message"
-            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-          <!-- <span slot="message" v-html="`<br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}`" />
-          <span slot="message" v-html="`<br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}`" /> -->
-        </a-alert>
-        <a-pagination
-          class="pagination"
-          size="small"
-          :current="page"
-          :pageSize="pageSize"
-          :total="selectedItems.length"
-          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
-          :pageSizeOptions="['10', '20', '40', '80', '100']"
-          @change="handleChangePage"
-          @showSizeChange="handleChangePageSize"
-          showSizeChanger>
-          <template slot="buildOptionText" slot-scope="props">
-            <span>{{ props.value }} / {{ $t('label.page') }}</span>
-          </template>
-        </a-pagination>
-      </div>
-    </a-modal>
-    <!-- <a-modal
-      :visible="showBulkActionCompletedModal && jobsState.inprogress.length === 0"
-      :closable="true"
-      title="Job Status Info"
-      :maskClosable="false"
-      :cancelText="$t('label.cancel')"
-      @cancel="jobCompletedNotificationCancel"
-      style="top: 20px;overflow-y: auto"
-      centered>
-      <template slot="footer">
-        <a-button key="back" @click="jobCompletedNotificationCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <a-alert type="info">
-        <span v-if="jobsState && jobsState.success" slot="message" v-html="`No. of jobs completed Successfully: ${jobsState.success.length}`" />
-        <span v-if="jobsState && jobsState.failure" slot="message" v-html="`<br/>No. of Jobs failed: ${jobsState.failure.length}`" />
-      </a-alert>
-    </a-modal> -->
+    <bulk-action-view
+      v-if="showConfirmationAction || showGroupActionModal"
+      :showConfirmationAction="showConfirmationAction"
+      :showGroupActionModal="showGroupActionModal"
+      :items="lbRules"
+      :selectedRowKeys="selectedRowKeys"
+      :selectedItems="selectedItems"
+      :columns="columns"
+      :selectedColumns="selectedColumns"
+      :filterColumns="filterColumns"
+      action="deleteLoadBalancerRule"
+      :loading="loading"
+      :message="message"
+      @group-action="deleteRules"
+      @handle-cancel="handleCancel"
+      @close-modal="closeModal" />
   </div>
 </template>
 
@@ -516,12 +408,14 @@
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionView from '@/components/view/BulkActionView'
 
 export default {
   name: 'LoadBalancing',
   components: {
     Status,
-    TooltipButton
+    TooltipButton,
+    BulkActionView
   },
   props: {
     resource: {
@@ -535,10 +429,14 @@ export default {
       selectedRowKeys: [],
       showGroupActionModal: false,
       showBulkActionCompletedModal: false,
-      selectedItems: {},
+      selectedItems: [],
       selectedColumns: [],
       filterColumns: ['State', 'Action', 'Add VMs', 'Stickiness'],
       showConfirmationAction: false,
+      message: {
+        title: this.$t('label.action.bulk.delete.load.balancer.rules'),
+        confirmMessage: this.$t('label.confirm.delete.loadbalancer.rules')
+      },
       loading: true,
       lbRules: [],
       newTagsForm: this.$form.createForm(this),
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index edd1aac0f0cc..a9c1ec7bf5d1 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -255,137 +255,22 @@
       </div>
     </a-modal>
 
-    <a-modal
-      v-if="showConfirmationAction"
-      :visible="showConfirmationAction"
-      :closable="true"
-      :maskClosable="false"
-      :okText="$t('label.ok')"
-      :cancelText="$t('label.cancel')"
-      style="top: 20px;"
-      width="60vw"
-      @ok="deleteRules"
-      @cancel="closeModal"
-      centered>
-      <span slot="title">
-        {{ $t('label.action.bulk.delete.portforward.rules') }}
-      </span>
-      <span>
-        <a-alert type="warning">
-          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
-          <span slot="message" v-html="$t('label.confirm.delete.portforward.rules')" />
-        </a-alert>
-        <a-divider />
-        <a-table
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto">
-          <template slot="privateport" slot-scope="record">
-            {{ record.privateport }} - {{ record.privateendport }}
-          </template>
-          <template slot="publicport" slot-scope="record">
-            {{ record.publicport }} - {{ record.publicendport }}
-          </template>
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="vm" slot-scope="record">
-            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
-          </template>
-        </a-table>
-        <a-divider />
-        <br/>
-      </span>
-    </a-modal>
-
-    <a-modal
-      :visible="showGroupActionModal"
-      :closable="true"
-      :maskClosable="false"
-      :title="$t('label.status')"
-      :cancelText="$t('label.cancel')"
-      @cancel="handleCancel"
-      width="60vw"
-      style="top: 20px;overflow-y: auto"
-      centered
-    >
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <div v-if="showGroupActionModal">
-        <a-table
-          v-if="selectedItems.length > 0"
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="false"
-          style="overflow-y: auto"
-        >
-          <div slot="status" slot-scope="text">
-            <status :text=" text ? text : 'inprogress' " displayText></status>
-          </div>
-          <template slot="privateport" slot-scope="record">
-            {{ record.privateport }} - {{ record.privateendport }}
-          </template>
-          <template slot="publicport" slot-scope="record">
-            {{ record.publicport }} - {{ record.publicendport }}
-          </template>
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="vm" slot-scope="record">
-            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
-          </template>
-        </a-table>
-        <a-divider />
-        <a-alert type="info">
-          <span
-            slot="message"
-            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-          <span slot="message" v-html="``" />
-          <span slot="message" v-html="``" />
-        </a-alert>
-        <a-pagination
-          class="pagination"
-          size="small"
-          :current="page"
-          :pageSize="pageSize"
-          :total="selectedItems.length"
-          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
-          :pageSizeOptions="['10', '20', '40', '80', '100']"
-          @change="handleChangePage"
-          @showSizeChange="handleChangePageSize"
-          showSizeChanger>
-          <template slot="buildOptionText" slot-scope="props">
-            <span>{{ props.value }} / {{ $t('label.page') }}</span>
-          </template>
-        </a-pagination>
-      </div>
-    </a-modal>
-
-    <!-- <a-modal
-      :visible="showBulkActionCompletedModal && jobsState.inprogress.length === 0"
-      :closable="true"
-      title="Job Status Info"
-      :maskClosable="false"
-      :cancelText="$t('label.cancel')"
-      @cancel="jobCompletedNotificationCancel"
-      style="top: 20px;overflow-y: auto"
-      centered>
-      <template slot="footer">
-        <a-button key="back" @click="jobCompletedNotificationCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <a-alert type="info">
-        <span v-if="jobsState && jobsState.success" slot="message" v-html="`No. of jobs completed Successfully: ${jobsState.success.length}`" />
-        <span v-if="jobsState && jobsState.failure" slot="message" v-html="`<br/>No. of Jobs failed: ${jobsState.failure.length}`" />
-      </a-alert>
-    </a-modal> -->
+    <bulk-action-view
+      v-if="showConfirmationAction || showGroupActionModal"
+      :showConfirmationAction="showConfirmationAction"
+      :showGroupActionModal="showGroupActionModal"
+      :items="portForwardRules"
+      :selectedRowKeys="selectedRowKeys"
+      :selectedItems="selectedItems"
+      :columns="columns"
+      :selectedColumns="selectedColumns"
+      :filterColumns="filterColumns"
+      action="deletePortForwardingRule"
+      :loading="loading"
+      :message="message"
+      @group-action="deleteRules"
+      @handle-cancel="handleCancel"
+      @close-modal="closeModal" />
   </div>
 </template>
 
@@ -393,11 +278,13 @@
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionView from '@/components/view/BulkActionView'
 
 export default {
   components: {
     Status,
-    TooltipButton
+    TooltipButton,
+    BulkActionView
   },
   props: {
     resource: {
@@ -411,11 +298,15 @@ export default {
       selectedRowKeys: [],
       showGroupActionModal: false,
       showBulkActionCompletedModal: false,
-      selectedItems: {},
+      selectedItems: [],
       jobsState: {},
       selectedColumns: [],
       filterColumns: ['State', 'Action'],
       showConfirmationAction: false,
+      message: {
+        title: this.$t('label.action.bulk.delete.portforward.rules'),
+        confirmMessage: this.$t('label.confirm.delete.portforward.rules')
+      },
       loading: true,
       portForwardRules: [],
       newRule: {
@@ -595,13 +486,6 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
-    // getSelectedItems () {
-    //   const that = this
-    //   this.selectedItems = (this.portForwardRules.filter(function (item) {
-    //     return that.selectedRowKeys.indexOf(item.id) !== -1
-    //   }))
-    //   this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
-    // },
     bulkDeleteRulesConfirmation () {
       this.showConfirmationAction = true
       this.selectedColumns = this.columns.filter(column => {
@@ -613,11 +497,8 @@ export default {
       console.log('handle cancel')
       this.showGroupActionModal = false
       this.showBulkActionCompletedModal = true
-      // this.updateJobsState()
-      // if (this.jobsState?.jobsState?.inprogress?.length > 0) {
       this.showBulkActionCompletedModal = false
       this.parentFetchData()
-      // }
     },
     jobCompletedNotificationCancel () {
       this.jobsState = {}
@@ -627,13 +508,6 @@ export default {
       this.selectedRowKeys = []
       this.parentFetchData()
     },
-    // updateJobsState () {
-    //   if (this.selectedItems) {
-    //     this.jobsState.inprogress = this.selectedItems.filter(item => item.status === 'inprogress')
-    //     this.jobsState.success = this.selectedItems.filter(item => item.status === 'success')
-    //     this.jobsState.failure = this.selectedItems.filter(item => item.status === 'failure')
-    //   }
-    // },
     updateResourceState (resource, state) {
       if (this.selectedItems && resource) {
         const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
@@ -648,7 +522,6 @@ export default {
         scopedSlots: { customRender: 'status' }
       })
       if (this.selectedRowKeys.length > 0) {
-        // this.getSelectedItems()
         this.showGroupActionModal = true
       }
       for (const rule of this.selectedItems) {

From 773dd17072d385fc02f3c172122ccb3e9c42d14d Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Mon, 31 May 2021 15:45:39 +0530
Subject: [PATCH 05/15] cleanup + suppress notification

---
 ui/public/locales/en.json                 |   2 +
 ui/src/components/view/BulkActionView.vue |  20 +---
 ui/src/components/view/ListView.vue       |   5 +-
 ui/src/config/section/infra/ilbvms.js     |  10 +-
 ui/src/utils/plugins.js                   |   1 +
 ui/src/views/AutogenView.vue              | 131 ++++++++++++----------
 ui/src/views/network/EgressRulesTab.vue   |  12 +-
 ui/src/views/network/FirewallRules.vue    |  12 +-
 ui/src/views/network/IpAddressesTab.vue   |  99 +++++++++++++++-
 ui/src/views/network/LoadBalancing.vue    |  18 +--
 ui/src/views/network/PortForwarding.vue   |  15 +--
 11 files changed, 201 insertions(+), 124 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index fa1c6785b55a..2b4cd5c416c4 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -75,6 +75,7 @@
 "label.action.bulk.delete.firewall.rules": "Bulk delete firewall rules",
 "label.action.bulk.delete.load.balancer.rules": "Bulk delete load balancer rules",
 "label.action.bulk.delete.portforward.rules": "Bulk delete Port Forward rules",
+"label.action.bulk.release.public.ip.address": "Bulk release Public IP Addresses",
 "label.action.cancel.maintenance.mode": "Cancel Maintenance Mode",
 "label.action.cancel.maintenance.mode.processing": "Cancelling Maintenance Mode....",
 "label.action.change.password": "Change Password",
@@ -594,6 +595,7 @@
 "label.confirm.delete.firewall.rules": "Please confirm you wish to delete the selected firewall rules",
 "label.confirm.delete.loadbalancer.rules": "Please confirm you wish to delete the selected load balancing rules",
 "label.confirm.delete.portforward.rules": "Please confirm you wish to delete the selected port-forward rules",
+"label.confirm.release.public.ip.addresses": "Please confirm you wish to release the selected public IP addresses",
 "label.congratulations": "Congratulations!",
 "label.connectiontimeout": "Connection Timeout",
 "label.conservemode": "Conserve mode",
diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
index db6b53416ce2..5ff15affd269 100644
--- a/ui/src/components/view/BulkActionView.vue
+++ b/ui/src/components/view/BulkActionView.vue
@@ -43,7 +43,7 @@
           :columns="selectedColumns"
           :dataSource="selectedItems"
           :rowKey="(record, idx) => record.id"
-          :pagination="false"
+          :pagination="true"
           style="overflow-y: auto">
           <template slot="algorithm" slot-scope="record">
             {{ returnAlgorithmName(record.algorithm) }}
@@ -96,7 +96,7 @@
           :columns="selectedColumns"
           :dataSource="selectedItems"
           :rowKey="(record, idx) => record.id"
-          :pagination="false"
+          :pagination="true"
           style="overflow-y: auto">
           <div slot="status" slot-scope="text">
             <status :text=" text ? text : 'inprogress' " displayText></status>
@@ -132,21 +132,6 @@
             <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
         </a-alert>
         <br/>
-        <a-pagination
-          class="pagination"
-          size="small"
-          :current="page"
-          :pageSize="pageSize"
-          :total="selectedItems.length"
-          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
-          :pageSizeOptions="['10', '20', '40', '80', '100']"
-          @change="handleChangePage"
-          @showSizeChange="handleChangePageSize"
-          showSizeChanger>
-          <template slot="buildOptionText" slot-scope="props">
-            <span>{{ props.value }} / {{ $t('label.page') }}</span>
-          </template>
-        </a-pagination>
       </div>
     </a-modal>
   </div>
@@ -213,7 +198,6 @@ export default {
   inject: ['parentFetchData'],
   data () {
     return {
-      showBulkActionCompletedModal: false,
       totalCount: 0,
       page: 1,
       pageSize: 10
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 066bf3cf828b..54994656b163 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -23,8 +23,7 @@
     :dataSource="items"
     :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
     :pagination="false"
-    :rowSelection=" enableGroupAction() || $route.name === 'event' && $store.getters.userInfo.roletype === 'Admin'
-      ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+    :rowSelection=" enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
     :rowClassName="getRowClassName"
     style="overflow-y: auto"
   >
@@ -426,7 +425,7 @@ export default {
       return ['vm', 'alert', 'vmgroup', 'ssh', 'affinitygroup', 'volume', 'snapshot',
         'vmsnapshot', 'guestnetwork', 'vpc', 'publicip', 'vpnuser', 'vpncustomergateway',
         'project', 'account', 'systemvm', 'router', 'computeoffering', 'systemoffering',
-        'diskoffering', 'backupoffering', 'networkoffering', 'vpcoffering'
+        'diskoffering', 'backupoffering', 'networkoffering', 'vpcoffering', 'ilbvm'
       ].includes(this.$route.name)
     },
     fetchColumns () {
diff --git a/ui/src/config/section/infra/ilbvms.js b/ui/src/config/section/infra/ilbvms.js
index 393a769604eb..2a22922bebd0 100644
--- a/ui/src/config/section/infra/ilbvms.js
+++ b/ui/src/config/section/infra/ilbvms.js
@@ -30,7 +30,10 @@ export default {
       label: 'label.action.start.router',
       message: 'message.confirm.start.lb.vm',
       dataView: true,
-      show: (record) => { return record.state === 'Stopped' }
+      show: (record) => { return record.state === 'Stopped' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
     },
     {
       api: 'stopInternalLoadBalancerVM',
@@ -38,7 +41,10 @@ export default {
       label: 'label.action.stop.router',
       dataView: true,
       args: ['forced'],
-      show: (record) => { return record.state === 'Running' }
+      show: (record) => { return record.state === 'Running' },
+      groupAction: true,
+      popup: true,
+      groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
     },
     {
       api: 'migrateSystemVm',
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index d63f4e3a687f..e8f091784a48 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -36,6 +36,7 @@ export const pollJobPlugin = {
        * @param {String} [catchMessage=Error caught]
        * @param {Function} [catchMethod=() => {}]
        * @param {Object} [action=null]
+       * @param {Object} [bulkAction=false]
        */
       const {
         jobId,
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index d181c8e5996a..23b51c7983aa 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -127,7 +127,7 @@
         :okText="$t('label.ok')"
         :cancelText="$t('label.cancel')"
         style="top: 20px;"
-        width="60vw"
+        :width="this.selectedItems.length > 0 ? '60vw' : '30vw'"
         @ok="handleSubmit"
         @cancel="closeAction"
         :confirmLoading="actionLoading"
@@ -157,7 +157,7 @@
                 :columns="columns"
                 :dataSource="selectedItems"
                 :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
-                :pagination="false"
+                :pagination="true"
                 style="overflow-y: auto"
               >
               </a-table>
@@ -372,7 +372,7 @@
           :columns="selectedColumns"
           :dataSource="selectedItems"
           :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
-          :pagination="false"
+          :pagination="true"
           style="overflow-y: auto"
         >
           <div slot="status" slot-scope="text">
@@ -380,29 +380,24 @@
           </div>
         </a-table>
         <a-divider />
-        <a-alert type="info">
-          <span
-            slot="message"
-            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-        </a-alert>
+        <div class="float-container">
+          <div class="float-child-left">
+            <a-progress
+              type="circle"
+              :percent="parseFloat((selectedItems.filter(item => item.status !== 'inprogress').length)/(selectedItems.length) * 100)"
+              :format="(percent) => parseFloat(percent).toFixed(2) + '% ' + $t('state.completed')" />
+          </div>
+          <div class="float-child-right">
+            <a-alert type="info">
+              <span
+                slot="message"
+                v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+                <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+                <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+            </a-alert>
+          </div>
+        </div>
         <br/>
-        <a-pagination
-          class="pagination"
-          size="small"
-          :current="page"
-          :pageSize="pageSize"
-          :total="selectedItems.length"
-          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
-          :pageSizeOptions="['10', '20', '40', '80', '100']"
-          @change="changePage"
-          @showSizeChange="changePageSize"
-          showSizeChanger>
-          <template slot="buildOptionText" slot-scope="props">
-            <span>{{ props.value }} / {{ $t('label.page') }}</span>
-          </template>
-        </a-pagination>
       </div>
     </a-modal>
   </div>
@@ -456,7 +451,6 @@ export default {
       columns: [],
       selectedColumns: [],
       showGroupActionModal: false,
-      showBulkActionCompletedModal: false,
       selectedItems: {},
       items: [],
       itemCount: 0,
@@ -495,7 +489,7 @@ export default {
       }
 
       if ((this.$route.path.includes('/publicip/') && ['firewall', 'portforwarding', 'loadbalancing'].includes(this.$route.query.tab)) ||
-        (this.$route.path.includes('/guestnetwork/') && this.$route.query.tab === 'egress.rules')) {
+        (this.$route.path.includes('/guestnetwork/') && (this.$route.query.tab === 'egress.rules' || this.$route.query.tab === 'public.ip.addresses'))) {
         return
       }
       this.fetchData()
@@ -503,6 +497,19 @@ export default {
     eventBus.$on('exec-action', (action, isGroupAction) => {
       this.execAction(action, isGroupAction)
     })
+    eventBus.$on('update-bulk-job-status', (items, action) => {
+      for (const item of items) {
+        const job = this.$store.getters.asyncJobIds.filter(j => { return j.jobid === item.jobid })[0]
+        if (job?.bulkAction) {
+          job.bulkAction = action
+          this.$store.getters.asyncJobIds.map(function (j) {
+            if (j.jobid === item.jobid) {
+              j.bulkAction = false
+            }
+          })
+        }
+      }
+    })
 
     if (this.device === 'desktop') {
       this.pageSize = 20
@@ -948,6 +955,7 @@ export default {
       this.$pollJob({
         jobId,
         name: resourceName,
+        resourceId: resource,
         successMethod: result => {
           this.fetchData()
           if (this.selectedItems.length > 0) {
@@ -974,7 +982,7 @@ export default {
         showLoading: showLoading,
         catchMessage: this.$t('error.fetching.async.job.result'),
         action,
-        bulkAction: `${this.selectedItems.length > 0}`
+        bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
       })
     },
     fillEditFormFieldValues () {
@@ -994,31 +1002,12 @@ export default {
         }
       })
     },
-    getSelectedItems () {
-      const that = this
-      this.selectedItems = (this.items.filter(function (item) {
-        return that.selectedRowKeys.indexOf(item.id) !== -1
-      }))
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
-    },
     handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
       this.showGroupActionModal = false
-      this.showBulkActionCompletedModal = false
-      this.jobCompletedNotificationCancel()
-    },
-    jobCompletedNotificationCancel () {
-      this.showBulkActionCompletedModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
-      // this.parentFetchData()
-    },
-    updateJobsState () {
-      if (this.selectedItems) {
-        this.jobsState.inprogress = this.selectedItems.filter(item => item.status === 'inprogress')
-        this.jobsState.success = this.selectedItems.filter(item => item.status === 'success')
-        this.jobsState.failure = this.selectedItems.filter(item => item.status === 'failure')
-      }
     },
     handleSubmit (e) {
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
@@ -1074,14 +1063,7 @@ export default {
         }
       })
     },
-    bulkDeleteRulesConfirmation () {
-      this.showConfirmationAction = true
-      this.selectedColumns = this.columns.filter(column => {
-        return !this.filterColumns.includes(column.title)
-      })
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
-    },
-    updateResourceState (resource, state) {
+    updateResourceState (resource, state, jobid) {
       var tempResource = []
       if (this.selectedItems && resource) {
         if (resource.includes(',')) {
@@ -1093,6 +1075,9 @@ export default {
         for (var r = 0; r < tempResource.length; r++) {
           const objIndex = this.selectedItems.findIndex(obj => obj.id === tempResource[r])
           this.selectedItems[objIndex].status = state
+          if (jobid) {
+            this.selectedItems[objIndex].jobid = jobid
+          }
         }
       }
     },
@@ -1108,7 +1093,14 @@ export default {
         if (obj.includes('response')) {
           if (response[obj].jobid) {
             const jobid = response[obj].jobid
-            this.$store.dispatch('AddAsyncJob', { title: this.$t(action.label), jobid: jobid, description: resourceName, status: 'progress', bulkAction: this.selectedItems.length > 0 })
+            this.$store.dispatch('AddAsyncJob', {
+              title: this.$t(action.label),
+              jobid: jobid,
+              description: resourceName,
+              status: 'progress',
+              bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
+            })
+            this.updateResourceState(resource, 'inprogress', jobid)
             this.pollActionCompletion(jobid, action, resourceName, resource, showLoading)
             return true
           } else {
@@ -1389,4 +1381,29 @@ export default {
 .ant-breadcrumb {
   vertical-align: text-bottom;
 }
+
+.float-container {
+    display: flex;
+}
+
+.float-child-right {
+    width: 80%;
+    float: left;
+    padding: 10px;
+}
+
+.float-child-left {
+    width: 20%;
+    float: left;
+    padding: 15px;
+}
+@media (max-width: 767px) {
+  .float-container {
+    flex-direction: column-reverse;
+  }
+  .float-child-left,
+  .float-child-right {
+    width: auto;
+  }
+}
 </style>
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index c4766e7a813c..111e0c460fea 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -74,7 +74,7 @@
       :columns="columns"
       :dataSource="egressRules"
       :pagination="false"
-      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.id">
       <template slot="protocol" slot-scope="record">
         {{ record.protocol | capitalise }}
@@ -146,7 +146,6 @@ export default {
     return {
       selectedRowKeys: [],
       showGroupActionModal: false,
-      showBulkActionCompletedModal: false,
       selectedItems: [],
       selectedColumns: [],
       filterColumns: ['Action'],
@@ -259,12 +258,6 @@ export default {
     },
     handleCancel () {
       this.showGroupActionModal = false
-      this.showBulkActionCompletedModal = true
-      this.showBulkActionCompletedModal = false
-      this.parentFetchData()
-    },
-    jobCompletedNotificationCancel () {
-      this.showBulkActionCompletedModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
@@ -311,7 +304,8 @@ export default {
           },
           loadingMessage: this.$t('message.remove.egress.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
-          catchMethod: () => this.fetchData()
+          catchMethod: () => this.fetchData(),
+          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
       }).catch(error => {
         this.$notifyError(error)
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 92f5ff728998..1edaa8efba0d 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -69,7 +69,7 @@
       :columns="columns"
       :dataSource="firewallRules"
       :pagination="false"
-      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.id">
       <template slot="protocol" slot-scope="record">
         {{ record.protocol | capitalise }}
@@ -181,7 +181,6 @@ export default {
     return {
       selectedRowKeys: [],
       showGroupActionModal: false,
-      showBulkActionCompletedModal: false,
       selectedItems: [],
       selectedColumns: [],
       filterColumns: ['State', 'Action'],
@@ -302,12 +301,6 @@ export default {
     },
     handleCancel () {
       this.showGroupActionModal = false
-      this.showBulkActionCompletedModal = true
-      this.showBulkActionCompletedModal = false
-      this.parentFetchData()
-    },
-    jobCompletedNotificationCancel () {
-      this.showBulkActionCompletedModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
@@ -354,7 +347,8 @@ export default {
           },
           loadingMessage: this.$t('message.remove.firewall.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
-          catchMethod: () => this.fetchData()
+          catchMethod: () => this.fetchData(),
+          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
       }).catch(error => {
         this.$notifyError(error)
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 4e630095b92c..5a3ac7f73ba4 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -26,6 +26,14 @@
         @click="onShowAcquireIp">
         {{ $t('label.acquire.new.ip') }}
       </a-button>
+      <a-button
+        v-if="(('disassociateIpAddress' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+        type="danger"
+        icon="plus"
+        style="width: 100%; margin-bottom: 15px"
+        @click="bulkActionConfirmation()">
+        {{ $t('label.action.bulk.release.public.ip.address') }}
+      </a-button>
       <div v-if="$route.path.startsWith('/vpc')">
         Select Tier:
         <a-select
@@ -50,6 +58,7 @@
         :columns="columns"
         :dataSource="ips"
         :rowKey="item => item.id"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
         :pagination="false" >
         <template slot="ipaddress" slot-scope="text, record">
           <router-link v-if="record.forvirtualnetwork === true" :to="{ path: '/publicip/' + record.id }" >{{ text }} </router-link>
@@ -124,18 +133,35 @@
         </a-form-item>
       </a-spin>
     </a-modal>
+    <bulk-action-view
+      v-if="showConfirmationAction || showGroupActionModal"
+      :showConfirmationAction="showConfirmationAction"
+      :showGroupActionModal="showGroupActionModal"
+      :items="ips"
+      :selectedRowKeys="selectedRowKeys"
+      :selectedItems="selectedItems"
+      :columns="columns"
+      :selectedColumns="selectedColumns"
+      action="disassociateIpAddress"
+      :loading="loading"
+      :message="message"
+      @group-action="releaseIpAddresses"
+      @handle-cancel="handleCancel"
+      @close-modal="closeModal" />
   </div>
 </template>
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionView from '@/components/view/BulkActionView'
 
 export default {
   name: 'IpAddressesTab',
   components: {
     Status,
-    TooltipButton
+    TooltipButton,
+    BulkActionView
   },
   props: {
     resource: {
@@ -159,6 +185,16 @@ export default {
       pageSize: 10,
       totalIps: 0,
       tiersSelect: false,
+      selectedRowKeys: [],
+      showGroupActionModal: false,
+      selectedItems: [],
+      selectedColumns: [],
+      filterColumns: ['Action'],
+      showConfirmationAction: false,
+      message: {
+        title: this.$t('label.action.bulk.release.public.ip.address'),
+        confirmMessage: this.$t('label.confirm.release.public.ip.addresses')
+      },
       columns: [
         {
           title: this.$t('label.ipaddress'),
@@ -202,6 +238,7 @@ export default {
       this.fetchData()
     }
   },
+  inject: ['parentFetchData'],
   methods: {
     fetchData () {
       const params = {
@@ -250,6 +287,19 @@ export default {
       this.vpcTier = tier
       this.fetchData()
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+      this.selectedItems = (this.ips.filter(function (item) {
+        return selection.indexOf(item.id) !== -1
+      }))
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
     changePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize
@@ -298,6 +348,41 @@ export default {
         this.acquireLoading = false
       })
     },
+    bulkActionConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+    },
+    handleCancel () {
+      this.showGroupActionModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+      this.parentFetchData()
+    },
+    updateResourceState (resource, state) {
+      if (this.selectedItems && resource) {
+        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
+        this.selectedItems[objIndex].status = state
+      }
+    },
+    releaseIpAddresses (e) {
+      this.showConfirmationAction = false
+      this.selectedColumns.splice(0, 0, {
+        dataIndex: 'status',
+        title: this.$t('label.status'),
+        scopedSlots: { customRender: 'status' }
+      })
+      if (this.selectedRowKeys.length > 0) {
+        this.showGroupActionModal = true
+      }
+      for (const ip of this.selectedItems) {
+        console.log(ip)
+        this.releaseIpAddress(ip)
+      }
+    },
     releaseIpAddress (ip) {
       this.fetchLoading = true
       api('disassociateIpAddress', {
@@ -307,14 +392,21 @@ export default {
           jobId: response.disassociateipaddressresponse.jobid,
           successMessage: this.$t('message.success.release.ip'),
           successMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(ip.id, 'success')
+            }
             this.fetchData()
           },
           errorMessage: this.$t('message.release.ip.failed'),
           errorMethod: () => {
+            if (this.selectedItems.length > 0) {
+              this.updateResourceState(ip.id, 'failure')
+            }
             this.fetchData()
           },
           loadingMessage: `${this.$t('label.releasing.ip')} ${this.$t('label.for')} ${this.resource.name} ${this.$t('label.is.in.progress')}`,
-          catchMessage: this.$t('error.fetching.async.job.result')
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
       }).catch(error => {
         this.fetchLoading = false
@@ -353,6 +445,9 @@ export default {
     },
     onCloseModal () {
       this.showAcquireIp = false
+    },
+    closeModal () {
+      this.showConfirmationAction = false
     }
   }
 }
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 465e6246d71f..42e51528f070 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -77,7 +77,7 @@
       :columns="columns"
       :dataSource="lbRules"
       :pagination="false"
-      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.id">
       <template slot="algorithm" slot-scope="record">
         {{ returnAlgorithmName(record.algorithm) }}
@@ -428,7 +428,6 @@ export default {
     return {
       selectedRowKeys: [],
       showGroupActionModal: false,
-      showBulkActionCompletedModal: false,
       selectedItems: [],
       selectedColumns: [],
       filterColumns: ['State', 'Action', 'Add VMs', 'Stickiness'],
@@ -1002,12 +1001,6 @@ export default {
     },
     handleCancel () {
       this.showGroupActionModal = false
-      // this.showBulkActionCompletedModal = true
-      this.showBulkActionCompletedModal = false
-      this.parentFetchData()
-    },
-    jobCompletedNotificationCancel () {
-      this.showBulkActionCompletedModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
@@ -1045,7 +1038,7 @@ export default {
             if (this.selectedItems.length > 0) {
               this.updateResourceState(rule.id, 'success')
             }
-            if (this.selectedRowKeys.length === 0 || this.showBulkActionCompletedModal) {
+            if (this.selectedRowKeys.length === 0) {
               this.parentFetchData()
               this.parentToggleLoading()
             }
@@ -1056,7 +1049,7 @@ export default {
             if (this.selectedItems.length > 0) {
               this.updateResourceState(rule.id, 'failure')
             }
-            if (this.selectedRowKeys.length === 0 || this.showBulkActionCompletedModal) {
+            if (this.selectedRowKeys.length === 0) {
               this.parentFetchData()
               this.parentToggleLoading()
             }
@@ -1065,12 +1058,13 @@ export default {
           loadingMessage: this.$t('message.delete.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
-            if (this.selectedRowKeys.length === 0 || this.showBulkActionCompletedModal) {
+            if (this.selectedRowKeys.length === 0) {
               this.parentFetchData()
               this.parentToggleLoading()
             }
             this.closeModal()
-          }
+          },
+          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
       }).catch(error => {
         this.$notifyError(error)
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index a9c1ec7bf5d1..614bec58d99b 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -86,7 +86,7 @@
       :columns="columns"
       :dataSource="portForwardRules"
       :pagination="false"
-      :rowSelection="$store.getters.userInfo.roletype === 'Admin' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.id">
       <template slot="privateport" slot-scope="record">
         {{ record.privateport }} - {{ record.privateendport }}
@@ -297,9 +297,7 @@ export default {
     return {
       selectedRowKeys: [],
       showGroupActionModal: false,
-      showBulkActionCompletedModal: false,
       selectedItems: [],
-      jobsState: {},
       selectedColumns: [],
       filterColumns: ['State', 'Action'],
       showConfirmationAction: false,
@@ -494,15 +492,7 @@ export default {
       this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
     },
     handleCancel () {
-      console.log('handle cancel')
       this.showGroupActionModal = false
-      this.showBulkActionCompletedModal = true
-      this.showBulkActionCompletedModal = false
-      this.parentFetchData()
-    },
-    jobCompletedNotificationCancel () {
-      this.jobsState = {}
-      this.showBulkActionCompletedModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
@@ -549,7 +539,8 @@ export default {
           },
           loadingMessage: this.$t('message.delete.port.forward.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
-          catchMethod: () => this.fetchData()
+          catchMethod: () => this.fetchData(),
+          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
       }).catch(error => {
         this.$notifyError(error)

From 2685ebdadcc39b5b23b977fc84837e62e49fcc80 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Mon, 31 May 2021 15:53:34 +0530
Subject: [PATCH 06/15] add progress view

---
 ui/src/components/view/BulkActionView.vue | 50 +++++++++++++++++++----
 ui/src/views/network/IpAddressesTab.vue   |  1 -
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
index 5ff15affd269..046f88cd60f2 100644
--- a/ui/src/components/view/BulkActionView.vue
+++ b/ui/src/components/view/BulkActionView.vue
@@ -124,13 +124,23 @@
           </template>
         </a-table>
         <a-divider />
-        <a-alert type="info">
-          <span
-            slot="message"
-            v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-            <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-            <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-        </a-alert>
+        <div class="float-container">
+          <div class="float-child-left">
+            <a-progress
+              type="circle"
+              :percent="parseFloat((selectedItems.filter(item => item.status !== 'inprogress').length)/(selectedItems.length) * 100)"
+              :format="(percent) => parseFloat(percent).toFixed(2) + '% ' + $t('state.completed')" />
+          </div>
+          <div class="float-child-right">
+            <a-alert type="info">
+              <span
+                slot="message"
+                v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
+                <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
+                <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
+            </a-alert>
+          </div>
+        </div>
         <br/>
       </div>
     </a-modal>
@@ -238,3 +248,29 @@ export default {
   }
 }
 </script>
+<style scoped>
+.float-container {
+    display: flex;
+}
+
+.float-child-right {
+    width: 80%;
+    float: left;
+    padding: 10px;
+}
+
+.float-child-left {
+    width: 20%;
+    float: left;
+    padding: 15px;
+}
+@media (max-width: 767px) {
+  .float-container {
+    flex-direction: column-reverse;
+  }
+  .float-child-left,
+  .float-child-right {
+    width: auto;
+  }
+}
+</style>
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 5a3ac7f73ba4..2c504552aa63 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -379,7 +379,6 @@ export default {
         this.showGroupActionModal = true
       }
       for (const ip of this.selectedItems) {
-        console.log(ip)
         this.releaseIpAddress(ip)
       }
     },

From 957e00831349971bef6149961983265ab83920b1 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Wed, 2 Jun 2021 18:53:47 +0530
Subject: [PATCH 07/15] Add routes to notification + add async jobs + refactor
 progress view

---
 ui/public/locales/en.json                    |   3 +
 ui/src/components/header/HeaderNotice.vue    |  15 ++-
 ui/src/components/view/BulkActionView.vue    |  50 ++-------
 ui/src/components/widgets/Status.vue         |   7 +-
 ui/src/views/AutogenView.vue                 | 108 +++++++++----------
 ui/src/views/compute/StartVirtualMachine.vue |   3 +
 ui/src/views/network/EgressRulesTab.vue      |   9 +-
 ui/src/views/network/FirewallRules.vue       |   9 +-
 ui/src/views/network/IpAddressesTab.vue      |   9 +-
 ui/src/views/network/LoadBalancing.vue       |  10 +-
 10 files changed, 113 insertions(+), 110 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 2b4cd5c416c4..12b3556be9da 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -911,6 +911,7 @@
 "label.filterby": "Filter by",
 "label.fingerprint": "FingerPrint",
 "label.firewall": "Firewall",
+"label.firewallrule": "Firewall Rule",
 "label.firstname": "First Name",
 "label.firstname.lower": "firstname",
 "label.fix.errors": "Fix errors",
@@ -3326,6 +3327,8 @@
 "state.error": "Error",
 "state.expired": "Expired",
 "state.expunging": "Expunging",
+"state.failed": "Failed",
+"state.inprogress": "In Progress",
 "state.migrating": "Migrating",
 "state.pending": "Pending",
 "state.running": "Running",
diff --git a/ui/src/components/header/HeaderNotice.vue b/ui/src/components/header/HeaderNotice.vue
index ac7aa37edd5e..097a2d532008 100644
--- a/ui/src/components/header/HeaderNotice.vue
+++ b/ui/src/components/header/HeaderNotice.vue
@@ -33,8 +33,11 @@
             </a-list-item-meta>
           </a-list-item>
           <a-list-item v-for="(job, index) in jobs" :key="index">
-            <a-list-item-meta :title="job.title" :description="job.description">
-              <a-avatar :style="notificationAvatar[job.status].style" :icon="notificationAvatar[job.status].icon" slot="avatar"/>
+            <a-list-item-meta :title="job.title">
+              <a-avatar :style="notificationAvatar[job.status].style" :icon="notificationAvatar[job.status].icon" slot="avatar"/><br/>
+              <span v-if="getResourceName(job.description, 'name') && job.path" slot="description"><router-link :to="{ path: job.path}"> {{ getResourceName(job.description, "name") + ' - ' }}</router-link></span>
+              <span v-if="getResourceName(job.description, 'name') && job.path" slot="description"> {{ getResourceName(job.description, "msg") }}</span>
+              <span v-else slot="description"> {{ job.description }} </span>
             </a-list-item-meta>
           </a-list-item>
         </a-list>
@@ -80,6 +83,14 @@ export default {
         this.pollJobs()
       }, 4000)
     },
+    getResourceName (description, data) {
+      if (data === 'name') {
+        const name = description.match(/\(([^)]+)\)/)
+        return name ? name[1] : null
+      }
+      const msg = description.substring(description.indexOf(')') + 1)
+      return msg
+    },
     async pollJobs () {
       var hasUpdated = false
       for (var i in this.jobs) {
diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
index 046f88cd60f2..aa9335b6d795 100644
--- a/ui/src/components/view/BulkActionView.vue
+++ b/ui/src/components/view/BulkActionView.vue
@@ -79,13 +79,13 @@
       :visible="showGroupActionModal"
       :closable="true"
       :maskClosable="false"
-      :title="$t('label.status')"
       :cancelText="$t('label.cancel')"
       @cancel="handleCancel"
       width="60vw"
       style="top: 20px;overflow-y: auto"
       centered
     >
+      <span slot="title"> {{ $t(message.title) }} </span>
       <template slot="footer">
         <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
       </template>
@@ -124,23 +124,11 @@
           </template>
         </a-table>
         <a-divider />
-        <div class="float-container">
-          <div class="float-child-left">
-            <a-progress
-              type="circle"
-              :percent="parseFloat((selectedItems.filter(item => item.status !== 'inprogress').length)/(selectedItems.length) * 100)"
-              :format="(percent) => parseFloat(percent).toFixed(2) + '% ' + $t('state.completed')" />
-          </div>
-          <div class="float-child-right">
-            <a-alert type="info">
-              <span
-                slot="message"
-                v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-                <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-                <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-            </a-alert>
-          </div>
-        </div>
+        <a-card :bordered="false" style="background:#f1f1f1">
+          <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
+          <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
+          <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
+        </a-card>
         <br/>
       </div>
     </a-modal>
@@ -248,29 +236,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-.float-container {
-    display: flex;
-}
-
-.float-child-right {
-    width: 80%;
-    float: left;
-    padding: 10px;
-}
-
-.float-child-left {
-    width: 20%;
-    float: left;
-    padding: 15px;
-}
-@media (max-width: 767px) {
-  .float-container {
-    flex-direction: column-reverse;
-  }
-  .float-child-left,
-  .float-child-right {
-    width: auto;
-  }
-}
-</style>
diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index 1653237abf5d..5c95edbe0c06 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@@ -72,6 +72,9 @@ export default {
           case 'Error':
             state = this.$t('state.error')
             break
+          case 'InProgress':
+            state = this.$t('state.inprogress')
+            break
         }
         return state.charAt(0).toUpperCase() + state.slice(1)
       }
@@ -108,7 +111,7 @@ export default {
         case 'False':
         case 'Stopped':
         case 'ReadOnly':
-        case 'failure':
+        case 'failed':
           status = 'error'
           break
         case 'Migrating':
@@ -116,7 +119,7 @@ export default {
         case 'Starting':
         case 'Stopping':
         case 'Upgrading':
-        case 'inprogress':
+        case 'InProgress':
           status = 'processing'
           break
         case 'Allocated':
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 23b51c7983aa..b367d43cde27 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -154,7 +154,7 @@
               <a-table
                 v-if="selectedRowKeys.length > 0"
                 size="middle"
-                :columns="columns"
+                :columns="chosenColumns"
                 :dataSource="selectedItems"
                 :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
                 :pagination="true"
@@ -362,6 +362,16 @@
       style="top: 20px;overflow-y: auto"
       centered
     >
+      <span slot="title">
+        {{ $t(modalInfo.label) }}
+        <a
+          v-if="modalInfo.docHelp || $route.meta.docHelp"
+          style="margin-left: 5px"
+          :href="$config.docBase + '/' + (modalInfo.docHelp || $route.meta.docHelp)"
+          target="_blank">
+          <a-icon type="question-circle-o"></a-icon>
+        </a>
+      </span>
       <template slot="footer">
         <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
       </template>
@@ -376,27 +386,15 @@
           style="overflow-y: auto"
         >
           <div slot="status" slot-scope="text">
-            <status :text=" text ? text : 'inprogress' " displayText></status>
+            <status :text=" text ? text : 'InProgress'" displayText></status>
           </div>
         </a-table>
         <a-divider />
-        <div class="float-container">
-          <div class="float-child-left">
-            <a-progress
-              type="circle"
-              :percent="parseFloat((selectedItems.filter(item => item.status !== 'inprogress').length)/(selectedItems.length) * 100)"
-              :format="(percent) => parseFloat(percent).toFixed(2) + '% ' + $t('state.completed')" />
-          </div>
-          <div class="float-child-right">
-            <a-alert type="info">
-              <span
-                slot="message"
-                v-html="`<b>Successfully completed: ${selectedItems.filter(item => item.status === 'success').length || 0}
-                <br/>Failed: ${selectedItems.filter(item => item.status === 'failure').length || 0}
-                <br/>In Progress: ${selectedItems.filter(item => item.status === 'inprogress').length || 0}<b/>`" />
-            </a-alert>
-          </div>
-        </div>
+        <a-card :bordered="false" style="background:#f1f1f1">
+          <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
+          <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
+          <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
+        </a-card>
         <br/>
       </div>
     </a-modal>
@@ -450,9 +448,11 @@ export default {
       actionLoading: false,
       columns: [],
       selectedColumns: [],
+      chosenColumns: [],
       showGroupActionModal: false,
       selectedItems: {},
       items: [],
+      modalInfo: {},
       itemCount: 0,
       page: 1,
       pageSize: 10,
@@ -499,17 +499,28 @@ export default {
     })
     eventBus.$on('update-bulk-job-status', (items, action) => {
       for (const item of items) {
-        const job = this.$store.getters.asyncJobIds.filter(j => { return j.jobid === item.jobid })[0]
-        if (job?.bulkAction) {
-          job.bulkAction = action
-          this.$store.getters.asyncJobIds.map(function (j) {
-            if (j.jobid === item.jobid) {
-              j.bulkAction = false
-            }
-          })
-        }
+        this.$store.getters.asyncJobIds.map(function (j) {
+          if (j.jobid === item.jobid) {
+            j.bulkAction = action
+          }
+        })
       }
     })
+    eventBus.$on('update-job-details', (jobId, resourceId) => {
+      const path = this.$route.path
+      var jobs = this.$store.getters.asyncJobIds.map(job => {
+        if (job.jobid === jobId) {
+          if (!path.includes(resourceId)) {
+            job.path = path + '/' + resourceId
+          } else {
+            job.path = path
+          }
+        }
+        return job
+      })
+
+      this.$store.commit('SET_ASYNC_JOB_IDS', jobs)
+    })
 
     if (this.device === 'desktop') {
       this.pageSize = 20
@@ -686,6 +697,9 @@ export default {
           sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') }
         })
       }
+      this.chosenColumns = this.columns.filter(column => {
+        return !['State', 'Host', 'Zone', 'IP Address', 'Private IP Address', 'Link Local IP Address'].includes(column.title)
+      })
 
       if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) {
         delete params.showunique
@@ -952,10 +966,10 @@ export default {
       })
     },
     pollActionCompletion (jobId, action, resourceName, resource, showLoading = true) {
+      eventBus.$emit('update-job-details', jobId, resource)
       this.$pollJob({
         jobId,
         name: resourceName,
-        resourceId: resource,
         successMethod: result => {
           this.fetchData()
           if (this.selectedItems.length > 0) {
@@ -975,7 +989,7 @@ export default {
         errorMethod: () => {
           this.fetchData()
           if (this.selectedItems.length > 0) {
-            this.updateResourceState(resource, 'failure')
+            this.updateResourceState(resource, 'failed')
           }
         },
         loadingMessage: `${this.$t(action.label)} - ${resourceName}`,
@@ -1008,18 +1022,21 @@ export default {
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
+      this.modalInfo = {}
     },
     handleSubmit (e) {
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
         if (this.selectedRowKeys.length > 0) {
-          this.selectedColumns = this.columns
-          this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+          this.selectedColumns = this.chosenColumns
+          this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
           this.selectedColumns.splice(0, 0, {
             dataIndex: 'status',
             title: this.$t('label.status'),
             scopedSlots: { customRender: 'status' }
           })
           this.showGroupActionModal = true
+          this.modalInfo.label = this.currentAction.label
+          this.modalInfo.docHelp = this.currentAction.docHelp
         }
         this.form.validateFields((err, values) => {
           if (!err) {
@@ -1100,7 +1117,7 @@ export default {
               status: 'progress',
               bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
             })
-            this.updateResourceState(resource, 'inprogress', jobid)
+            this.updateResourceState(resource, 'InProgress', jobid)
             this.pollActionCompletion(jobid, action, resourceName, resource, showLoading)
             return true
           } else {
@@ -1381,29 +1398,4 @@ export default {
 .ant-breadcrumb {
   vertical-align: text-bottom;
 }
-
-.float-container {
-    display: flex;
-}
-
-.float-child-right {
-    width: 80%;
-    float: left;
-    padding: 10px;
-}
-
-.float-child-left {
-    width: 20%;
-    float: left;
-    padding: 15px;
-}
-@media (max-width: 767px) {
-  .float-container {
-    flex-direction: column-reverse;
-  }
-  .float-child-left,
-  .float-child-right {
-    width: auto;
-  }
-}
 </style>
diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index beb82c74807a..8e8e3bf8598d 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -120,6 +120,7 @@
 
 <script>
 import { api } from '@/api'
+import eventBus from '@/config/eventBus'
 
 export default {
   name: 'StartVirtualMachine',
@@ -258,6 +259,8 @@ export default {
             },
             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)
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 111e0c460fea..162a43214173 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -286,8 +286,15 @@ export default {
     deleteRule (rule) {
       this.loading = true
       api('deleteEgressFirewallRule', { id: rule.id }).then(response => {
+        const jobId = response.deleteegressfirewallruleresponse.jobid
+        this.$store.dispatch('AddAsyncJob', {
+          title: this.$t('label.firewall'),
+          jobid: jobId,
+          description: rule.id,
+          status: 'progress'
+        })
         this.$pollJob({
-          jobId: response.deleteegressfirewallruleresponse.jobid,
+          jobId: jobId,
           successMessage: this.$t('message.success.remove.egress.rule'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 1edaa8efba0d..a4d97259ef5d 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -329,8 +329,15 @@ export default {
     deleteRule (rule) {
       this.loading = true
       api('deleteFirewallRule', { id: rule.id }).then(response => {
+        const jobId = response.deletefirewallruleresponse.jobid
+        this.$store.dispatch('AddAsyncJob', {
+          title: this.$t('label.firewall'),
+          jobid: jobId,
+          description: rule.id,
+          status: 'progress'
+        })
         this.$pollJob({
-          jobId: response.deletefirewallruleresponse.jobid,
+          jobId: jobId,
           successMessage: this.$t('message.success.remove.firewall.rule'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 2c504552aa63..39db83c19851 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -387,8 +387,15 @@ export default {
       api('disassociateIpAddress', {
         id: ip.id
       }).then(response => {
+        const jobId = response.disassociateipaddressresponse.jobid
+        this.$store.dispatch('AddAsyncJob', {
+          title: this.$t('label.public.ip'),
+          jobid: jobId,
+          description: ip.id,
+          status: 'progress'
+        })
         this.$pollJob({
-          jobId: response.disassociateipaddressresponse.jobid,
+          jobId: jobId,
           successMessage: this.$t('message.success.release.ip'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 42e51528f070..68fd361ddb31 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -1031,8 +1031,15 @@ export default {
       api('deleteLoadBalancerRule', {
         id: rule.id
       }).then(response => {
+        const jobId = response.deleteloadbalancerruleresponse.jobid
+        this.$store.dispatch('AddAsyncJob', {
+          title: this.$t('label.loadbalancerrule'),
+          jobid: jobId,
+          description: rule.id,
+          status: 'progress'
+        })
         this.$pollJob({
-          jobId: response.deleteloadbalancerruleresponse.jobid,
+          jobId: jobId,
           successMessage: this.$t('message.success.remove.rule'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
@@ -1067,6 +1074,7 @@ export default {
           bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
       }).catch(error => {
+        console.log(error)
         this.$notifyError(error)
         this.loading = false
       })

From 18d66e3cd0bbd0ae68f3b099130f3a89152c26b7 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Thu, 3 Jun 2021 21:08:21 +0530
Subject: [PATCH 08/15] minor tweaks

---
 ui/public/locales/en.json                 |  3 +++
 ui/src/components/header/HeaderNotice.vue | 12 +++++++-----
 ui/src/components/view/BulkActionView.vue |  6 +++---
 ui/src/views/AutogenView.vue              | 18 +++++++++---------
 ui/src/views/network/EgressRulesTab.vue   | 17 ++++++++++-------
 ui/src/views/network/FirewallRules.vue    | 17 ++++++++++-------
 ui/src/views/network/IpAddressesTab.vue   | 13 ++++++++-----
 ui/src/views/network/LoadBalancing.vue    | 17 ++++++++++-------
 ui/src/views/network/PortForwarding.vue   | 22 ++++++++++++++++------
 9 files changed, 76 insertions(+), 49 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 12b3556be9da..f035736f123f 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -104,6 +104,7 @@
 "label.action.delete.disk.offering.processing": "Deleting Disk Offering....",
 "label.action.delete.domain": "Delete Domain",
 "label.action.delete.domain.processing": "Deleting Domain....",
+"label.action.delete.egress.firewall": "Delete egress firewall rule",
 "label.action.delete.firewall": "Delete firewall rule",
 "label.action.delete.firewall.processing": "Deleting Firewall....",
 "label.action.delete.ingress.rule": "Delete Ingress Rule",
@@ -1530,6 +1531,7 @@
 "label.opendaylight.controllerdetail": "OpenDaylight Controller Details",
 "label.opendaylight.controllers": "OpenDaylight Controllers",
 "label.operation": "Operation",
+"label.operation.status": "Operation Status",
 "label.optional": "Optional",
 "label.order": "Order",
 "label.oscategoryid": "OS Preference",
@@ -1615,6 +1617,7 @@
 "label.portable.ip.ranges": "Portable IP Ranges",
 "label.portableipaddress": "Portable IPs",
 "label.portforwarding": "Port Forwarding",
+"label.portforwarding.rule": "Port Forwarding Rule",
 "label.powerflex.gateway": "Gateway",
 "label.powerflex.gateway.username": "Gateway Username",
 "label.powerflex.gateway.password": "Gateway Password",
diff --git a/ui/src/components/header/HeaderNotice.vue b/ui/src/components/header/HeaderNotice.vue
index 097a2d532008..07d9936a55d3 100644
--- a/ui/src/components/header/HeaderNotice.vue
+++ b/ui/src/components/header/HeaderNotice.vue
@@ -84,12 +84,14 @@ export default {
       }, 4000)
     },
     getResourceName (description, data) {
-      if (data === 'name') {
-        const name = description.match(/\(([^)]+)\)/)
-        return name ? name[1] : null
+      if (description) {
+        if (data === 'name') {
+          const name = description.match(/\(([^)]+)\)/)
+          return name ? name[1] : null
+        }
+        const msg = description.substring(description.indexOf(')') + 1)
+        return msg
       }
-      const msg = description.substring(description.indexOf(')') + 1)
-      return msg
     },
     async pollJobs () {
       var hasUpdated = false
diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
index aa9335b6d795..8b1c1c7c1ea4 100644
--- a/ui/src/components/view/BulkActionView.vue
+++ b/ui/src/components/view/BulkActionView.vue
@@ -25,7 +25,7 @@
       :okText="$t('label.ok')"
       :cancelText="$t('label.cancel')"
       style="top: 20px;"
-      width="60vw"
+      width="50vw"
       @ok="groupAction"
       @cancel="closeModal"
       centered>
@@ -81,7 +81,7 @@
       :maskClosable="false"
       :cancelText="$t('label.cancel')"
       @cancel="handleCancel"
-      width="60vw"
+      width="50vw"
       style="top: 20px;overflow-y: auto"
       centered
     >
@@ -99,7 +99,7 @@
           :pagination="true"
           style="overflow-y: auto">
           <div slot="status" slot-scope="text">
-            <status :text=" text ? text : 'inprogress' " displayText></status>
+            <status :text=" text ? text : $t('state.inprogress') " displayText></status>
           </div>
           <template slot="algorithm" slot-scope="record">
             {{ returnAlgorithmName(record.algorithm) }}
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index b367d43cde27..a2861d655a3c 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -127,7 +127,7 @@
         :okText="$t('label.ok')"
         :cancelText="$t('label.cancel')"
         style="top: 20px;"
-        :width="this.selectedItems.length > 0 ? '60vw' : '30vw'"
+        :width="this.selectedItems.length > 0 ? '50vw' : '30vw'"
         @ok="handleSubmit"
         @cancel="closeAction"
         :confirmLoading="actionLoading"
@@ -358,7 +358,7 @@
       :okText="$t('label.ok')"
       :cancelText="$t('label.cancel')"
       @cancel="handleCancel"
-      width="60vw"
+      width="50vw"
       style="top: 20px;overflow-y: auto"
       centered
     >
@@ -383,10 +383,9 @@
           :dataSource="selectedItems"
           :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
           :pagination="true"
-          style="overflow-y: auto"
-        >
+          style="overflow-y: auto">
           <div slot="status" slot-scope="text">
-            <status :text=" text ? text : 'InProgress'" displayText></status>
+            <status :text=" text ? text : $t('state.inprogress')" displayText></status>
           </div>
         </a-table>
         <a-divider />
@@ -450,7 +449,7 @@ export default {
       selectedColumns: [],
       chosenColumns: [],
       showGroupActionModal: false,
-      selectedItems: {},
+      selectedItems: [],
       items: [],
       modalInfo: {},
       itemCount: 0,
@@ -507,13 +506,14 @@ export default {
       }
     })
     eventBus.$on('update-job-details', (jobId, resourceId) => {
+      const fullPath = this.$route.fullPath
       const path = this.$route.path
       var jobs = this.$store.getters.asyncJobIds.map(job => {
         if (job.jobid === jobId) {
-          if (!path.includes(resourceId)) {
+          if (resourceId && !path.includes(resourceId)) {
             job.path = path + '/' + resourceId
           } else {
-            job.path = path
+            job.path = fullPath
           }
         }
         return job
@@ -1031,7 +1031,7 @@ export default {
           this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
           this.selectedColumns.splice(0, 0, {
             dataIndex: 'status',
-            title: this.$t('label.status'),
+            title: this.$t('label.operation.status'),
             scopedSlots: { customRender: 'status' }
           })
           this.showGroupActionModal = true
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 162a43214173..419e336cdfeb 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -64,7 +64,7 @@
       type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="bulkDeleteRulesConfirmation()">
+      @click="bulkActionConfirmation()">
       {{ $t('label.action.bulk.delete.egress.firewall.rules') }}
     </a-button>
     <a-table
@@ -128,6 +128,7 @@ import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
+import eventBus from '@/config/eventBus'
 
 export default {
   name: 'EgressRulesTab',
@@ -249,12 +250,12 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
-    bulkDeleteRulesConfirmation () {
+    bulkActionConfirmation () {
       this.showConfirmationAction = true
       this.selectedColumns = this.columns.filter(column => {
         return !this.filterColumns.includes(column.title)
       })
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
       this.showGroupActionModal = false
@@ -273,7 +274,7 @@ export default {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
-        title: this.$t('label.status'),
+        title: this.$t('label.operation.status'),
         scopedSlots: { customRender: 'status' }
       })
       if (this.selectedRowKeys.length > 0) {
@@ -288,11 +289,13 @@ export default {
       api('deleteEgressFirewallRule', { id: rule.id }).then(response => {
         const jobId = response.deleteegressfirewallruleresponse.jobid
         this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('label.firewall'),
+          title: this.$t('label.action.delete.egress.firewall'),
           jobid: jobId,
           description: rule.id,
-          status: 'progress'
+          status: 'progress',
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
+        eventBus.$emit('update-job-details', jobId, null)
         this.$pollJob({
           jobId: jobId,
           successMessage: this.$t('message.success.remove.egress.rule'),
@@ -305,7 +308,7 @@ export default {
           errorMessage: this.$t('message.remove.egress.rule.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failure')
+              this.updateResourceState(rule.id, 'failed')
             }
             this.fetchData()
           },
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index a4d97259ef5d..8fd86b724464 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -59,7 +59,7 @@
       type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="bulkDeleteRulesConfirmation()">
+      @click="bulkActionConfirmation()">
       {{ $t('label.action.bulk.delete.firewall.rules') }}
     </a-button>
     <a-table
@@ -163,6 +163,7 @@ import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
+import eventBus from '@/config/eventBus'
 
 export default {
   components: {
@@ -292,12 +293,12 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
-    bulkDeleteRulesConfirmation () {
+    bulkActionConfirmation () {
       this.showConfirmationAction = true
       this.selectedColumns = this.columns.filter(column => {
         return !this.filterColumns.includes(column.title)
       })
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
       this.showGroupActionModal = false
@@ -316,7 +317,7 @@ export default {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
-        title: this.$t('label.status'),
+        title: this.$t('label.operation.status'),
         scopedSlots: { customRender: 'status' }
       })
       if (this.selectedRowKeys.length > 0) {
@@ -331,11 +332,13 @@ export default {
       api('deleteFirewallRule', { id: rule.id }).then(response => {
         const jobId = response.deletefirewallruleresponse.jobid
         this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('label.firewall'),
+          title: this.$t('label.action.delete.firewall'),
           jobid: jobId,
           description: rule.id,
-          status: 'progress'
+          status: 'progress',
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
+        eventBus.$emit('update-job-details', jobId, null)
         this.$pollJob({
           jobId: jobId,
           successMessage: this.$t('message.success.remove.firewall.rule'),
@@ -348,7 +351,7 @@ export default {
           errorMessage: this.$t('message.remove.firewall.rule.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failure')
+              this.updateResourceState(rule.id, 'failed')
             }
             this.fetchData()
           },
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 39db83c19851..0353dd2cef41 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -155,6 +155,7 @@ import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
+import eventBus from '@/config/eventBus'
 
 export default {
   name: 'IpAddressesTab',
@@ -353,7 +354,7 @@ export default {
       this.selectedColumns = this.columns.filter(column => {
         return !this.filterColumns.includes(column.title)
       })
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
       this.showGroupActionModal = false
@@ -372,7 +373,7 @@ export default {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
-        title: this.$t('label.status'),
+        title: this.$t('label.operation.status'),
         scopedSlots: { customRender: 'status' }
       })
       if (this.selectedRowKeys.length > 0) {
@@ -389,11 +390,13 @@ export default {
       }).then(response => {
         const jobId = response.disassociateipaddressresponse.jobid
         this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('label.public.ip'),
+          title: this.$t('label.action.release.ip'),
           jobid: jobId,
           description: ip.id,
-          status: 'progress'
+          status: 'progress',
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
+        eventBus.$emit('update-job-details', jobId, null)
         this.$pollJob({
           jobId: jobId,
           successMessage: this.$t('message.success.release.ip'),
@@ -406,7 +409,7 @@ export default {
           errorMessage: this.$t('message.release.ip.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(ip.id, 'failure')
+              this.updateResourceState(ip.id, 'failed')
             }
             this.fetchData()
           },
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 68fd361ddb31..0bb03a2a26ec 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -67,7 +67,7 @@
       type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="bulkDeleteRulesConfirmation()">
+      @click="bulkActionConfirmation()">
       {{ $t('label.action.bulk.delete.load.balancer.rules') }}
     </a-button>
     <a-table
@@ -409,6 +409,7 @@ import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
+import eventBus from '@/config/eventBus'
 
 export default {
   name: 'LoadBalancing',
@@ -992,12 +993,12 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
-    bulkDeleteRulesConfirmation () {
+    bulkActionConfirmation () {
       this.showConfirmationAction = true
       this.selectedColumns = this.columns.filter(column => {
         return !this.filterColumns.includes(column.title)
       })
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
       this.showGroupActionModal = false
@@ -1016,7 +1017,7 @@ export default {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
-        title: this.$t('label.status'),
+        title: this.$t('label.operation.status'),
         scopedSlots: { customRender: 'status' }
       })
       if (this.selectedRowKeys.length > 0) {
@@ -1033,11 +1034,13 @@ export default {
       }).then(response => {
         const jobId = response.deleteloadbalancerruleresponse.jobid
         this.$store.dispatch('AddAsyncJob', {
-          title: this.$t('label.loadbalancerrule'),
+          title: this.$t('label.action.delete.load.balancer'),
           jobid: jobId,
           description: rule.id,
-          status: 'progress'
+          status: 'progress',
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
+        eventBus.$emit('update-job-details', jobId, null)
         this.$pollJob({
           jobId: jobId,
           successMessage: this.$t('message.success.remove.rule'),
@@ -1054,7 +1057,7 @@ export default {
           errorMessage: this.$t('message.remove.rule.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failure')
+              this.updateResourceState(rule.id, 'failed')
             }
             if (this.selectedRowKeys.length === 0) {
               this.parentFetchData()
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 614bec58d99b..ce5c73634b0b 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -76,7 +76,7 @@
       type="danger"
       icon="plus"
       style="width: 100%; margin-bottom: 15px"
-      @click="bulkDeleteRulesConfirmation()">
+      @click="bulkActionConfirmation()">
       {{ $t('label.action.bulk.delete.portforward.rules') }}
     </a-button>
     <a-table
@@ -279,6 +279,7 @@ import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/view/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
+import eventBus from '@/config/eventBus'
 
 export default {
   components: {
@@ -484,12 +485,12 @@ export default {
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
-    bulkDeleteRulesConfirmation () {
+    bulkActionConfirmation () {
       this.showConfirmationAction = true
       this.selectedColumns = this.columns.filter(column => {
         return !this.filterColumns.includes(column.title)
       })
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'inprogress' }))
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
       this.showGroupActionModal = false
@@ -508,7 +509,7 @@ export default {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
-        title: this.$t('label.status'),
+        title: this.$t('label.operation.status'),
         scopedSlots: { customRender: 'status' }
       })
       if (this.selectedRowKeys.length > 0) {
@@ -521,8 +522,17 @@ export default {
     deleteRule (rule) {
       this.loading = true
       api('deletePortForwardingRule', { id: rule.id }).then(response => {
+        const jobId = response.deleteportforwardingruleresponse.jobid
+        this.$store.dispatch('AddAsyncJob', {
+          title: this.$t('label.portforwarding.rule'),
+          jobid: jobId,
+          description: rule.id,
+          status: 'progress',
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
+        })
+        eventBus.$emit('update-job-details', jobId, null)
         this.$pollJob({
-          jobId: response.deleteportforwardingruleresponse.jobid,
+          jobId: jobId,
           successMessage: this.$t('message.success.remove.port.forward'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
@@ -533,7 +543,7 @@ export default {
           errorMessage: this.$t('message.remove.port.forward.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failure')
+              this.updateResourceState(rule.id, 'failed')
             }
             this.fetchData()
           },

From 22cb2363916fb0a5697485e4a5058bbc8bebd87d Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Fri, 4 Jun 2021 18:26:13 +0530
Subject: [PATCH 09/15] fix group action for vpn users

---
 ui/src/components/view/ListView.vue |  2 +-
 ui/src/config/section/network.js    |  4 ++--
 ui/src/views/AutogenView.vue        | 14 ++++++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 54994656b163..26684d6d10df 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -425,7 +425,7 @@ export default {
       return ['vm', 'alert', 'vmgroup', 'ssh', 'affinitygroup', 'volume', 'snapshot',
         'vmsnapshot', 'guestnetwork', 'vpc', 'publicip', 'vpnuser', 'vpncustomergateway',
         'project', 'account', 'systemvm', 'router', 'computeoffering', 'systemoffering',
-        'diskoffering', 'backupoffering', 'networkoffering', 'vpcoffering', 'ilbvm'
+        'diskoffering', 'backupoffering', 'networkoffering', 'vpcoffering', 'ilbvm', 'kubernetes'
       ].includes(this.$route.name)
     },
     fetchColumns () {
diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index d24a176ccd61..937d58a3167c 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -606,9 +606,9 @@ export default {
           popup: true,
           groupMap: (selection, values, record) => {
             return selection.map(x => {
-              const data = record.filter(y => { return y.username === x })
+              const data = record.filter(y => { return y.id === x })
               return {
-                username: x, account: data[0].account, domainid: data[0].domainid
+                username: data[0].username, account: data[0].account, domainid: data[0].domainid
               }
             })
           }
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index a2861d655a3c..53cecc2fb27f 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -127,7 +127,7 @@
         :okText="$t('label.ok')"
         :cancelText="$t('label.cancel')"
         style="top: 20px;"
-        :width="this.selectedItems.length > 0 ? '50vw' : '30vw'"
+        :width="modalWidth"
         @ok="handleSubmit"
         @cancel="closeAction"
         :confirmLoading="actionLoading"
@@ -468,7 +468,8 @@ export default {
       actions: [],
       formModel: {},
       confirmDirty: false,
-      firstIndex: 0
+      firstIndex: 0,
+      modalWidth: '30vw'
     }
   },
   beforeCreate () {
@@ -698,7 +699,9 @@ export default {
         })
       }
       this.chosenColumns = this.columns.filter(column => {
-        return !['State', 'Host', 'Zone', 'IP Address', 'Private IP Address', 'Link Local IP Address'].includes(column.title)
+        return ![this.$t('label.state'), this.$t('label.hostname'), this.$t('label.hostid'), this.$t('label.zonename'),
+          this.$t('label.zone'), this.$t('label.zoneid'), this.$t('label.ip'), this.$t('label.ipaddress'), this.$t('label.privateip'),
+          this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb')].includes(column.title)
       })
 
       if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) {
@@ -817,9 +820,12 @@ export default {
     onRowSelectionChange (selection) {
       this.selectedRowKeys = selection
       if (selection?.length > 0) {
+        this.modalWidth = '50vw'
         this.selectedItems = (this.items.filter(function (item) {
           return selection.indexOf(item.id) !== -1
         }))
+      } else {
+        this.modalWidth = '30vw'
       }
     },
     execAction (action, isGroupAction) {
@@ -1090,7 +1096,7 @@ export default {
           tempResource.push(resource)
         }
         for (var r = 0; r < tempResource.length; r++) {
-          const objIndex = this.selectedItems.findIndex(obj => obj.id === tempResource[r])
+          const objIndex = this.selectedItems.findIndex(obj => (obj.id === tempResource[r] || obj.username === tempResource[r]))
           this.selectedItems[objIndex].status = state
           if (jobid) {
             this.selectedItems[objIndex].jobid = jobid

From 15e52d4f10283dfc29cafd6e4d5b130b3eb0c49d Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Mon, 7 Jun 2021 11:28:53 +0530
Subject: [PATCH 10/15] Refactor code

---
 ui/public/locales/en.json                     |   4 +
 ui/src/components/view/BulkActionProgress.vue | 136 +++++++++++++++
 ui/src/components/view/BulkActionView.vue     |  77 +--------
 ui/src/views/AutogenView.vue                  | 130 ++++++---------
 ui/src/views/image/IsoZones.vue               | 110 ++++++++++++-
 ui/src/views/image/TemplateZones.vue          | 155 ++++++++++++++++--
 ui/src/views/network/EgressRulesTab.vue       |  11 +-
 ui/src/views/network/FirewallRules.vue        |  11 +-
 ui/src/views/network/IpAddressesTab.vue       |  25 ++-
 ui/src/views/network/LoadBalancing.vue        |  11 +-
 ui/src/views/network/PortForwarding.vue       |  11 +-
 11 files changed, 469 insertions(+), 212 deletions(-)
 create mode 100644 ui/src/components/view/BulkActionProgress.vue

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index f035736f123f..b9fbdf161982 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -74,6 +74,8 @@
 "label.action.bulk.delete.egress.firewall.rules": "Bulk delete egress firewall rules",
 "label.action.bulk.delete.firewall.rules": "Bulk delete firewall rules",
 "label.action.bulk.delete.load.balancer.rules": "Bulk delete load balancer rules",
+"label.action.bulk.delete.templates": "Bulk delete templates",
+"label.action.bulk.delete.isos": "Bulk delete ISOs",
 "label.action.bulk.delete.portforward.rules": "Bulk delete Port Forward rules",
 "label.action.bulk.release.public.ip.address": "Bulk release Public IP Addresses",
 "label.action.cancel.maintenance.mode": "Cancel Maintenance Mode",
@@ -596,6 +598,8 @@
 "label.confirm.delete.firewall.rules": "Please confirm you wish to delete the selected firewall rules",
 "label.confirm.delete.loadbalancer.rules": "Please confirm you wish to delete the selected load balancing rules",
 "label.confirm.delete.portforward.rules": "Please confirm you wish to delete the selected port-forward rules",
+"label.confirm.delete.templates": "Please confirm you wish to delete the selected templates",
+"label.confirm.delete.isos": "Please confirm you wish to delete the selected isos",
 "label.confirm.release.public.ip.addresses": "Please confirm you wish to release the selected public IP addresses",
 "label.congratulations": "Congratulations!",
 "label.connectiontimeout": "Connection Timeout",
diff --git a/ui/src/components/view/BulkActionProgress.vue b/ui/src/components/view/BulkActionProgress.vue
new file mode 100644
index 000000000000..01ff20a22876
--- /dev/null
+++ b/ui/src/components/view/BulkActionProgress.vue
@@ -0,0 +1,136 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-modal
+    :visible="showGroupActionModal"
+    :closable="true"
+    :maskClosable="false"
+    :cancelText="$t('label.cancel')"
+    @cancel="handleCancel"
+    width="50vw"
+    style="top: 20px;overflow-y: auto"
+    centered
+  >
+    <span slot="title"> {{ $t(message.title) }}
+      <a
+        v-if="message.docHelp || $route.meta.docHelp"
+        style="margin-left: 5px"
+        :href="$config.docBase + '/' + (message.docHelp || $route.meta.docHelp)"
+        target="_blank">
+        <a-icon type="question-circle-o"></a-icon>
+      </a>
+    </span>
+    <template slot="footer">
+      <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
+    </template>
+    <div v-if="showGroupActionModal">
+      <a-table
+        v-if="selectedItems.length > 0"
+        size="middle"
+        :columns="selectedColumns"
+        :dataSource="selectedItems"
+        :rowKey="(record, idx) => (this.$route.path.includes('/template') || this.$route.path.includes('/iso')) ? record.zoneid: record.id"
+        :pagination="true"
+        style="overflow-y: auto">
+        <div slot="status" slot-scope="text">
+          <status :text=" text ? text : $t('state.inprogress') " displayText></status>
+        </div>
+        <template slot="algorithm" slot-scope="record">
+          {{ returnAlgorithmName(record.algorithm) }}
+        </template>
+        <template slot="privateport" slot-scope="record">
+          {{ record.privateport }} - {{ record.privateendport }}
+        </template>
+        <template slot="publicport" slot-scope="record">
+          {{ record.publicport }} - {{ record.publicendport }}
+        </template>
+        <template slot="protocol" slot-scope="record">
+          {{ record.protocol | capitalise }}
+        </template>
+        <template slot="startport" slot-scope="record">
+          {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
+        </template>
+        <template slot="endport" slot-scope="record">
+          {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
+        </template>
+        <template slot="vm" slot-scope="record">
+          <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+        </template>
+      </a-table>
+      <a-divider />
+      <a-card :bordered="false" style="background:#f1f1f1">
+        <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
+        <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
+        <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
+      </a-card>
+      <br/>
+    </div>
+  </a-modal>
+</template>
+<script>
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'BulkActionProgress',
+  components: {
+    Status
+  },
+  filters: {
+    capitalise: val => {
+      if (val === 'all') return 'All'
+      return val.toUpperCase()
+    }
+  },
+  props: {
+    showGroupActionModal: {
+      type: Boolean,
+      default: false
+    },
+    selectedItems: {
+      type: Array,
+      default: () => []
+    },
+    selectedColumns: {
+      type: Array,
+      default: () => []
+    },
+    message: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  inject: ['parentFetchData'],
+  methods: {
+    handleCancel () {
+      this.$emit('handle-cancel')
+    },
+    returnAlgorithmName (name) {
+      switch (name) {
+        case 'leastconn':
+          return 'Least connections'
+        case 'roundrobin' :
+          return 'Round-robin'
+        case 'source':
+          return 'Source'
+        default :
+          return ''
+      }
+    }
+  }
+}
+</script>
diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
index 8b1c1c7c1ea4..3b68a4804da0 100644
--- a/ui/src/components/view/BulkActionView.vue
+++ b/ui/src/components/view/BulkActionView.vue
@@ -75,75 +75,24 @@
       </span>
     </a-modal>
 
-    <a-modal
-      :visible="showGroupActionModal"
-      :closable="true"
-      :maskClosable="false"
-      :cancelText="$t('label.cancel')"
-      @cancel="handleCancel"
-      width="50vw"
-      style="top: 20px;overflow-y: auto"
-      centered
-    >
-      <span slot="title"> {{ $t(message.title) }} </span>
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <div v-if="showGroupActionModal">
-        <a-table
-          v-if="selectedItems.length > 0"
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
-          :pagination="true"
-          style="overflow-y: auto">
-          <div slot="status" slot-scope="text">
-            <status :text=" text ? text : $t('state.inprogress') " displayText></status>
-          </div>
-          <template slot="algorithm" slot-scope="record">
-            {{ returnAlgorithmName(record.algorithm) }}
-          </template>
-          <template slot="privateport" slot-scope="record">
-            {{ record.privateport }} - {{ record.privateendport }}
-          </template>
-          <template slot="publicport" slot-scope="record">
-            {{ record.publicport }} - {{ record.publicendport }}
-          </template>
-          <template slot="protocol" slot-scope="record">
-            {{ record.protocol | capitalise }}
-          </template>
-          <template slot="startport" slot-scope="record">
-            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
-          </template>
-          <template slot="endport" slot-scope="record">
-            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
-          </template>
-          <template slot="vm" slot-scope="record">
-            <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
-          </template>
-        </a-table>
-        <a-divider />
-        <a-card :bordered="false" style="background:#f1f1f1">
-          <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
-          <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
-          <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
-        </a-card>
-        <br/>
-      </div>
-    </a-modal>
+    <bulk-action-progress
+      :showGroupActionModal="showGroupActionModal"
+      :selectedItems="selectedItems"
+      :selectedColumns="selectedColumns"
+      :message="message"
+      @handle-cancel="handleCancel" />
   </div>
 </template>
 
 <script>
 import Status from '@/components/widgets/Status'
-import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionProgress from '@/components/view/BulkActionProgress'
 
 export default {
   name: 'BulkActionView',
   components: {
     Status,
-    TooltipButton
+    BulkActionProgress
   },
   props: {
     showConfirmationAction: {
@@ -202,16 +151,6 @@ export default {
     }
   },
   methods: {
-    handleChangePage (page, pageSize) {
-      this.page = page
-      this.pageSize = pageSize
-      this.fetchData()
-    },
-    handleChangePageSize (currentPage, pageSize) {
-      this.page = currentPage
-      this.pageSize = pageSize
-      this.fetchData()
-    },
     handleCancel () {
       this.$emit('handle-cancel')
     },
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 53cecc2fb27f..78744269df22 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -351,52 +351,12 @@
         </template>
       </a-pagination>
     </div>
-    <a-modal
-      :visible="showGroupActionModal"
-      :closable="true"
-      :maskClosable="false"
-      :okText="$t('label.ok')"
-      :cancelText="$t('label.cancel')"
-      @cancel="handleCancel"
-      width="50vw"
-      style="top: 20px;overflow-y: auto"
-      centered
-    >
-      <span slot="title">
-        {{ $t(modalInfo.label) }}
-        <a
-          v-if="modalInfo.docHelp || $route.meta.docHelp"
-          style="margin-left: 5px"
-          :href="$config.docBase + '/' + (modalInfo.docHelp || $route.meta.docHelp)"
-          target="_blank">
-          <a-icon type="question-circle-o"></a-icon>
-        </a>
-      </span>
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
-      </template>
-      <div v-if="showGroupActionModal">
-        <a-table
-          v-if="selectedItems.length > 0"
-          size="middle"
-          :columns="selectedColumns"
-          :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
-          :pagination="true"
-          style="overflow-y: auto">
-          <div slot="status" slot-scope="text">
-            <status :text=" text ? text : $t('state.inprogress')" displayText></status>
-          </div>
-        </a-table>
-        <a-divider />
-        <a-card :bordered="false" style="background:#f1f1f1">
-          <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
-          <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
-          <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
-        </a-card>
-        <br/>
-      </div>
-    </a-modal>
+    <bulk-action-progress
+      :showGroupActionModal="showGroupActionModal"
+      :selectedItems="selectedItems"
+      :selectedColumns="selectedColumns"
+      :message="modalInfo"
+      @handle-cancel="handleCancel" />
   </div>
 </template>
 
@@ -414,6 +374,7 @@ import ListView from '@/components/view/ListView'
 import ResourceView from '@/components/view/ResourceView'
 import ActionButton from '@/components/view/ActionButton'
 import SearchView from '@/components/view/SearchView'
+import BulkActionProgress from '@/components/view/BulkActionProgress'
 
 export default {
   name: 'Resource',
@@ -424,7 +385,8 @@ export default {
     ListView,
     Status,
     ActionButton,
-    SearchView
+    SearchView,
+    BulkActionProgress
   },
   mixins: [mixinDevice],
   provide: function () {
@@ -492,6 +454,10 @@ export default {
         (this.$route.path.includes('/guestnetwork/') && (this.$route.query.tab === 'egress.rules' || this.$route.query.tab === 'public.ip.addresses'))) {
         return
       }
+
+      if (this.$route.path.includes('/template/')) {
+        return
+      }
       this.fetchData()
     })
     eventBus.$on('exec-action', (action, isGroupAction) => {
@@ -523,6 +489,35 @@ export default {
       this.$store.commit('SET_ASYNC_JOB_IDS', jobs)
     })
 
+    eventBus.$on('update-resource-state', (selectedItems, resource, state, jobid) => {
+      if (selectedItems.length === 0) {
+        return
+      }
+      var tempResource = []
+      if (selectedItems && resource) {
+        if (resource.includes(',')) {
+          resource = resource.split(',')
+          tempResource = resource
+        } else {
+          tempResource.push(resource)
+        }
+        for (var r = 0; r < tempResource.length; r++) {
+          var objIndex = 0
+          if (this.$route.path.includes('/template') || this.$route.path.includes('/iso')) {
+            objIndex = selectedItems.findIndex(obj => (obj.zoneid === tempResource[r]))
+          } else {
+            objIndex = selectedItems.findIndex(obj => (obj.id === tempResource[r] || obj.username === tempResource[r]))
+          }
+          if (state) {
+            selectedItems[objIndex].status = state
+          }
+          if (jobid) {
+            selectedItems[objIndex].jobid = jobid
+          }
+        }
+      }
+    })
+
     if (this.device === 'desktop') {
       this.pageSize = 20
     }
@@ -701,7 +696,8 @@ export default {
       this.chosenColumns = this.columns.filter(column => {
         return ![this.$t('label.state'), this.$t('label.hostname'), this.$t('label.hostid'), this.$t('label.zonename'),
           this.$t('label.zone'), this.$t('label.zoneid'), this.$t('label.ip'), this.$t('label.ipaddress'), this.$t('label.privateip'),
-          this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb')].includes(column.title)
+          this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb'), this.$t('label.current'),
+          this.$t('label.created')].includes(column.title)
       })
 
       if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) {
@@ -979,7 +975,7 @@ export default {
         successMethod: result => {
           this.fetchData()
           if (this.selectedItems.length > 0) {
-            this.updateResourceState(resource, 'success')
+            eventBus.$emit('update-resource-state', this.selectedItems, resource, 'success')
           }
           if (action.response) {
             const description = action.response(result.jobresult)
@@ -995,7 +991,7 @@ export default {
         errorMethod: () => {
           this.fetchData()
           if (this.selectedItems.length > 0) {
-            this.updateResourceState(resource, 'failed')
+            eventBus.$emit('update-resource-state', this.selectedItems, resource, 'failed')
           }
         },
         loadingMessage: `${this.$t(action.label)} - ${resourceName}`,
@@ -1028,7 +1024,7 @@ export default {
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
-      this.modalInfo = {}
+      this.message = {}
     },
     handleSubmit (e) {
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
@@ -1041,7 +1037,7 @@ export default {
             scopedSlots: { customRender: 'status' }
           })
           this.showGroupActionModal = true
-          this.modalInfo.label = this.currentAction.label
+          this.modalInfo.title = this.currentAction.label
           this.modalInfo.docHelp = this.currentAction.docHelp
         }
         this.form.validateFields((err, values) => {
@@ -1053,7 +1049,7 @@ export default {
             })
             const paramsList = this.currentAction.groupMap(this.selectedRowKeys, values, this.items)
             for (const params of paramsList) {
-              var resourceName = itemsNameMap[params.id]
+              var resourceName = itemsNameMap[params.id || params.vmsnapshotid || params.username || params.name]
               // Using a method for this since it's an async call and don't want wrong prarms to be passed
               this.callGroupApi(params, resourceName)
             }
@@ -1083,32 +1079,13 @@ export default {
         }
         if (this.selectedItems.length !== 0) {
           this.$notifyError(error)
+          eventBus.$emit('update-resource-state', this.selectedItems, this.getDataIdentifier(params), 'failed')
         }
       })
     },
-    updateResourceState (resource, state, jobid) {
-      var tempResource = []
-      if (this.selectedItems && resource) {
-        if (resource.includes(',')) {
-          resource = resource.split(',')
-          tempResource = resource
-        } else {
-          tempResource.push(resource)
-        }
-        for (var r = 0; r < tempResource.length; r++) {
-          const objIndex = this.selectedItems.findIndex(obj => (obj.id === tempResource[r] || obj.username === tempResource[r]))
-          this.selectedItems[objIndex].status = state
-          if (jobid) {
-            this.selectedItems[objIndex].jobid = jobid
-          }
-        }
-      }
-    },
     getDataIdentifier (params) {
       var dataIdentifier = ''
-      if (this.selectedItems.length > 0) {
-        dataIdentifier = params.id || params.username || params.name || params.vmsnapshotid || params.ids
-      }
+      dataIdentifier = params.id || params.username || params.name || params.vmsnapshotid || params.ids
       return dataIdentifier
     },
     handleResponse (response, resourceName, resource, action, showLoading = true) {
@@ -1123,12 +1100,12 @@ export default {
               status: 'progress',
               bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
             })
-            this.updateResourceState(resource, 'InProgress', jobid)
+            eventBus.$emit('update-resource-state', this.selectedItems, resource, 'InProgress', jobid)
             this.pollActionCompletion(jobid, action, resourceName, resource, showLoading)
             return true
           } else {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(resource, 'success')
+              eventBus.$emit('update-resource-state', this.selectedItems, resource, 'success')
               if (resource) {
                 this.selectedItems.filter(item => item === resource)
               }
@@ -1242,6 +1219,7 @@ export default {
           }
 
           console.log(error)
+          eventBus.$emit('update-resource-state', this.selectedItems, this.getDataIdentifier(params), 'failed')
           this.$notifyError(error)
         }).finally(f => {
           this.actionLoading = false
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 2e987014358d..e2471e4cb535 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -17,6 +17,14 @@
 
 <template>
   <div>
+    <a-button
+      v-if="(('deleteIso' in $store.getters.apis) && this.selectedItems.length > 0)"
+      type="danger"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="bulkActionConfirmation()">
+      {{ $t(message.title) }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -24,6 +32,7 @@
       :columns="columns"
       :dataSource="dataSource"
       :pagination="false"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.zoneid">
       <div slot="isready" slot-scope="text, record">
         <span v-if="record.isready">{{ $t('label.yes') }}</span>
@@ -118,17 +127,35 @@
         </a-form>
       </a-spin>
     </a-modal>
+    <bulk-action-view
+      v-if="showConfirmationAction || showGroupActionModal"
+      :showConfirmationAction="showConfirmationAction"
+      :showGroupActionModal="showGroupActionModal"
+      :items="dataSource"
+      :selectedRowKeys="selectedRowKeys"
+      :selectedItems="selectedItems"
+      :columns="columns"
+      :selectedColumns="selectedColumns"
+      action="deleteIso"
+      :loading="loading"
+      :message="message"
+      @group-action="deleteIsos"
+      @handle-cancel="handleCancel"
+      @close-modal="closeModal" />
   </div>
 </template>
 
 <script>
 import { api } from '@/api'
 import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionView from '@/components/view/BulkActionView'
+import eventBus from '@/config/eventBus'
 
 export default {
   name: 'IsoZones',
   components: {
-    TooltipButton
+    TooltipButton,
+    BulkActionView
   },
   props: {
     resource: {
@@ -153,7 +180,18 @@ export default {
       zones: [],
       zoneLoading: false,
       copyLoading: false,
-      deleteLoading: false
+      deleteLoading: false,
+      selectedRowKeys: [],
+      showGroupActionModal: false,
+      selectedItems: [],
+      selectedColumns: [],
+      filterColumns: ['Status', 'Ready'],
+      showConfirmationAction: false,
+      message: {
+        title: this.$t('label.action.bulk.delete.isos'),
+        confirmMessage: this.$t('label.confirm.delete.isos')
+      },
+      modalWidth: '30vw'
     }
   },
   beforeCreate () {
@@ -242,6 +280,47 @@ export default {
         (this.resource.isready || !this.resource.status || this.resource.status.indexOf('Downloaded') === -1) && // Iso is ready or downloaded
         this.resource.account !== 'system'
     },
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      this.$emit('selection-change', this.selectedRowKeys)
+      this.selectedItems = (this.dataSource.filter(function (item) {
+        return selection.indexOf(item.zoneid) !== -1
+      }))
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    bulkActionConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
+    },
+    handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
+      this.showGroupActionModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+    },
+    deleteIsos (e) {
+      this.showConfirmationAction = false
+      this.selectedColumns.splice(0, 0, {
+        dataIndex: 'status',
+        title: this.$t('label.operation.status'),
+        scopedSlots: { customRender: 'status' }
+      })
+      if (this.selectedRowKeys.length > 0) {
+        this.showGroupActionModal = true
+      }
+      for (const iso of this.selectedItems) {
+        this.deleteIso(iso)
+      }
+    },
     deleteIso (record) {
       const params = {
         id: record.id,
@@ -254,21 +333,37 @@ export default {
           title: this.$t('label.action.delete.iso'),
           jobid: jobId,
           description: this.resource.name,
-          status: 'progress'
+          status: 'progress',
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
         const singleZone = (this.dataSource.length === 1)
         this.$pollJob({
           jobId,
           successMethod: result => {
             if (singleZone) {
-              this.$router.go(-1)
+              if (this.selectedItems.length === 0) {
+                this.$router.go(-1)
+              }
             } else {
+              if (this.selectedItems.length === 0) {
+                this.fetchData()
+              }
+            }
+            if (this.selectedItems.length > 0) {
+              eventBus.$emit('update-resource-state', this.selectedItems, record.zoneid, 'success')
+            }
+          },
+          errorMethod: () => {
+            if (this.selectedItems.length === 0) {
               this.fetchData()
             }
+            if (this.selectedItems.length > 0) {
+              eventBus.$emit('update-resource-state', this.selectedItems, record.zoneid, 'failed')
+            }
           },
-          errorMethod: () => this.fetchData(),
           loadingMessage: `${this.$t('label.deleting.iso')} ${this.resource.name} ${this.$t('label.in.progress')}`,
-          catchMessage: this.$t('error.fetching.async.job.result')
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
       }).catch(error => {
         this.$notifyError(error)
@@ -340,6 +435,9 @@ export default {
           this.fetchData()
         })
       })
+    },
+    closeModal () {
+      this.showConfirmationAction = false
     }
   }
 }
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 20551202c038..0f31f43022ae 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -17,6 +17,14 @@
 
 <template>
   <div>
+    <a-button
+      v-if="(('deleteTemplate' in $store.getters.apis) && this.selectedRowKeys.length > 0)"
+      type="danger"
+      icon="plus"
+      style="width: 100%; margin-bottom: 15px"
+      @click="bulkActionConfirmation()">
+      {{ $t('label.action.bulk.delete.templates') }}
+    </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -24,6 +32,7 @@
       :columns="columns"
       :dataSource="dataSource"
       :pagination="false"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.zoneid">
       <div slot="isready" slot-scope="text, record">
         <span v-if="record.isready">{{ $t('label.yes') }}</span>
@@ -110,34 +119,60 @@
     </a-modal>
 
     <a-modal
-      :title="$t('label.action.delete.template')"
+      :title="selectedItems.length > 0 && showTable ? $t(message.title) : $t('label.action.delete.template')"
       :visible="showDeleteTemplate"
       :closable="true"
       :maskClosable="false"
       :okText="$t('label.ok')"
       :cancelText="$t('label.cancel')"
-      @ok="deleteTemplate"
+      :width="showTable ? modalWidth : '30vw'"
+      @ok="selectedItems.length > 0 ? deleteTemplates() : deleteTemplate(currentRecord)"
       @cancel="onCloseModal"
       :confirmLoading="deleteLoading"
       centered>
+      <a-alert type="warning" v-if="selectedRowKeys.length > 0">
+        <span v-if="selectedItems.length > 0 && showTable" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
+        <span slot="message" v-html="$t(message.confirmMessage)" />
+      </a-alert>
+      <a-alert v-else :message="$t('message.action.delete.template')" type="warning" />
+      <br />
+      <a-table
+        v-if="selectedRowKeys.length > 0 && showTable"
+        size="middle"
+        :columns="selectedColumns"
+        :dataSource="selectedItems"
+        :rowKey="(record, idx) => record.zoneid || record.name"
+        :pagination="true"
+        style="overflow-y: auto">
+      </a-table>
       <a-spin :spinning="deleteLoading">
-        <a-alert :message="$t('message.action.delete.template')" type="warning" />
         <a-form-item :label="$t('label.isforced')" style="margin-bottom: 0;">
           <a-switch v-model="forcedDelete"></a-switch>
         </a-form-item>
       </a-spin>
     </a-modal>
+    <bulk-action-progress
+      :showGroupActionModal="showGroupActionModal"
+      :selectedItems="selectedItems"
+      :selectedColumns="selectedColumns"
+      :message="message"
+      @handle-cancel="handleCancel" />
   </div>
 </template>
 
 <script>
 import { api } from '@/api'
 import TooltipButton from '@/components/view/TooltipButton'
+import BulkActionProgress from '@/components/view/BulkActionProgress'
+import Status from '@/components/widgets/Status'
+import eventBus from '@/config/eventBus'
 
 export default {
   name: 'TemplateZones',
   components: {
-    TooltipButton
+    TooltipButton,
+    BulkActionProgress,
+    Status
   },
   props: {
     resource: {
@@ -164,7 +199,19 @@ export default {
       copyLoading: false,
       deleteLoading: false,
       showDeleteTemplate: false,
-      forcedDelete: false
+      forcedDelete: false,
+      selectedRowKeys: [],
+      showGroupActionModal: false,
+      selectedItems: [],
+      selectedColumns: [],
+      filterColumns: ['Status', 'Ready'],
+      showConfirmationAction: false,
+      message: {
+        title: this.$t('label.action.bulk.delete.templates'),
+        confirmMessage: this.$t('label.confirm.delete.templates')
+      },
+      modalWidth: '30vw',
+      showTable: false
     }
   },
   beforeCreate () {
@@ -210,7 +257,7 @@ export default {
   },
   watch: {
     loading (newData, oldData) {
-      if (!newData) {
+      if (!newData && !this.showGroupActionModal) {
         this.fetchData()
       }
     }
@@ -253,11 +300,64 @@ export default {
         (this.resource.isready || !this.resource.status || this.resource.status.indexOf('Downloaded') === -1) && // Template is ready or downloaded
         this.resource.templatetype !== 'SYSTEM'
     },
-    deleteTemplate () {
+    setSelection (selection) {
+      this.selectedRowKeys = selection
+      if (selection?.length > 0) {
+        this.modalWidth = '50vw'
+        this.$emit('selection-change', this.selectedRowKeys)
+        this.selectedItems = (this.dataSource.filter(function (item) {
+          return selection.indexOf(item.zoneid) !== -1
+        }))
+      } else {
+        this.modalWidth = '30vw'
+        this.selectedItems = []
+      }
+    },
+    resetSelection () {
+      this.setSelection([])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.setSelection(selectedRowKeys)
+    },
+    bulkActionConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
+      this.onShowDeleteModal(this.selectedItems[0])
+    },
+    handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
+      this.showGroupActionModal = false
+      this.selectedItems = []
+      this.selectedColumns = []
+      this.selectedRowKeys = []
+      this.showTable = false
+      this.fetchData()
+      if (this.dataSource.length === 0) {
+        this.$router.go(-1)
+      }
+    },
+    deleteTemplates (e) {
+      this.showConfirmationAction = false
+      this.selectedColumns.splice(0, 0, {
+        dataIndex: 'status',
+        title: this.$t('label.operation.status'),
+        scopedSlots: { customRender: 'status' }
+      })
+      if (this.selectedRowKeys.length > 0 && this.showTable) {
+        this.showGroupActionModal = true
+      }
+      for (const template of this.selectedItems) {
+        this.deleteTemplate(template)
+      }
+    },
+    deleteTemplate (template) {
       const params = {
-        id: this.currentRecord.id,
+        id: template.id,
         forced: this.forcedDelete,
-        zoneid: this.currentRecord.zoneid
+        zoneid: template.zoneid
       }
       this.deleteLoading = true
       api('deleteTemplate', params).then(json => {
@@ -266,8 +366,10 @@ export default {
           title: this.$t('label.action.delete.template'),
           jobid: jobId,
           description: this.resource.name,
-          status: 'progress'
+          status: 'progress',
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
+        eventBus.$emit('update-job-details', jobId, null)
         const singleZone = (this.dataSource.length === 1)
         this.$pollJob({
           jobId,
@@ -275,18 +377,35 @@ export default {
             if (singleZone) {
               const isResourcePage = (this.$route.params && this.$route.params.id)
               if (isResourcePage) {
-                this.$router.go(-1)
+                if (this.selectedItems.length === 0 && !this.showGroupActionModal) {
+                  this.$router.push({ path: '/template' })
+                }
               }
             } else {
+              if (this.selectedItems.length === 0) {
+                this.fetchData()
+              }
+            }
+            if (this.selectedItems.length > 0) {
+              eventBus.$emit('update-resource-state', this.selectedItems, template.zoneid, 'success')
+            }
+          },
+          errorMethod: () => {
+            if (this.selectedItems.length === 0) {
               this.fetchData()
             }
+            if (this.selectedItems.length > 0) {
+              eventBus.$emit('update-resource-state', this.selectedItems, template.zoneid, 'failed')
+            }
           },
-          errorMethod: () => this.fetchData(),
           loadingMessage: `${this.$t('label.deleting.template')} ${this.resource.name} ${this.$t('label.in.progress')}`,
-          catchMessage: this.$t('error.fetching.async.job.result')
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
         this.onCloseModal()
-        this.fetchData()
+        if (this.selectedItems.length === 0) {
+          this.fetchData()
+        }
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
@@ -315,11 +434,19 @@ export default {
       this.forcedDelete = false
       this.currentRecord = record
       this.showDeleteTemplate = true
+      if (this.showConfirmationAction) {
+        this.showTable = true
+      } else {
+        this.selectedItems = []
+      }
     },
     onCloseModal () {
       this.currentRecord = {}
       this.showCopyActionForm = false
       this.showDeleteTemplate = false
+      this.showConfirmationAction = false
+      this.showTable = false
+      this.selectedRowKeys = []
     },
     handleCopyTemplateSubmit (e) {
       e.preventDefault()
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 419e336cdfeb..58ae1e137bc5 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -258,18 +258,13 @@ export default {
       this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
       this.showGroupActionModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
       this.parentFetchData()
     },
-    updateResourceState (resource, state) {
-      if (this.selectedItems && resource) {
-        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
-        this.selectedItems[objIndex].status = state
-      }
-    },
     deleteRules (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
@@ -301,14 +296,14 @@ export default {
           successMessage: this.$t('message.success.remove.egress.rule'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'success')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'success')
             }
             this.fetchData()
           },
           errorMessage: this.$t('message.remove.egress.rule.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failed')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'failed')
             }
             this.fetchData()
           },
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 8fd86b724464..31ff4a6b13b4 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -301,18 +301,13 @@ export default {
       this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
       this.showGroupActionModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
       this.parentFetchData()
     },
-    updateResourceState (resource, state) {
-      if (this.selectedItems && resource) {
-        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
-        this.selectedItems[objIndex].status = state
-      }
-    },
     deleteRules (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
@@ -344,14 +339,14 @@ export default {
           successMessage: this.$t('message.success.remove.firewall.rule'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'success')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'success')
             }
             this.fetchData()
           },
           errorMessage: this.$t('message.remove.firewall.rule.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failed')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'failed')
             }
             this.fetchData()
           },
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 0353dd2cef41..5385dca8a34f 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -311,6 +311,13 @@ export default {
       this.pageSize = pageSize
       this.fetchData()
     },
+    bulkActionConfirmation () {
+      this.showConfirmationAction = true
+      this.selectedColumns = this.columns.filter(column => {
+        return !this.filterColumns.includes(column.title)
+      })
+      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
+    },
     acquireIpAddress () {
       const params = {}
       if (this.$route.path.startsWith('/vpc')) {
@@ -349,26 +356,14 @@ export default {
         this.acquireLoading = false
       })
     },
-    bulkActionConfirmation () {
-      this.showConfirmationAction = true
-      this.selectedColumns = this.columns.filter(column => {
-        return !this.filterColumns.includes(column.title)
-      })
-      this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
-    },
     handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
       this.showGroupActionModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
       this.parentFetchData()
     },
-    updateResourceState (resource, state) {
-      if (this.selectedItems && resource) {
-        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
-        this.selectedItems[objIndex].status = state
-      }
-    },
     releaseIpAddresses (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
@@ -402,14 +397,14 @@ export default {
           successMessage: this.$t('message.success.release.ip'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(ip.id, 'success')
+              eventBus.$emit('update-resource-state', this.selectedItems, ip.id, 'success')
             }
             this.fetchData()
           },
           errorMessage: this.$t('message.release.ip.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(ip.id, 'failed')
+              eventBus.$emit('update-resource-state', this.selectedItems, ip.id, 'failed')
             }
             this.fetchData()
           },
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 0bb03a2a26ec..90642a796d32 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -1001,18 +1001,13 @@ export default {
       this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
       this.showGroupActionModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
       this.parentFetchData()
     },
-    updateResourceState (resource, state) {
-      if (this.selectedItems && resource) {
-        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
-        this.selectedItems[objIndex].status = state
-      }
-    },
     deleteRules (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
@@ -1046,7 +1041,7 @@ export default {
           successMessage: this.$t('message.success.remove.rule'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'success')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'success')
             }
             if (this.selectedRowKeys.length === 0) {
               this.parentFetchData()
@@ -1057,7 +1052,7 @@ export default {
           errorMessage: this.$t('message.remove.rule.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failed')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'failed')
             }
             if (this.selectedRowKeys.length === 0) {
               this.parentFetchData()
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index ce5c73634b0b..0f56996053b2 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -493,18 +493,13 @@ export default {
       this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
+      eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
       this.showGroupActionModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
       this.parentFetchData()
     },
-    updateResourceState (resource, state) {
-      if (this.selectedItems && resource) {
-        const objIndex = this.selectedItems.findIndex(obj => obj.id === resource)
-        this.selectedItems[objIndex].status = state
-      }
-    },
     deleteRules (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
@@ -536,14 +531,14 @@ export default {
           successMessage: this.$t('message.success.remove.port.forward'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'success')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'success')
             }
             this.fetchData()
           },
           errorMessage: this.$t('message.remove.port.forward.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
-              this.updateResourceState(rule.id, 'failed')
+              eventBus.$emit('update-resource-state', this.selectedItems, rule.id, 'failed')
             }
             this.fetchData()
           },

From 04495208f1ca9801e794fa42f35f639683979bf8 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Tue, 8 Jun 2021 09:15:30 +0530
Subject: [PATCH 11/15] Unique row key

---
 ui/src/components/view/BulkActionView.vue | 2 +-
 ui/src/views/AutogenView.vue              | 2 +-
 ui/src/views/image/IsoZones.vue           | 5 +++++
 ui/src/views/image/TemplateZones.vue      | 1 +
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
index 3b68a4804da0..beb8eed51759 100644
--- a/ui/src/components/view/BulkActionView.vue
+++ b/ui/src/components/view/BulkActionView.vue
@@ -42,7 +42,7 @@
           size="middle"
           :columns="selectedColumns"
           :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.id"
+          :rowKey="(record, idx) => this.$route.path.includes('/iso/') ? record.zoneid : record.id"
           :pagination="true"
           style="overflow-y: auto">
           <template slot="algorithm" slot-scope="record">
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 78744269df22..8c963936960c 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -455,7 +455,7 @@ export default {
         return
       }
 
-      if (this.$route.path.includes('/template/')) {
+      if (this.$route.path.includes('/template/') || this.$route.path.includes('/iso/')) {
         return
       }
       this.fetchData()
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index e2471e4cb535..5adce2671f3c 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -306,6 +306,9 @@ export default {
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
+      if (this.dataSource.length === 0) {
+        this.$router.go(-1)
+      }
     },
     deleteIsos (e) {
       this.showConfirmationAction = false
@@ -336,6 +339,7 @@ export default {
           status: 'progress',
           bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
+        eventBus.$emit('update-job-details', jobId, null)
         const singleZone = (this.dataSource.length === 1)
         this.$pollJob({
           jobId,
@@ -414,6 +418,7 @@ export default {
             description: this.resource.name,
             status: 'progress'
           })
+          eventBus.$emit('update-job-details', jobId, null)
           this.$pollJob({
             jobId,
             successMethod: result => {
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 0f31f43022ae..9ea2c091c0df 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -468,6 +468,7 @@ export default {
             description: this.resource.name,
             status: 'progress'
           })
+          eventBus.$emit('update-job-details', jobId, null)
           this.$pollJob({
             jobId,
             successMethod: result => {

From 4d487c768e5012eea8401df47c75a784c4caafb2 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Tue, 8 Jun 2021 11:18:24 +0530
Subject: [PATCH 12/15] remove redundant cols

---
 ui/src/config/section/compute.js | 2 --
 ui/src/views/AutogenView.vue     | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index b0ec4857c319..7bcb3aa44216 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -58,11 +58,9 @@ export default {
           fields.push('hostname')
           fields.push('zonename')
         } else if (store.getters.userInfo.roletype === 'DomainAdmin') {
-          fields.splice(2, 0, 'displayname')
           fields.push('account')
           fields.push('zonename')
         } else {
-          fields.splice(2, 0, 'displayname')
           fields.push('zonename')
         }
         return fields
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 8c963936960c..47cbf94174dc 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -697,7 +697,7 @@ export default {
         return ![this.$t('label.state'), this.$t('label.hostname'), this.$t('label.hostid'), this.$t('label.zonename'),
           this.$t('label.zone'), this.$t('label.zoneid'), this.$t('label.ip'), this.$t('label.ipaddress'), this.$t('label.privateip'),
           this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb'), this.$t('label.current'),
-          this.$t('label.created')].includes(column.title)
+          this.$t('label.created'), this.$t('label.order')].includes(column.title)
       })
 
       if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) {

From 47929bcd2ac171283f8b21d4e801026e87d87309 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Wed, 9 Jun 2021 13:21:43 +0530
Subject: [PATCH 13/15] address comments

---
 ui/src/components/view/BulkActionProgress.vue | 12 ++++++------
 ui/src/config/section/compute.js              |  5 ++++-
 ui/src/config/section/infra/routers.js        |  5 ++---
 ui/src/config/section/infra/systemVms.js      |  5 ++---
 ui/src/views/AutogenView.vue                  |  8 +++++++-
 ui/src/views/image/IsoZones.vue               |  2 ++
 ui/src/views/image/TemplateZones.vue          |  3 ++-
 7 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/view/BulkActionProgress.vue b/ui/src/components/view/BulkActionProgress.vue
index 01ff20a22876..6b41afb3fbf0 100644
--- a/ui/src/components/view/BulkActionProgress.vue
+++ b/ui/src/components/view/BulkActionProgress.vue
@@ -38,6 +38,12 @@
     <template slot="footer">
       <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
     </template>
+    <a-card :bordered="false" style="background:#f1f1f1">
+      <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
+      <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
+      <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
+    </a-card>
+    <a-divider />
     <div v-if="showGroupActionModal">
       <a-table
         v-if="selectedItems.length > 0"
@@ -72,12 +78,6 @@
           <div><a-icon type="desktop"/> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
         </template>
       </a-table>
-      <a-divider />
-      <a-card :bordered="false" style="background:#f1f1f1">
-        <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
-        <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
-        <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
-      </a-card>
       <br/>
     </div>
   </a-modal>
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 7bcb3aa44216..9061d1efd765 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -131,7 +131,10 @@ export default {
               }
             }
             return fields
-          }
+          },
+          groupAction: true,
+          popup: true,
+          groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
         },
         {
           api: 'restoreVirtualMachine',
diff --git a/ui/src/config/section/infra/routers.js b/ui/src/config/section/infra/routers.js
index 83da039f2081..b34389d1dc2e 100644
--- a/ui/src/config/section/infra/routers.js
+++ b/ui/src/config/section/infra/routers.js
@@ -72,12 +72,11 @@ export default {
       label: 'label.action.reboot.router',
       message: 'message.action.reboot.router',
       dataView: true,
-      // args: ['forced'],
+      args: ['forced'],
       hidden: (record) => { return record.state === 'Running' },
       groupAction: true,
       popup: true,
-      // groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
-      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
+      groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
     },
     {
       api: 'scaleSystemVm',
diff --git a/ui/src/config/section/infra/systemVms.js b/ui/src/config/section/infra/systemVms.js
index 942e6f15f461..6c8fde47edea 100644
--- a/ui/src/config/section/infra/systemVms.js
+++ b/ui/src/config/section/infra/systemVms.js
@@ -54,11 +54,10 @@ export default {
       message: 'message.action.reboot.systemvm',
       dataView: true,
       show: (record) => { return record.state === 'Running' },
-      // args: ['forced'],
+      args: ['forced'],
       groupAction: true,
       popup: true,
-      // groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
-      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
+      groupMap: (selection, values) => { return selection.map(x => { return { id: x, forced: values.forced } }) }
     },
     {
       api: 'scaleSystemVm',
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 47cbf94174dc..93c0c068c596 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -68,7 +68,7 @@
           <slot name="action" v-if="dataView && $route.path.startsWith('/publicip')"></slot>
           <action-button
             v-else
-            :style="dataView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: 'inline-flex' }"
+            :style="dataView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: getStyle(), padding: '5px' }"
             :loading="loading"
             :actions="actions"
             :selectedRowKeys="selectedRowKeys"
@@ -567,6 +567,12 @@ export default {
     }
   },
   methods: {
+    getStyle () {
+      if (['snapshot', 'vmsnapshot', 'publicip'].includes(this.$route.name)) {
+        return 'table-cell'
+      }
+      return 'inline-flex'
+    },
     switchProject (projectId) {
       if (!projectId || !projectId.length || projectId.length !== 36) {
         return
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 5adce2671f3c..9b67a9424427 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -306,6 +306,7 @@ export default {
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
+      this.fetchData()
       if (this.dataSource.length === 0) {
         this.$router.go(-1)
       }
@@ -365,6 +366,7 @@ export default {
               eventBus.$emit('update-resource-state', this.selectedItems, record.zoneid, 'failed')
             }
           },
+          showLoading: !(this.selectedItems.length > 0 && this.showGroupActionModal),
           loadingMessage: `${this.$t('label.deleting.iso')} ${this.resource.name} ${this.$t('label.in.progress')}`,
           catchMessage: this.$t('error.fetching.async.job.result'),
           bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 9ea2c091c0df..5bdadbf00b17 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -398,9 +398,10 @@ export default {
               eventBus.$emit('update-resource-state', this.selectedItems, template.zoneid, 'failed')
             }
           },
+          showLoading: !(this.selectedItems.length > 0 && this.showGroupActionModal),
           loadingMessage: `${this.$t('label.deleting.template')} ${this.resource.name} ${this.$t('label.in.progress')}`,
           catchMessage: this.$t('error.fetching.async.job.result'),
-          bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
+          bulkAction: this.selectedItems.length > 0 && this.showGroupActionModal
         })
         this.onCloseModal()
         if (this.selectedItems.length === 0) {

From ed15af0825b38f141728eea7b47d3b7fc14247c6 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Fri, 11 Jun 2021 12:39:48 +0530
Subject: [PATCH 14/15] Added the following: 1. Make Cancel as default button
 for bulk actions 2. Add Filter Filter on the Operation status Column -
 Progress View 3. For Stop and delete bulk operations - add An alert
 message(in Red) to inform users that it is a destructive operation

---
 ui/src/components/view/BulkActionProgress.vue | 25 +++++++++-
 ui/src/components/view/BulkActionView.vue     | 19 ++++++-
 ui/src/views/AutogenView.vue                  | 49 ++++++++++++++++---
 ui/src/views/image/IsoZones.vue               |  7 ++-
 ui/src/views/image/TemplateZones.vue          | 34 +++++++++++--
 ui/src/views/network/EgressRulesTab.vue       |  7 ++-
 ui/src/views/network/FirewallRules.vue        |  7 ++-
 ui/src/views/network/IpAddressesTab.vue       |  7 ++-
 ui/src/views/network/LoadBalancing.vue        |  7 ++-
 ui/src/views/network/PortForwarding.vue       |  7 ++-
 10 files changed, 148 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/view/BulkActionProgress.vue b/ui/src/components/view/BulkActionProgress.vue
index 6b41afb3fbf0..8611dc5bbd89 100644
--- a/ui/src/components/view/BulkActionProgress.vue
+++ b/ui/src/components/view/BulkActionProgress.vue
@@ -49,9 +49,10 @@
         v-if="selectedItems.length > 0"
         size="middle"
         :columns="selectedColumns"
-        :dataSource="selectedItems"
+        :dataSource="tableChanged ? filteredItems : selectedItems"
         :rowKey="(record, idx) => (this.$route.path.includes('/template') || this.$route.path.includes('/iso')) ? record.zoneid: record.id"
         :pagination="true"
+        @change="handleTableChange"
         style="overflow-y: auto">
         <div slot="status" slot-scope="text">
           <status :text=" text ? text : $t('state.inprogress') " displayText></status>
@@ -114,9 +115,31 @@ export default {
       default: () => {}
     }
   },
+  created () {
+    this.filteredItems = this.selectedItems
+  },
+  data () {
+    return {
+      filteredItems: [],
+      tableChanged: false
+    }
+  },
   inject: ['parentFetchData'],
   methods: {
+    handleTableChange (pagination, filters, sorter) {
+      this.filteredItems = this.selectedItems
+      if (filters?.status.length > 0) {
+        this.filteredItems = this.selectedItems.filter(item => {
+          if (filters.status.includes(item.status)) {
+            return item
+          }
+        })
+      }
+      this.tableChanged = true
+    },
     handleCancel () {
+      this.filteredItems = []
+      this.tableChanged = false
       this.$emit('handle-cancel')
     },
     returnAlgorithmName (name) {
diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
index beb8eed51759..acdc79961515 100644
--- a/ui/src/components/view/BulkActionView.vue
+++ b/ui/src/components/view/BulkActionView.vue
@@ -28,13 +28,22 @@
       width="50vw"
       @ok="groupAction"
       @cancel="closeModal"
+      :ok-button-props="{props: { type: 'default' } }"
+      :cancel-button-props="{props: { type: 'primary' } }"
       centered>
       <span slot="title">
         {{ $t(message.title) }}
       </span>
       <span>
-        <a-alert type="warning">
-          <span v-if="selectedItems.length > 0" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
+        <a-alert
+          v-if="isDestructiveAction()"
+          type="error">
+          <a-icon slot="message" type="exclamation-circle" style="color: red; fontSize: 30px; display: inline-flex" />
+          <span style="padding-left: 5px" slot="message" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />
+          <span slot="message" v-html="$t(message.confirmMessage)" />
+        </a-alert>
+        <a-alert v-else type="warning">
+          <span v-if="selectedRowKeys.length > 0" slot="message" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />
           <span slot="message" v-html="$t(message.confirmMessage)" />
         </a-alert>
         <a-divider />
@@ -157,6 +166,12 @@ export default {
     groupAction () {
       this.$emit('group-action')
     },
+    isDestructiveAction () {
+      if (new RegExp(['remove', 'delete', 'destroy', 'stop', 'release', 'disassociate'].join('|')).test(this.action)) {
+        return true
+      }
+      return false
+    },
     returnAlgorithmName (name) {
       switch (name) {
         case 'leastconn':
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 93c0c068c596..0544d9c97520 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -130,6 +130,8 @@
         :width="modalWidth"
         @ok="handleSubmit"
         @cancel="closeAction"
+        :ok-button-props="getOkProps()"
+        :cancel-button-props="getCancelProps()"
         :confirmLoading="actionLoading"
         centered
       >
@@ -145,10 +147,24 @@
         </span>
         <a-spin :spinning="actionLoading">
           <span v-if="currentAction.message">
-            <a-alert type="warning">
-              <span v-if="selectedRowKeys.length > 0" slot="message" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />
-              <span slot="message" v-html="$t(currentAction.message)" />
-            </a-alert>
+            <div v-if="selectedRowKeys.length > 0">
+              <a-alert
+                v-if="['delete', 'poweroff'].includes(currentAction.icon)"
+                type="error">
+                <a-icon slot="message" type="exclamation-circle" style="color: red; fontSize: 30px; display: inline-flex" />
+                <span style="padding-left: 5px" slot="message" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />
+                <span slot="message" v-html="$t(currentAction.message)" />
+              </a-alert>
+              <a-alert v-else type="warning">
+                <span v-if="selectedRowKeys.length > 0" slot="message" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />
+                <span slot="message" v-html="$t(currentAction.message)" />
+              </a-alert>
+            </div>
+            <div v-else>
+              <a-alert type="warning">
+                <span slot="message" v-html="$t(currentAction.message)" />
+              </a-alert>
+            </div>
             <div v-if="selectedRowKeys.length > 0">
               <a-divider />
               <a-table
@@ -508,10 +524,10 @@ export default {
           } else {
             objIndex = selectedItems.findIndex(obj => (obj.id === tempResource[r] || obj.username === tempResource[r]))
           }
-          if (state) {
+          if (state && objIndex !== -1) {
             selectedItems[objIndex].status = state
           }
-          if (jobid) {
+          if (jobid && objIndex !== -1) {
             selectedItems[objIndex].jobid = jobid
           }
         }
@@ -573,6 +589,20 @@ export default {
       }
       return 'inline-flex'
     },
+    getOkProps () {
+      if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
+        return { props: { type: 'default' } }
+      } else {
+        return { props: { type: 'primary' } }
+      }
+    },
+    getCancelProps () {
+      if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
+        return { props: { type: 'primary' } }
+      } else {
+        return { props: { type: 'default' } }
+      }
+    },
     switchProject (projectId) {
       if (!projectId || !projectId.length || projectId.length !== 36) {
         return
@@ -1040,7 +1070,12 @@ export default {
           this.selectedColumns.splice(0, 0, {
             dataIndex: 'status',
             title: this.$t('label.operation.status'),
-            scopedSlots: { customRender: 'status' }
+            scopedSlots: { customRender: 'status' },
+            filters: [
+              { text: 'In Progress', value: 'InProgress' },
+              { text: 'Success', value: 'success' },
+              { text: 'Failed', value: 'failed' }
+            ]
           })
           this.showGroupActionModal = true
           this.modalInfo.title = this.currentAction.label
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 9b67a9424427..5fffa85e91ba 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -316,7 +316,12 @@ export default {
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' }
+        scopedSlots: { customRender: 'status' },
+        filters: [
+          { text: 'In Progress', value: 'InProgress' },
+          { text: 'Success', value: 'success' },
+          { text: 'Failed', value: 'failed' }
+        ]
       })
       if (this.selectedRowKeys.length > 0) {
         this.showGroupActionModal = true
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 5bdadbf00b17..cd2990c18e8b 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -128,12 +128,17 @@
       :width="showTable ? modalWidth : '30vw'"
       @ok="selectedItems.length > 0 ? deleteTemplates() : deleteTemplate(currentRecord)"
       @cancel="onCloseModal"
+      :ok-button-props="getOkProps()"
+      :cancel-button-props="getCancelProps()"
       :confirmLoading="deleteLoading"
       centered>
-      <a-alert type="warning" v-if="selectedRowKeys.length > 0">
-        <span v-if="selectedItems.length > 0 && showTable" slot="message" v-html="`<b>${selectedItems.length} ` + $t('label.items.selected') + `. </b>`" />
-        <span slot="message" v-html="$t(message.confirmMessage)" />
-      </a-alert>
+      <div v-if="selectedRowKeys.length > 0">
+        <a-alert type="error">
+          <a-icon slot="message" type="exclamation-circle" style="color: red; fontSize: 30px; display: inline-flex" />
+          <span style="padding-left: 5px" slot="message" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />
+          <span slot="message" v-html="$t(message.confirmMessage)" />
+        </a-alert>
+      </div>
       <a-alert v-else :message="$t('message.action.delete.template')" type="warning" />
       <br />
       <a-table
@@ -339,12 +344,31 @@ export default {
         this.$router.go(-1)
       }
     },
+    getOkProps () {
+      if (this.selectedRowKeys.length > 0) {
+        return { props: { type: 'default' } }
+      } else {
+        return { props: { type: 'primary' } }
+      }
+    },
+    getCancelProps () {
+      if (this.selectedRowKeys.length > 0) {
+        return { props: { type: 'primary' } }
+      } else {
+        return { props: { type: 'default' } }
+      }
+    },
     deleteTemplates (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' }
+        scopedSlots: { customRender: 'status' },
+        filters: [
+          { text: 'In Progress', value: 'InProgress' },
+          { text: 'Success', value: 'success' },
+          { text: 'Failed', value: 'failed' }
+        ]
       })
       if (this.selectedRowKeys.length > 0 && this.showTable) {
         this.showGroupActionModal = true
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 58ae1e137bc5..b2ebcd843f55 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -270,7 +270,12 @@ export default {
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' }
+        scopedSlots: { customRender: 'status' },
+        filters: [
+          { text: 'In Progress', value: 'InProgress' },
+          { text: 'Success', value: 'success' },
+          { text: 'Failed', value: 'failed' }
+        ]
       })
       if (this.selectedRowKeys.length > 0) {
         this.showGroupActionModal = true
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 31ff4a6b13b4..33ad39cc3f4a 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -313,7 +313,12 @@ export default {
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' }
+        scopedSlots: { customRender: 'status' },
+        filters: [
+          { text: 'In Progress', value: 'InProgress' },
+          { text: 'Success', value: 'success' },
+          { text: 'Failed', value: 'failed' }
+        ]
       })
       if (this.selectedRowKeys.length > 0) {
         this.showGroupActionModal = true
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 5385dca8a34f..89088b0425b4 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -369,7 +369,12 @@ export default {
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' }
+        scopedSlots: { customRender: 'status' },
+        filters: [
+          { text: 'In Progress', value: 'InProgress' },
+          { text: 'Success', value: 'success' },
+          { text: 'Failed', value: 'failed' }
+        ]
       })
       if (this.selectedRowKeys.length > 0) {
         this.showGroupActionModal = true
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 90642a796d32..8e46bdfde9db 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -1013,7 +1013,12 @@ export default {
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' }
+        scopedSlots: { customRender: 'status' },
+        filters: [
+          { text: 'In Progress', value: 'InProgress' },
+          { text: 'Success', value: 'success' },
+          { text: 'Failed', value: 'failed' }
+        ]
       })
       if (this.selectedRowKeys.length > 0) {
         this.showGroupActionModal = true
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 0f56996053b2..7f882d60a178 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -505,7 +505,12 @@ export default {
       this.selectedColumns.splice(0, 0, {
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' }
+        scopedSlots: { customRender: 'status' },
+        filters: [
+          { text: 'In Progress', value: 'InProgress' },
+          { text: 'Success', value: 'success' },
+          { text: 'Failed', value: 'failed' }
+        ]
       })
       if (this.selectedRowKeys.length > 0) {
         this.showGroupActionModal = true

From 4d17fcfce22fa26e0907611e2a4375cee64fe762 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Thu, 24 Jun 2021 10:18:45 +0530
Subject: [PATCH 15/15] Add dynamism to column filtering

---
 ui/src/components/view/BulkActionProgress.vue | 42 ++++++++++++++++---
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/view/BulkActionProgress.vue b/ui/src/components/view/BulkActionProgress.vue
index 8611dc5bbd89..73a6a3419e9c 100644
--- a/ui/src/components/view/BulkActionProgress.vue
+++ b/ui/src/components/view/BulkActionProgress.vue
@@ -39,8 +39,8 @@
       <a-button key="back" @click="handleCancel"> {{ $t('label.close') }} </a-button>
     </template>
     <a-card :bordered="false" style="background:#f1f1f1">
-      <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + selectedItems.filter(item => item.status === 'success').length || 0 }}</div>
-      <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + selectedItems.filter(item => item.status === 'failed').length || 0 }}</div>
+      <div><a-icon type="check-circle-o" style="color: #52c41a; margin-right: 8px"/> {{ $t('label.success') + ': ' + succeededCount }}</div>
+      <div><a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/> {{ $t('state.failed') + ': ' + failedCount }}</div>
       <div><a-icon type="sync-o" style="color: #1890ff; margin-right: 8px"/> {{ $t('state.inprogress') + ': ' + selectedItems.filter(item => item.status === 'InProgress').length || 0 }}</div>
     </a-card>
     <a-divider />
@@ -120,22 +120,54 @@ export default {
   },
   data () {
     return {
+      appliedFilterStatus: {},
       filteredItems: [],
+      filterItemsTimer: null,
       tableChanged: false
     }
   },
   inject: ['parentFetchData'],
+  watch: {
+    succeededCount (count) {
+      if (count > 0) {
+        this.filterItemsDelayed()
+      }
+    },
+    failedCount (count) {
+      if (count > 0) {
+        this.filterItemsDelayed()
+      }
+    }
+  },
+  computed: {
+    succeededCount () {
+      return this.selectedItems.filter(item => item.status === 'success').length || 0
+    },
+    failedCount () {
+      return this.selectedItems.filter(item => item.status === 'failed').length || 0
+    }
+  },
   methods: {
     handleTableChange (pagination, filters, sorter) {
       this.filteredItems = this.selectedItems
-      if (filters?.status.length > 0) {
+      this.appliedFilterStatus = filters.status
+      this.filterItems()
+      this.tableChanged = true
+    },
+    filterItems () {
+      if (this.appliedFilterStatus && this.appliedFilterStatus.length > 0) {
         this.filteredItems = this.selectedItems.filter(item => {
-          if (filters.status.includes(item.status)) {
+          if (this.appliedFilterStatus.includes(item.status)) {
             return item
           }
         })
       }
-      this.tableChanged = true
+    },
+    filterItemsDelayed () {
+      clearTimeout(this.filterItemsTimer)
+      this.filterItemsTimer = setTimeout(() => {
+        this.filterItems()
+      }, 50)
     },
     handleCancel () {
       this.filteredItems = []