Nsx UI zone bug (#8398)

* NSX: Attempt to fix NSX Zone creation bug for public networks

* fix zone wizard public traffic issue

* add proper filtering of offerings based on VPC nsx mode

* clean up console logs

ui/public/locales/en.json

@@ -2586,6 +2586,7 @@
 "message.configuring.guest.traffic": "Configuring guest traffic",
 "message.configuring.physical.networks": "Configuring physical Networks",
 "message.configuring.public.traffic": "Configuring public traffic",
+"message.configuring.nsx.public.traffic": "Configuring NSX public traffic",
 "message.configuring.storage.traffic": "Configuring storage traffic",
 "message.confirm.action.force.reconnect": "Please confirm that you want to force reconnect this host.",
 "message.confirm.add.router.table.to.instance": "Please confirm that you want to add Route Table to this NIC",

ui/src/views/infra/zone/IpAddressRangeForm.vue

@@ -261,8 +261,10 @@ export default {
     handleAddRange () {
       this.formRef.value.validate().then(() => {
         const values = toRaw(this.form)
+        const len = this.isValidSetup() ? this.ipRanges.length - 1 : 0
+        const key = this.isValidSetup() ? this.ipRanges[len].key : 0
         this.ipRanges.push({
-          key: this.ipRanges.length.toString(),
+          key: key + 1,
           gateway: values.gateway,
           netmask: values.netmask,
           vlan: values.vlan,

ui/src/views/infra/zone/ZoneWizard.vue

@@ -139,7 +139,7 @@ export default {
         {
           name: 'network',
           title: 'label.network',
-          step: ['physicalNetwork', 'tungsten', 'netscaler', 'pod', 'guestTraffic', 'storageTraffic', 'publicTraffic'],
+          step: ['physicalNetwork', 'nsx', 'tungsten', 'netscaler', 'pod', 'guestTraffic', 'storageTraffic', 'publicTraffic', 'nsxPublicTraffic'],
           description: this.$t('message.network.description'),
           hint: this.$t('message.network.hint')
         },

ui/src/views/infra/zone/ZoneWizardLaunchZone.vue

@@ -124,6 +124,7 @@ export default {
         waiting: 'message.launch.zone',
         launching: 'message.please.wait.while.zone.is.being.created'
       },
+      nsx: false,
       isLaunchZone: false,
       processStatus: null,
       messageError: '',
@@ -216,6 +217,7 @@ export default {
     setStepStatus (status) {
       const index = this.steps.findIndex(step => step.index === this.currentStep)
       this.steps[index].status = status
+      this.nsx = false
     },
     handleBack (e) {
       this.$emit('backPressed')
@@ -856,7 +858,7 @@ export default {
           this.stepData.podReturned = await this.createPod(params)
           this.stepData.stepMove.push('createPod')
         }
-        await this.stepConfigurePublicTraffic()
+        await this.stepConfigurePublicTraffic('message.configuring.public.traffic', 'publicTraffic', 0)
       } catch (e) {
         this.messageError = e
         this.processStatus = STATUS_FAILED
@@ -894,19 +896,24 @@ export default {
         this.setStepStatus(STATUS_FAILED)
       }
     },
-    async stepConfigurePublicTraffic () {
+    async stepConfigurePublicTraffic (message, trafficType, idx) {
       if (
         (this.isBasicZone &&
           (this.havingSG && this.havingEIP && this.havingELB)) ||
         (this.isAdvancedZone && !this.sgEnabled && !this.isEdgeZone)) {
         this.setStepStatus(STATUS_FINISH)
         this.currentStep++
-        this.addStep('message.configuring.public.traffic', 'publicTraffic')
+        this.addStep(message, trafficType)
+        if (trafficType === 'nsxPublicTraffic') {
+          this.nsx = false
+        }
 
         let stopNow = false
         this.stepData.returnedPublicTraffic = this.stepData?.returnedPublicTraffic || []
-        for (let index = 0; index < this.prefillContent['public-ipranges'].length; index++) {
-          const publicVlanIpRange = this.prefillContent['public-ipranges'][index]
+        let publicIpRanges = this.prefillContent['public-ipranges']
+        publicIpRanges = publicIpRanges.filter(item => item.fornsx === (idx === 1))
+        for (let index = 0; index < publicIpRanges.length; index++) {
+          const publicVlanIpRange = publicIpRanges[index]
           let isExisting = false
 
           this.stepData.returnedPublicTraffic.forEach(publicVlan => {
@@ -950,10 +957,10 @@ export default {
           }
 
           try {
-            if (!this.stepData.stepMove.includes('createPublicVlanIpRange' + index)) {
+            if (!this.stepData.stepMove.includes('createPublicVlanIpRange' + idx + index)) {
               const vlanIpRangeItem = await this.createVlanIpRange(params)
               this.stepData.returnedPublicTraffic.push(vlanIpRangeItem)
-              this.stepData.stepMove.push('createPublicVlanIpRange' + index)
+              this.stepData.stepMove.push('createPublicVlanIpRange' + idx + index)
             }
           } catch (e) {
             this.messageError = e
@@ -970,12 +977,16 @@ export default {
           return
         }
 
-        if (this.stepData.isTungstenZone) {
-          await this.stepCreateTungstenFabricPublicNetwork()
-        } else if (this.stepData.isNsxZone) {
-          await this.stepAddNsxController()
+        if (idx === 0) {
+          await this.stepConfigurePublicTraffic('message.configuring.nsx.public.traffic', 'nsxPublicTraffic', 1)
         } else {
-          await this.stepConfigureStorageTraffic()
+          if (this.stepData.isTungstenZone) {
+            await this.stepCreateTungstenFabricPublicNetwork()
+          } else if (this.stepData.isNsxZone) {
+            await this.stepAddNsxController()
+          } else {
+            await this.stepConfigureStorageTraffic()
+          }
         }
       } else if (this.isAdvancedZone && this.sgEnabled) {
         if (this.stepData.isTungstenZone) {

ui/src/views/network/VpcTiersTab.vue

@@ -436,7 +436,9 @@ export default {
         }
       },
       publicLBExists: false,
-      setMTU: false
+      setMTU: false,
+      isNsxEnabled: false,
+      isOfferingNatMode: false
     }
   },
   created () {
@@ -481,6 +483,7 @@ export default {
         this.fetchVMs(network.id)
       }
       this.publicLBNetworkExists()
+      this.getVpcNetworkOffering()
     },
     fetchMtuForZone () {
       api('listZones', {
@@ -488,6 +491,7 @@ export default {
       }).then(json => {
         this.setMTU = json?.listzonesresponse?.zone?.[0]?.allowuserspecifyvrmtu || false
         this.privateMtuMax = json?.listzonesresponse?.zone?.[0]?.routerprivateinterfacemaxmtu || 1500
+        this.isNsxEnabled = json?.listzonesresponse?.zone?.[0]?.isnsxenabled || false
       })
     },
     fetchNetworkAclList () {
@@ -515,6 +519,19 @@ export default {
         })
       })
     },
+    getVpcNetworkOffering () {
+      return new Promise((resolve, reject) => {
+        api('listVPCOfferings', {
+          id: this.resource.vpcofferingid
+        }).then(json => {
+          var vpcOffering = json?.listvpcofferingsresponse?.vpcoffering[0]
+          this.isOfferingNatMode = vpcOffering?.nsxmode === 'NATTED' || false
+          resolve(vpcOffering)
+        }).catch(e => {
+          reject(e)
+        })
+      })
+    },
     publicLBNetworkExists () {
       api('listNetworks', {
         vpcid: this.resource.id,
@@ -538,12 +555,15 @@ export default {
     fetchNetworkOfferings () {
       this.fetchLoading = true
       this.modalLoading = true
-      api('listNetworkOfferings', {
+      const params = {
         forvpc: true,
         guestiptype: 'Isolated',
-        supportedServices: 'SourceNat',
         state: 'Enabled'
-      }).then(json => {
+      }
+      if (!this.isNsxEnabled) {
+        params.supportedServices = 'SourceNat'
+      }
+      api('listNetworkOfferings', params).then(json => {
         this.networkOfferings = json.listnetworkofferingsresponse.networkoffering || []
         var filteredOfferings = []
         if (this.publicLBExists) {
@@ -556,6 +576,9 @@ export default {
           }
           this.networkOfferings = filteredOfferings
         }
+        if (this.isNsxEnabled) {
+          this.networkOfferings = this.networkOfferings.filter(offering => offering.nsxmode === (this.isOfferingNatMode ? 'NATTED' : 'ROUTED'))
+        }
         this.form.networkOffering = this.networkOfferings[0].id
       }).catch(error => {
         this.$notifyError(error)