Skip to content

Commit d7a9873

Browse files
shwstpprHoang Nguyen
shwstppr
and
Hoang Nguyen
authored
ui: fix add network offering for vpc (apache#5809)
* ui: fix add network offering for vpc Fixes issues with form related to supported services provider and router service offering when offering to be created for VPC. Fixes apache#5807 Signed-off-by: Abhishek Kumar <[email protected]> * fix issues getting with making select element update on options change (loop infinity) (#72) * fixes Signed-off-by: Abhishek Kumar <[email protected]> Co-authored-by: Hoang Nguyen <[email protected]>
1 parent eb04a46 commit d7a9873

File tree

3 files changed

+96
-58
lines changed

3 files changed

+96
-58
lines changed

‎ui/src/components/CheckBoxSelectPair.vue‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
<a-row :gutter="6">
2121
<a-col :md="24" :lg="layout === 'horizontal' ? 12 : 24">
2222
<a-checkbox
23-
v-decorator="[checkBoxDecorator, {}]"
2423
:checked="checked"
2524
@change="handleCheckChange">
2625
{{ checkBoxLabel }}
@@ -31,8 +30,7 @@
3130
v-if="reversed != checked"
3231
:label="selectLabel">
3332
<a-select
34-
v-decorator="[selectDecorator, { initialValue: selectedOption ? selectedOption : getSelectInitialValue()}]"
35-
:defaultValue="selectDecorator ? undefined : selectedOption ? selectedOption : getSelectInitialValue()"
33+
v-model="selectedOption"
3634
showSearch
3735
optionFilterProp="children"
3836
:filterOption="(input, option) => {
@@ -69,10 +67,6 @@ export default {
6967
type: String,
7068
required: true
7169
},
72-
checkBoxDecorator: {
73-
type: String,
74-
default: ''
75-
},
7670
defaultCheckBoxValue: {
7771
type: Boolean,
7872
default: false
@@ -85,10 +79,6 @@ export default {
8579
type: String,
8680
default: ''
8781
},
88-
selectDecorator: {
89-
type: String,
90-
default: ''
91-
},
9282
reversed: {
9383
type: Boolean,
9484
default: false
@@ -97,12 +87,21 @@ export default {
9787
data () {
9888
return {
9989
checked: false,
100-
selectedOption: null
90+
selectedOption: null,
91+
selectOptionsTimer: null
10192
}
10293
},
10394
created () {
10495
this.checked = this.defaultCheckBoxValue
10596
},
97+
watch: {
98+
selectOptions () {
99+
clearTimeout(this.selectOptionsTimer)
100+
this.selectOptionsTimer = setTimeout(() => {
101+
this.handleSelectOptionsUpdated()
102+
}, 50)
103+
}
104+
},
106105
computed: {
107106
selectSource () {
108107
return this.selectOptions.map(item => {
@@ -118,18 +117,23 @@ export default {
118117
arrayHasItems (array) {
119118
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
120119
},
121-
getSelectInitialValue () {
122-
const initialValue = this.selectSource?.filter(x => x.enabled !== false)?.[0]?.id || ''
123-
this.handleSelectChange(initialValue)
124-
return initialValue
125-
},
126120
handleCheckChange (e) {
127121
this.checked = e.target.checked
122+
if (this.checked && !this.selectedOption) {
123+
this.selectedOption = this.selectSource?.filter(x => x.enabled !== false)?.[0]?.id || null
124+
}
128125
this.$emit('handle-checkselectpair-change', this.resourceKey, this.checked, this.selectedOption)
129126
},
130127
handleSelectChange (val) {
131128
this.selectedOption = val
132129
this.$emit('handle-checkselectpair-change', this.resourceKey, this.checked, this.selectedOption)
130+
},
131+
handleSelectOptionsUpdated () {
132+
if (!this.checked) return
133+
var enabledOptions = this.selectSource?.filter(x => x.enabled !== false) || []
134+
if (this.selectedOption && !enabledOptions.includes(this.selectedOption)) {
135+
this.handleSelectChange(enabledOptions[0]?.id || null)
136+
}
133137
}
134138
}
135139
}

‎ui/src/views/offering/AddNetworkOffering.vue‎

Lines changed: 75 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -89,25 +89,11 @@
8989
</a-row>
9090
<a-form-item v-if="guestType === 'isolated'">
9191
<tooltip-label slot="label" :title="$t('label.vpc')" :tooltip="apiParams.forvpc.description"/>
92-
<a-switch v-decorator="['forvpc', {initialValue: forVpc}]" :defaultChecked="forVpc" @change="val => { handleForVpcChange(val) }" />
92+
<a-switch v-decorator="['forvpc']" :checked="forVpc" @change="val => { handleForVpcChange(val) }" />
9393
</a-form-item>
9494
<a-form-item :label="$t('label.userdatal2')" v-if="guestType === 'l2'">
9595
<a-switch v-decorator="['userdatal2', {initialValue: false}]" />
9696
</a-form-item>
97-
<a-form-item :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
98-
<a-radio-group
99-
v-decorator="[' ', {
100-
initialValue: 'publicLb'
101-
}]"
102-
buttonStyle="solid">
103-
<a-radio-button value="publicLb">
104-
{{ $t('label.public.lb') }}
105-
</a-radio-button>
106-
<a-radio-button value="internalLb">
107-
{{ $t('label.internal.lb') }}
108-
</a-radio-button>
109-
</a-radio-group>
110-
</a-form-item>
11197
<a-row :gutter="12">
11298
<a-col :md="12" :lg="12">
11399
<a-form-item>
@@ -202,15 +188,28 @@
202188
v-decorator="['service.'+item.name, {}]"
203189
:resourceKey="item.name"
204190
:checkBoxLabel="item.description"
205-
:checkBoxDecorator="'service.' + item.name"
206-
:selectOptions="item.provider"
207-
:selectDecorator="item.name + '.provider'"
191+
:selectOptions="!supportedServiceLoading ? item.provider: []"
208192
@handle-checkselectpair-change="handleSupportedServiceChange"/>
209193
</a-list-item>
210194
</a-list>
211195
</div>
212196
</a-form-item>
213-
<a-form-item v-if="isVirtualRouterForAtLeastOneService">
197+
<a-form-item :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
198+
<a-radio-group
199+
v-decorator="['lbType', {
200+
initialValue: lbType
201+
}]"
202+
buttonStyle="solid"
203+
@change="e => { handleLbTypeChange(e.target.value) }" >
204+
<a-radio-button value="publicLb">
205+
{{ $t('label.public.lb') }}
206+
</a-radio-button>
207+
<a-radio-button value="internalLb">
208+
{{ $t('label.internal.lb') }}
209+
</a-radio-button>
210+
</a-radio-group>
211+
</a-form-item>
212+
<a-form-item v-if="isVirtualRouterForAtLeastOneService || isVpcVirtualRouterForAtLeastOneService">
214213
<tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
215214
<a-select
216215
v-decorator="['serviceofferingid', {
@@ -453,6 +452,7 @@ export default {
453452
selectedDomains: [],
454453
selectedZones: [],
455454
forVpc: false,
455+
lbType: 'publicLb',
456456
macLearningValue: '',
457457
supportedServices: [],
458458
supportedServiceLoading: false,
@@ -463,6 +463,8 @@ export default {
463463
sourceNatServiceChecked: false,
464464
lbServiceChecked: false,
465465
lbServiceProvider: '',
466+
registeredServicePackages: [],
467+
registeredServicePackageLoading: false,
466468
isElasticIp: false,
467469
staticNatServiceChecked: false,
468470
staticNatServiceProvider: '',
@@ -531,6 +533,27 @@ export default {
531533
},
532534
handleGuestTypeChange (val) {
533535
this.guestType = val
536+
if (val === 'l2') {
537+
this.forVpc = false
538+
this.lbType = 'publicLb'
539+
this.isVirtualRouterForAtLeastOneService = false
540+
this.isVpcVirtualRouterForAtLeastOneService = false
541+
this.serviceOfferings = []
542+
this.serviceOfferingLoading = false
543+
this.sourceNatServiceChecked = false
544+
this.lbServiceChecked = false
545+
this.lbServiceProvider = ''
546+
this.registeredServicePackages = []
547+
this.registeredServicePackageLoading = false
548+
this.isElasticIp = false
549+
this.staticNatServiceChecked = false
550+
this.staticNatServiceProvider = ''
551+
this.connectivityServiceChecked = false
552+
this.firewallServiceChecked = false
553+
this.firewallServiceProvider = ''
554+
this.selectedServiceProviderMap = {}
555+
this.updateSupportedServices()
556+
}
534557
},
535558
fetchSupportedServiceData () {
536559
const params = {}
@@ -594,18 +617,21 @@ export default {
594617
this.supportedServices[i].provider = providers
595618
this.supportedServices[i].description = serviceDisplayName
596619
}
620+
}).finally(() => {
621+
this.supportedServiceLoading = false
622+
this.updateSupportedServices()
597623
})
598624
},
599625
fetchServiceOfferingData () {
600626
const params = {}
601627
params.issystem = true
602628
params.systemvmtype = 'domainrouter'
603-
this.supportedServiceLoading = true
629+
this.serviceOfferingLoading = true
604630
api('listServiceOfferings', params).then(json => {
605631
const listServiceOfferings = json.listserviceofferingsresponse.serviceoffering
606632
this.serviceOfferings = this.serviceOfferings.concat(listServiceOfferings)
607633
}).finally(() => {
608-
this.supportedServiceLoading = false
634+
this.serviceOfferingLoading = false
609635
})
610636
},
611637
fetchRegisteredServicePackageData () {
@@ -627,32 +653,41 @@ export default {
627653
this.registeredServicePackageLoading = false
628654
})
629655
},
630-
handleForVpcChange (forVpc) {
656+
updateSupportedServices () {
657+
this.supportedServiceLoading = true
658+
var supportedServices = this.supportedServices
631659
var self = this
632-
this.forVpc = forVpc
633-
this.supportedServices.forEach(function (svc, index) {
634-
if (svc !== 'Connectivity') {
660+
supportedServices.forEach(function (svc, index) {
661+
if (svc.name !== 'Connectivity') {
635662
var providers = svc.provider
636663
providers.forEach(function (provider, providerIndex) {
637664
if (self.forVpc) { // *** vpc ***
638-
if (provider.name === 'InternalLbVm' || provider.name === 'VpcVirtualRouter' || provider.name === 'Netscaler' || provider.name === 'BigSwitchBcf' || provider.name === 'ConfigDrive') {
639-
provider.enabled = true
640-
} else {
641-
provider.enabled = false
665+
var enabledProviders = ['VpcVirtualRouter', 'Netscaler', 'BigSwitchBcf', 'ConfigDrive']
666+
if (self.lbType === 'internalLb') {
667+
enabledProviders.push('InternalLbVm')
642668
}
669+
provider.enabled = enabledProviders.includes(provider.name)
643670
} else { // *** non-vpc ***
644-
if (provider.name === 'InternalLbVm' || provider.name === 'VpcVirtualRouter') {
645-
provider.enabled = false
646-
} else {
647-
provider.enabled = true
648-
}
671+
provider.enabled = !['InternalLbVm', 'VpcVirtualRouter'].includes(provider.name)
649672
}
650673
providers[providerIndex] = provider
651674
})
652675
svc.provider = providers
653-
self.supportedServices[index] = svc
676+
supportedServices[index] = svc
654677
}
655678
})
679+
setTimeout(() => {
680+
self.supportedServices = supportedServices
681+
self.supportedServiceLoading = false
682+
}, 50)
683+
},
684+
handleForVpcChange (forVpc) {
685+
this.forVpc = forVpc
686+
this.updateSupportedServices()
687+
},
688+
handleLbTypeChange (lbType) {
689+
this.lbType = lbType
690+
this.updateSupportedServices()
656691
},
657692
handleSupportedServiceChange (service, checked, provider) {
658693
if (service === 'SourceNat') {
@@ -696,13 +731,14 @@ export default {
696731
providers.forEach(function (prvdr, idx) {
697732
if (prvdr === 'VirtualRouter') {
698733
self.isVirtualRouterForAtLeastOneService = true
699-
if (self.serviceOfferings.length === 0) {
700-
self.fetchServiceOfferingData()
701-
}
702734
}
703735
if (prvdr === 'VpcVirtualRouter') {
704736
self.isVpcVirtualRouterForAtLeastOneService = true
705737
}
738+
if ((self.isVirtualRouterForAtLeastOneService || self.isVpcVirtualRouterForAtLeastOneService) &&
739+
self.serviceOfferings.length === 0) {
740+
self.fetchServiceOfferingData()
741+
}
706742
})
707743
},
708744
handleSubmit (e) {
@@ -724,7 +760,7 @@ export default {
724760
var selectedServices = null
725761
var keys = Object.keys(values)
726762
const detailsKey = ['promiscuousmode', 'macaddresschanges', 'forgedtransmits', 'maclearning']
727-
const ignoredKeys = [...detailsKey, 'state', 'status', 'allocationstate', 'forvpc', 'specifyvlan', 'ispublic', 'domainid', 'zoneid', 'egressdefaultpolicy', 'isolation', 'supportspublicaccess']
763+
const ignoredKeys = [...detailsKey, 'state', 'status', 'allocationstate', 'forvpc', 'lbType', 'specifyvlan', 'ispublic', 'domainid', 'zoneid', 'egressdefaultpolicy', 'isolation', 'supportspublicaccess']
728764
keys.forEach(function (key, keyIndex) {
729765
if (self.isSupportedServiceObject(values[key])) {
730766
if (selectedServices == null) {

‎ui/src/views/offering/AddVpcOffering.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,7 @@
4848
v-decorator="['service.'+item.name, {}]"
4949
:resourceKey="item.name"
5050
:checkBoxLabel="item.description"
51-
:checkBoxDecorator="'service.' + item.name"
5251
:selectOptions="item.provider"
53-
:selectDecorator="item.name + '.provider'"
5452
@handle-checkselectpair-change="handleSupportedServiceChange"/>
5553
</a-list-item>
5654
</a-list>

0 commit comments

Comments
 (0)