ui: Allow IP range creation for Physical Network - Guest Traffic in Basic Zones (#5020)

* ui: Allow IP range creation for Physical Network - Guest Traffic

* get guest network only for basic zone

ui/src/views/infra/network/IpRangesTabGuest.vue

@@ -149,7 +149,6 @@ export default {
         page: this.page,
         pagesize: this.pageSize
       }).then(response => {
-        console.log(response)
         this.items = response.listnetworksresponse.network ? response.listnetworksresponse.network : []
         this.total = response.listnetworksresponse.count || 0
       }).catch(error => {

ui/src/views/infra/network/IpRangesTabPublic.vue

@@ -34,20 +34,20 @@
       :rowKey="record => record.id"
       :pagination="false"
     >
-      <template slot="account" slot-scope="record">
+      <template slot="account" slot-scope="record" v-if="!basicGuestNetwork">
         <a-button @click="() => handleOpenAccountModal(record)">{{ `[${record.domain}] ${record.account === undefined ? '' : record.account}` }}</a-button>
       </template>
       <template slot="actions" slot-scope="record">
         <div class="actions">
           <tooltip-button
-            v-if="record.account === 'system'"
+            v-if="record.account === 'system' && !basicGuestNetwork"
             tooltipPlacement="bottom"
             :tooltip="$t('label.add.account')"
             icon="user-add"
             @click="() => handleOpenAddAccountModal(record)"
             :disabled="!('dedicatePublicIpRange' in $store.getters.apis)" />
           <tooltip-button
-            v-else
+            v-if="record.account !== 'system' && !basicGuestNetwork"
             tooltipPlacement="bottom"
             :tooltip="$t('label.release.account')"
             icon="user-delete"
@@ -137,6 +137,16 @@
         layout="vertical"
         class="form"
       >
+        <a-form-item :label="$t('label.podid')" class="form__item" v-if="basicGuestNetwork">
+          <a-select
+            autoFocus
+            v-decorator="['podid', {
+              rules: [{ required: true, message: `${$t('label.required')}` }]
+            }]"
+          >
+            <a-select-option v-for="pod in pods" :key="pod.id" :value="pod.id">{{ pod.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
         <a-form-item :label="$t('label.gateway')" class="form__item">
           <a-input
             autoFocus
@@ -148,7 +158,7 @@
             v-decorator="['netmask', { rules: [{ required: true, message: `${$t('label.required')}` }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('label.vlan')" class="form__item">
+        <a-form-item :label="$t('label.vlan')" class="form__item" v-if="!basicGuestNetwork">
           <a-input
             v-decorator="['vlan']">
           </a-input>
@@ -163,11 +173,11 @@
             v-decorator="['endip', { rules: [{ required: true, message: `${$t('label.required')}` }] }]">
           </a-input>
         </a-form-item>
-        <div class="form__item">
+        <div class="form__item" v-if="!basicGuestNetwork">
           <div style="color: black;">{{ $t('label.set.reservation') }}</div>
           <a-switch @change="handleShowAccountFields"></a-switch>
         </div>
-        <div v-if="showAccountFields" style="margin-top: 20px;">
+        <div v-if="showAccountFields && !basicGuestNetwork" style="margin-top: 20px;">
           <div v-html="$t('label.set.reservation.desc')"></div>
           <a-form-item :label="$t('label.system.vms')" class="form__item">
             <a-switch v-decorator="['forsystemvms']"></a-switch>
@@ -214,6 +224,10 @@ export default {
     network: {
       type: Object,
       required: true
+    },
+    basicGuestNetwork: {
+      type: Boolean,
+      required: true
     }
   },
   data () {
@@ -232,6 +246,8 @@ export default {
       domainsLoading: false,
       addIpRangeModal: false,
       showAccountFields: false,
+      podsLoading: false,
+      pods: [],
       page: 1,
       pageSize: 10,
       columns: [
@@ -255,10 +271,6 @@ export default {
           title: this.$t('label.endip'),
           dataIndex: 'endip'
         },
-        {
-          title: this.$t('label.account'),
-          scopedSlots: { customRender: 'account' }
-        },
         {
           title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
@@ -270,6 +282,19 @@ export default {
     this.form = this.$form.createForm(this)
   },
   created () {
+    if (!this.basicGuestNetwork) {
+      this.columns.splice(5, 0,
+        {
+          title: this.$t('label.account'),
+          scopedSlots: { customRender: 'account' }
+        }
+      )
+    } else {
+      this.columns.unshift({
+        title: this.$t('label.pod'),
+        dataIndex: 'podname'
+      })
+    }
     this.fetchData()
   },
   watch: {
@@ -296,6 +321,7 @@ export default {
       }).finally(() => {
         this.componentLoading = false
       })
+      this.fetchPods()
     },
     fetchDomains () {
       this.domainsLoading = true
@@ -314,6 +340,22 @@ export default {
         this.domainsLoading = false
       })
     },
+    fetchPods () {
+      this.podsLoading = true
+      api('listPods', {
+        zoneid: this.resource.zoneid,
+        page: this.page,
+        pagesize: this.pageSize
+      }).then(response => {
+        this.total = response.listpodsresponse.count || 0
+        this.pods = response.listpodsresponse.pod ? response.listpodsresponse.pod : []
+      }).catch(error => {
+        console.log(error)
+        this.$notifyError(error)
+      }).finally(() => {
+        this.podsLoading = false
+      })
+    },
     handleAddAccount () {
       this.domainsLoading = true
 
@@ -384,18 +426,25 @@ export default {
 
         this.componentLoading = true
         this.addIpRangeModal = false
-        api('createVlanIpRange', {
-          zoneId: this.resource.zoneid,
-          vlan: values.vlan,
+        var params = {
           gateway: values.gateway,
           netmask: values.netmask,
           startip: values.startip,
-          endip: values.endip,
-          forsystemvms: values.forsystemvms,
-          account: values.forsystemvms ? null : values.account,
-          domainid: values.forsystemvms ? null : values.domain,
-          forvirtualnetwork: true
-        }).then(() => {
+          endip: values.endip
+        }
+        if (!this.basicGuestNetwork) {
+          params.zoneId = this.resource.zoneid
+          params.vlan = values.vlan
+          params.forsystemvms = values.forsystemvms
+          params.account = values.forsystemvms ? null : values.account
+          params.domainid = values.forsystemvms ? null : values.domain
+          params.forvirtualnetwork = true
+        } else {
+          params.forvirtualnetwork = false
+          params.podid = values.podid
+          params.networkid = this.network.id
+        }
+        api('createVlanIpRange', params).then(() => {
           this.$notification.success({
             message: this.$t('message.success.add.iprange')
           })

ui/src/views/infra/network/TrafficTypesTab.vue

@@ -26,9 +26,17 @@
           <div><strong>{{ $t(type) }}</strong></div>
           <div>{{ item[type] || $t('label.network.label.display.for.blank.value') }}</div>
         </div>
-        <div v-if="item.traffictype === 'Guest'">
+        <div v-if="item.traffictype === 'Guest' && networkType === 'Advanced'">
           <a-divider />
-          <IpRangesTabGuest :resource="resource" :loading="loading" />
+          <IpRangesTabGuest :resource="resource" :loading="loading"/>
+        </div>
+        <div v-if="item.traffictype === 'Guest' && networkType === 'Basic'">
+          <a-divider />
+          <IpRangesTabPublic
+            :resource="resource"
+            :loading="loading"
+            :network="guestNetwork"
+            :basicGuestNetwork="networkType === 'Basic' && item.traffictype === 'Guest'"/>
         </div>
         <div v-if="item.traffictype === 'Public'">
           <div style="margin-bottom: 10px;">
@@ -40,7 +48,7 @@
             <div>{{ publicNetwork.broadcastdomaintype }}</div>
           </div>
           <a-divider />
-          <IpRangesTabPublic :resource="resource" :loading="loading" :network="publicNetwork" />
+          <IpRangesTabPublic :resource="resource" :loading="loading" :network="publicNetwork" :basicGuestNetwork="false" />
         </div>
         <div v-if="item.traffictype === 'Management'">
           <a-divider />
@@ -86,6 +94,8 @@ export default {
     return {
       traffictypes: [],
       publicNetwork: {},
+      guestNetwork: {},
+      networkType: 'Advanced',
       fetchLoading: false
     }
   },
@@ -102,7 +112,7 @@ export default {
     }
   },
   methods: {
-    fetchData () {
+    async fetchData () {
       this.fetchLoading = true
       api('listTrafficTypes', { physicalnetworkid: this.resource.id }).then(json => {
         this.traffictypes = json.listtraffictypesresponse.traffictype
@@ -111,7 +121,6 @@ export default {
       }).finally(() => {
         this.fetchLoading = false
       })
-
       this.fetchLoading = true
       api('listNetworks', {
         listAll: true,
@@ -129,6 +138,42 @@ export default {
       }).finally(() => {
         this.fetchLoading = false
       })
+      await this.fetchZones()
+      if (this.networkType === 'Basic') {
+        this.fetchGuestNetwork()
+      }
+    },
+    fetchZones () {
+      return new Promise((resolve, reject) => {
+        this.fetchLoading = true
+        api('listZones', { id: this.resource.zoneid }).then(json => {
+          const zone = json.listzonesresponse.zone || []
+          this.networkType = zone[0].networktype
+          resolve(this.networkType)
+        }).catch(error => {
+          this.$notifyError(error)
+          reject(error)
+        }).finally(() => {
+          this.fetchLoading = false
+        })
+      })
+    },
+    fetchGuestNetwork () {
+      api('listNetworks', {
+        listAll: true,
+        trafficType: 'Guest',
+        zoneId: this.resource.zoneid
+      }).then(json => {
+        if (json.listnetworksresponse?.network?.length > 0) {
+          this.guestNetwork = json.listnetworksresponse.network[0]
+        } else {
+          this.guestNetwork = {}
+        }
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.fetchLoading = false
+      })
     }
   }
 }