From ba51520d8dd79ddbffd563db1fac23b38c0b3d93 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Mon, 17 Feb 2020 14:58:46 +0530
Subject: [PATCH] vpc: add Internal LB form and Assign VM to LB rule form
 (#154)

VPC internal LB, IP pagination/management and assign vm form

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Rohit Yadav <rohit@apache.org>
---
 ui/src/config/section/network.js              |  12 +-
 ui/src/locales/en.json                        |   2 +
 .../views/network/InternalLBAssignVmForm.vue  | 278 ++++++++++++++
 .../views/network/InternalLBAssignedVmTab.vue | 157 ++++++++
 ui/src/views/network/IpAddressesTab.vue       | 136 ++++++-
 ui/src/views/network/VpcTiersTab.vue          | 358 ++++++++++++++++--
 6 files changed, 900 insertions(+), 43 deletions(-)
 create mode 100644 ui/src/views/network/InternalLBAssignVmForm.vue
 create mode 100644 ui/src/views/network/InternalLBAssignedVmTab.vue

diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index be81e0bb39a..81dfe3ebd38 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -430,6 +430,14 @@ export default {
       permission: ['listLoadBalancers'],
       columns: ['name', 'sourceipaddress', 'loadbalancerrule', 'algorithm', 'account', 'domain'],
       details: ['name', 'sourceipaddress', 'loadbalancerrule', 'algorithm', 'account', 'domain'],
+      tabs: [{
+        name: 'details',
+        component: () => import('@/components/view/DetailsTab.vue')
+      }, {
+        name: 'Assigned VMs',
+        component: () => import('@/views/network/InternalLBAssignedVmTab.vue'),
+        show: () => true
+      }],
       actions: [
         {
           api: 'createLoadBalancer',
@@ -458,7 +466,9 @@ export default {
           api: 'assignToLoadBalancerRule',
           icon: 'plus',
           label: 'Assign VMs',
-          dataView: true
+          dataView: true,
+          popup: true,
+          component: () => import('@/views/network/InternalLBAssignVmForm.vue')
         },
         {
           api: 'deleteLoadBalancer',
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 8e8352d7a65..882aad20ab0 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -280,6 +280,7 @@
 "intervaltype": "Interval Type",
 "invitations": "Invitations",
 "ip": "IP Address",
+"ips": "IPs",
 "ip4Netmask": "IPv4 Netmask",
 "ip4dns1": "IPv4 DNS1",
 "ip4dns2": "IPv4 DNS2",
@@ -405,6 +406,7 @@
 "label.action.register.ncc": "Register NCC",
 "label.action.release.ip": "Release IP",
 "label.action.remove.host": "Remove Host",
+"label.action.remove.vm": "Release VM",
 "label.action.reset.password": "Reset Password",
 "label.action.resize.volume": "Resize Volume",
 "label.action.restore.instance": "Restore Instance",
diff --git a/ui/src/views/network/InternalLBAssignVmForm.vue b/ui/src/views/network/InternalLBAssignVmForm.vue
new file mode 100644
index 00000000000..d9f7cbb43ee
--- /dev/null
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@@ -0,0 +1,278 @@
+// 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-spin :spinning="fetchLoading">
+    <div>
+      <div class="vm-modal__header">
+        <span style="min-width: 200px;">{{ $t('name') }}</span>
+        <span>{{ $t('state') }}</span>
+        <span>{{ $t('instancename') }}</span>
+        <span>{{ $t('displayname') }}</span>
+        <span>{{ $t('ip') }}</span>
+        <span>{{ $t('account') }}</span>
+        <span>{{ $t('zonenamelabel') }}</span>
+        <span>{{ $t('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 && iLb.virtualmachineid[index] === vm.id"
+              mode="multiple"
+              v-model="iLb.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>
+          </span>
+          <span><status :text="vm.state" displayText /></span>
+          <span>{{ vm.instancename }}</span>
+          <span>{{ vm.displayname }}</span>
+          <span></span>
+          <span>{{ vm.account }}</span>
+          <span>{{ vm.zonename }}</span>
+          <a-checkbox :value="vm.id" @change="e => fetchNics(e, index)" />
+        </div>
+        <a-divider/>
+        <a-pagination
+          class="row-element pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="vmCounts"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="changePage"
+          @showSizeChange="changePageSize"
+          showSizeChanger/>
+      </a-checkbox-group>
+    </div>
+    <div class="actions">
+      <a-button @click="closeModal">
+        {{ $t('Cancel') }}
+      </a-button>
+      <a-button type="primary" @click="handleSubmit">
+        {{ $t('OK') }}
+      </a-button>
+    </div>
+  </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'InternalLBAssignVmForm',
+  components: {
+    Status
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      page: 1,
+      pageSize: 10,
+      vmCounts: 0,
+      addVmModalNicLoading: false,
+      vms: [],
+      nics: [],
+      params: {},
+      assignedVMs: [],
+      iLb: {
+        virtualmachineid: [],
+        vmguestip: []
+      },
+      fetchLoading: false
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.fetchLoadBalancers()
+      this.fetchVirtualMachines()
+    },
+    fetchLoadBalancers () {
+      this.fetchLoading = true
+      api('listLoadBalancers', {
+        id: this.resource.id
+      }).then(response => {
+        this.assignedVMs = response.listloadbalancersresponse.loadbalancer[0].loadbalancerinstance || []
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    differenceBy (array1, array2, key) {
+      return array1.filter(a => !array2.some(b => b[key] === a[key]))
+    },
+    fetchVirtualMachines () {
+      this.fetchLoading = true
+      api('listVirtualMachines', {
+        listAll: true,
+        networkid: this.resource.networkid,
+        page: this.page,
+        pagesize: this.pageSize
+      }).then(response => {
+        var vms = response.listvirtualmachinesresponse.virtualmachine || []
+        this.vms = this.differenceBy(vms, this.assignedVMs, 'id')
+        this.vmCounts = this.vms.length || 0
+        this.vms.forEach((vm, index) => {
+          this.iLb.virtualmachineid[index] = null
+          this.nics[index] = null
+          this.iLb.vmguestip[index] = null
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    fetchNics (e, index) {
+      if (!e.target.checked) {
+        this.iLb.virtualmachineid[index] = null
+        this.nics[index] = null
+        this.iLb.vmguestip[index] = null
+        return
+      }
+      this.iLb.virtualmachineid[index] = e.target.value
+      this.addVmModalNicLoading = true
+      api('listNics', {
+        virtualmachineid: e.target.value,
+        networkid: this.resource.associatednetworkid
+      }).then(response => {
+        if (!response.listnicsresponse.nic[0]) return
+        const newItem = []
+        newItem.push(response.listnicsresponse.nic[0].ipaddress)
+        if (response.listnicsresponse.nic[0].secondaryip) {
+          newItem.push(...response.listnicsresponse.nic[0].secondaryip.map(ip => ip.ipaddress))
+        }
+        this.nics[index] = newItem
+        this.iLb.vmguestip[index] = this.nics[index][0]
+        this.addVmModalNicLoading = false
+      }).catch(error => {
+        this.$notification.error({
+          message: `Error ${error.response.status}` || 'Error',
+          description: error.response.data.errorresponse.errortext || 'Error'
+        })
+        this.closeModal()
+      })
+    },
+    closeModal () {
+      this.$emit('close-action')
+    },
+    handleSubmit () {
+      var j = 0
+      this.params = {}
+      for (var i = 0; i < this.iLb.virtualmachineid.length; i++) {
+        if (this.iLb.virtualmachineid[i] !== null) {
+          this.params['vmidipmap[' + j + '].vmid'] = this.iLb.virtualmachineid[i]
+          this.params['vmidipmap[' + j + '].vmip'] = this.iLb.vmguestip[i]
+          j++
+        }
+      }
+      this.params.id = this.resource.id
+      this.fetchLoading = true
+      api('assignToLoadBalancerRule', this.params).then(response => {
+        this.$pollJob({
+          jobId: response.assigntoloadbalancerruleresponse.jobid,
+          successMessage: `Successfully assigned VMs to ${this.resource.name}`,
+          successMethod: () => {
+            this.$emit('refresh-data')
+          },
+          errorMessage: `Failed to assign VMs to ${this.resource.name}`,
+          errorMethod: () => {
+            this.$emit('refresh-data')
+          },
+          loadingMessage: `Assigning VMs to ${this.resource.name}`,
+          catchMessage: 'Error encountered while fetching async job result'
+        })
+      }).catch(error => {
+        this.$notification.error({
+          message: `Error ${error.response.status}`,
+          description: error.response.data.errorresponse.errortext,
+          duration: 0
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+        this.$emit('refresh-data')
+        this.closeModal()
+      })
+    },
+    changePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    changePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.vm-modal {
+
+  &__header {
+    display: flex;
+
+    span {
+      flex: 1;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+  }
+
+  &__item {
+    display: flex;
+    margin-top: 10px;
+
+    span,
+    label {
+      display: block;
+      flex: 1;
+      margin-right: 10px;
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+
+  button {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+</style>
diff --git a/ui/src/views/network/InternalLBAssignedVmTab.vue b/ui/src/views/network/InternalLBAssignedVmTab.vue
new file mode 100644
index 00000000000..a44d52e3db7
--- /dev/null
+++ b/ui/src/views/network/InternalLBAssignedVmTab.vue
@@ -0,0 +1,157 @@
+// 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-spin :spinning="fetchLoading">
+    <a-table
+      size="small"
+      style="overflow-y: auto; margin-bottom: 15px"
+      :columns="columns"
+      :dataSource="assignedVms"
+      :rowKey="item => item.id"
+      :pagination="false"
+    >
+      <template slot="displayname" slot-scope="text, record">
+        <router-link :to="{ path: '/vm/' + record.id }">{{ record.displayname || record.name }}</router-link>
+      </template>
+      <template slot="ipaddress" slot-scope="text, record">
+        <span v-for="nic in record.nic" :key="nic.id">
+          {{ nic.ipaddress }} <br/>
+        </span>
+      </template>
+      <template slot="remove" slot-scope="text, record">
+        <a-button
+          type="danger"
+          icon="delete"
+          shape="circle"
+          @click="removeVmFromLB(record)" />
+      </template>
+      <a-divider />
+    </a-table>
+    <a-pagination
+      class="row-element pagination"
+      size="small"
+      :current="page"
+      :pageSize="pageSize"
+      :total="totalInstances"
+      :showTotal="total => `Total ${total} items`"
+      :pageSizeOptions="['10', '20', '40', '80', '100']"
+      @change="changePage"
+      @showSizeChange="changePageSize"
+      showSizeChanger
+    />
+  </a-spin>
+</template>
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'InternalLBAssignedVmTab',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      fetchLoading: false,
+      assignedVms: [],
+      page: 1,
+      pageSize: 10,
+      totalInstances: 0,
+      columns: [
+        {
+          title: this.$t('name'),
+          dataIndex: 'displayname',
+          scopedSlots: { customRender: 'displayname' }
+        },
+        {
+          title: this.$t('ipaddress'),
+          dataIndex: 'ipaddress',
+          scopedSlots: { customRender: 'ipaddress' }
+        },
+        {
+          title: '',
+          scopedSlots: { customRender: 'remove' }
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    resource: function (newItem, oldItem) {
+      if (!newItem || !newItem.id) {
+        return
+      }
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchData () {
+      this.fetchLoading = true
+      api('listLoadBalancerRuleInstances', {
+        id: this.resource.id,
+        page: this.page,
+        pagesize: this.pageSize
+      }).then(response => {
+        this.totalInstances = response.listloadbalancerruleinstancesresponse.count || 0
+        this.assignedVms = response.listloadbalancerruleinstancesresponse.loadbalancerruleinstance || []
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    removeVmFromLB (vm) {
+      this.fetchLoading = true
+      api('removeFromLoadBalancerRule', {
+        id: this.resource.id,
+        virtualmachineids: vm.id
+      }).then(response => {
+        this.$pollJob({
+          jobId: response.removefromloadbalancerruleresponse.jobid,
+          successMessage: `Successfully removed IP ${vm.name} from ${this.resource.name}`,
+          successMethod: () => {
+            this.fetchLoading = false
+            this.fetchData()
+          },
+          errorMessage: `Failed to remove ${vm.name} from the LB`,
+          errorMethod: () => {
+            this.fetchLoading = false
+            this.fetchData()
+          },
+          loadingMessage: `Removing ${vm.name} from LB is in progress`,
+          catchMessage: 'Error encountered while fetching async job result'
+        })
+      })
+    },
+    changePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    changePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index d241f971db3..7d63894c9b4 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -20,6 +20,23 @@
     <a-button type="dashed" icon="plus" style="width: 100%; margin-bottom: 15px" @click="acquireIpAddress">
       {{ $t("label.acquire.new.ip") }}
     </a-button>
+    <div v-if="$route.path.startsWith('/vpc')">
+      Select Tier:
+      <a-select
+        style="width: 40%; margin-left: 15px;margin-bottom: 15px"
+        :loading="fetchLoading"
+        defaultActiveFirstOption
+        :value="vpcTier"
+        @change="handleTierSelect"
+      >
+        <a-select-option key="all" value="">
+          {{ $t('Show All') }}
+        </a-select-option>
+        <a-select-option v-for="network in networksList" :key="network.id" :value="network.id">
+          {{ network.name }}
+        </a-select-option>
+      </a-select>
+    </div>
     <a-table
       size="small"
       style="overflow-y: auto"
@@ -41,6 +58,10 @@
         <router-link :to="{ path: '/vm/' + record.virtualmachineid }" > {{ record.virtualmachinename || record.virtualmachineid }} </router-link>
       </template>
 
+      <template slot="associatednetworkname" slot-scope="text, record">
+        <router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }" > {{ record.associatednetworkname || record.associatednetworkid }} </router-link>
+      </template>
+
       <template slot="action" slot-scope="text, record">
         <a-button
           v-if="record.issourcenat !== true"
@@ -87,9 +108,14 @@ export default {
     return {
       fetchLoading: false,
       ips: [],
+      ipsTiers: [],
+      networksList: [],
+      defaultNetwork: '',
+      vpcTier: '',
       page: 1,
       pageSize: 10,
       totalIps: 0,
+      tiersSelect: false,
       columns: [
         {
           title: this.$t('ipaddress'),
@@ -108,7 +134,8 @@ export default {
         },
         {
           title: this.$t('Network'),
-          dataIndex: 'associatednetworkname'
+          dataIndex: 'associatednetworkname',
+          scopedSlots: { customRender: 'associatednetworkname' }
         },
         {
           title: '',
@@ -136,8 +163,12 @@ export default {
         pagesize: this.pageSize
       }
       if (this.$route.path.startsWith('/vpc')) {
+        this.networksList = this.resource.network
         params.vpcid = this.resource.id
         params.forvirtualnetwork = true
+        if (this.vpcTier) {
+          params.associatednetworkid = this.vpcTier
+        }
       } else {
         params.associatednetworkid = this.resource.id
       }
@@ -149,6 +180,10 @@ export default {
         this.fetchLoading = false
       })
     },
+    handleTierSelect (tier) {
+      this.vpcTier = tier
+      this.fetchData()
+    },
     changePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize
@@ -163,6 +198,9 @@ export default {
       const params = {}
       if (this.$route.path.startsWith('/vpc')) {
         params.vpcid = this.resource.id
+        if (this.vpcTier) {
+          params.networkid = this.vpcTier
+        }
       } else {
         params.networkid = this.resource.id
       }
@@ -222,4 +260,100 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.list {
+    max-height: 95vh;
+    width: 95vw;
+    overflow-y: scroll;
+    margin: -24px;
+
+    @media (min-width: 1000px) {
+      max-height: 70vh;
+      width: 900px;
+    }
+
+    &__header,
+    &__footer {
+      padding: 20px;
+    }
+
+    &__header {
+      display: flex;
+
+      .ant-select {
+        min-width: 200px;
+      }
+
+      &__col {
+
+        &:not(:last-child) {
+          margin-right: 20px;
+        }
+
+        &--full {
+          flex: 1;
+        }
+
+      }
+
+    }
+
+    &__footer {
+      display: flex;
+      justify-content: flex-end;
+
+      button {
+        &:not(:last-child) {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    &__item {
+      padding-right: 20px;
+      padding-left: 20px;
+
+      &--selected {
+        background-color: #e6f7ff;
+      }
+
+    }
+
+    &__title {
+      font-weight: bold;
+    }
+
+    &__outer-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      cursor: pointer;
+
+      @media (min-width: 760px) {
+        flex-direction: row;
+        align-items: center;
+      }
+
+    }
+
+    &__row {
+      margin-bottom: 10px;
+
+      @media (min-width: 760px) {
+        margin-right: 20px;
+        margin-bottom: 0;
+      }
+    }
+
+    &__radio {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+  }
 </style>
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index be891e2209c..0fdec7ea3f1 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -17,9 +17,9 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-button type="dashed" icon="plus" style="width: 100%" @click="handleOpenModal">Add Network</a-button>
+    <a-button type="dashed" icon="plus" style="width: 100%;margin-bottom: 20px;" @click="handleOpenModal">Add Network</a-button>
     <a-list class="list">
-      <a-list-item v-for="network in networks" :key="network.id" class="list__item">
+      <a-list-item v-for="(network, idx) in networks" :key="idx" class="list__item">
         <div class="list__item-outer-container">
           <div class="list__item-container">
             <div class="list__col">
@@ -51,30 +51,79 @@
                 </router-link>
               </div>
             </div>
-
           </div>
-          <div class="list__item-container">
-            <div class="list__col">
-              <a-button icon="share-alt">
-                <router-link :to="{ path: '/ilb?networkid=' + network.id }"> Internal LB</router-link>
+          <a-collapse :bordered="false" style="margin-left: -18px">
+            <template v-slot:expandIcon="props">
+              <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
+            </template>
+            <a-collapse-panel :header="$t('Instances')" key="vm" :style="customStyle">
+              <a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="$router.push({ path: '/action/deployVirtualMachine?networkid=' + network.id })">
+                {{ $t('Add Instance') }}
               </a-button>
-            </div>
-            <div class="list__col">
-              <a-button icon="share-alt">
-                <router-link :to="{ path: '/publicip?forloadbalancing=true' + '&associatednetworkid=' + network.id }"> Public LB IP</router-link>
+              <a-table
+                class="table"
+                size="small"
+                :columns="vmCols"
+                :dataSource="vms[network.id]"
+                :rowKey="item => item.id"
+                :pagination="false"
+                :loading="fetchLoading">
+                <template slot="name" slot-scope="text, item">
+                  <router-link
+                    :to="{ path: '/vm/'+item.id}">{{ item.name }}
+                  </router-link>
+                </template>
+                <template slot="ip" slot-scope="text, item">
+                  <div v-for="nic in item.nic" :key="nic.id">
+                    {{ nic.isdefault === true ? nic.ipaddress : '' }}
+                  </div>
+                </template>
+              </a-table>
+              <a-divider/>
+              <a-pagination
+                class="row-element pagination"
+                size="small"
+                :current="page"
+                :pageSize="pageSize"
+                :total="itemCounts.vms[network.id]"
+                :showTotal="total => `Total ${total} items`"
+                :pageSizeOptions="['10', '20', '40', '80', '100']"
+                @change="changePage"
+                @showSizeChange="changePageSize"
+                showSizeChanger/>
+            </a-collapse-panel>
+            <a-collapse-panel :header="$t('Internal LB')" key="ilb" :style="customStyle" :disabled="!showIlb(network)" >
+              <a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="handleAddInternalLB(network.id)">
+                {{ $t('label.add.internal.lb') }}
               </a-button>
-            </div>
-            <div class="list__col">
-              <a-button icon="environment">
-                <router-link :to="{ path: '/publicip?isstaticnat=true' + '&associatednetworkid=' + network.id }"> Static NATS</router-link>
-              </a-button>
-            </div>
-            <div class="list__col">
-              <a-button icon="desktop">
-                <router-link :to="{ path: '/vm/?vpcid=' + resource.id + '&networkid=' + network.id }"> VMs</router-link>
-              </a-button>
-            </div>
-          </div>
+              <a-table
+                class="table"
+                size="small"
+                :columns="internalLbCols"
+                :dataSource="internalLB[network.id]"
+                :rowKey="item => item.id"
+                :pagination="false"
+                :loading="fetchLoading">
+                <template slot="name" slot-scope="text, item">
+                  <router-link
+                    :to="{ path: '/ilb/'+item.id}">{{ item.name }}
+                  </router-link>
+                </template>
+              </a-table>
+              <a-divider/>
+              <a-pagination
+                class="row-element pagination"
+                size="small"
+                :current="page"
+                :pageSize="pageSize"
+                :total="itemCounts.internalLB[network.id]"
+                :showTotal="total => `Total ${total} items`"
+                :pageSizeOptions="['10', '20', '40', '80', '100']"
+                @change="changePage"
+                @showSizeChange="changePageSize"
+                showSizeChanger/>
+            </a-collapse-panel>
+          </a-collapse>
         </div>
       </a-list-item>
     </a-list>
@@ -119,6 +168,49 @@
         </a-form>
       </a-spin>
     </a-modal>
+
+    <a-modal v-model="showAddInternalLB" :title="$t('label.add.internal.lb')" @ok="handleAddInternalLBSubmit">
+      <a-spin :spinning="modalLoading">
+        <a-form @submit.prevent="handleAddInternalLBSubmit" :form="form">
+          <a-form-item :label="$t('name')">
+            <a-input
+              placeholder="Unique name for Internal LB"
+              v-decorator="['name', { rules: [{ required: true, message: 'Please specify a name for the Internal LB'}] }]"/>
+          </a-form-item>
+          <a-form-item :label="$t('description')">
+            <a-input
+              placeholder="Brief description of the Internal LB"
+              v-decorator="['description']"/>
+          </a-form-item>
+          <a-form-item :label="$t('sourceipaddress')">
+            <a-input
+              placeholder="Brief description of the Internal LB"
+              v-decorator="['sourceIP']"/>
+          </a-form-item>
+          <a-form-item :label="$t('sourceport')">
+            <a-input
+              v-decorator="['sourcePort', { rules: [{ required: true, message: 'Please specify a Source Port'}] }]"/>
+          </a-form-item>
+          <a-form-item :label="$t('instanceport')">
+            <a-input
+              v-decorator="['instancePort', { rules: [{ required: true, message: 'Please specify a Instance Port'}] }]"/>
+          </a-form-item>
+          <a-form-item :label="$t('algorithm')">
+            <a-select
+              v-decorator="[
+                'algorithm',
+                {
+                  initialValue: 'Source',
+                  rules: [{ required: true, message: 'required'}]
+                }]">
+              <a-select-option v-for="(key, idx) in Object.keys(algorithms)" :key="idx" :value="algorithms[key]">
+                {{ key }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </a-modal>
   </a-spin>
 </template>
 
@@ -144,11 +236,99 @@ export default {
   data () {
     return {
       networks: [],
+      networkid: '',
       fetchLoading: false,
       showCreateNetworkModal: false,
+      showAddInternalLB: false,
       networkOfferings: [],
       networkAclList: [],
-      modalLoading: false
+      modalLoading: false,
+      internalLB: {},
+      LBPublicIPs: {},
+      staticNats: {},
+      vms: {},
+      algorithms: {
+        Source: 'source',
+        'Round-robin': 'roundrobin',
+        'Least connections': 'leastconn'
+      },
+      internalLbCols: [
+        {
+          title: this.$t('name'),
+          dataIndex: 'name',
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: this.$t('sourceipaddress'),
+          dataIndex: 'sourceipaddress'
+        },
+        {
+          title: this.$t('algorithm'),
+          dataIndex: 'algorithm'
+        },
+        {
+          title: this.$t('account'),
+          dataIndex: 'account'
+        }
+      ],
+      LBPublicIPCols: [
+        {
+          title: this.$t('ip'),
+          dataIndex: 'ipaddress',
+          scopedSlots: { customRender: 'ipaddress' }
+        },
+        {
+          title: this.$t('state'),
+          dataIndex: 'state'
+        },
+        {
+          title: this.$t('networkid'),
+          dataIndex: 'associatedNetworkName'
+        },
+        {
+          title: this.$t('vm'),
+          dataIndex: 'virtualmachinename'
+        }
+      ],
+      StaticNatCols: [
+        {
+          title: this.$t('ips'),
+          dataIndex: 'ipaddress',
+          scopedSlots: { customRender: 'ipaddress' }
+        },
+        {
+          title: this.$t('zoneid'),
+          dataIndex: 'zonename'
+        },
+        {
+          title: this.$t('networkid'),
+          dataIndex: 'associatedNetworkName'
+        },
+        {
+          title: this.$t('state'),
+          dataIndex: 'state'
+        }
+      ],
+      vmCols: [
+        {
+          title: this.$t('name'),
+          dataIndex: 'name',
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: this.$t('ip'),
+          scopedSlots: { customRender: 'ip' }
+        }
+      ],
+      customStyle: 'margin-bottom: -10px; border-bottom-style: none',
+      page: 1,
+      pageSize: 10,
+      itemCounts: {
+        internalLB: {},
+        publicIps: {},
+        snats: {},
+        vms: {}
+      }
     }
   },
   mounted () {
@@ -165,24 +345,21 @@ export default {
     this.form = this.$form.createForm(this)
   },
   methods: {
+    showIlb (network) {
+      return network.service.filter(s => (s.name === 'Lb') && (s.capability.filter(c => c.name === 'LbSchemes' && c.value === 'Internal').length > 0)).length > 0 || false
+    },
     fetchData () {
-      this.fetchLoading = true
-      api('listNetworks', { vpcid: this.resource.id }).then(json => {
-        this.networks = json.listnetworksresponse.network
-      }).catch(error => {
-        this.$notification.error({
-          message: 'Request Failed',
-          description: error.response.headers['x-description']
-        })
-      }).finally(() => {
-        this.fetchLoading = false
-      })
+      this.networks = this.resource.network
+      for (const network of this.networks) {
+        this.fetchLoadBalancers(network.id)
+        this.fetchVMs(network.id)
+      }
     },
     fetchNetworkAclList () {
       this.fetchLoading = true
       this.modalLoading = true
       api('listNetworkACLLists', { vpcid: this.resource.id }).then(json => {
-        this.networkAclList = json.listnetworkacllistsresponse.networkacllist
+        this.networkAclList = json.listnetworkacllistsresponse.networkacllist || []
         this.$nextTick(function () {
           this.form.setFieldsValue({
             acl: this.networkAclList[0].id
@@ -191,7 +368,8 @@ export default {
       }).catch(error => {
         this.$notification.error({
           message: 'Request Failed',
-          description: error.response.headers['x-description']
+          description: error.response.headers['x-description'],
+          duration: 0
         })
       }).finally(() => {
         this.fetchLoading = false
@@ -207,7 +385,7 @@ export default {
         supportedServices: 'SourceNat',
         state: 'Enabled'
       }).then(json => {
-        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering
+        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering || []
         this.$nextTick(function () {
           this.form.setFieldsValue({
             networkOffering: this.networkOfferings[0].id
@@ -216,19 +394,58 @@ export default {
       }).catch(error => {
         this.$notification.error({
           message: 'Request Failed',
-          description: error.response.headers['x-description']
+          description: error.response.headers['x-description'],
+          duration: 0
         })
       }).finally(() => {
         this.fetchLoading = false
         this.modalLoading = false
       })
     },
+    fetchLoadBalancers (id) {
+      this.fetchLoading = true
+      api('listLoadBalancers', {
+        networkid: id,
+        page: this.page,
+        pagesize: this.pageSize
+      }).then(json => {
+        this.internalLB[id] = json.listloadbalancersresponse.loadbalancer || []
+        this.itemCounts.internalLB[id] = json.listloadbalancersresponse.count || 0
+        this.$forceUpdate()
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    fetchVMs (id) {
+      this.fetchLoading = true
+      api('listVirtualMachines', {
+        listAll: true,
+        vpcid: this.resource.id,
+        networkid: id,
+        page: this.page,
+        pagesize: this.pageSize
+      }).then(json => {
+        this.vms[id] = json.listvirtualmachinesresponse.virtualmachine || []
+        this.itemCounts.vms[id] = json.listvirtualmachinesresponse.count || 0
+        this.$forceUpdate()
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    closeModal () {
+      this.$emit('close-action')
+    },
     handleOpenModal () {
       this.form = this.$form.createForm(this)
       this.fetchNetworkAclList()
       this.fetchNetworkOfferings()
       this.showCreateNetworkModal = true
     },
+    handleAddInternalLB (id) {
+      this.form = this.$form.createForm(this)
+      this.showAddInternalLB = true
+      this.networkid = id
+    },
     handleAddNetworkSubmit () {
       this.fetchLoading = true
 
@@ -259,13 +476,72 @@ export default {
         }).catch(error => {
           this.$notification.error({
             message: 'Request Failed',
-            description: error.response.headers['x-description']
+            description: error.response.headers['x-description'],
+            duration: 0
           })
         }).finally(() => {
-          this.fetchLoading = false
           this.fetchData()
         })
       })
+    },
+    handleAddInternalLBSubmit () {
+      this.fetchLoading = true
+      this.modalLoading = true
+      this.form.validateFields((errors, values) => {
+        if (errors) {
+          this.fetchLoading = false
+          return
+        }
+        api('createLoadBalancer', {
+          name: values.name,
+          sourceport: values.sourcePort,
+          instanceport: values.instancePort,
+          algorithm: values.algorithm,
+          networkid: this.networkid,
+          sourceipaddressnetworkid: this.networkid,
+          scheme: 'Internal'
+        }).then(response => {
+          this.$store.dispatch('AddAsyncJob', {
+            title: `Creating Internal LB`,
+            jobid: response.createloadbalancerresponse.jobid,
+            description: values.name,
+            status: 'progress'
+          })
+          this.$pollJob({
+            jobId: response.createloadbalancerresponse.jobid,
+            successMessage: `Successfully created Internal LB`,
+            successMethod: () => {
+              this.fetchData()
+            },
+            errorMessage: 'Failed to create Internal LB' + response,
+            errorMethod: () => {
+              this.fetchData()
+            },
+            loadingMessage: `Creation of Internal LB is in progress`,
+            catchMessage: 'Error encountered while fetching async job result',
+            catchMethod: () => {
+              this.fetchData()
+            }
+          })
+        }).catch(error => {
+          console.error(error)
+          this.$message.error('Failed to create Internal LB')
+        }).finally(() => {
+          this.modalLoading = false
+          this.showAddInternalLB = false
+          this.fetchData()
+        })
+      })
+    },
+    changePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    changePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchData()
     }
   }
 }