From c75c6baa3f56f98e7a41ccad7d6280753f8eb5ab Mon Sep 17 00:00:00 2001
From: Rakesh <rakeshv.com@gmail.com>
Date: Mon, 5 Apr 2021 09:07:03 +0200
Subject: [PATCH] ui: Display public ip addresses for shared network (#4676)

If a vm belongs to shared network then display the list
of ip addresses available which can be used to assign for
secondary IP addresses.

Also display "Public IP addresses" tab for shared networks
---
 ui/src/config/section/network.js        |  2 +-
 ui/src/views/compute/InstanceTab.vue    | 36 +++++++++++++++++++++++--
 ui/src/views/network/IpAddressesTab.vue | 14 +++++++---
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index 3ea3fe07104..f274fd51d73 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -48,7 +48,7 @@ export default {
       }, {
         name: 'public.ip.addresses',
         component: () => import('@/views/network/IpAddressesTab.vue'),
-        show: (record) => { return record.type === 'Isolated' && !('vpcid' in record) && 'listPublicIpAddresses' in store.getters.apis }
+        show: (record) => { return (record.type === 'Isolated' || record.type === 'Shared') && !('vpcid' in record) && 'listPublicIpAddresses' in store.getters.apis }
       }, {
         name: 'virtual.routers',
         component: () => import('@/views/network/RoutersTab.vue'),
diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
index 29a5cdedebd..8ad259b290a 100644
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -102,7 +102,7 @@
                 icon="environment"
                 shape="circle"
                 :disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
-                @click="fetchSecondaryIPs(record.nic.id)" />
+                @click="onAcquireSecondaryIPAddress(record)" />
             </a-tooltip>
             <a-tooltip placement="bottom">
               <template slot="title">
@@ -220,7 +220,23 @@
         {{ $t('message.network.secondaryip') }}
       </p>
       <a-divider />
-      <a-input :placeholder="$t('label.new.secondaryip.description')" v-model="newSecondaryIp" autoFocus></a-input>
+      <div class="modal-form">
+        <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
+        <a-select
+          showSearch
+          v-if="editNicResource.type==='Shared'"
+          v-model="newSecondaryIp"
+          :loading="listIps.loading">
+          <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
+            {{ ip.ipaddress }}
+          </a-select-option>
+        </a-select>
+        <a-input
+          v-else
+          :placeholder="$t('label.new.secondaryip.description')"
+          v-model="newSecondaryIp"></a-input>
+      </div>
+
       <div style="margin-top: 10px; display: flex; justify-content:flex-end;">
         <a-button @click="submitSecondaryIP" type="primary" style="margin-right: 10px;">{{ $t('label.add.secondary.ip') }}</a-button>
         <a-button @click="closeModals">{{ $t('label.close') }}</a-button>
@@ -298,6 +314,7 @@ export default {
       loadingNic: false,
       editIpAddressNic: '',
       editIpAddressValue: '',
+      editNetworkId: '',
       secondaryIPs: [],
       selectedNicId: '',
       newSecondaryIp: '',
@@ -444,6 +461,17 @@ export default {
         this.fetchPublicIps(record.nic.networkid)
       }
     },
+    onAcquireSecondaryIPAddress (record) {
+      if (record.nic.type === 'Shared') {
+        this.fetchPublicIps(record.nic.networkid)
+      } else {
+        this.listIps.opts = []
+      }
+
+      this.editNicResource = record.nic
+      this.editNetworkId = record.nic.networkid
+      this.fetchSecondaryIPs(record.nic.id)
+    },
     submitAddNetwork () {
       const params = {}
       params.virtualmachineid = this.vm.id
@@ -613,6 +641,9 @@ export default {
       }).catch(error => {
         this.$notifyError(error)
         this.loadingNic = false
+      }).finally(() => {
+        this.newSecondaryIp = null
+        this.fetchPublicIps(this.editNetworkId)
       })
     },
     removeSecondaryIP (id) {
@@ -625,6 +656,7 @@ export default {
           successMethod: () => {
             this.loadingNic = false
             this.fetchSecondaryIPs(this.selectedNicId)
+            this.fetchPublicIps(this.editNetworkId)
             this.parentFetchData()
           },
           errorMessage: this.$t('message.error.remove.secondary.ipaddress'),
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index ab7874cf057..111fbee9563 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -19,7 +19,7 @@
   <div>
     <a-spin :spinning="fetchLoading">
       <a-button
-        :disabled="!('associateIpAddress' in $store.getters.apis)"
+        :disabled="!('associateIpAddress' in $store.getters.apis) || resource.type === 'Shared'"
         type="dashed"
         icon="plus"
         style="width: 100%; margin-bottom: 15px"
@@ -52,7 +52,8 @@
         :rowKey="item => item.id"
         :pagination="false" >
         <template slot="ipaddress" slot-scope="text, record">
-          <router-link :to="{ path: '/publicip/' + record.id }" >{{ text }} </router-link>
+          <router-link v-if="record.forvirtualnetwork === true" :to="{ path: '/publicip/' + record.id }" >{{ text }} </router-link>
+          <div v-else>{{ text }}</div>
           <a-tag v-if="record.issourcenat === true">source-nat</a-tag>
         </template>
 
@@ -66,12 +67,13 @@
         </template>
 
         <template slot="associatednetworkname" slot-scope="text, record">
-          <router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }" > {{ record.associatednetworkname || record.associatednetworkid }} </router-link>
+          <router-link v-if="record.forvirtualnetwork === true" :to="{ path: '/guestnetwork/' + record.associatednetworkid }" > {{ record.associatednetworkname || record.associatednetworkid }} </router-link>
+          <div v-else>{{ record.networkname }}</div>
         </template>
 
         <template slot="action" slot-scope="text, record">
           <a-button
-            v-if="record.issourcenat !== true"
+            v-if="record.issourcenat !== true && record.forvirtualnetwork === true"
             type="danger"
             icon="delete"
             shape="circle"
@@ -212,6 +214,10 @@ export default {
         if (this.vpcTier) {
           params.associatednetworkid = this.vpcTier
         }
+      } else if (this.resource.type === 'Shared') {
+        params.networkid = this.resource.id
+        params.allocatedonly = false
+        params.forvirtualnetwork = false
       } else {
         params.associatednetworkid = this.resource.id
       }