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

@@ -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'),

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'),

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
       }