Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

ui: fix add network offering for vpc #5809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yadvr merged 3 commits into from
Dec 30, 2021
Merged

ui: fix add network offering for vpc #5809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
74bf140
ui: fix add network offering for vpc
shwstppr Dec 24, 2021
3aca1b2
fix issues getting with making select element update on options chang…
Dec 27, 2021
ddfa388
fixes
shwstppr Dec 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 21 additions & 17 deletions 38 ui/src/components/CheckBoxSelectPair.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
<a-row :gutter="6">
<a-col :md="24" :lg="layout === 'horizontal' ? 12 : 24">
<a-checkbox
v-decorator="[checkBoxDecorator, {}]"
:checked="checked"
@change="handleCheckChange">
{{ checkBoxLabel }}
Expand All @@ -31,8 +30,7 @@
v-if="reversed != checked"
:label="selectLabel">
<a-select
v-decorator="[selectDecorator, { initialValue: selectedOption ? selectedOption : getSelectInitialValue()}]"
:defaultValue="selectDecorator ? undefined : selectedOption ? selectedOption : getSelectInitialValue()"
v-model="selectedOption"
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
Expand Down Expand Up @@ -69,10 +67,6 @@ export default {
type: String,
required: true
},
checkBoxDecorator: {
type: String,
default: ''
},
defaultCheckBoxValue: {
type: Boolean,
default: false
Expand All @@ -85,10 +79,6 @@ export default {
type: String,
default: ''
},
selectDecorator: {
type: String,
default: ''
},
reversed: {
type: Boolean,
default: false
Expand All @@ -97,12 +87,21 @@ export default {
data () {
return {
checked: false,
selectedOption: null
selectedOption: null,
selectOptionsTimer: null
}
},
created () {
this.checked = this.defaultCheckBoxValue
},
watch: {
selectOptions () {
clearTimeout(this.selectOptionsTimer)
this.selectOptionsTimer = setTimeout(() => {
this.handleSelectOptionsUpdated()
}, 50)
}
},
computed: {
selectSource () {
return this.selectOptions.map(item => {
Expand All @@ -118,18 +117,23 @@ export default {
arrayHasItems (array) {
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
},
getSelectInitialValue () {
const initialValue = this.selectSource?.filter(x => x.enabled !== false)?.[0]?.id || ''
this.handleSelectChange(initialValue)
return initialValue
},
handleCheckChange (e) {
this.checked = e.target.checked
if (this.checked && !this.selectedOption) {
this.selectedOption = this.selectSource?.filter(x => x.enabled !== false)?.[0]?.id || null
}
this.$emit('handle-checkselectpair-change', this.resourceKey, this.checked, this.selectedOption)
},
handleSelectChange (val) {
this.selectedOption = val
this.$emit('handle-checkselectpair-change', this.resourceKey, this.checked, this.selectedOption)
},
handleSelectOptionsUpdated () {
if (!this.checked) return
var enabledOptions = this.selectSource?.filter(x => x.enabled !== false) || []
if (this.selectedOption && !enabledOptions.includes(this.selectedOption)) {
this.handleSelectChange(enabledOptions[0]?.id || null)
}
}
}
}
Expand Down
114 changes: 75 additions & 39 deletions 114 ui/src/views/offering/AddNetworkOffering.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,25 +89,11 @@
</a-row>
<a-form-item v-if="guestType === 'isolated'">
<tooltip-label slot="label" :title="$t('label.vpc')" :tooltip="apiParams.forvpc.description"/>
<a-switch v-decorator="['forvpc', {initialValue: forVpc}]" :defaultChecked="forVpc" @change="val => { handleForVpcChange(val) }" />
<a-switch v-decorator="['forvpc']" :checked="forVpc" @change="val => { handleForVpcChange(val) }" />
</a-form-item>
<a-form-item :label="$t('label.userdatal2')" v-if="guestType === 'l2'">
<a-switch v-decorator="['userdatal2', {initialValue: false}]" />
</a-form-item>
<a-form-item :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
<a-radio-group
v-decorator="[' ', {
initialValue: 'publicLb'
}]"
buttonStyle="solid">
<a-radio-button value="publicLb">
{{ $t('label.public.lb') }}
</a-radio-button>
<a-radio-button value="internalLb">
{{ $t('label.internal.lb') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item>
Expand Down Expand Up @@ -202,15 +188,28 @@
v-decorator="['service.'+item.name, {}]"
:resourceKey="item.name"
:checkBoxLabel="item.description"
:checkBoxDecorator="'service.' + item.name"
:selectOptions="item.provider"
:selectDecorator="item.name + '.provider'"
:selectOptions="!supportedServiceLoading ? item.provider: []"
@handle-checkselectpair-change="handleSupportedServiceChange"/>
</a-list-item>
</a-list>
</div>
</a-form-item>
<a-form-item v-if="isVirtualRouterForAtLeastOneService">
<a-form-item :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
<a-radio-group
v-decorator="['lbType', {
initialValue: lbType
}]"
buttonStyle="solid"
@change="e => { handleLbTypeChange(e.target.value) }" >
<a-radio-button value="publicLb">
{{ $t('label.public.lb') }}
</a-radio-button>
<a-radio-button value="internalLb">
{{ $t('label.internal.lb') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="isVirtualRouterForAtLeastOneService || isVpcVirtualRouterForAtLeastOneService">
<tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
<a-select
v-decorator="['serviceofferingid', {
Expand Down Expand Up @@ -453,6 +452,7 @@ export default {
selectedDomains: [],
selectedZones: [],
forVpc: false,
lbType: 'publicLb',
macLearningValue: '',
supportedServices: [],
supportedServiceLoading: false,
Expand All @@ -463,6 +463,8 @@ export default {
sourceNatServiceChecked: false,
lbServiceChecked: false,
lbServiceProvider: '',
registeredServicePackages: [],
registeredServicePackageLoading: false,
isElasticIp: false,
staticNatServiceChecked: false,
staticNatServiceProvider: '',
Expand Down Expand Up @@ -531,6 +533,27 @@ export default {
},
handleGuestTypeChange (val) {
this.guestType = val
if (val === 'l2') {
this.forVpc = false
this.lbType = 'publicLb'
this.isVirtualRouterForAtLeastOneService = false
this.isVpcVirtualRouterForAtLeastOneService = false
this.serviceOfferings = []
this.serviceOfferingLoading = false
this.sourceNatServiceChecked = false
this.lbServiceChecked = false
this.lbServiceProvider = ''
this.registeredServicePackages = []
this.registeredServicePackageLoading = false
this.isElasticIp = false
this.staticNatServiceChecked = false
this.staticNatServiceProvider = ''
this.connectivityServiceChecked = false
this.firewallServiceChecked = false
this.firewallServiceProvider = ''
this.selectedServiceProviderMap = {}
this.updateSupportedServices()
}
},
fetchSupportedServiceData () {
const params = {}
Expand Down Expand Up @@ -594,18 +617,21 @@ export default {
this.supportedServices[i].provider = providers
this.supportedServices[i].description = serviceDisplayName
}
}).finally(() => {
this.supportedServiceLoading = false
this.updateSupportedServices()
})
},
fetchServiceOfferingData () {
const params = {}
params.issystem = true
params.systemvmtype = 'domainrouter'
this.supportedServiceLoading = true
this.serviceOfferingLoading = true
api('listServiceOfferings', params).then(json => {
const listServiceOfferings = json.listserviceofferingsresponse.serviceoffering
this.serviceOfferings = this.serviceOfferings.concat(listServiceOfferings)
}).finally(() => {
this.supportedServiceLoading = false
this.serviceOfferingLoading = false
})
},
fetchRegisteredServicePackageData () {
Expand All @@ -627,32 +653,41 @@ export default {
this.registeredServicePackageLoading = false
})
},
handleForVpcChange (forVpc) {
updateSupportedServices () {
this.supportedServiceLoading = true
var supportedServices = this.supportedServices
var self = this
this.forVpc = forVpc
this.supportedServices.forEach(function (svc, index) {
if (svc !== 'Connectivity') {
supportedServices.forEach(function (svc, index) {
if (svc.name !== 'Connectivity') {
var providers = svc.provider
providers.forEach(function (provider, providerIndex) {
if (self.forVpc) { // *** vpc ***
if (provider.name === 'InternalLbVm' || provider.name === 'VpcVirtualRouter' || provider.name === 'Netscaler' || provider.name === 'BigSwitchBcf' || provider.name === 'ConfigDrive') {
provider.enabled = true
} else {
provider.enabled = false
var enabledProviders = ['VpcVirtualRouter', 'Netscaler', 'BigSwitchBcf', 'ConfigDrive']
if (self.lbType === 'internalLb') {
enabledProviders.push('InternalLbVm')
}
provider.enabled = enabledProviders.includes(provider.name)
} else { // *** non-vpc ***
if (provider.name === 'InternalLbVm' || provider.name === 'VpcVirtualRouter') {
provider.enabled = false
} else {
provider.enabled = true
}
provider.enabled = !['InternalLbVm', 'VpcVirtualRouter'].includes(provider.name)
}
providers[providerIndex] = provider
})
svc.provider = providers
self.supportedServices[index] = svc
supportedServices[index] = svc
}
})
setTimeout(() => {
self.supportedServices = supportedServices
self.supportedServiceLoading = false
}, 50)
},
handleForVpcChange (forVpc) {
this.forVpc = forVpc
this.updateSupportedServices()
},
handleLbTypeChange (lbType) {
this.lbType = lbType
this.updateSupportedServices()
},
handleSupportedServiceChange (service, checked, provider) {
if (service === 'SourceNat') {
Expand Down Expand Up @@ -696,13 +731,14 @@ export default {
providers.forEach(function (prvdr, idx) {
if (prvdr === 'VirtualRouter') {
self.isVirtualRouterForAtLeastOneService = true
if (self.serviceOfferings.length === 0) {
self.fetchServiceOfferingData()
}
}
if (prvdr === 'VpcVirtualRouter') {
self.isVpcVirtualRouterForAtLeastOneService = true
}
if ((self.isVirtualRouterForAtLeastOneService || self.isVpcVirtualRouterForAtLeastOneService) &&
self.serviceOfferings.length === 0) {
self.fetchServiceOfferingData()
}
})
},
handleSubmit (e) {
Expand All @@ -724,7 +760,7 @@ export default {
var selectedServices = null
var keys = Object.keys(values)
const detailsKey = ['promiscuousmode', 'macaddresschanges', 'forgedtransmits', 'maclearning']
const ignoredKeys = [...detailsKey, 'state', 'status', 'allocationstate', 'forvpc', 'specifyvlan', 'ispublic', 'domainid', 'zoneid', 'egressdefaultpolicy', 'isolation', 'supportspublicaccess']
const ignoredKeys = [...detailsKey, 'state', 'status', 'allocationstate', 'forvpc', 'lbType', 'specifyvlan', 'ispublic', 'domainid', 'zoneid', 'egressdefaultpolicy', 'isolation', 'supportspublicaccess']
keys.forEach(function (key, keyIndex) {
if (self.isSupportedServiceObject(values[key])) {
if (selectedServices == null) {
Expand Down
2 changes: 0 additions & 2 deletions 2 ui/src/views/offering/AddVpcOffering.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,7 @@
v-decorator="['service.'+item.name, {}]"
:resourceKey="item.name"
:checkBoxLabel="item.description"
:checkBoxDecorator="'service.' + item.name"
:selectOptions="item.provider"
:selectDecorator="item.name + '.provider'"
@handle-checkselectpair-change="handleSupportedServiceChange"/>
</a-list-item>
</a-list>
Expand Down
Morty Proxy This is a proxified and sanitized view of the page, visit original site.