Fix VPC network offerings listing in isolated network creation form (#12645)

* Fix VPC network offerings listing in isolated network creation form

* Apply suggestions from code review

Co-authored-by: GaOrtiga <49285692+GaOrtiga@users.noreply.github.com>

* Address Bernardo's review

---------

Co-authored-by: GaOrtiga <49285692+GaOrtiga@users.noreply.github.com>

ui/public/locales/en.json

@@ -3731,6 +3731,7 @@
 "message.warn.filetype": "jpg, jpeg, png, bmp and svg are the only supported image formats.",
 "message.warn.importing.instance.without.nic": "WARNING: This Instance is being imported without NICs and many Network resources will not be available. Consider creating a NIC via vCenter before importing or as soon as the Instance is imported.",
 "message.warn.zone.mtu.update": "Please note that this limit won't affect pre-existing Network's MTU settings",
+"message.warn.vpc.offerings": "VPC offerings will only be shown if the selected account has at least one VPC.",
 "message.webhook.deliveries.time.filter": "Webhook deliveries list can be filtered based on date-time. Select 'Custom' for specifying start and end date range.",
 "message.zone.creation.complete": "Zone creation complete.",
 "message.zone.detail.description": "Populate Zone details.",

ui/public/locales/pt_BR.json

@@ -2510,6 +2510,7 @@
 "message.vr.alert.upon.network.offering.creation.others": "Como nenhum dos servi\u00e7os obrigat\u00f3rios para cria\u00e7\u00e3o do VR (VPN, DHCP, DNS, Firewall, LB, UserData, SourceNat, StaticNat, PortForwarding) foram habilitados, o VR n\u00e3o ser\u00e1 criado e a oferta de computa\u00e7\u00e3o n\u00e3o ser\u00e1 usada.",
 "message.warn.filetype": "jpg, jpeg, png, bmp e svg s\u00e3o os \u00fanicos formatos de imagem suportados",
 "message.warn.importing.instance.without.nic": "AVISO: essa inst\u00e2ncia est\u00e1 sendo importada sem NICs e muitos recursos de rede n\u00e3o estar\u00e3o dispon\u00edveis. Considere criar uma NIC antes de importar via VCenter ou assim que a inst\u00e2ncia for importada.",
+"message.warn.vpc.offerings": "Ofertas de VPC somente ser\u00c3o exibidas caso a conta selecionada possua ao menos uma VPC.",
 "message.zone.creation.complete": "Cria\u00e7\u00e3o de zona completa",
 "message.zone.detail.description": "Preencha os detalhes da zona",
 "message.zone.detail.hint": "Uma zona \u00e9 a maior unidade organizacional no CloudStack, e normalmente corresponde a um \u00fanico datacenter. As zonas proporcionam isolamento f\u00edsico e redund\u00e2ncia. Uma zona consiste em um ou mais pods (cada um contendo hosts e servidores de armazenamento prim\u00e1rio) e um servidor de armazenamento secund\u00e1rio que \u00e9 compartilhado por todos os pods da zona.",

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -96,6 +96,11 @@
                 {{ opt.displaytext || opt.name || opt.description }}
               </a-select-option>
             </a-select>
+            <a-alert type="warning" v-if="!this.hasVPC">
+              <template #message>
+                <span v-html="$t('message.warn.vpc.offerings')"/>
+              </template>
+            </a-alert>
           </a-form-item>
           <a-form-item ref="asnumber" name="asnumber" v-if="isASNumberRequired()">
             <template #label>
@@ -369,7 +374,8 @@ export default {
       setMTU: false,
       asNumberLoading: false,
       selectedAsNumber: 0,
-      asNumbersZone: []
+      asNumbersZone: [],
+      hasVPC: true
     }
   },
   watch: {
@@ -515,13 +521,17 @@ export default {
       if (this.vpc !== null) { // from VPC section
         this.fetchNetworkOfferingData(true)
       } else { // from guest network section
-        var params = {}
+        const params = {
+          account: this.owner.account,
+          projectid: this.owner.projectid,
+          domainid: this.owner.domainid
+        }
         this.networkOfferingLoading = true
         if ('listVPCs' in this.$store.getters.apis) {
           api('listVPCs', params).then(json => {
             const listVPCs = json.listvpcsresponse.vpc
-            var vpcAvailable = this.arrayHasItems(listVPCs)
-            if (vpcAvailable === false) {
+            this.hasVPC = this.arrayHasItems(listVPCs)
+            if (!this.hasVPC) {
               this.fetchNetworkOfferingData(false)
             } else {
               this.fetchNetworkOfferingData()
@@ -534,7 +544,7 @@ export default {
     },
     fetchNetworkOfferingData (forVpc) {
       this.networkOfferingLoading = true
-      var params = {
+      const params = {
         zoneid: this.selectedZone.id,
         guestiptype: 'Isolated',
         state: 'Enabled'
@@ -577,7 +587,7 @@ export default {
     },
     fetchVpcData () {
       this.vpcLoading = true
-      var params = {
+      const params = {
         listAll: true,
         details: 'min'
       }
@@ -600,14 +610,14 @@ export default {
         const formRaw = toRaw(this.form)
         const values = this.handleRemoveFields(formRaw)
         this.actionLoading = true
-        var params = {
+        const params = {
           zoneId: this.selectedZone.id,
           name: values.name,
           displayText: values.displaytext,
           networkOfferingId: this.selectedNetworkOffering.id
         }
-        var usefulFields = ['gateway', 'netmask', 'cidrsize', 'startip', 'startipv4', 'endip', 'endipv4', 'dns1', 'dns2', 'ip6dns1', 'ip6dns2', 'sourcenatipaddress', 'externalid', 'vpcid', 'vlan', 'networkdomain']
-        for (var field of usefulFields) {
+        const usefulFields = ['gateway', 'netmask', 'cidrsize', 'startip', 'startipv4', 'endip', 'endipv4', 'dns1', 'dns2', 'ip6dns1', 'ip6dns2', 'sourcenatipaddress', 'externalid', 'vpcid', 'vlan', 'networkdomain']
+        for (const field of usefulFields) {
           if (this.isValidTextValueForKey(values, field)) {
             params[field] = values[field]
           }