From 865b679e32de9528adba0bbe9d5b5d5b65cad6bc Mon Sep 17 00:00:00 2001
From: Ritchie Vincent <ritchie@ritchievincent.co.uk>
Date: Mon, 3 Feb 2020 19:29:35 +0000
Subject: [PATCH 1/8] Add VPN Router tabs

---
 src/locales/en.json                |   4 +
 src/views/network/VpcRouterTab.vue | 687 ++++++++++++++++++++++++++++-
 2 files changed, 679 insertions(+), 12 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 78692137f..131327dd4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -458,8 +458,10 @@
 "label.add.l2.guest.network": "Add L2 Guest Network",
 "label.add.ldap.account": "Add LDAP account",
 "label.add.ldap.list.users": "List LDAP users",
+"label.add.list.name":"ACL List Name",
 "label.add.netScaler.device": "Add Netscaler device",
 "label.add.network.offering": "Add network offering",
+"label.add.new.gateway": "Add new gateway",
 "label.add.new.tier": "Add new tier",
 "label.add.nfs.secondary.staging.store": "Add NFS Secondary Staging Store",
 "label.add.pod": "Add Pod",
@@ -633,6 +635,7 @@
 "label.revoke.project.invite": "Revoke invitation",
 "label.secondary.storage":"Secondary Storage",
 "label.secondary.storage.vm":"Secondary storage VM",
+"label.service.offering":"Service Offering",
 "label.set.default.NIC": "Set default NIC",
 "label.shutdown.provider": "Shutdown provider",
 "label.snapshot.schedule": "Set up Recurring Snapshot",
@@ -706,6 +709,7 @@
 "memoryusedgb": "Used",
 "memused": "Memory Usage",
 "message.edit.account": "Edit (\"-1\" indicates no limit to the amount of resources create)",
+"message.add.new.gateway.to.vpc":"Please specify the information to add a new gateway to this VPC.",
 "message.assign.instance.another": "Please specify the account type, domain, account name and network (optional) of the new account. <br> If the default nic of the vm is on a shared network, CloudStack will check if the network can be used by the new account if you do not specify one network. <br> If the default nic of the vm is on a isolated network, and the new account has more one isolated networks, you should specify one.",
 "message.network.addVM.desc":"Please specify the network that you would like to add this VM to. A new NIC will be added for this network.",
 "message.network.removeNIC": "Please confirm that want to remove this NIC, which will also remove the associated network from the VM.",
diff --git a/src/views/network/VpcRouterTab.vue b/src/views/network/VpcRouterTab.vue
index dde958f2f..5a2cb6549 100644
--- a/src/views/network/VpcRouterTab.vue
+++ b/src/views/network/VpcRouterTab.vue
@@ -17,24 +17,283 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-tabs :animated="false" tabPosition="left">
+    <a-tabs :tabPosition="device === 'tablet' ? 'top' : 'left'" :animated="false" @change="handleFetchData">
       <a-tab-pane tab="Private Gateways" key="pgw" v-if="'listPrivateGateways' in $store.getters.apis">
-        <a-button type="dashed" icon="plus" style="width: 100%">Add Private Gateway</a-button>
+        <a-button
+          type="dashed"
+          icon="plus"
+          style="width: 100%"
+          @click="() => handleOpenModals('privateGateways')">Add Private Gateway</a-button>
+        <a-list class="list">
+          <a-list-item v-for="item in privateGateways" :key="item.id">
+            <div class="list__item">
+              <div class="list__col">
+                <div class="list__label">{{ $t('ip') }}</div>
+                <div>{{ item.ipaddress }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('gateway') }}</div>
+                <div>{{ item.gateway }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('netmask') }}</div>
+                <div>{{ item.netmask }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('vlan') }}</div>
+                <div>{{ item.vlan }}</div>
+              </div>
+            </div>
+          </a-list-item>
+        </a-list>
+        <a-modal v-model="modals.gateway" :title="$t('label.add.new.gateway')" @ok="handleGatewayFormSubmit">
+          <a-spin :spinning="modals.gatewayLoading">
+            <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
+            <a-form @submit.prevent="handleGatewayFormSubmit" :form="gatewayForm">
+              <a-form-item :label="$t('physicalnetworkid')">
+                <a-select v-decorator="['physicalnetwork']">
+                  <a-select-option v-for="item in physicalnetworks" :key="item.id" :value="item.id">
+                    {{ item.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item :label="$t('label.vlan')" :required="true">
+                <a-input
+                  :placeholder="placeholders.vlan"
+                  v-decorator="['vlan', {rules: [{ required: true, message: 'Required' }]}]"
+                ></a-input>
+              </a-form-item>
+              <a-form-item :label="$t('publicip')" :required="true">
+                <a-input
+                  :placeholder="placeholders.ipaddress"
+                  v-decorator="['ipaddress', {rules: [{ required: true, message: 'Required' }]}]"
+                ></a-input>
+              </a-form-item>
+              <a-form-item :label="$t('gateway')" :required="true">
+                <a-input
+                  :placeholder="placeholders.gateway"
+                  v-decorator="['gateway', {rules: [{ required: true, message: 'Required' }]}]"
+                ></a-input>
+              </a-form-item>
+              <a-form-item :label="$t('netmask')" :required="true">
+                <a-input
+                  :placeholder="placeholders.netmask"
+                  v-decorator="['netmask', {rules: [{ required: true, message: 'Required' }]}]"
+                ></a-input>
+              </a-form-item>
+              <a-form-item :label="$t('sourceNat')">
+                <a-checkbox v-decorator="['nat']"></a-checkbox>
+              </a-form-item>
+              <a-form-item :label="$t('aclid')">
+                <a-select v-decorator="['acl']">
+                  <a-select-option v-for="item in networkAcls" :key="item.id" :value="item.id">
+                    {{ item.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-form>
+          </a-spin>
+        </a-modal>
       </a-tab-pane>
       <a-tab-pane tab="Public IP Addresses" key="ip" v-if="'listPublicIpAddresses' in $store.getters.apis">
-        <a-button type="dashed" icon="plus" style="width: 100%">Acquire New IP</a-button>
+        <a-button type="dashed" icon="plus" style="width: 100%" @click="handleAcquireNewIp">Acquire New IP</a-button>
+        <a-list class="list">
+          <a-list-item v-for="item in publicIpAddresses" :key="item.id">
+            <div class="list__item">
+              <div class="list__col">
+                <div class="list__label">{{ $t('ip') }}</div>
+                <div>{{ item.ipaddress }}{{ item.issourcenat === true ? ' [Source NAT]' : null }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('zone') }}</div>
+                <div>{{ item.zonename }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('network') }}</div>
+                <div>{{ item.networkname }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('state') }}</div>
+                <div><status :text="item.state" displayText></status></div>
+              </div>
+            </div>
+          </a-list-item>
+        </a-list>
       </a-tab-pane>
       <a-tab-pane tab="S2S VPN Gateway" key="vpngw" v-if="'listVpnGateways' in $store.getters.apis">
-        <a-button type="dashed" icon="plus" style="width: 100%">Create Site-to-Site VPN Gateway</a-button>
+        <a-list class="list">
+          <a-list-item v-for="item in vpnGateways" :key="item.id">
+            <div class="list__item">
+              <div class="list__col">
+                <div class="list__label">{{ $t('ip') }}</div>
+                <div>{{ item.publicip }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('account') }}</div>
+                <div>{{ item.account }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('domain') }}</div>
+                <div>{{ item.domain }}</div>
+              </div>
+            </div>
+          </a-list-item>
+        </a-list>
       </a-tab-pane>
       <a-tab-pane tab="S2S VPN Connection" key="vpnc" v-if="'listVpnConnections' in $store.getters.apis">
-        <a-button type="dashed" icon="plus" style="width: 100%">Create Site-to-Site VPN Connection</a-button>
+        <a-button
+          type="dashed"
+          icon="plus"
+          style="width: 100%"
+          @click="handleOpenModals('vpnConnection')">
+          Create Site-to-Site VPN Connection
+        </a-button>
+        <a-table
+          style="margin-top: 20px;"
+          size="small"
+          :columns="vpnConnectionsColumns"
+          :dataSource="vpnConnections"
+          :pagination="false"
+          :scroll="{ x: 1000 }"
+          :rowKey="record => record.id">
+          <template slot="state" slot-scope="text">
+            <status :text="text ? text : ''" displayText />
+          </template>
+        </a-table>
+        <a-modal v-model="modals.vpnConnection" :title="$t('label.create.VPN.connection')" @ok="handleVpnConnectionFormSubmit">
+          <a-spin :spinning="modals.vpnConnectionLoading">
+            <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
+              <a-form-item :label="$t('vpncustomergatewayid')">
+                <a-select v-decorator="['vpncustomergateway']">
+                  <a-select-option v-for="item in vpncustomergateways" :key="item.id" :value="item.id">
+                    {{ item.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item :label="$t('passive')">
+                <a-checkbox v-decorator="['passive']"></a-checkbox>
+              </a-form-item>
+            </a-form>
+          </a-spin>
+        </a-modal>
       </a-tab-pane>
       <a-tab-pane tab="Network ACL Lists" key="acl" v-if="'listNetworkACLLists' in $store.getters.apis">
-        <a-button type="dashed" icon="plus" style="width: 100%">Add Network ACL List</a-button>
+        <a-button
+          type="dashed"
+          icon="plus"
+          style="width: 100%"
+          @click="() => handleOpenModals('networkAcl')">
+          Add Network ACL List
+        </a-button>
+        <a-list class="list">
+          <a-list-item v-for="item in networkAcls" :key="item.id">
+            <div class="list__item">
+              <div class="list__col">
+                <div class="list__label">{{ $t('name') }}</div>
+                <div>{{ item.name }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('description') }}</div>
+                <div>{{ item.description }}</div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('id') }}</div>
+                <div>{{ item.id }}</div>
+              </div>
+            </div>
+          </a-list-item>
+        </a-list>
+        <a-modal
+          v-model="modals.networkAcl"
+          :title="$t('label.add.acl.list')"
+          @ok="handleNetworkAclFormSubmit">
+          <a-form @submit.prevent="handleNetworkAclFormSubmit" :form="networkAclForm">
+            <a-form-item :label="$t('label.add.list.name')">
+              <a-input v-decorator="['name', {rules: [{ required: true, message: 'Required' }]}]"></a-input>
+            </a-form-item>
+            <a-form-item :label="$t('description')">
+              <a-input v-decorator="['description', {rules: [{ required: true, message: 'Required' }]}]"></a-input>
+            </a-form-item>
+          </a-form>
+        </a-modal>
       </a-tab-pane>
       <a-tab-pane tab="Virtual Routers" key="vr" v-if="'listRouters' in $store.getters.apis">
-        {{ routers }}
+        <a-list>
+          <a-list-item v-for="item in routers" :key="item.id">
+            <div class="list__item">
+              <div class="list__row">
+                <div class="list__col">
+                  <div class="list__label">{{ $t('name') }}</div>
+                  <div>{{ item.name }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('state') }}</div>
+                  <div><status :text="item.state" displayText></status></div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('hostname') }}</div>
+                  <div>{{ item.hostname }}</div>
+                </div>
+              </div>
+              <div class="list__row">
+                <div class="list__col">
+                  <div class="list__label">{{ $t('linklocalip') }}</div>
+                  <div>{{ item.linklocalip }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('redundantrouter') }}</div>
+                  <div>{{ item.isredundantrouter }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('redundantstate') }}</div>
+                  <div>{{ item.redundantstate }}</div>
+                </div>
+              </div>
+              <div class="list__row">
+                <div class="list__col">
+                  <div class="list__label">{{ $t('id') }}</div>
+                  <div>{{ item.id }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('label.service.offering') }}</div>
+                  <div>{{ item.serviceofferingname }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('zone') }}</div>
+                  <div>{{ item.zonename }}</div>
+                </div>
+              </div>
+              <div class="list__row">
+                <div class="list__col">
+                  <div class="list__label">{{ $t('gateway') }}</div>
+                  <div>{{ item.gateway }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('publicip') }}</div>
+                  <div>{{ item.publicip }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('guestipaddress') }}</div>
+                  <div>{{ item.guestipaddress }}</div>
+                </div>
+              </div>
+              <div class="list__row">
+                <div class="list__col">
+                  <div class="list__label">{{ $t('dns') }}</div>
+                  <div>{{ item.dns1 }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('account') }}</div>
+                  <div>{{ item.account }}</div>
+                </div>
+                <div class="list__col">
+                  <div class="list__label">{{ $t('domain') }}</div>
+                  <div>{{ item.domain }}</div>
+                </div>
+              </div>
+            </div>
+          </a-list-item>
+        </a-list>
       </a-tab-pane>
     </a-tabs>
   </a-spin>
@@ -43,12 +302,14 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import { mixinDevice } from '@/utils/mixin.js'
 
 export default {
   name: 'VpcRouterTab',
   components: {
     Status
   },
+  mixins: [mixinDevice],
   props: {
     resource: {
       type: Object,
@@ -62,21 +323,98 @@ export default {
   data () {
     return {
       routers: [],
-      fetchLoading: false
+      fetchLoading: false,
+      privateGateways: [],
+      publicIpAddresses: [],
+      vpnGateways: [],
+      vpnConnections: [],
+      networkAcls: [],
+      modals: {
+        gateway: false,
+        gatewayLoading: false,
+        vpnConnection: false,
+        vpnConnectionLoading: false,
+        networkAcl: false
+      },
+      placeholders: {
+        vlan: null,
+        ipaddress: null,
+        gateway: null,
+        netmask: null
+      },
+      physicalnetworks: [],
+      vpncustomergateways: [],
+      vpnConnectionsColumns: [
+        {
+          title: this.$t('ip'),
+          dataIndex: 'publicip'
+        },
+        {
+          title: this.$t('gateway'),
+          dataIndex: 'gateway'
+        },
+        {
+          title: this.$t('state'),
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
+        },
+        {
+          title: this.$t('ipsecpsk'),
+          dataIndex: 'ipsecpsk'
+        },
+        {
+          title: this.$t('ikepolicy'),
+          dataIndex: 'ikepolicy'
+        },
+        {
+          title: this.$t('esppolicy'),
+          dataIndex: 'esppolicy'
+        }
+      ]
     }
   },
+  beforeCreate () {
+    this.gatewayForm = this.$form.createForm(this)
+    this.vpnConnectionForm = this.$form.createForm(this)
+    this.networkAclForm = this.$form.createForm(this)
+  },
   mounted () {
-    this.fetchData()
+    this.handleFetchData()
   },
   watch: {
     loading (newData, oldData) {
       if (!newData && this.resource.id) {
-        this.fetchData()
+        this.handleFetchData()
       }
     }
   },
   methods: {
-    fetchData () {
+    handleFetchData (e) {
+      switch (e) {
+        case 'pgw':
+          this.fetchPrivateGateways()
+          break
+        case 'ip':
+          this.fetchPublicIpAddresses()
+          break
+        case 'vpngw':
+          this.fetchVpnGateways()
+          break
+        case 'vpnc':
+          this.fetchVpnConnections()
+          break
+        case 'acl':
+          this.fetchAclList()
+          break
+        case 'vr':
+          this.fetchRouters()
+          break
+        default:
+          this.fetchPrivateGateways()
+          break
+      }
+    },
+    fetchRouters () {
       this.fetchLoading = true
       api('listRouters', { vpcid: this.resource.id, listAll: true }).then(json => {
         this.routers = json.listroutersresponse.router
@@ -88,11 +426,336 @@ export default {
       }).finally(() => {
         this.fetchLoading = false
       })
+    },
+    fetchPrivateGateways () {
+      this.fetchLoading = true
+      api('listPrivateGateways', { vpcid: this.resource.id, listAll: true }).then(json => {
+        this.privateGateways = json.listprivategatewaysresponse.privategateway
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    fetchPublicIpAddresses () {
+      this.fetchLoading = true
+      api('listPublicIpAddresses', {
+        vpcid: this.resource.id,
+        listAll: true,
+        page: 1,
+        pagesize: 500,
+        forvirtualnetwork: true
+      }).then(json => {
+        this.publicIpAddresses = json.listpublicipaddressesresponse.publicipaddress
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    fetchVpnGateways () {
+      this.fetchLoading = true
+      api('listVpnGateways', {
+        vpcid: this.resource.id,
+        listAll: true,
+        page: 1,
+        pagesize: 500
+      }).then(json => {
+        this.vpnGateways = json.listvpngatewaysresponse.vpngateway
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    fetchVpnConnections () {
+      this.fetchLoading = true
+      api('listVpnConnections', {
+        vpcid: this.resource.id,
+        listAll: true,
+        page: 1,
+        pagesize: 500
+      }).then(json => {
+        this.vpnConnections = json.listvpnconnectionsresponse.vpnconnection
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    fetchAclList () {
+      this.fetchLoading = true
+      api('listNetworkACLLists', {
+        vpcid: this.resource.id,
+        listAll: true,
+        page: 1,
+        pagesize: 500
+      }).then(json => {
+        this.networkAcls = json.listnetworkacllistsresponse.networkacllist
+        if (this.modals.gateway === true) {
+          this.$nextTick(() => {
+            this.gatewayForm.setFieldsValue({ acl: this.networkAcls[0].id })
+          })
+        }
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    fetchPhysicalNetworks () {
+      this.modals.gatewayLoading = true
+      api('listPhysicalNetworks', { zoneid: this.resource.zoneid }).then(json => {
+        this.physicalnetworks = json.listphysicalnetworksresponse.physicalnetwork
+        if (this.modals.gateway === true) {
+          this.$nextTick(() => {
+            this.gatewayForm.setFieldsValue({ physicalnetwork: this.physicalnetworks[0].id })
+          })
+        }
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.modals.gatewayLoading = false
+      })
+    },
+    fetchVpnCustomerGateways () {
+      this.modals.vpnConnectionLoading = true
+      api('listVpnCustomerGateways', { listAll: true }).then(json => {
+        this.vpncustomergateways = json.listvpncustomergatewaysresponse.vpncustomergateway
+        if (this.modals.vpnConnection === true) {
+          this.$nextTick(() => {
+            this.vpnConnectionForm.setFieldsValue({ vpncustomergateway: this.vpncustomergateways[0].id })
+          })
+        }
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.modals.vpnConnectionLoading = false
+      })
+    },
+    handleOpenModals (e) {
+      switch (e) {
+        case 'privateGateways':
+          this.modals.gateway = true
+          this.gatewayForm.resetFields()
+          this.fetchAclList()
+          this.fetchPhysicalNetworks()
+          break
+        case 'vpnConnection':
+          this.modals.vpnConnection = true
+          this.vpnConnectionForm.resetFields()
+          this.fetchVpnCustomerGateways()
+          this.fetchVpnGateways()
+          break
+        case 'networkAcl':
+          this.modals.networkAcl = true
+          this.networkAclForm.resetFields()
+          break
+      }
+    },
+    handleGatewayFormSubmit () {
+      this.modals.gatewayLoading = true
+
+      this.gatewayForm.validateFields(errors => {
+        if (errors) {
+          this.modals.gatewayLoading = false
+          return
+        }
+
+        const data = this.gatewayForm.getFieldsValue()
+
+        api('createPrivateGateway', {
+          sourcenatsupported: data.nat,
+          physicalnetworkid: data.physicalnetwork,
+          vpcid: this.resource.id,
+          ipaddress: data.ipaddress,
+          gateway: data.gateway,
+          netmask: data.netmask,
+          vlan: data.vlan,
+          aclid: data.acl
+        }).then(response => {
+          this.$store.dispatch('AddAsyncJob', {
+            title: `Successfully added Private Gateway`,
+            jobid: response.createprivategatewayresponse.jobid,
+            status: 'progress'
+          })
+          this.$pollJob({
+            jobId: response.createprivategatewayresponse.jobid,
+            successMethod: () => {
+              this.modals.gateway = false
+            },
+            errorMessage: 'Adding Private Gateway failed',
+            errorMethod: () => {
+              this.modals.gateway = false
+            },
+            loadingMessage: `Adding Private Gateway...`,
+            catchMessage: 'Error encountered while fetching async job result',
+            catchMethod: () => {
+              this.modals.gateway = false
+            }
+          })
+        }).catch(error => {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: error.response.headers['x-description']
+          })
+        }).finally(() => {
+          this.modals.gatewayLoading = false
+          this.modals.gateway = false
+          this.handleFetchData()
+        })
+      })
+    },
+    handleAcquireNewIp () {
+      this.fetchLoading = true
+      api('associateIpAddress', { vpcid: this.resource.id }).then(response => {
+        this.$store.dispatch('AddAsyncJob', {
+          title: `Successfully acquired new IP`,
+          jobid: response.associateipaddressresponse.jobid,
+          status: 'progress'
+        })
+        this.$pollJob({
+          jobId: response.associateipaddressresponse.jobid,
+          successMethod: () => {
+            this.fetchPublicIpAddresses()
+          },
+          errorMessage: 'Failed to acquire new IP',
+          errorMethod: () => {
+            this.fetchPublicIpAddresses()
+          },
+          loadingMessage: `Acquiring new IP...`,
+          catchMessage: 'Error encountered while fetching async job result',
+          catchMethod: () => {
+            this.fetchPublicIpAddresses()
+          }
+        })
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+        this.fetchPublicIpAddresses()
+      })
+    },
+    handleVpnConnectionFormSubmit () {
+      this.fetchLoading = true
+      this.modals.vpnConnection = false
+
+      this.vpnConnectionForm.validateFields((errors, values) => {
+        if (errors) {
+          this.fetchLoading = false
+          return
+        }
+
+        api('createVpnConnection', {
+          s2svpngatewayid: this.vpnGateways[0].id,
+          s2scustomergatewayid: values.vpncustomergateway,
+          passive: values.passive ? values.passive : false
+        }).catch(error => {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: error.response.headers['x-description']
+          })
+        }).finally(() => {
+          this.fetchLoading = false
+        })
+      })
+    },
+    handleNetworkAclFormSubmit () {
+      this.fetchLoading = true
+      this.modals.networkAcl = false
+
+      this.networkAclForm.validateFields((errors, values) => {
+        if (errors) {
+          this.fetchLoading = false
+        }
+
+        api('createNetworkACLList', {
+          name: values.name,
+          description: values.description,
+          vpcid: this.resource.id
+        }).then(response => {
+          this.$store.dispatch('AddAsyncJob', {
+            title: `Successfully added Network ACL List`,
+            jobid: response.createnetworkacllistresponse.jobid,
+            status: 'progress'
+          })
+          this.$pollJob({
+            jobId: response.createnetworkacllistresponse.jobid,
+            successMethod: () => {
+              this.fetchLoading = false
+            },
+            errorMessage: 'Adding Network ACL List failed',
+            errorMethod: () => {
+              this.fetchLoading = false
+            },
+            loadingMessage: `Adding Network ACL List...`,
+            catchMessage: 'Error encountered while fetching async job result',
+            catchMethod: () => {
+              this.fetchLoading = false
+            }
+          })
+        }).catch(error => {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: error.response.headers['x-description']
+          })
+        }).finally(() => {
+          this.fetchLoading = false
+          this.fetchAclList()
+        })
+      })
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
+.list {
 
+  &__item,
+  &__row {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  &__item {
+    margin-bottom: -20px;
+  }
+
+  &__col {
+    flex: 1;
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+
+  &__label {
+    font-weight: bold;
+  }
+
+}
 </style>

From 999e1e370e35e873c2dcbe3e2d91fed17bf7021b Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Tue, 4 Feb 2020 16:19:07 +0530
Subject: [PATCH 2/8] changes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/config/section/network.js      |  20 ----
 src/views/network/VpcRouterTab.vue | 154 +++++++++++++----------------
 src/views/network/VpcTiersTab.vue  |  15 ++-
 3 files changed, 82 insertions(+), 107 deletions(-)

diff --git a/src/config/section/network.js b/src/config/section/network.js
index 3e13fd609..53184e2ad 100644
--- a/src/config/section/network.js
+++ b/src/config/section/network.js
@@ -119,26 +119,6 @@ export default {
       columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename'],
       details: ['name', 'id', 'displaytext', 'cidr', 'networkdomain', 'ispersistent', 'redundantvpcrouter', 'restartrequired', 'zonename', 'account', 'domain'],
       related: [{
-        name: 'privategw',
-        title: 'Private Gateways',
-        param: 'vpcid'
-      }, {
-        name: 'publicip',
-        title: 'Public IP Addresses',
-        param: 'vpcid'
-      }, {
-        name: 's2svpn',
-        title: 'Site-to-Site VPN Gateways',
-        param: 'vpcid'
-      }, {
-        name: 's2svpnconn',
-        title: 'Site-to-Site VPN Connections',
-        param: 'vpcid'
-      }, {
-        name: 'acllist',
-        title: 'Network ACL Lists',
-        param: 'vpcid'
-      }, {
         name: 'guestnetwork',
         title: 'Networks',
         param: 'vpcid'
diff --git a/src/views/network/VpcRouterTab.vue b/src/views/network/VpcRouterTab.vue
index 5a2cb6549..1c4c33145 100644
--- a/src/views/network/VpcRouterTab.vue
+++ b/src/views/network/VpcRouterTab.vue
@@ -29,7 +29,13 @@
             <div class="list__item">
               <div class="list__col">
                 <div class="list__label">{{ $t('ip') }}</div>
-                <div>{{ item.ipaddress }}</div>
+                <div>
+                  <router-link :to="{ path: '/privategw/' + item.id }">{{ item.ipaddress }}</router-link>
+                </div>
+              </div>
+              <div class="list__col">
+                <div class="list__label">{{ $t('state') }}</div>
+                <div><status :text="item.state" displayText></status></div>
               </div>
               <div class="list__col">
                 <div class="list__label">{{ $t('gateway') }}</div>
@@ -102,39 +108,52 @@
             <div class="list__item">
               <div class="list__col">
                 <div class="list__label">{{ $t('ip') }}</div>
-                <div>{{ item.ipaddress }}{{ item.issourcenat === true ? ' [Source NAT]' : null }}</div>
+                <div>
+                  <router-link :to="{ path: '/publicip/' + item.id }">
+                    {{ item.ipaddress }}
+                    <a-tag v-if="item.issourcenat">source-nat</a-tag>
+                    <a-tag v-if="item.isstaticnat">static-nat</a-tag>
+                  </router-link>
+                </div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('zone') }}</div>
-                <div>{{ item.zonename }}</div>
+                <div class="list__label">{{ $t('state') }}</div>
+                <div><status :text="item.state" displayText></status></div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('network') }}</div>
-                <div>{{ item.networkname }}</div>
+                <div class="list__label">{{ $t('vm') }}</div>
+                <div>
+                  <router-link :to="{ path: '/vm/' + item.virtualmachineid }">
+                    {{ item.virtualmachinedisplayname || item.virtualmachinename }}
+                  </router-link>
+                </div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('state') }}</div>
-                <div><status :text="item.state" displayText></status></div>
+                <div class="list__label">{{ $t('network') }}</div>
+                <div>
+                  <router-link :to="{ path: '/guestnetwork/' + item.associatednetworkid }">
+                    {{ item.associatednetworkname }}
+                  </router-link>
+                </div>
               </div>
             </div>
           </a-list-item>
         </a-list>
       </a-tab-pane>
       <a-tab-pane tab="S2S VPN Gateway" key="vpngw" v-if="'listVpnGateways' in $store.getters.apis">
+        <a-button type="dashed" icon="plus" style="width: 100%">Create Site-to-Site VPN Gateway</a-button>
+        TODO: the add/create button should be only shown when there are no gateways, otherwise show it.
+        only clicking, it should fire createVpnGateway API with vpcid=resource.id as param
         <a-list class="list">
           <a-list-item v-for="item in vpnGateways" :key="item.id">
             <div class="list__item">
               <div class="list__col">
                 <div class="list__label">{{ $t('ip') }}</div>
-                <div>{{ item.publicip }}</div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('account') }}</div>
-                <div>{{ item.account }}</div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('domain') }}</div>
-                <div>{{ item.domain }}</div>
+                <div>
+                  <router-link :to="{ path: '/s2svpn/' + item.id }">
+                    {{ item.publicip }}
+                  </router-link>
+                </div>
               </div>
             </div>
           </a-list-item>
@@ -149,16 +168,22 @@
           Create Site-to-Site VPN Connection
         </a-button>
         <a-table
-          style="margin-top: 20px;"
+          style="margin-top: 20px; overflow-y: auto"
           size="small"
           :columns="vpnConnectionsColumns"
           :dataSource="vpnConnections"
           :pagination="false"
-          :scroll="{ x: 1000 }"
           :rowKey="record => record.id">
+
+          <a slot="publicip" slot-scope="text, record" href="javascript:;">
+            <router-link :to="{ path: '/s2svpnconn/' + record.id }">
+              {{ text }}
+            </router-link>
+          </a>
           <template slot="state" slot-scope="text">
             <status :text="text ? text : ''" displayText />
           </template>
+
         </a-table>
         <a-modal v-model="modals.vpnConnection" :title="$t('label.create.VPN.connection')" @ok="handleVpnConnectionFormSubmit">
           <a-spin :spinning="modals.vpnConnectionLoading">
@@ -190,16 +215,16 @@
             <div class="list__item">
               <div class="list__col">
                 <div class="list__label">{{ $t('name') }}</div>
-                <div>{{ item.name }}</div>
+                <div>
+                  <router-link :to="{ path: '/acllist/' + item.id }">
+                    {{ item.name }}
+                  </router-link>
+                </div>
               </div>
               <div class="list__col">
                 <div class="list__label">{{ $t('description') }}</div>
                 <div>{{ item.description }}</div>
               </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('id') }}</div>
-                <div>{{ item.id }}</div>
-              </div>
             </div>
           </a-list-item>
         </a-list>
@@ -224,21 +249,19 @@
               <div class="list__row">
                 <div class="list__col">
                   <div class="list__label">{{ $t('name') }}</div>
-                  <div>{{ item.name }}</div>
+                  <div>
+                    <router-link :to="{ path: '/router/' + item.id }">
+                      {{ item.name }}
+                    </router-link>
+                  </div>
                 </div>
                 <div class="list__col">
                   <div class="list__label">{{ $t('state') }}</div>
                   <div><status :text="item.state" displayText></status></div>
                 </div>
                 <div class="list__col">
-                  <div class="list__label">{{ $t('hostname') }}</div>
-                  <div>{{ item.hostname }}</div>
-                </div>
-              </div>
-              <div class="list__row">
-                <div class="list__col">
-                  <div class="list__label">{{ $t('linklocalip') }}</div>
-                  <div>{{ item.linklocalip }}</div>
+                  <div class="list__label">{{ $t('publicip') }}</div>
+                  <div>{{ item.publicip }}</div>
                 </div>
                 <div class="list__col">
                   <div class="list__label">{{ $t('redundantrouter') }}</div>
@@ -248,47 +271,13 @@
                   <div class="list__label">{{ $t('redundantstate') }}</div>
                   <div>{{ item.redundantstate }}</div>
                 </div>
-              </div>
-              <div class="list__row">
                 <div class="list__col">
-                  <div class="list__label">{{ $t('id') }}</div>
-                  <div>{{ item.id }}</div>
-                </div>
-                <div class="list__col">
-                  <div class="list__label">{{ $t('label.service.offering') }}</div>
-                  <div>{{ item.serviceofferingname }}</div>
-                </div>
-                <div class="list__col">
-                  <div class="list__label">{{ $t('zone') }}</div>
-                  <div>{{ item.zonename }}</div>
-                </div>
-              </div>
-              <div class="list__row">
-                <div class="list__col">
-                  <div class="list__label">{{ $t('gateway') }}</div>
-                  <div>{{ item.gateway }}</div>
-                </div>
-                <div class="list__col">
-                  <div class="list__label">{{ $t('publicip') }}</div>
-                  <div>{{ item.publicip }}</div>
-                </div>
-                <div class="list__col">
-                  <div class="list__label">{{ $t('guestipaddress') }}</div>
-                  <div>{{ item.guestipaddress }}</div>
-                </div>
-              </div>
-              <div class="list__row">
-                <div class="list__col">
-                  <div class="list__label">{{ $t('dns') }}</div>
-                  <div>{{ item.dns1 }}</div>
-                </div>
-                <div class="list__col">
-                  <div class="list__label">{{ $t('account') }}</div>
-                  <div>{{ item.account }}</div>
-                </div>
-                <div class="list__col">
-                  <div class="list__label">{{ $t('domain') }}</div>
-                  <div>{{ item.domain }}</div>
+                  <div class="list__label">{{ $t('hostname') }}</div>
+                  <div>
+                    <router-link :to="{ path: '/host/' + item.hostid }">
+                      {{ item.hostname }}
+                    </router-link>
+                  </div>
                 </div>
               </div>
             </div>
@@ -347,11 +336,8 @@ export default {
       vpnConnectionsColumns: [
         {
           title: this.$t('ip'),
-          dataIndex: 'publicip'
-        },
-        {
-          title: this.$t('gateway'),
-          dataIndex: 'gateway'
+          dataIndex: 'publicip',
+          scopedSlots: { customRender: 'publicip' }
         },
         {
           title: this.$t('state'),
@@ -359,16 +345,12 @@ export default {
           scopedSlots: { customRender: 'state' }
         },
         {
-          title: this.$t('ipsecpsk'),
-          dataIndex: 'ipsecpsk'
-        },
-        {
-          title: this.$t('ikepolicy'),
-          dataIndex: 'ikepolicy'
+          title: this.$t('gateway'),
+          dataIndex: 'gateway'
         },
         {
-          title: this.$t('esppolicy'),
-          dataIndex: 'esppolicy'
+          title: this.$t('ipsecpsk'),
+          dataIndex: 'ipsecpsk'
         }
       ]
     }
diff --git a/src/views/network/VpcTiersTab.vue b/src/views/network/VpcTiersTab.vue
index fd30f0076..2c294d18f 100644
--- a/src/views/network/VpcTiersTab.vue
+++ b/src/views/network/VpcTiersTab.vue
@@ -24,9 +24,22 @@
           <div class="list__item-container">
             <div class="list__col">
               <div class="list__label">
+                {{ $t('name') }}
+              </div>
+              <div>
                 <router-link :to="{ path: '/guestnetwork/' + network.id }">{{ network.name }}</router-link>
+                <a-tag v-if="network.broadcasturi">{{ network.broadcasturi }}</a-tag>
+              </div>
+            </div>
+            <div class="list__col">
+              <div class="list__label">{{ $t('state') }}</div>
+              <div><status :text="network.state" displayText></status></div>
+            </div>
+            <div class="list__col">
+              <div class="list__label">
+                {{ $t('CIDR') }}
               </div>
-              <div>CIDR: {{ network.cidr }}</div>
+              <div>{{ network.cidr }}</div>
             </div>
             <div class="list__col">
               <a-button icon="share-alt">

From 18618c95d3d6b94f7b0d3c2158af92a670c94dac Mon Sep 17 00:00:00 2001
From: Ritchie Vincent <ritchie@ritchievincent.co.uk>
Date: Tue, 4 Feb 2020 15:31:53 +0000
Subject: [PATCH 3/8] Change all lists to tables with pagination

---
 src/views/network/VpcRouterTab.vue | 319 ++++++++++++++++++++---------
 1 file changed, 220 insertions(+), 99 deletions(-)

diff --git a/src/views/network/VpcRouterTab.vue b/src/views/network/VpcRouterTab.vue
index 1c4c33145..d1f642050 100644
--- a/src/views/network/VpcRouterTab.vue
+++ b/src/views/network/VpcRouterTab.vue
@@ -17,41 +17,44 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-tabs :tabPosition="device === 'tablet' ? 'top' : 'left'" :animated="false" @change="handleFetchData">
+    <a-tabs
+      :activeKey="currentTab"
+      :tabPosition="device === 'tablet' ? 'top' : 'left'"
+      :animated="false"
+      @change="handleChangeTab">
       <a-tab-pane tab="Private Gateways" key="pgw" v-if="'listPrivateGateways' in $store.getters.apis">
         <a-button
           type="dashed"
           icon="plus"
           style="width: 100%"
           @click="() => handleOpenModals('privateGateways')">Add Private Gateway</a-button>
-        <a-list class="list">
-          <a-list-item v-for="item in privateGateways" :key="item.id">
-            <div class="list__item">
-              <div class="list__col">
-                <div class="list__label">{{ $t('ip') }}</div>
-                <div>
-                  <router-link :to="{ path: '/privategw/' + item.id }">{{ item.ipaddress }}</router-link>
-                </div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('state') }}</div>
-                <div><status :text="item.state" displayText></status></div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('gateway') }}</div>
-                <div>{{ item.gateway }}</div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('netmask') }}</div>
-                <div>{{ item.netmask }}</div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('vlan') }}</div>
-                <div>{{ item.vlan }}</div>
-              </div>
-            </div>
-          </a-list-item>
-        </a-list>
+        <a-table
+          class="table"
+          size="small"
+          :columns="privateGatewaysColumns"
+          :dataSource="privateGateways"
+          :rowKey="item => item.id"
+          :pagination="false"
+        >
+          <template slot="ipaddress" slot-scope="text, item">
+            <router-link :to="{ path: '/privategw/' + item.id }">{{ text }}</router-link>
+          </template>
+          <template slot="state" slot-scope="text, item">
+            <status :text="item.state" displayText></status>
+          </template>
+        </a-table>
+        <a-pagination
+          class="row-element pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="itemCounts.privateGateways"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="changePage"
+          @showSizeChange="changePageSize"
+          showSizeChanger/>
+
         <a-modal v-model="modals.gateway" :title="$t('label.add.new.gateway')" @ok="handleGatewayFormSubmit">
           <a-spin :spinning="modals.gatewayLoading">
             <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
@@ -103,42 +106,46 @@
       </a-tab-pane>
       <a-tab-pane tab="Public IP Addresses" key="ip" v-if="'listPublicIpAddresses' in $store.getters.apis">
         <a-button type="dashed" icon="plus" style="width: 100%" @click="handleAcquireNewIp">Acquire New IP</a-button>
-        <a-list class="list">
-          <a-list-item v-for="item in publicIpAddresses" :key="item.id">
-            <div class="list__item">
-              <div class="list__col">
-                <div class="list__label">{{ $t('ip') }}</div>
-                <div>
-                  <router-link :to="{ path: '/publicip/' + item.id }">
-                    {{ item.ipaddress }}
-                    <a-tag v-if="item.issourcenat">source-nat</a-tag>
-                    <a-tag v-if="item.isstaticnat">static-nat</a-tag>
-                  </router-link>
-                </div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('state') }}</div>
-                <div><status :text="item.state" displayText></status></div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('vm') }}</div>
-                <div>
-                  <router-link :to="{ path: '/vm/' + item.virtualmachineid }">
-                    {{ item.virtualmachinedisplayname || item.virtualmachinename }}
-                  </router-link>
-                </div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('network') }}</div>
-                <div>
-                  <router-link :to="{ path: '/guestnetwork/' + item.associatednetworkid }">
-                    {{ item.associatednetworkname }}
-                  </router-link>
-                </div>
-              </div>
-            </div>
-          </a-list-item>
-        </a-list>
+        <a-table
+          class="table"
+          size="small"
+          :columns="publicIpAddressesColumns"
+          :dataSource="publicIpAddresses"
+          :rowKey="item => item.id"
+          :pagination="false"
+        >
+          <template slot="ipaddress" slot-scope="text, item">
+            <router-link :to="{ path: '/publicip/' + item.id }">
+              {{ text }}
+              <a-tag v-if="item.issourcenat">source-nat</a-tag>
+              <a-tag v-if="item.isstaticnat">static-nat</a-tag>
+            </router-link>
+          </template>
+          <template slot="state" slot-scope="text, item">
+            <status :text="item.state" displayText></status>
+          </template>
+          <template slot="vm" slot-scope="text, item">
+            <router-link :to="{ path: '/vm/' + item.virtualmachineid }">
+              {{ item.virtualmachinedisplayname || item.virtualmachinename }}
+            </router-link>
+          </template>
+          <template slot="network" slot-scope="text, item">
+            <router-link :to="{ path: '/guestnetwork/' + item.associatednetworkid }">
+              {{ item.associatednetworkname }}
+            </router-link>
+          </template>
+        </a-table>
+        <a-pagination
+          class="row-element pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="itemCounts.publicIpAddresses"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="changePage"
+          @showSizeChange="changePageSize"
+          showSizeChanger/>
       </a-tab-pane>
       <a-tab-pane tab="S2S VPN Gateway" key="vpngw" v-if="'listVpnGateways' in $store.getters.apis">
         <a-button type="dashed" icon="plus" style="width: 100%">Create Site-to-Site VPN Gateway</a-button>
@@ -168,13 +175,12 @@
           Create Site-to-Site VPN Connection
         </a-button>
         <a-table
-          style="margin-top: 20px; overflow-y: auto"
+          class="table"
           size="small"
           :columns="vpnConnectionsColumns"
           :dataSource="vpnConnections"
           :pagination="false"
           :rowKey="record => record.id">
-
           <a slot="publicip" slot-scope="text, record" href="javascript:;">
             <router-link :to="{ path: '/s2svpnconn/' + record.id }">
               {{ text }}
@@ -183,8 +189,18 @@
           <template slot="state" slot-scope="text">
             <status :text="text ? text : ''" displayText />
           </template>
-
         </a-table>
+        <a-pagination
+          class="row-element pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="itemCounts.vpnConnections"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="changePage"
+          @showSizeChange="changePageSize"
+          showSizeChanger/>
         <a-modal v-model="modals.vpnConnection" :title="$t('label.create.VPN.connection')" @ok="handleVpnConnectionFormSubmit">
           <a-spin :spinning="modals.vpnConnectionLoading">
             <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
@@ -210,24 +226,31 @@
           @click="() => handleOpenModals('networkAcl')">
           Add Network ACL List
         </a-button>
-        <a-list class="list">
-          <a-list-item v-for="item in networkAcls" :key="item.id">
-            <div class="list__item">
-              <div class="list__col">
-                <div class="list__label">{{ $t('name') }}</div>
-                <div>
-                  <router-link :to="{ path: '/acllist/' + item.id }">
-                    {{ item.name }}
-                  </router-link>
-                </div>
-              </div>
-              <div class="list__col">
-                <div class="list__label">{{ $t('description') }}</div>
-                <div>{{ item.description }}</div>
-              </div>
-            </div>
-          </a-list-item>
-        </a-list>
+        <a-table
+          class="table"
+          size="small"
+          :columns="networkAclsColumns"
+          :dataSource="networkAcls"
+          :rowKey="item => item.id"
+          :pagination="false"
+        >
+          <template slot="name" slot-scope="text, item">
+            <router-link :to="{ path: '/acllist/' + item.id }">
+              {{ text }}
+            </router-link>
+          </template>
+        </a-table>
+        <a-pagination
+          class="row-element pagination"
+          size="small"
+          :current="page"
+          :pageSize="pageSize"
+          :total="itemCounts.networkAcls"
+          :showTotal="total => `Total ${total} items`"
+          :pageSizeOptions="['10', '20', '40', '80', '100']"
+          @change="changePage"
+          @showSizeChange="changePageSize"
+          showSizeChanger/>
         <a-modal
           v-model="modals.networkAcl"
           :title="$t('label.add.acl.list')"
@@ -333,6 +356,30 @@ export default {
       },
       physicalnetworks: [],
       vpncustomergateways: [],
+      privateGatewaysColumns: [
+        {
+          title: this.$t('ip'),
+          dataIndex: 'ipaddress',
+          scopedSlots: { customRender: 'ipaddress' }
+        },
+        {
+          title: this.$t('state'),
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
+        },
+        {
+          title: this.$t('gateway'),
+          dataIndex: 'gateway'
+        },
+        {
+          title: this.$t('netmask'),
+          dataIndex: 'netmask'
+        },
+        {
+          title: this.$t('vlan'),
+          dataIndex: 'vlan'
+        }
+      ],
       vpnConnectionsColumns: [
         {
           title: this.$t('ip'),
@@ -352,7 +399,49 @@ export default {
           title: this.$t('ipsecpsk'),
           dataIndex: 'ipsecpsk'
         }
-      ]
+      ],
+      publicIpAddressesColumns: [
+        {
+          title: this.$t('ip'),
+          dataIndex: 'ipaddress',
+          scopedSlots: { customRender: 'ipaddress' }
+        },
+        {
+          title: this.$t('state'),
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
+        },
+        {
+          title: this.$t('vm'),
+          dataIndex: 'vm',
+          scopedSlots: { customRender: 'vm' }
+        },
+        {
+          title: this.$t('network'),
+          dataIndex: 'network',
+          scopedSlots: { customRender: 'network' }
+        }
+      ],
+      networkAclsColumns: [
+        {
+          title: this.$t('name'),
+          dataIndex: 'name',
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: this.$t('description'),
+          dataIndex: 'description'
+        }
+      ],
+      itemCounts: {
+        privateGateways: 0,
+        publicIpAddresses: 0,
+        vpnConnections: 0,
+        networkAcls: 0
+      },
+      page: 1,
+      pageSize: 10,
+      currentTab: 'pgw'
     }
   },
   beforeCreate () {
@@ -371,8 +460,14 @@ export default {
     }
   },
   methods: {
-    handleFetchData (e) {
-      switch (e) {
+    handleChangeTab (e) {
+      this.currentTab = e
+      this.page = 1
+      this.pageSize = 10
+      this.handleFetchData()
+    },
+    handleFetchData () {
+      switch (this.currentTab) {
         case 'pgw':
           this.fetchPrivateGateways()
           break
@@ -411,8 +506,14 @@ export default {
     },
     fetchPrivateGateways () {
       this.fetchLoading = true
-      api('listPrivateGateways', { vpcid: this.resource.id, listAll: true }).then(json => {
+      api('listPrivateGateways', {
+        vpcid: this.resource.id,
+        listAll: true,
+        page: this.page,
+        pagesize: this.pageSize
+      }).then(json => {
         this.privateGateways = json.listprivategatewaysresponse.privategateway
+        this.itemCounts.privateGateways = json.listprivategatewaysresponse.count
       }).catch(error => {
         this.$notification.error({
           message: 'Request Failed',
@@ -427,11 +528,12 @@ export default {
       api('listPublicIpAddresses', {
         vpcid: this.resource.id,
         listAll: true,
-        page: 1,
-        pagesize: 500,
+        page: this.page,
+        pagesize: this.pageSize,
         forvirtualnetwork: true
       }).then(json => {
         this.publicIpAddresses = json.listpublicipaddressesresponse.publicipaddress
+        this.itemCounts.publicIpAddresses = json.listpublicipaddressesresponse.count
       }).catch(error => {
         this.$notification.error({
           message: 'Request Failed',
@@ -445,9 +547,7 @@ export default {
       this.fetchLoading = true
       api('listVpnGateways', {
         vpcid: this.resource.id,
-        listAll: true,
-        page: 1,
-        pagesize: 500
+        listAll: true
       }).then(json => {
         this.vpnGateways = json.listvpngatewaysresponse.vpngateway
       }).catch(error => {
@@ -464,10 +564,11 @@ export default {
       api('listVpnConnections', {
         vpcid: this.resource.id,
         listAll: true,
-        page: 1,
-        pagesize: 500
+        page: this.page,
+        pagesize: this.pageSize
       }).then(json => {
         this.vpnConnections = json.listvpnconnectionsresponse.vpnconnection
+        this.itemCounts.vpnConnections = json.listvpnconnectionsresponse.count
       }).catch(error => {
         this.$notification.error({
           message: 'Request Failed',
@@ -482,10 +583,11 @@ export default {
       api('listNetworkACLLists', {
         vpcid: this.resource.id,
         listAll: true,
-        page: 1,
-        pagesize: 500
+        page: this.page,
+        pagesize: this.pageSize
       }).then(json => {
         this.networkAcls = json.listnetworkacllistsresponse.networkacllist
+        this.itemCounts.networkAcls = json.listnetworkacllistsresponse.count
         if (this.modals.gateway === true) {
           this.$nextTick(() => {
             this.gatewayForm.setFieldsValue({ acl: this.networkAcls[0].id })
@@ -710,6 +812,16 @@ export default {
           this.fetchAclList()
         })
       })
+    },
+    changePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.handleFetchData()
+    },
+    changePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.handleFetchData()
     }
   }
 }
@@ -740,4 +852,13 @@ export default {
   }
 
 }
+
+.pagination {
+  margin-top: 20px;
+}
+
+.table {
+  margin-top: 20px;
+  overflow-y: auto;
+}
 </style>

From 7035c6ca4425fcad523bbcff088879b69a11b2d3 Mon Sep 17 00:00:00 2001
From: Ritchie Vincent <ritchie@ritchievincent.co.uk>
Date: Tue, 4 Feb 2020 15:54:12 +0000
Subject: [PATCH 4/8] Add VPN Gateway functionality

---
 src/views/network/VpcRouterTab.vue | 50 +++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/views/network/VpcRouterTab.vue b/src/views/network/VpcRouterTab.vue
index d1f642050..2cb8056a4 100644
--- a/src/views/network/VpcRouterTab.vue
+++ b/src/views/network/VpcRouterTab.vue
@@ -19,7 +19,7 @@
   <a-spin :spinning="fetchLoading">
     <a-tabs
       :activeKey="currentTab"
-      :tabPosition="device === 'tablet' ? 'top' : 'left'"
+      :tabPosition="device === 'tablet' || device === 'mobile' ? 'top' : 'left'"
       :animated="false"
       @change="handleChangeTab">
       <a-tab-pane tab="Private Gateways" key="pgw" v-if="'listPrivateGateways' in $store.getters.apis">
@@ -148,9 +148,14 @@
           showSizeChanger/>
       </a-tab-pane>
       <a-tab-pane tab="S2S VPN Gateway" key="vpngw" v-if="'listVpnGateways' in $store.getters.apis">
-        <a-button type="dashed" icon="plus" style="width: 100%">Create Site-to-Site VPN Gateway</a-button>
-        TODO: the add/create button should be only shown when there are no gateways, otherwise show it.
-        only clicking, it should fire createVpnGateway API with vpcid=resource.id as param
+        <a-button
+          v-if="vpnGateways.length === 0"
+          type="dashed"
+          icon="plus"
+          style="width: 100%"
+          @click="handleCreateVpnGateway">
+          Create Site-to-Site VPN Gateway
+        </a-button>
         <a-list class="list">
           <a-list-item v-for="item in vpnGateways" :key="item.id">
             <div class="list__item">
@@ -549,7 +554,7 @@ export default {
         vpcid: this.resource.id,
         listAll: true
       }).then(json => {
-        this.vpnGateways = json.listvpngatewaysresponse.vpngateway
+        this.vpnGateways = json.listvpngatewaysresponse.vpngateway ? json.listvpngatewaysresponse.vpngateway : []
       }).catch(error => {
         this.$notification.error({
           message: 'Request Failed',
@@ -813,6 +818,41 @@ export default {
         })
       })
     },
+    handleCreateVpnGateway () {
+      this.fetchLoading = true
+      api('createVpnGateway', {
+        vpcid: this.resource.id
+      }).then(response => {
+        this.$store.dispatch('AddAsyncJob', {
+          title: `Successfully added VPN Gateway`,
+          jobid: response.createvpngatewayresponse.jobid,
+          status: 'progress'
+        })
+        this.$pollJob({
+          jobId: response.createvpngatewayresponse.jobid,
+          successMethod: () => {
+            this.fetchLoading = false
+          },
+          errorMessage: 'Adding VPN Gateway failed',
+          errorMethod: () => {
+            this.fetchLoading = false
+          },
+          loadingMessage: `Adding VPN Gateway...`,
+          catchMessage: 'Error encountered while fetching async job result',
+          catchMethod: () => {
+            this.fetchLoading = false
+          }
+        })
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+        this.handleFetchData()
+      })
+    },
     changePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize

From f50e42d4a85bb0f2d0a1dca175362fb498e1da26 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Wed, 5 Feb 2020 15:30:46 +0530
Subject: [PATCH 5/8] minor fixes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/components/view/ResourceView.vue |  7 +++++++
 src/config/section/network.js        |  8 +-------
 src/views/network/VpcRouterTab.vue   | 21 ++++++++++++++-------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/view/ResourceView.vue b/src/components/view/ResourceView.vue
index 2dc572e62..cf2ba07db 100644
--- a/src/components/view/ResourceView.vue
+++ b/src/components/view/ResourceView.vue
@@ -27,7 +27,14 @@
         class="spin-content"
         :bordered="true"
         style="width:100%">
+        <component
+          v-if="tabs.length === 1"
+          :is="tabs[0].component"
+          :resource="resource"
+          :loading="loading"
+          :tab="tabs[0].name" />
         <a-tabs
+          v-else
           style="width: 100%"
           :animated="false"
           :defaultActiveKey="tabs[0].name"
diff --git a/src/config/section/network.js b/src/config/section/network.js
index 53184e2ad..1aff3a326 100644
--- a/src/config/section/network.js
+++ b/src/config/section/network.js
@@ -128,14 +128,8 @@ export default {
         param: 'vpcid'
       }],
       tabs: [{
-        name: 'details',
-        component: () => import('@/components/view/DetailsTab.vue')
-      }, {
-        name: 'Router',
+        name: 'VPC',
         component: () => import('@/views/network/VpcRouterTab.vue')
-      }, {
-        name: 'Network',
-        component: () => import('@/views/network/VpcTiersTab.vue')
       }],
       actions: [
         {
diff --git a/src/views/network/VpcRouterTab.vue b/src/views/network/VpcRouterTab.vue
index 2cb8056a4..05a77a4e8 100644
--- a/src/views/network/VpcRouterTab.vue
+++ b/src/views/network/VpcRouterTab.vue
@@ -22,6 +22,12 @@
       :tabPosition="device === 'tablet' || device === 'mobile' ? 'top' : 'left'"
       :animated="false"
       @change="handleChangeTab">
+      <a-tab-pane :tab="$t('details')" key="details">
+        <DetailsTab :resource="resource" :loading="loading" />
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('networks')" key="tier">
+        <VpcTiersTab :resource="resource" :loading="loading" />
+      </a-tab-pane>
       <a-tab-pane tab="Private Gateways" key="pgw" v-if="'listPrivateGateways' in $store.getters.apis">
         <a-button
           type="dashed"
@@ -147,7 +153,7 @@
           @showSizeChange="changePageSize"
           showSizeChanger/>
       </a-tab-pane>
-      <a-tab-pane tab="S2S VPN Gateway" key="vpngw" v-if="'listVpnGateways' in $store.getters.apis">
+      <a-tab-pane tab="VPN Gateway" key="vpngw" v-if="'listVpnGateways' in $store.getters.apis">
         <a-button
           v-if="vpnGateways.length === 0"
           type="dashed"
@@ -171,7 +177,7 @@
           </a-list-item>
         </a-list>
       </a-tab-pane>
-      <a-tab-pane tab="S2S VPN Connection" key="vpnc" v-if="'listVpnConnections' in $store.getters.apis">
+      <a-tab-pane tab="VPN Connections" key="vpnc" v-if="'listVpnConnections' in $store.getters.apis">
         <a-button
           type="dashed"
           icon="plus"
@@ -318,13 +324,17 @@
 
 <script>
 import { api } from '@/api'
+import DetailsTab from '@/components/view/DetailsTab'
 import Status from '@/components/widgets/Status'
+import VpcTiersTab from './VpcTiersTab'
 import { mixinDevice } from '@/utils/mixin.js'
 
 export default {
   name: 'VpcRouterTab',
   components: {
-    Status
+    DetailsTab,
+    Status,
+    VpcTiersTab
   },
   mixins: [mixinDevice],
   props: {
@@ -446,7 +456,7 @@ export default {
       },
       page: 1,
       pageSize: 10,
-      currentTab: 'pgw'
+      currentTab: 'details'
     }
   },
   beforeCreate () {
@@ -491,9 +501,6 @@ export default {
         case 'vr':
           this.fetchRouters()
           break
-        default:
-          this.fetchPrivateGateways()
-          break
       }
     },
     fetchRouters () {

From 3b1fb854752ccd19bd25f5b15af5a586dde2af38 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Wed, 5 Feb 2020 15:41:26 +0530
Subject: [PATCH 6/8] fixes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/config/section/network.js     |  4 ----
 src/views/network/VpcTiersTab.vue | 27 ++++++++++++++-------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/config/section/network.js b/src/config/section/network.js
index 1aff3a326..72a2b2f78 100644
--- a/src/config/section/network.js
+++ b/src/config/section/network.js
@@ -119,10 +119,6 @@ export default {
       columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename'],
       details: ['name', 'id', 'displaytext', 'cidr', 'networkdomain', 'ispersistent', 'redundantvpcrouter', 'restartrequired', 'zonename', 'account', 'domain'],
       related: [{
-        name: 'guestnetwork',
-        title: 'Networks',
-        param: 'vpcid'
-      }, {
         name: 'vm',
         title: 'Instances',
         param: 'vpcid'
diff --git a/src/views/network/VpcTiersTab.vue b/src/views/network/VpcTiersTab.vue
index 2c294d18f..a9fd5bbf8 100644
--- a/src/views/network/VpcTiersTab.vue
+++ b/src/views/network/VpcTiersTab.vue
@@ -27,7 +27,7 @@
                 {{ $t('name') }}
               </div>
               <div>
-                <router-link :to="{ path: '/guestnetwork/' + network.id }">{{ network.name }}</router-link>
+                <router-link :to="{ path: '/guestnetwork/' + network.id }">{{ network.name }} </router-link>
                 <a-tag v-if="network.broadcasturi">{{ network.broadcasturi }}</a-tag>
               </div>
             </div>
@@ -41,6 +41,19 @@
               </div>
               <div>{{ network.cidr }}</div>
             </div>
+            <div class="list__col">
+              <div class="list__label">
+                {{ $t('aclid') }}
+              </div>
+              <div>
+                <router-link :to="{ path: '/acllist/' + network.aclid }">
+                  {{ network.aclid }}
+                </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>
@@ -63,20 +76,8 @@
             </div>
           </div>
         </div>
-        <div slot="actions">
-          <a-popconfirm
-            :title="`${$t('label.delete')}?`"
-            @confirm="handleDelete(item)"
-            okText="Yes"
-            cancelText="No"
-            placement="top"
-          >
-            <a-button icon="delete" type="danger" shape="round"></a-button>
-          </a-popconfirm>
-        </div>
       </a-list-item>
     </a-list>
-
   </a-spin>
 </template>
 

From 74bd815b2bf9df7ea0dc5c9fed9646bf2e0b3b3d Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Wed, 5 Feb 2020 15:44:43 +0530
Subject: [PATCH 7/8] renames

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/config/section/network.js                      | 2 +-
 src/views/network/{VpcRouterTab.vue => VpcTab.vue} | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/views/network/{VpcRouterTab.vue => VpcTab.vue} (99%)

diff --git a/src/config/section/network.js b/src/config/section/network.js
index 72a2b2f78..c3f7ab8af 100644
--- a/src/config/section/network.js
+++ b/src/config/section/network.js
@@ -125,7 +125,7 @@ export default {
       }],
       tabs: [{
         name: 'VPC',
-        component: () => import('@/views/network/VpcRouterTab.vue')
+        component: () => import('@/views/network/VpcTab.vue')
       }],
       actions: [
         {
diff --git a/src/views/network/VpcRouterTab.vue b/src/views/network/VpcTab.vue
similarity index 99%
rename from src/views/network/VpcRouterTab.vue
rename to src/views/network/VpcTab.vue
index 05a77a4e8..e2419bec8 100644
--- a/src/views/network/VpcRouterTab.vue
+++ b/src/views/network/VpcTab.vue
@@ -330,7 +330,7 @@ import VpcTiersTab from './VpcTiersTab'
 import { mixinDevice } from '@/utils/mixin.js'
 
 export default {
-  name: 'VpcRouterTab',
+  name: 'VpcTab',
   components: {
     DetailsTab,
     Status,

From 077cf77c3f0072c343aa93472935c0ca7688ddbc Mon Sep 17 00:00:00 2001
From: Ritchie Vincent <ritchie@ritchievincent.co.uk>
Date: Wed, 5 Feb 2020 10:57:36 +0000
Subject: [PATCH 8/8] Fix refresh issues

---
 src/views/network/VpcTab.vue | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/views/network/VpcTab.vue b/src/views/network/VpcTab.vue
index e2419bec8..02da039b1 100644
--- a/src/views/network/VpcTab.vue
+++ b/src/views/network/VpcTab.vue
@@ -700,15 +700,18 @@ export default {
             jobId: response.createprivategatewayresponse.jobid,
             successMethod: () => {
               this.modals.gateway = false
+              this.handleFetchData()
             },
             errorMessage: 'Adding Private Gateway failed',
             errorMethod: () => {
               this.modals.gateway = false
+              this.handleFetchData()
             },
             loadingMessage: `Adding Private Gateway...`,
             catchMessage: 'Error encountered while fetching async job result',
             catchMethod: () => {
               this.modals.gateway = false
+              this.handleFetchData()
             }
           })
         }).catch(error => {
@@ -770,12 +773,37 @@ export default {
           s2svpngatewayid: this.vpnGateways[0].id,
           s2scustomergatewayid: values.vpncustomergateway,
           passive: values.passive ? values.passive : false
+        }).then(response => {
+          this.$store.dispatch('AddAsyncJob', {
+            title: `VPN Connection`,
+            jobid: response.createvpnconnectionresponse.jobid,
+            status: 'progress'
+          })
+          this.$pollJob({
+            jobId: response.createvpnconnectionresponse.jobid,
+            successMethod: () => {
+              this.fetchVpnConnections()
+              this.fetchLoading = false
+            },
+            errorMessage: 'Adding VPN Connection failed',
+            errorMethod: () => {
+              this.fetchVpnConnections()
+              this.fetchLoading = false
+            },
+            loadingMessage: `Adding VPN Connection...`,
+            catchMessage: 'Error encountered while fetching async job result',
+            catchMethod: () => {
+              this.fetchVpnConnections()
+              this.fetchLoading = false
+            }
+          })
         }).catch(error => {
           this.$notification.error({
             message: 'Request Failed',
             description: error.response.headers['x-description']
           })
         }).finally(() => {
+          this.fetchVpnConnections()
           this.fetchLoading = false
         })
       })