davidjumani edited a comment on pull request #4666:
URL: https://github.com/apache/cloudstack/pull/4666#issuecomment-807935586


   Might be a bit late to the party, but I think this can be solved better by 
appending the API result of `addPhysicalNetworkForGuestTrafficType` to an array 
of promises, and then running a `Promise.all().then()` on the array
   Ref 
https://github.com/apache/cloudstack/blob/master/ui/src/components/view/SearchView.vue#L262
   
   This way all the apis get resolved and finally in the `Promise.all().then()` 
the physicalnetwork can be set in the form. This takes care of any async issues 
that crop up
   
   
   ```
   diff --git a/ui/src/views/network/CreateSharedNetworkForm.vue 
b/ui/src/views/network/CreateSharedNetworkForm.vue
   index 9b020c18c5..a25f2604db 100644
   --- a/ui/src/views/network/CreateSharedNetworkForm.vue
   +++ b/ui/src/views/network/CreateSharedNetworkForm.vue
   @@ -559,6 +559,7 @@ export default {
            if (this.selectedZone === null || this.selectedZone === undefined) {
              return
            }
   +        const promises = []
            const params = {}
            params.zoneid = this.selectedZone.id
            this.formPhysicalNetworksLoading = true
   @@ -566,38 +567,37 @@ export default {
              this.formPhysicalNetworks = []
              var networks = json.listphysicalnetworksresponse.physicalnetwork
              if (this.arrayHasItems(networks)) {
   -            for (const i in networks) {
   -              this.addPhysicalNetworkForGuestTrafficType(networks[i], i * 1 
=== networks.length - 1)
   +            for (const network of networks) {
   +              
promises.push(this.addPhysicalNetworkForGuestTrafficType(network))
                }
   -          } else {
   -            this.formPhysicalNetworkLoading = false
              }
   -        }).finally(() => {
   +        })
   +        Promise.all(promises).then(() => {
   +          this.form.setFieldsValue({
   +            physicalnetworkid: 0
   +          })
   +          this.handlePhysicalNetworkChange(this.formPhysicalNetworks[0])
            })
          }
        },
        addPhysicalNetworkForGuestTrafficType (physicalNetwork, isLastNetwork) {
          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 (isLastNetwork) {
   -          this.form.setFieldsValue({
   -            physicalnetworkid: 0
   -          })
   -          this.handlePhysicalNetworkChange(this.formPhysicalNetworks[0])
   -        }
   +          resolve()
   +        }).catch(error => {
   +          reject(error)
   +        })
          })
        },
        handlePhysicalNetworkChange (physicalNet) {
   ```


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[email protected]


Reply via email to