add proper filtering of offerings based on VPC nsx mode

ui/src/views/network/VpcTiersTab.vue

@@ -364,6 +364,7 @@ export default {
   },
   inject: ['parentFetchData'],
   data () {
+    console.log(this.resource)
     return {
       networks: [],
       networkid: '',
@@ -436,7 +437,9 @@ export default {
         }
       },
       publicLBExists: false,
-      setMTU: false
+      setMTU: false,
+      isNsxEnabled: false,
+      isOfferingNatMode: false
     }
   },
   created () {
@@ -481,6 +484,8 @@ export default {
         this.fetchVMs(network.id)
       }
       this.publicLBNetworkExists()
+      this.getVpcNetworkOffering()
+      console.log(this.isOfferingNatMode)
     },
     fetchMtuForZone () {
       api('listZones', {
@@ -488,6 +493,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 +521,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 +557,17 @@ export default {
     fetchNetworkOfferings () {
       this.fetchLoading = true
       this.modalLoading = true
-      api('listNetworkOfferings', {
+      const params = {
         forvpc: true,
         guestiptype: 'Isolated',
-        supportedServices: 'SourceNat',
         state: 'Enabled'
-      }).then(json => {
+      }
+      console.log(this.isNsxEnabled)
+      console.log(this.isOfferingNatMode)
+      if (!this.isNsxEnabled) {
+        params.supportedServices = 'SourceNat'
+      }
+      api('listNetworkOfferings', params).then(json => {
         this.networkOfferings = json.listnetworkofferingsresponse.networkoffering || []
         var filteredOfferings = []
         if (this.publicLBExists) {
@@ -556,6 +580,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)