ui: Support to specify security groups when updating/editing a VM (adv zone + SG) (#6138)

* ui: Support to specify security groups when updating/editing a VM (adv zone + SG)

* cleanup

Author: Pearl1594

ui/src/components/view/DetailsTab.vue

@@ -49,6 +49,13 @@
           <div v-else-if="$route.meta.name === 'guestnetwork' && item === 'egressdefaultpolicy'">
             {{ dataResource[item]? $t('message.egress.rules.allow') : $t('message.egress.rules.deny') }}
           </div>
+          <div v-else-if="item === 'securitygroup'">
+            <div v-if="dataResource[item] && dataResource[item].length > 0">
+              <span v-for="(securityGroup, idx) in dataResource[item]" :key="idx">
+                {{ securityGroup.name }} &nbsp;
+              </span>
+            </div>
+          </div>
           <div v-else>{{ dataResource[item] }}</div>
         </div>
       </a-list-item>

ui/src/config/section/compute.js

@@ -67,7 +67,15 @@ export default {
         return fields
       },
       searchFilters: ['name', 'zoneid', 'domainid', 'account', 'tags'],
-      details: ['displayname', 'name', 'id', 'state', 'ipaddress', 'ip6address', 'templatename', 'ostypename', 'serviceofferingname', 'isdynamicallyscalable', 'haenable', 'hypervisor', 'boottype', 'bootmode', 'account', 'domain', 'zonename'],
+      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)
+        if (!listZoneHaveSGEnabled || listZoneHaveSGEnabled.length === 0) {
+          return fields
+        }
+        fields.push('securitygroup')
+        return fields
+      },
       tabs: [{
         component: shallowRef(defineAsyncComponent(() => import('@/views/compute/InstanceTab.vue')))
       }],

ui/src/views/compute/EditVM.vue

@@ -91,6 +91,25 @@
         <a-textarea v-model:value="form.userdata">
         </a-textarea>
       </a-form-item>
+      <a-form-item ref="securitygroupids" name="securitygroupids" :label="$t('label.security.groups')" v-if="securityGroupsEnabled">
+        <a-select
+          mode="multiple"
+          :placeholder="$t('label.select.security.groups')"
+          v-model:value="form.securitygroupids"
+          showSearch
+          optionFilterProp="label"
+          :filterOption="(input, option) => {
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }"
+          :loading="securitygroups.loading"
+          v-focus="true">
+          <a-select-option v-for="securitygroup in securitygroups.opts" :key="securitygroup.id" :label="securitygroup.name">
+            <div>
+              {{ securitygroup.name ||  securitygroup.id }}
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
 
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ $t('label.cancel') }}</a-button>
@@ -124,8 +143,13 @@ export default {
     return {
       serviceOffering: {},
       template: {},
+      securityGroupsEnabled: false,
       dynamicScalingVmConfig: false,
       loading: false,
+      securitygroups: {
+        loading: false,
+        opts: []
+      },
       osTypes: {
         loading: false,
         opts: []
@@ -151,17 +175,48 @@ export default {
         displayname: this.resource.displayname,
         ostypeid: this.resource.ostypeid,
         isdynamicallyscalable: this.resource.isdynamicallyscalable,
-        group: this.resource.group
+        group: this.resource.group,
+        securitygroupids: this.resource.securitygroup.map(x => x.id)
       })
       this.rules = reactive({})
     },
     fetchData () {
+      this.fetchZoneDetails()
+      this.fetchSecurityGroups()
       this.fetchOsTypes()
       this.fetchInstaceGroups()
       this.fetchServiceOfferingData()
       this.fetchTemplateData()
       this.fetchDynamicScalingVmConfig()
     },
+    fetchZoneDetails () {
+      api('listZones', {
+        zoneid: this.resource.zoneid
+      }).then(response => {
+        const zone = response?.listzonesresponse?.zone || []
+        this.securityGroupsEnabled = zone?.[0]?.securitygroupsenabled
+      })
+    },
+    fetchSecurityGroups () {
+      this.securitygroups.loading = true
+      api('listSecurityGroups', {
+        zoneid: this.resource.zoneid
+      }).then(json => {
+        const items = json.listsecuritygroupsresponse.securitygroup || []
+        if (items && items.length > 0) {
+          for (let i = 0; i < items.length; i++) {
+            this.securitygroups.opts.push(items[i])
+          }
+          this.securitygroups.opts.sort((a, b) => {
+            if (a.name < b.name) return -1
+            if (a.name > b.name) return 1
+            return 0
+          })
+        }
+      }).finally(() => {
+        this.securitygroups.loading = false
+      })
+    },
     fetchServiceOfferingData () {
       const params = {}
       params.id = this.resource.serviceofferingid
@@ -242,6 +297,11 @@ export default {
         params.name = values.name
         params.displayname = values.displayname
         params.ostypeid = values.ostypeid
+        if (this.securityGroupsEnabled) {
+          if (values.securitygroupids) {
+            params.securitygroupids = values.securitygroupids
+          }
+        }
         if (values.isdynamicallyscalable !== undefined) {
           params.isdynamicallyscalable = values.isdynamicallyscalable
         }