From 8ed5a4fae6de0cc8a59beb795ae737ecc74d1201 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Tue, 27 Jul 2021 15:01:54 +0530
Subject: [PATCH] ui: fix create shared network with multi-zone (#5205)

Fixes create shared network form for multi-zone environments.

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 .../views/network/CreateSharedNetworkForm.vue | 70 +++++++++++--------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/ui/src/views/network/CreateSharedNetworkForm.vue b/ui/src/views/network/CreateSharedNetworkForm.vue
index d2356dbc73a..b45c251182c 100644
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@@ -93,7 +93,7 @@
               :filterOption="(input, option) => {
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
-              :loading="zoneLoading"
+              :loading="formPhysicalNetworkLoading"
               :placeholder="this.$t('label.physicalnetworkid')"
               @change="val => { this.handlePhysicalNetworkChange(this.formPhysicalNetworks[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.formPhysicalNetworks" :key="optIndex">
@@ -542,57 +542,67 @@ export default {
       this.fetchPhysicalNetworkData()
     },
     fetchPhysicalNetworkData () {
+      this.formSelectedPhysicalNetwork = {}
+      this.formPhysicalNetworks = []
       if (this.physicalNetworks != null) {
         this.formPhysicalNetworks = this.physicalNetworks
-        if (this.arrayHasItems(this.formPhysicalNetworks)) {
-          this.form.setFieldsValue({
-            physicalnetworkid: 0
-          })
-          this.handlePhysicalNetworkChange(this.formPhysicalNetworks[0])
-        }
+        this.selectFirstPhysicalNetwork()
       } else {
         if (this.selectedZone === null || this.selectedZone === undefined) {
           return
         }
-        const params = {}
-        params.zoneid = this.selectedZone.id
-        this.formPhysicalNetworksLoading = true
+        const promises = []
+        const params = {
+          zoneid: this.selectedZone.id
+        }
+        this.formPhysicalNetworkLoading = true
         api('listPhysicalNetworks', params).then(json => {
-          this.formPhysicalNetworks = []
           var networks = json.listphysicalnetworksresponse.physicalnetwork
           if (this.arrayHasItems(networks)) {
-            for (const i in networks) {
-              this.addPhysicalNetworkForGuestTrafficType(networks[i])
+            for (const network of networks) {
+              promises.push(this.addPhysicalNetworkForGuestTrafficType(network))
             }
           } else {
             this.formPhysicalNetworkLoading = false
           }
         }).finally(() => {
+          if (this.arrayHasItems(promises)) {
+            Promise.all(promises).catch(error => {
+              this.$notifyError(error)
+            }).finally(() => {
+              this.formPhysicalNetworkLoading = false
+              this.selectFirstPhysicalNetwork()
+            })
+          }
         })
       }
     },
+    selectFirstPhysicalNetwork () {
+      if (this.arrayHasItems(this.formPhysicalNetworks)) {
+        this.form.setFieldsValue({
+          physicalnetworkid: 0
+        })
+        this.handlePhysicalNetworkChange(this.formPhysicalNetworks[0])
+      }
+    },
     addPhysicalNetworkForGuestTrafficType (physicalNetwork) {
       const params = {}
       params.physicalnetworkid = physicalNetwork.id
-      api('listTrafficTypes', params).then(json => {
-        var trafficTypes = json.listtraffictypesresponse.traffictype
-        if (this.arrayHasItems(trafficTypes)) {
-          for (const i in trafficTypes) {
-            if (trafficTypes[i].traffictype === 'Guest') {
-              this.formPhysicalNetworks.push(physicalNetwork)
-              break
+      return new Promise((resolve, reject) => {
+        api('listTrafficTypes', params).then(json => {
+          var trafficTypes = json.listtraffictypesresponse.traffictype
+          if (this.arrayHasItems(trafficTypes)) {
+            for (const type of trafficTypes) {
+              if (type.traffictype === 'Guest') {
+                this.formPhysicalNetworks.push(physicalNetwork)
+                break
+              }
             }
           }
-        } else {
-          this.formPhysicalNetworkLoading = false
-        }
-      }).finally(() => {
-        if (this.formPhysicalNetworks.length > 0 && this.isObjectEmpty(this.formSelectedPhysicalNetwork)) {
-          this.form.setFieldsValue({
-            physicalnetworkid: 0
-          })
-          this.handlePhysicalNetworkChange(this.formPhysicalNetworks[0])
-        }
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
       })
     },
     handlePhysicalNetworkChange (physicalNet) {