ui: allow instances to be filtered by group (#6495)

Fixes #6428

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

Author: shwstppr

ui/src/components/view/SearchView.vue

@@ -54,8 +54,7 @@
                   :ref="field.name"
                   :name="field.name"
                   :key="index"
-                  :label="field.name==='keyword' ?
-                    ('listAnnotations' in $store.getters.apis ? $t('label.annotation') : $t('label.name')) : $t('label.' + field.name)">
+                  :label="retrieveFieldLabel(field.name)">
                   <a-select
                     allowClear
                     v-if="field.type==='list'"
@@ -242,6 +241,19 @@ export default {
       if (!this.visibleFilter) return
       this.initFormFieldData()
     },
+    retrieveFieldLabel (fieldName) {
+      if (fieldName === 'groupid') {
+        fieldName = 'group'
+      }
+      if (fieldName === 'keyword') {
+        if ('listAnnotations' in this.$store.getters.apis) {
+          return this.$t('label.annotation')
+        } else {
+          return this.$t('label.name')
+        }
+      }
+      return this.$t('label.' + fieldName)
+    },
     async initFormFieldData () {
       const arrayField = []
       this.fields = []
@@ -260,7 +272,10 @@ export default {
         if (item === 'clusterid' && !('listClusters' in this.$store.getters.apis)) {
           return true
         }
-        if (['zoneid', 'domainid', 'state', 'level', 'clusterid', 'podid', 'entitytype', 'type'].includes(item)) {
+        if (item === 'groupid' && !('listInstanceGroups' in this.$store.getters.apis)) {
+          return true
+        }
+        if (['zoneid', 'domainid', 'state', 'level', 'clusterid', 'podid', 'groupid', 'entitytype', 'type'].includes(item)) {
           type = 'list'
         } else if (item === 'tags') {
           type = 'tag'
@@ -282,6 +297,7 @@ export default {
       let domainIndex = -1
       let podIndex = -1
       let clusterIndex = -1
+      let groupIndex = -1
 
       if (arrayField.includes('type')) {
         if (this.$route.path === '/guestnetwork' || this.$route.path.includes('/guestnetwork/')) {
@@ -330,6 +346,12 @@ export default {
         promises.push(await this.fetchClusters())
       }
 
+      if (arrayField.includes('groupid')) {
+        groupIndex = this.fields.findIndex(item => item.name === 'groupid')
+        this.fields[groupIndex].loading = true
+        promises.push(await this.fetchInstanceGroups())
+      }
+
       if (arrayField.includes('entitytype')) {
         const entityTypeIndex = this.fields.findIndex(item => item.name === 'entitytype')
         this.fields[entityTypeIndex].loading = true
@@ -378,6 +400,12 @@ export default {
             this.fields[clusterIndex].opts = this.sortArray(cluster[0].data)
           }
         }
+        if (groupIndex > -1) {
+          const groups = response.filter(item => item.type === 'groupid')
+          if (groups && groups.length > 0) {
+            this.fields[groupIndex].opts = this.sortArray(groups[0].data)
+          }
+        }
       }).finally(() => {
         if (zoneIndex > -1) {
           this.fields[zoneIndex].loading = false
@@ -391,6 +419,9 @@ export default {
         if (clusterIndex > -1) {
           this.fields[clusterIndex].loading = false
         }
+        if (groupIndex > -1) {
+          this.fields[groupIndex].loading = false
+        }
         this.fillFormFieldValues()
       })
     },
@@ -468,6 +499,19 @@ export default {
         })
       })
     },
+    fetchInstanceGroups () {
+      return new Promise((resolve, reject) => {
+        api('listInstanceGroups', { listAll: true }).then(json => {
+          const instancegroups = json.listinstancegroupsresponse.instancegroup
+          resolve({
+            type: 'groupid',
+            data: instancegroups
+          })
+        }).catch(error => {
+          reject(error.response.headers['x-description'])
+        })
+      })
+    },
     fetchGuestNetworkTypes () {
       const types = []
       if (this.apiName.indexOf('listNetworks') > -1) {

ui/src/config/section/compute.js

@@ -75,7 +75,7 @@ export default {
         }
         return fields
       },
-      searchFilters: ['name', 'zoneid', 'domainid', 'account', 'tags'],
+      searchFilters: ['name', 'zoneid', 'domainid', 'account', 'groupid', 'tags'],
       details: () => {
         var fields = ['displayname', 'name', 'id', 'state', 'ipaddress', 'ip6address', 'templatename', 'ostypename', 'serviceofferingname', 'isdynamicallyscalable', 'haenable', 'hypervisor', 'boottype', 'bootmode', 'account', 'domain', 'zonename']
         const listZoneHaveSGEnabled = store.getters.zones.filter(zone => zone.securitygroupsenabled === true)