compute: Fix bug missing Security Group in Advanced Zone with SG enabled (#558)

* Fix bug missing Security Group in Advanced Zone
1. Add a new step security group in a zone with SG enabled.
2. Fix error of displaying sshKeypair data incorrectly

* remove `this.hypervisor!=='KVM'` condition.

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

ui/src/views/compute/DeployVM.vue

@@ -237,6 +237,19 @@
                   </div>
                 </template>
               </a-step>
+              <a-step
+                v-if="showSecurityGroupSection"
+                :title="$t('label.security.groups')"
+                :status="zoneSelected ? 'process' : 'wait'">
+                <template slot="description">
+                  <security-group-selection
+                    :zoneId="zoneId"
+                    :value="securitygroupids"
+                    :loading="loading.networks"
+                    :preFillContent="dataPreFill"
+                    @select-security-group-item="($event) => updateSecurityGroups($event)"></security-group-selection>
+                </template>
+              </a-step>
               <a-step
                 :title="this.$t('label.sshkeypairs')"
                 :status="zoneSelected ? 'process' : 'wait'">
@@ -448,6 +461,7 @@ import AffinityGroupSelection from '@views/compute/wizard/AffinityGroupSelection
 import NetworkSelection from '@views/compute/wizard/NetworkSelection'
 import NetworkConfiguration from '@views/compute/wizard/NetworkConfiguration'
 import SshKeyPairSelection from '@views/compute/wizard/SshKeyPairSelection'
+import SecurityGroupSelection from '@views/compute/wizard/SecurityGroupSelection'
 
 export default {
   name: 'Wizard',
@@ -461,7 +475,8 @@ export default {
     DiskOfferingSelection,
     InfoCard,
     ComputeOfferingSelection,
-    ComputeSelection
+    ComputeSelection,
+    SecurityGroupSelection
   },
   props: {
     visible: {
@@ -556,16 +571,6 @@ export default {
         'selfexecutable',
         'sharedexecutable'
       ],
-      steps: {
-        BASIC: 0,
-        TEMPLATE_ISO: 1,
-        COMPUTE: 2,
-        DISK_OFFERING: 3,
-        AFFINITY_GROUP: 4,
-        NETWORK: 5,
-        SSH_KEY_PAIR: 6,
-        ENABLE_SETUP: 7
-      },
       initDataConfig: {},
       defaultNetwork: '',
       networkConfig: [],
@@ -583,7 +588,8 @@ export default {
       tabKey: 'templateid',
       dataPreFill: {},
       showDetails: false,
-      showRootDiskSizeChanger: false
+      showRootDiskSizeChanger: false,
+      securitygroupids: []
     }
   },
   computed: {
@@ -774,6 +780,9 @@ export default {
     },
     networkName () {
       return this.$route.query.name || null
+    },
+    showSecurityGroupSection () {
+      return this.networks.length > 0 && this.zone.securitygroupsenabled
     }
   },
   watch: {
@@ -1060,6 +1069,9 @@ export default {
         keypair: name
       })
     },
+    updateSecurityGroups (securitygroupids) {
+      this.securitygroupids = securitygroupids
+    },
     getText (option) {
       return _.get(option, 'displaytext', _.get(option, 'name'))
     },
@@ -1162,6 +1174,9 @@ export default {
             }
           }
         }
+        if (this.securitygroupids.length > 0) {
+          deployVmData.securitygroupids = this.securitygroupids.join(',')
+        }
         // step 7: select ssh key pair
         deployVmData.keypair = values.keypair
         deployVmData.name = values.name

ui/src/views/compute/wizard/SecurityGroupSelection.vue

@@ -0,0 +1,198 @@
+// 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 style="margin-top: 10px;">
+    <label>{{ $t('message.select.security.groups') }}</label>
+    <a-input-search
+      style="width: 25vw; float: right; margin-bottom: 10px; z-index: 8;"
+      :placeholder="$t('label.search')"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :loading="loading || fetchLoading"
+      :columns="columns"
+      :dataSource="items"
+      :rowKey="record => record.id"
+      :pagination="false"
+      :rowSelection="rowSelection"
+      size="middle"
+      :scroll="{ y: 225 }"
+    ></a-table>
+
+    <div style="display: block; text-align: right; margin-top: 30px">
+      <a-pagination
+        size="small"
+        :current="page"
+        :pageSize="pageSize"
+        :total="rowCount"
+        :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
+        @change="onChangePage"
+        @showSizeChange="onChangePageSize"
+        showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{ $t('label.page') }}</span>
+        </template>
+      </a-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import _ from 'lodash'
+
+export default {
+  name: 'SecurityGroupSelection',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    zoneId: {
+      type: String,
+      default: () => ''
+    },
+    preFillContent: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      filter: '',
+      fetchLoading: false,
+      columns: [
+        {
+          dataIndex: 'name',
+          title: this.$t('label.security.groups'),
+          width: '40%'
+        },
+        {
+          dataIndex: 'description',
+          title: this.$t('label.description'),
+          width: '60%'
+        }
+      ],
+      items: [],
+      selectedRowKeys: [],
+      page: 1,
+      pageSize: 10,
+      keyword: null,
+      rowCount: 0
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        type: 'checkbox',
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: (rows) => {
+          this.$emit('select-security-group-item', rows)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    value (newValue, oldValue) {
+      if (newValue && !_.isEqual(newValue, oldValue)) {
+        this.selectedRowKeys = newValue
+      }
+    },
+    loading () {
+      if (!this.loading) {
+        if (this.preFillContent.securitygroupids) {
+          this.selectedRowKeys = this.preFillContent.securitygroupids
+          this.$emit('select-security-group-item', this.preFillContent.securitygroupids)
+        } else {
+          if (this.oldZoneId === this.zoneId) {
+            return
+          }
+          this.oldZoneId = this.zoneId
+          this.selectedRowKeys = []
+          this.$emit('select-security-group-item', null)
+        }
+      }
+    }
+  },
+  methods: {
+    fetchData () {
+      const params = {
+        domainid: this.$store.getters.userInfo.domainid,
+        account: this.$store.getters.userInfo.account,
+        page: this.page,
+        pageSize: this.pageSize
+      }
+
+      if (this.keyword) {
+        params.keyword = this.keyword
+      }
+
+      this.items = []
+      this.fetchLoading = true
+
+      api('listSecurityGroups', params).then(json => {
+        const items = json.listsecuritygroupsresponse.securitygroup || []
+        this.rowCount = json.listsecuritygroupsresponse.count || 0
+        if (items && items.length > 0) {
+          for (let i = 0; i < items.length; i++) {
+            this.items.push(items[i])
+          }
+          this.items.sort((a, b) => {
+            if (a.name < b.name) return -1
+            if (a.name > b.name) return 1
+            return 0
+          })
+        }
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    handleSearch (value) {
+      this.filter = value
+      this.page = 1
+      this.pageSize = 10
+      this.keyword = this.filter
+      this.fetchData()
+    },
+    onChangePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    onChangePageSize (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .ant-table-wrapper {
+    margin: 2rem 0;
+  }
+</style>

ui/src/views/compute/wizard/SshKeyPairSelection.vue

@@ -112,19 +112,29 @@ export default {
       }
     }
   },
-  created () {
-    this.initDataItem()
-  },
   computed: {
     tableSource () {
-      return this.dataItems.map((item) => {
-        return {
+      const dataItems = []
+
+      if (this.options.page === 1) {
+        dataItems.push({
+          key: this.$t('label.noselect'),
+          name: this.$t('label.noselect'),
+          account: '-',
+          domain: '-'
+        })
+      }
+
+      this.items.map((item) => {
+        dataItems.push({
           key: item.name,
           name: item.name,
           account: item.account,
           domain: item.domain
-        }
+        })
       })
+
+      return dataItems
     },
     rowSelection () {
       return {
@@ -140,12 +150,6 @@ export default {
         this.selectedRowKeys = [newValue]
       }
     },
-    items (newData, oldData) {
-      if (newData && newData.length > 0) {
-        this.initDataItem()
-        this.dataItems = this.dataItems.concat(newData)
-      }
-    },
     loading () {
       if (!this.loading) {
         if (this.preFillContent.keypair) {
@@ -156,23 +160,13 @@ export default {
             return
           }
           this.oldZoneId = this.zoneId
-          this.selectedRowKeys = [this.dataItems[0].name]
-          this.$emit('select-ssh-key-pair-item', this.dataItems[0].name)
+          this.selectedRowKeys = [this.$t('label.noselect')]
+          this.$emit('select-ssh-key-pair-item', this.$t('label.noselect'))
         }
       }
     }
   },
   methods: {
-    initDataItem () {
-      this.dataItems = []
-      if (this.options.page === 1) {
-        this.dataItems.push({
-          name: this.$t('label.noselect'),
-          account: '-',
-          domain: '-'
-        })
-      }
-    },
     onSelectRow (value) {
       this.selectedRowKeys = value
       this.$emit('select-ssh-key-pair-item', value[0])