Support ConfigDrive with VPC (apache#10495)

Author: vishesh92

ui/src/views/offering/AddVpcOffering.vue

@@ -69,26 +69,14 @@
         </a-form-item>
         <a-row :gutter="12">
           <a-col :md="12" :lg="12">
-            <a-form-item name="provider" ref="provider">
+            <a-form-item name="fornsx" ref="fornsx">
               <template #label>
-                <tooltip-label :title="$t('label.provider')" :tooltip="apiParams.provider.description"/>
+                <tooltip-label :title="$t('label.nsx')" :tooltip="apiParams.fornsx.description"/>
               </template>
-              <a-select
-                v-model:value="form.provider"
-                v-focus="true"
-                @change="val => handleProviderChange(val)"
-                showSearch
-                optionFilterProp="label"
-                :filterOption="(input, option) => {
-                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                }"
-                :placeholder="apiParams.provider.description" >
-                <a-select-option :value="'NSX'" :label="$t('label.nsx')"> {{ $t('label.nsx') }} </a-select-option>
-                <a-select-option :value="'Netris'" :label="$t('label.netris')"> {{ $t('label.netris') }} </a-select-option>
-              </a-select>
+              <a-switch v-model:checked="form.fornsx" @change="val => { handleForNsxChange(val) }" />
             </a-form-item>
           </a-col>
-          <a-col :md="12" :lg="12" v-if="form.provider === 'NSX'">
+          <a-col :md="12" :lg="12" v-if="forNsx">
             <a-form-item name="nsxsupportlb" ref="nsxsupportlb">
               <template #label>
                 <tooltip-label :title="$t('label.nsx.supports.lb')" :tooltip="apiParams.nsxsupportlb.description"/>
@@ -97,7 +85,7 @@
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="12" v-if="routingMode === 'dynamic' && form.provider === 'NSX'">
+        <a-row :gutter="12" v-if="routingMode === 'dynamic' && forNsx">
           <a-col :md="12" :lg="12">
             <a-form-item name="specifyasnumber" ref="specifyasnumber">
               <template #label>
@@ -151,8 +139,8 @@
                   <CheckBoxSelectPair
                     :resourceKey="item.name"
                     :checkBoxLabel="item.description"
-                    :forExternalNetProvider="form.provider === 'NSX' || form.provider === 'Netris'"
-                    :defaultCheckBoxValue="form.provider === 'NSX' || form.provider === 'Netris'"
+                    :forNsx="forNsx"
+                    :defaultCheckBoxValue="forNsx"
                     :selectOptions="item.provider"
                     @handle-checkselectpair-change="handleSupportedServiceChange"/>
                 </a-list-item>
@@ -179,7 +167,6 @@
             <tooltip-label :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
           </template>
           <a-select
-            :getPopupContainer="(trigger) => trigger.parentNode"
             showSearch
             optionFilterProp="label"
             v-model:value="form.serviceofferingid"
@@ -202,7 +189,6 @@
           </template>
           <a-select
             mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
             v-model:value="form.domainid"
             showSearch
             optionFilterProp="label"
@@ -227,7 +213,6 @@
           <a-select
             id="zone-selection"
             mode="multiple"
-            :getPopupContainer="(trigger) => trigger.parentNode"
             v-model:value="form.zoneid"
             showSearch
             optionFilterProp="label"
@@ -262,7 +247,7 @@
 
 <script>
 import { ref, reactive, toRaw } from 'vue'
-import { getAPI, postAPI } from '@/api'
+import { api } from '@/api'
 import { isAdmin } from '@/role'
 import { mixinForm } from '@/utils/mixin'
 import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
@@ -288,7 +273,6 @@ export default {
       zones: [],
       zoneLoading: false,
       forNsx: false,
-      provider: '',
       loading: false,
       supportedServices: [],
       supportedServiceLoading: false,
@@ -322,11 +306,6 @@ export default {
         description: 'Nsx',
         enabled: true
       },
-      Netris: {
-        name: 'Netris',
-        description: 'Netris',
-        enabled: true
-      },
       nsxSupportedServicesMap: {}
     }
   },
@@ -381,15 +360,15 @@ export default {
     fetchIpv6NetworkOfferingConfiguration () {
       this.ipv6NetworkOfferingEnabled = false
       var params = { name: 'ipv6.offering.enabled' }
-      getAPI('listConfigurations', params).then(json => {
+      api('listConfigurations', params).then(json => {
         var value = json?.listconfigurationsresponse?.configuration?.[0].value || null
         this.ipv6NetworkOfferingEnabled = value === 'true'
       })
     },
     fetchRoutedNetworkConfiguration () {
       this.routedNetworkEnabled = false
       var params = { name: 'routed.network.vpc.enabled' }
-      getAPI('listConfigurations', params).then(json => {
+      api('listConfigurations', params).then(json => {
         var value = json?.listconfigurationsresponse?.configuration?.[0].value || null
         this.routedNetworkEnabled = value === 'true'
         if (!this.routedNetworkEnabled) {
@@ -403,7 +382,7 @@ export default {
       params.showicon = true
       params.details = 'min'
       this.domainLoading = true
-      getAPI('listDomains', params).then(json => {
+      api('listDomains', params).then(json => {
         const listDomains = json.listdomainsresponse.domain
         this.domains = this.domains.concat(listDomains)
       }).finally(() => {
@@ -414,7 +393,7 @@ export default {
       const params = {}
       params.showicon = true
       this.zoneLoading = true
-      getAPI('listZones', params).then(json => {
+      api('listZones', params).then(json => {
         const listZones = json.listzonesresponse.zone
         this.zones = this.zones.concat(listZones)
       }).finally(() => {
@@ -423,7 +402,7 @@ export default {
     },
     fetchSupportedServiceData () {
       var services = []
-      if (this.provider === 'NSX') {
+      if (this.forNsx) {
         services.push({
           name: 'Dhcp',
           enabled: true,
@@ -466,49 +445,6 @@ export default {
           enabled: true,
           provider: [{ name: 'VpcVirtualRouter' }]
         })
-      } else if (this.provider === 'Netris') {
-        services.push({
-          name: 'Dhcp',
-          enabled: true,
-          provider: [
-            { name: 'VpcVirtualRouter' }
-          ]
-        })
-        services.push({
-          name: 'Dns',
-          enabled: true,
-          provider: [{ name: 'VpcVirtualRouter' }]
-        })
-        services.push({
-          name: 'Lb',
-          enabled: true,
-          provider: [{ name: 'Netris' }]
-        })
-        services.push({
-          name: 'StaticNat',
-          enabled: true,
-          provider: [{ name: 'Netris' }]
-        })
-        services.push({
-          name: 'SourceNat',
-          enabled: true,
-          provider: [{ name: 'Netris' }]
-        })
-        services.push({
-          name: 'NetworkACL',
-          enabled: true,
-          provider: [{ name: 'Netris' }]
-        })
-        services.push({
-          name: 'PortForwarding',
-          enabled: true,
-          provider: [{ name: 'Netris' }]
-        })
-        services.push({
-          name: 'UserData',
-          enabled: true,
-          provider: [{ name: 'VpcVirtualRouter' }]
-        })
       } else {
         services.push({
           name: 'Dhcp',
@@ -592,13 +528,6 @@ export default {
         services = services.filter(service => {
           return !['SourceNat', 'StaticNat', 'Lb', 'PortForwarding', 'Vpn'].includes(service.name)
         })
-        if (['NSX', 'Netris'].includes(this.provider)) {
-          services.push({
-            name: 'Gateway',
-            enabled: true,
-            provider: [{ name: this.provider }]
-          })
-        }
       }
       for (var i in services) {
         services[i].description = services[i].name
@@ -609,16 +538,15 @@ export default {
         self.supportedServiceLoading = false
       }, 50)
     },
-    async handleProviderChange (value) {
-      this.provider = value
-      if (this.provider === 'NSX') {
+    async handleForNsxChange (forNsx) {
+      this.forNsx = forNsx
+      if (forNsx) {
         this.form.nsxsupportlb = true
         this.handleNsxLbService(true)
       }
       this.fetchSupportedServiceData()
     },
     handleNsxLbService (supportLb) {
-      console.log(supportLb)
       if (!supportLb) {
         this.supportedServices = this.supportedServices.filter(svc => svc.name !== 'Lb')
       }
@@ -663,7 +591,7 @@ export default {
       params.issystem = true
       params.systemvmtype = 'domainrouter'
       this.serviceOfferingLoading = true
-      getAPI('listServiceOfferings', params).then(json => {
+      api('listServiceOfferings', params).then(json => {
         const listServiceOfferings = json.listserviceofferingsresponse.serviceoffering
         this.serviceOfferings = this.serviceOfferings.concat(listServiceOfferings)
       }).finally(() => {
@@ -708,15 +636,10 @@ export default {
         if (values.internetprotocol) {
           params.internetprotocol = values.internetprotocol
         }
-        const forNsx = values.provider === 'NSX'
-        if (forNsx) {
-          params.provider = 'NSX'
+        if (values.fornsx === true) {
+          params.fornsx = true
           params.nsxsupportlb = values.nsxsupportlb
         }
-        const forNetris = values.provider === 'Netris'
-        if (forNetris) {
-          params.provider = 'Netris'
-        }
         params.networkmode = values.networkmode
         if (!values.forVpc) {
           params.specifyasnumber = values.specifyasnumber
@@ -767,7 +690,7 @@ export default {
         if (values.enable) {
           params.enable = values.enable
         }
-        postAPI('createVPCOffering', params).then(json => {
+        api('createVPCOffering', params).then(json => {
           this.$message.success(`${this.$t('message.create.vpc.offering')}: ` + values.name)
           this.$emit('refresh-data')
           this.closeAction()