ui: handle empty network offerings without Request failed (#14377)

ui/public/locales/en.json

@@ -4073,6 +4073,7 @@
 "message.setting.update.delay": "The new value will take effect within 30 seconds.",
 "message.setup.physical.network.during.zone.creation": "When adding a Zone, you need to set up one or more physical networks. Each physical network can carry one or more types of traffic, with certain restrictions on how they may be combined. Add or remove one or more traffic types onto each physical network.",
 "message.setup.physical.network.during.zone.creation.basic": "When adding a basic Zone, you can set up one physical Network, which corresponds to a NIC on the hypervisor. The Network carries several types of traffic.<br/><br/>You may also <strong>add</strong> other traffic types onto the physical Network.",
+"message.network.offering.unavailable": "No enabled network offering is available for this network type. Please contact an administrator or enable a suitable network offering.",
 "message.shared.network.offering.warning": "Domain admins and regular Users can only create shared Networks from Network offering with the setting specifyvlan=false. Please contact an administrator to create a Network offering if this list is empty.",
 "message.shared.network.unsupported.for.nsx": "Shared networks aren't supported for NSX enabled Zones",
 "message.shutdown.triggered": "A shutdown has been triggered. CloudStack will not accept new jobs",

ui/public/locales/fr_FR.json

@@ -1423,6 +1423,7 @@
 "message.migrate.systemvm.confirm": "Confirmer la migration de la VM syst\u00e8me vers :",
 "message.migrate.volume": "Confirmer la migration du volume vers un autre stockage primaire.",
 "message.network.addvm.desc": "Veuillez sp\u00e9cifier le r\u00e9seau que vous souhaitez ajouter \u00e0 cette VM. Une nouvelle interface NIC sera ajout\u00e9e pour ce r\u00e9seau.",
+"message.network.offering.unavailable": "Aucune offre de r\u00e9seau activ\u00e9e n'est disponible pour ce type de r\u00e9seau. Veuillez contacter un administrateur ou activer une offre de r\u00e9seau adapt\u00e9e.",
 "message.network.removenic": "Veuillez confirmer que vous souhaitez supprimer cette carte NIC, ce qui supprimera \u00e9galement le r\u00e9seau associ\u00e9 sur la machine virtuelle.",
 "message.network.updateip": "Confirmer que vous souhaitez changer l'adresse IP pour cette NIC sur la VM.",
 "message.please.confirm.remove.ssh.key.pair": "Confirmer la suppression de cette bi-cl\u00e9 SSH",

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -96,6 +96,9 @@
                 {{ opt.displaytext || opt.name || opt.description }}
               </a-select-option>
             </a-select>
+            <a-alert type="warning" v-if="networkOfferingWarning">
+              <template #message>{{ $t('message.network.offering.unavailable') }}</template>
+            </a-alert>
             <a-alert type="warning" v-if="!this.hasVPC">
               <template #message>
                 <span v-html="$t('message.warn.vpc.offerings')"/>
@@ -371,6 +374,7 @@ export default {
       selectedZone: {},
       networkOfferings: [],
       networkOfferingLoading: false,
+      networkOfferingWarning: false,
       selectedNetworkOffering: {},
       vpcs: [],
       vpcLoading: false,
@@ -540,13 +544,16 @@ export default {
         this.networkOfferingLoading = true
         if ('listVPCs' in this.$store.getters.apis) {
           getAPI('listVPCs', params).then(json => {
-            const listVPCs = json.listvpcsresponse.vpc
+            const listVPCs = json?.listvpcsresponse?.vpc
             this.hasVPC = this.arrayHasItems(listVPCs)
             if (!this.hasVPC) {
               this.fetchNetworkOfferingData(false)
             } else {
               this.fetchNetworkOfferingData()
             }
+          }).catch(() => {
+            this.hasVPC = false
+            this.fetchNetworkOfferingData(false)
           })
         } else {
           this.fetchNetworkOfferingData(false)
@@ -555,6 +562,7 @@ export default {
     },
     fetchNetworkOfferingData (forVpc) {
       this.networkOfferingLoading = true
+      this.networkOfferingWarning = false
       const params = {
         zoneid: this.selectedZone.id,
         guestiptype: 'Isolated',
@@ -566,24 +574,30 @@ export default {
       if (!isAdmin()) { // normal user is not aware of the VLANs in the system, so normal user is not allowed to create network with network offerings whose specifyvlan = true
         params.specifyvlan = false
       }
-      if (forVpc !== null) {
+      if (forVpc !== undefined && forVpc !== null) {
         params.forvpc = forVpc
       }
       this.networkOfferings = []
       this.selectedNetworkOffering = {}
       getAPI('listNetworkOfferings', params).then(json => {
-        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering || []
-        this.networkOfferings = this.networkOfferings.filter(offering => offering.fornsx === this.selectedZone.isnsxenabled)
-        if (!this.selectedZone.routedmodeenabled) {
+        const offerings = json?.listnetworkofferingsresponse?.networkoffering || []
+        this.networkOfferings = Array.isArray(offerings) ? offerings : []
+        this.networkOfferings = this.networkOfferings.filter(offering => offering.fornsx === this.selectedZone?.isnsxenabled)
+        if (!this.selectedZone?.routedmodeenabled) {
           this.networkOfferings = this.networkOfferings.filter(offering => offering.networkmode !== 'ROUTED')
         }
       }).catch(error => {
+        this.networkOfferings = []
         this.$notifyError(error)
       }).finally(() => {
         this.networkOfferingLoading = false
         if (this.arrayHasItems(this.networkOfferings)) {
           this.form.networkofferingid = 0
           this.handleNetworkOfferingChange(this.networkOfferings[0])
+          this.networkOfferingWarning = false
+        } else {
+          this.form.networkofferingid = null
+          this.networkOfferingWarning = true
         }
       })
     },

ui/src/views/network/CreateL2NetworkForm.vue

@@ -321,13 +321,15 @@ export default {
         this.networkOfferingLoading = true
         if ('listVPCs' in this.$store.getters.apis) {
           getAPI('listVPCs', params).then(json => {
-            const listVPCs = json.listvpcsresponse.vpc
+            const listVPCs = json?.listvpcsresponse?.vpc
             var vpcAvailable = this.arrayHasItems(listVPCs)
             if (vpcAvailable === false) {
               this.fetchNetworkOfferingData(false)
             } else {
               this.fetchNetworkOfferingData()
             }
+          }).catch(() => {
+            this.fetchNetworkOfferingData(false)
           })
         } else {
           this.fetchNetworkOfferingData(false)
@@ -347,12 +349,15 @@ export default {
       if (!isAdmin()) { // normal user is not aware of the VLANs in the system, so normal user is not allowed to create network with network offerings whose specifyvlan = true
         params.specifyvlan = false
       }
-      if (forVpc !== null) {
+      if (forVpc !== undefined && forVpc !== null) {
         params.forvpc = forVpc
       }
+      this.networkOfferings = []
       getAPI('listNetworkOfferings', params).then(json => {
-        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering
+        const offerings = json?.listnetworkofferingsresponse?.networkoffering || []
+        this.networkOfferings = Array.isArray(offerings) ? offerings : []
       }).catch(error => {
+        this.networkOfferings = []
         this.$notifyError(error)
       }).finally(() => {
         this.networkOfferingLoading = false

ui/src/views/network/CreateSharedNetworkForm.vue

@@ -800,8 +800,10 @@ export default {
       this.handleNetworkOfferingChange(null)
       this.networkOfferings = []
       getAPI('listNetworkOfferings', params).then(json => {
-        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering || []
+        const offerings = json?.listnetworkofferingsresponse?.networkoffering || []
+        this.networkOfferings = Array.isArray(offerings) ? offerings : []
       }).catch(error => {
+        this.networkOfferings = []
         this.$notifyError(error)
       }).finally(() => {
         this.networkOfferingLoading = false