apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui: fix create shared network with multi-zone (#5205)

Browse Source 
Fixes create shared network form for multi-zone environments.

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
This commit is contained in:
Abhishek Kumar 2021-07-27 15:01:54 +05:30 committed by GitHub
parent 826e479cf5
commit 8ed5a4fae6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ui/src/views/network/CreateSharedNetworkForm.vue
View File

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