network: Add support for tiers in PF, LB rules for a VPC (#379)

Fixes #333
Fixes #438

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

ui/src/components/view/ResourceView.vue

@@ -43,7 +43,7 @@
             v-for="tab in tabs"
             :tab="$t('label.' + tab.name)"
             :key="tab.name"
-            v-if="showHideTab(tab)">
+            v-if="showTab(tab)">
             <component :is="tab.component" :resource="resource" :loading="loading" :tab="activeTab" />
           </a-tab-pane>
         </a-tabs>
@@ -97,8 +97,12 @@ export default {
       if (newItem.id === oldItem.id) return
 
       if (this.resource.associatednetworkid) {
-        api('listNetworks', { id: this.resource.associatednetworkid }).then(response => {
-          this.networkService = response.listnetworksresponse.network[0]
+        api('listNetworks', { id: this.resource.associatednetworkid, listall: true }).then(response => {
+          if (response && response.listnetworksresponse && response.listnetworksresponse.network) {
+            this.networkService = response.listnetworksresponse.network[0]
+          } else {
+            this.networkService = {}
+          }
         })
       }
     }
@@ -107,12 +111,15 @@ export default {
     onTabChange (key) {
       this.activeTab = key
     },
-    showHideTab (tab) {
+    showTab (tab) {
       if ('networkServiceFilter' in tab) {
-        if (this.resource.virtualmachineid && tab.name !== 'Firewall') {
+        if (this.resource && this.resource.virtualmachineid && !this.resource.vpcid && tab.name !== 'firewall') {
           return false
         }
-        if (this.resource && this.resource.vpcid && tab.name !== 'Firewall') {
+        if (this.resource && this.resource.virtualmachineid && this.resource.vpcid) {
+          return false
+        }
+        if (this.resource && this.resource.vpcid && tab.name !== 'firewall') {
           return true
         }
         return this.networkService && this.networkService.service &&

ui/src/views/network/EnableStaticNat.vue

@@ -172,7 +172,7 @@ export default {
         domainid: this.resource.domainid,
         keyword: this.searchQuery
       }).then(response => {
-        this.vmsList = response.listvirtualmachinesresponse.virtualmachine
+        this.vmsList = response.listvirtualmachinesresponse.virtualmachine || []
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
@@ -204,9 +204,9 @@ export default {
       this.loading = true
       api('listNics', {
         virtualmachineid: this.selectedVm,
-        networkid: this.resource.associatednetworkid
+        networkid: this.resource.associatednetworkid || this.selectedVpcTier
       }).then(response => {
-        this.nicsList = response.listnicsresponse.nic
+        this.nicsList = response.listnicsresponse.nic || []
 
         let secondaryIps = this.nicsList.map(item => item.secondaryip)
 

ui/src/views/network/LoadBalancing.vue

@@ -18,6 +18,21 @@
 <template>
   <div>
     <div>
+      <div class="filter" v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
+        <div class="form">
+          <div class="form__item" ref="newRuleTier">
+            <div class="form__label">{{ $t('label.tiername') }}</div>
+            <a-select v-model="newRule.tier">
+              <a-select-option
+                v-for="tier in tiers.data"
+                :loading="tiers.loading"
+                :key="tier.id">
+                {{ tier.displaytext }}
+              </a-select-option>
+            </a-select>
+          </div>
+        </div>
+      </div>
       <div class="form">
         <div class="form__item" ref="newRuleName">
           <div class="form__label"><span class="form__required">*</span>{{ $t('label.name') }}</div>
@@ -63,7 +78,7 @@
 
     <a-table
       size="small"
-      style="overflow-y: auto"
+      class="list-view"
       :loading="loading"
       :columns="columns"
       :dataSource="lbRules"
@@ -278,47 +293,58 @@
         {disabled: newRule.virtualmachineid === [] } }"
       @cancel="closeModal"
     >
-
-      <a-icon v-if="addVmModalLoading" type="loading"></a-icon>
-
-      <div v-else>
-        <div class="vm-modal__header">
-          <span style="min-width: 200px;">{{ $t('label.name') }}</span>
-          <span>{{ $t('label.instancename') }}</span>
-          <span>{{ $t('label.displayname') }}</span>
-          <span>{{ $t('label.ip') }}</span>
-          <span>{{ $t('label.account') }}</span>
-          <span>{{ $t('label.zonenamelabel') }}</span>
-          <span>{{ $t('label.state') }}</span>
-          <span>{{ $t('label.select') }}</span>
-        </div>
-
-        <a-checkbox-group style="width: 100%;">
-          <div v-for="(vm, index) in vms" :key="index" class="vm-modal__item">
-            <span style="min-width: 200px;">
-              <span>
-                {{ vm.name }}
-              </span>
-              <a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
-              <a-select
-                v-else-if="!addVmModalNicLoading && newRule.virtualmachineid[index] === vm.id"
-                mode="multiple"
-                v-model="newRule.vmguestip[index]"
-              >
-                <a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
-                  {{ nic }}{{ nicIndex === 0 ? ' (Primary)' : null }}
-                </a-select-option>
-              </a-select>
+      <div>
+        <a-input-search
+          class="input-search"
+          placeholder="Search"
+          v-model="searchQuery"
+          allowClear
+          @search="onSearch" />
+        <a-table
+          size="small"
+          class="list-view"
+          :loading="addVmModalLoading"
+          :columns="vmColumns"
+          :dataSource="vms"
+          :pagination="false"
+          :rowKey="record => record.id"
+          :scroll="{ y: 300 }">
+          <div slot="name" slot-scope="text, record, index">
+            <span>
+              {{ text }}
             </span>
-            <span>{{ vm.instancename }}</span>
-            <span>{{ vm.displayname }}</span>
-            <span></span>
-            <span>{{ vm.account }}</span>
-            <span>{{ vm.zonename }}</span>
-            <span>{{ vm.state }}</span>
-            <a-checkbox :value="vm.id" @change="e => fetchNics(e, index)" />
+            <a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
+            <a-select
+              style="display: block"
+              v-else-if="!addVmModalNicLoading && newRule.virtualmachineid[index] === record.id"
+              mode="multiple"
+              v-model="newRule.vmguestip[index]"
+            >
+              <a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
+                {{ nic }}{{ nicIndex === 0 ? ' (Primary)' : null }}
+              </a-select-option>
+            </a-select>
           </div>
-        </a-checkbox-group>
+
+          <div slot="state" slot-scope="text">
+            <status :text="text ? text : ''" displayText></status>
+          </div>
+
+          <div slot="action" slot-scope="text, record, index" style="text-align: center">
+            <a-checkbox :value="record.id" @change="e => fetchNics(e, index)" />
+          </div>
+        </a-table>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="vmPage"
+          :pageSize="vmPageSize"
+          :total="vmCount"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger/>
       </div>
 
     </a-modal>
@@ -423,7 +449,46 @@ export default {
           title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
-      ]
+      ],
+      tiers: {
+        loading: false,
+        data: []
+      },
+      vmColumns: [
+        {
+          title: this.$t('label.name'),
+          dataIndex: 'name',
+          scopedSlots: { customRender: 'name' },
+          width: 220
+        },
+        {
+          title: this.$t('label.state'),
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
+        },
+        {
+          title: this.$t('label.displayname'),
+          dataIndex: 'displayname'
+        },
+        {
+          title: this.$t('label.account'),
+          dataIndex: 'account'
+        },
+        {
+          title: this.$t('label.zonename'),
+          dataIndex: 'zonename'
+        },
+        {
+          title: this.$t('label.select'),
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+          width: 80
+        }
+      ],
+      vmPage: 1,
+      vmPageSize: 10,
+      vmCount: 0,
+      searchQuery: null
     }
   },
   mounted () {
@@ -446,9 +511,30 @@ export default {
   },
   methods: {
     fetchData () {
+      this.fetchListTiers()
+      this.fetchLBRules()
+    },
+    fetchListTiers () {
+      this.tiers.loading = true
+
+      api('listNetworks', {
+        account: this.resource.account,
+        domainid: this.resource.domainid,
+        supportedservices: 'Lb',
+        vpcid: this.resource.vpcid
+      }).then(json => {
+        this.tiers.data = json.listnetworksresponse.network || []
+        this.newRule.tier = this.tiers.data && this.tiers.data[0].id ? this.tiers.data[0].id : null
+        this.$forceUpdate()
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => { this.tiers.loading = false })
+    },
+    fetchLBRules () {
       this.loading = true
       this.lbRules = []
       this.stickinessPolicies = []
+
       api('listLoadBalancerRules', {
         listAll: true,
         publicipid: this.resource.id,
@@ -882,26 +968,7 @@ export default {
         if (!this.newRule.name || !this.newRule.publicport || !this.newRule.privateport) return
       }
       this.addVmModalVisible = true
-      this.addVmModalLoading = true
-      api('listVirtualMachines', {
-        listAll: true,
-        page: 1,
-        pagesize: 500,
-        networkid: this.resource.associatednetworkid,
-        account: this.resource.account,
-        domainid: this.resource.domainid
-      }).then(response => {
-        this.vms = response.listvirtualmachinesresponse.virtualmachine
-        this.vms.forEach((vm, index) => {
-          this.newRule.virtualmachineid[index] = null
-          this.nics[index] = null
-          this.newRule.vmguestip[index] = null
-        })
-        this.addVmModalLoading = false
-      }).catch(error => {
-        this.$notifyError(error)
-        this.closeModal()
-      })
+      this.fetchVirtualMachines()
     },
     fetchNics (e, index) {
       if (!e.target.checked) {
@@ -917,7 +984,7 @@ export default {
         virtualmachineid: e.target.value,
         networkid: this.resource.associatednetworkid
       }).then(response => {
-        if (!response.listnicsresponse.nic[0]) return
+        if (!response || !response.listnicsresponse || !response.listnicsresponse.nic[0]) return
         const newItem = []
         newItem.push(response.listnicsresponse.nic[0].ipaddress)
         if (response.listnicsresponse.nic[0].secondaryip) {
@@ -931,6 +998,33 @@ export default {
         this.closeModal()
       })
     },
+    fetchVirtualMachines () {
+      this.vmCount = 0
+      this.vms = []
+      this.addVmModalLoading = true
+      const networkId = ('vpcid' in this.resource && !('associatednetworkid' in this.resource)) ? this.newRule.tier : this.resource.associatednetworkid
+      api('listVirtualMachines', {
+        listAll: true,
+        keyword: this.searchQuery,
+        page: this.vmPage,
+        pagesize: this.vmPageSize,
+        networkid: networkId,
+        account: this.resource.account,
+        domainid: this.resource.domainid
+      }).then(response => {
+        this.vmCount = response.listvirtualmachinesresponse.count || 0
+        this.vms = response.listvirtualmachinesresponse.virtualmachine || []
+        this.vms.forEach((vm, index) => {
+          this.newRule.virtualmachineid[index] = null
+          this.nics[index] = null
+          this.newRule.vmguestip[index] = null
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.addVmModalLoading = false
+      })
+    },
     handleAssignToLBRule (data) {
       const vmIDIpMap = {}
 
@@ -991,9 +1085,10 @@ export default {
         return
       }
 
+      const networkId = ('vpcid' in this.resource && !('associatednetworkid' in this.resource)) ? this.newRule.tier : this.resource.associatednetworkid
       api('createLoadBalancerRule', {
         openfirewall: false,
-        networkid: this.resource.associatednetworkid,
+        networkid: networkId,
         publicipid: this.resource.id,
         algorithm: this.newRule.algorithm,
         name: this.newRule.name,
@@ -1040,6 +1135,10 @@ export default {
       this.page = currentPage
       this.pageSize = pageSize
       this.fetchData()
+    },
+    onSearch (value) {
+      this.searchQuery = value
+      this.fetchVirtualMachines()
     }
   }
 }
@@ -1372,6 +1471,7 @@ export default {
 
   .pagination {
     margin-top: 20px;
+    text-align: right;
   }
 
   .actions {
@@ -1381,4 +1481,22 @@ export default {
       }
     }
   }
+
+  .list-view {
+    overflow-y: auto;
+    display: block;
+    width: 100%;
+  }
+
+  .filter {
+    display: block;
+    width: 240px;
+    margin-bottom: 10px;
+  }
+
+  .input-search {
+    margin-bottom: 10px;
+    width: 220px;
+    float: right;
+  }
 </style>

ui/src/views/network/PortForwarding.vue

@@ -18,6 +18,21 @@
 <template>
   <div>
     <div>
+      <div class="filter" v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
+        <div class="form">
+          <div class="form__item" ref="newRuleTier">
+            <div class="form__label">{{ $t('label.tiername') }}</div>
+            <a-select v-model="newRule.tier">
+              <a-select-option
+                v-for="tier in tiers.data"
+                :loading="tiers.loading"
+                :key="tier.id">
+                {{ tier.displaytext }}
+              </a-select-option>
+            </a-select>
+          </div>
+        </div>
+      </div>
       <div class="form">
         <div class="form__item">
           <div class="form__label">{{ $t('label.privateport') }}</div>
@@ -159,57 +174,70 @@
         {disabled: newRule.virtualmachineid === null } }"
       @cancel="closeModal"
     >
-
-      <a-icon v-if="addVmModalLoading" type="loading"></a-icon>
-
-      <div v-else>
-        <div class="vm-modal__header">
-          <span style="min-width: 200px;">{{ $t('label.name') }}</span>
-          <span>{{ $t('label.instancename') }}</span>
-          <span>{{ $t('label.displayname') }}</span>
-          <span>{{ $t('label.ip') }}</span>
-          <span>{{ $t('label.account') }}</span>
-          <span>{{ $t('label.zone') }}</span>
-          <span>{{ $t('label.state') }}</span>
-          <span>{{ $t('label.select') }}</span>
-        </div>
-
-        <a-radio-group v-model="newRule.virtualmachineid" style="width: 100%;" @change="fetchNics">
-          <div v-for="(vm, index) in vms" :key="index" class="vm-modal__item">
-
-            <span style="min-width: 200px;">
-              <span>
-                {{ vm.name }}
-              </span>
-              <a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
-              <a-select
-                v-else-if="!addVmModalNicLoading && newRule.virtualmachineid === vm.id"
-                v-model="newRule.vmguestip">
-                <a-select-option v-for="(nic, nicIndex) in nics" :key="nic" :value="nic">
-                  {{ nic }}{{ nicIndex === 0 ? ' (Primary)' : null }}
-                </a-select-option>
-              </a-select>
+      <div>
+        <a-input-search
+          class="input-search"
+          placeholder="Search"
+          v-model="searchQuery"
+          allowClear
+          @search="onSearch" />
+        <a-table
+          size="small"
+          class="list-view"
+          :loading="addVmModalLoading"
+          :columns="vmColumns"
+          :dataSource="vms"
+          :pagination="false"
+          :rowKey="record => record.id"
+          :scroll="{ y: 300 }">
+          <div slot="name" slot-scope="text, record">
+            <span>
+              {{ text }}
             </span>
-            <span>{{ vm.instancename }}</span>
-            <span>{{ vm.displayname }}</span>
-            <span></span>
-            <span>{{ vm.account }}</span>
-            <span>{{ vm.zonename }}</span>
-            <span>{{ vm.state }}</span>
-            <a-radio :value="vm.id" />
+            <a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
+            <a-select
+              style="display: block"
+              v-else-if="!addVmModalNicLoading && newRule.virtualmachineid === record.id"
+              v-model="newRule.vmguestip"
+            >
+              <a-select-option v-for="(nic, nicIndex) in nics" :key="nic" :value="nic">
+                {{ nic }}{{ nicIndex === 0 ? ' (Primary)' : null }}
+              </a-select-option>
+            </a-select>
           </div>
-        </a-radio-group>
+
+          <div slot="state" slot-scope="text">
+            <status :text="text ? text : ''" displayText></status>
+          </div>
+
+          <div slot="action" slot-scope="text, record" style="text-align: center">
+            <a-radio :value="record.id" @change="e => fetchNics(e)" />
+          </div>
+        </a-table>
+        <a-pagination
+          class="pagination"
+          size="small"
+          :current="vmPage"
+          :pageSize="vmPageSize"
+          :total="vmCount"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="handleChangePage"
+          @showSizeChange="handleChangePageSize"
+          showSizeChanger/>
       </div>
-
     </a-modal>
-
   </div>
 </template>
 
 <script>
 import { api } from '@/api'
+import Status from '@/components/widgets/Status'
 
 export default {
+  components: {
+    Status
+  },
   props: {
     resource: {
       type: Object,
@@ -272,7 +300,51 @@ export default {
           title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
-      ]
+      ],
+      tiers: {
+        loading: false,
+        data: []
+      },
+      vmColumns: [
+        {
+          title: this.$t('label.name'),
+          dataIndex: 'name',
+          scopedSlots: { customRender: 'name' },
+          width: 210
+        },
+        {
+          title: this.$t('label.state'),
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
+        },
+        {
+          title: this.$t('label.displayname'),
+          dataIndex: 'displayname'
+        },
+        {
+          title: this.$t('label.ip'),
+          dataIndex: 'ip',
+          width: 100
+        },
+        {
+          title: this.$t('label.account'),
+          dataIndex: 'account'
+        },
+        {
+          title: this.$t('label.zone'),
+          dataIndex: 'zonename'
+        },
+        {
+          title: this.$t('label.select'),
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+          width: 80
+        }
+      ],
+      vmPage: 1,
+      vmPageSize: 10,
+      vmCount: 0,
+      searchQuery: null
     }
   },
   mounted () {
@@ -295,6 +367,28 @@ export default {
   },
   methods: {
     fetchData () {
+      this.fetchListTiers()
+      this.fetchPFRules()
+    },
+    fetchListTiers () {
+      if ('vpcid' in this.resource && 'associatednetworkid' in this.resource) {
+        return
+      }
+      this.tiers.loading = true
+      api('listNetworks', {
+        account: this.resource.account,
+        domainid: this.resource.domainid,
+        supportedservices: 'PortForwarding',
+        vpcid: this.resource.vpcid
+      }).then(json => {
+        this.tiers.data = json.listnetworksresponse.network || []
+        this.newRule.tier = this.tiers.data && this.tiers.data[0].id ? this.tiers.data[0].id : null
+        this.$forceUpdate()
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => { this.tiers.loading = false })
+    },
+    fetchPFRules () {
       this.loading = true
       api('listPortForwardingRules', {
         listAll: true,
@@ -331,10 +425,11 @@ export default {
     addRule () {
       this.loading = true
       this.addVmModalVisible = false
+      const networkId = ('vpcid' in this.resource && !('associatednetworkid' in this.resource)) ? this.newRule.tier : this.resource.associatednetworkid
       api('createPortForwardingRule', {
         ...this.newRule,
         ipaddressid: this.resource.id,
-        networkid: this.resource.associatednetworkid
+        networkid: networkId
       }).then(response => {
         this.$pollJob({
           jobId: response.createportforwardingruleresponse.jobid,
@@ -476,24 +571,11 @@ export default {
     },
     openAddVMModal () {
       this.addVmModalVisible = true
-      this.addVmModalLoading = true
-      api('listVirtualMachines', {
-        listAll: true,
-        page: 1,
-        pagesize: 500,
-        networkid: this.resource.associatednetworkid,
-        account: this.resource.account,
-        domainid: this.resource.domainid
-      }).then(response => {
-        this.vms = response.listvirtualmachinesresponse.virtualmachine
-        this.addVmModalLoading = false
-      }).catch(error => {
-        this.$notifyError(error)
-        this.closeModal()
-      })
+      this.fetchVirtualMachines()
     },
     fetchNics (e) {
       this.addVmModalNicLoading = true
+      this.newRule.virtualmachineid = e.target.value
       api('listNics', {
         virtualmachineid: e.target.value,
         networkid: this.resource.associatednetworkid
@@ -512,6 +594,27 @@ export default {
         this.closeModal()
       })
     },
+    fetchVirtualMachines () {
+      this.vmCount = 0
+      this.vms = []
+      this.addVmModalLoading = true
+      const networkId = ('vpcid' in this.resource && !('associatednetworkid' in this.resource)) ? this.newRule.tier : this.resource.associatednetworkid
+      api('listVirtualMachines', {
+        listAll: true,
+        keyword: this.searchQuery,
+        page: this.vmPage,
+        pagesize: this.vmPageSize,
+        networkid: networkId,
+        account: this.resource.account,
+        domainid: this.resource.domainid
+      }).then(response => {
+        this.vmCount = response.listvirtualmachinesresponse.count || 0
+        this.vms = response.listvirtualmachinesresponse.virtualmachine
+        this.addVmModalLoading = false
+      }).catch(error => {
+        this.$notifyError(error)
+      })
+    },
     handleChangePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize
@@ -521,6 +624,10 @@ export default {
       this.page = currentPage
       this.pageSize = pageSize
       this.fetchData()
+    },
+    onSearch (value) {
+      this.searchQuery = value
+      this.fetchVirtualMachines()
     }
   }
 }
@@ -707,6 +814,22 @@ export default {
 
   .pagination {
     margin-top: 20px;
+    text-align: right;
   }
 
+  .list-view {
+    overflow-y: auto;
+    display: block;
+    width: 100%;
+  }
+
+  .filter {
+    display: block;
+    width: 240px;
+    margin-bottom: 10px;
+
+    .form__item {
+      width: 100%;
+    }
+  }
 </style>