mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-02 20:02:29 +01:00
fix for check select pair and network offering form
Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Abhishek Kumar
Rohit Yadav
parent
05d1e394c3
commit
a961555fa9
@ -16,20 +16,21 @@
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div v-decorator="['service.' + resourceTitle, {}]">
|
||||
<a-checkbox class="pair-checkbox" @change="handleCheckChange">
|
||||
<div>
|
||||
<a-checkbox v-decorator="[checkDecorator, {}]" class="pair-checkbox" @change="handleCheckChange">
|
||||
{{ resourceTitle }}
|
||||
</a-checkbox>
|
||||
<a-form-item class="pair-select-container" :label="$t('label.provider')" v-if="this.checked">
|
||||
<a-form-item class="pair-select-container" :label="$t('serviceprovider')" v-if="this.checked">
|
||||
<a-select
|
||||
v-decorator="[resourceTitle + '.provider', {
|
||||
v-decorator="[selectDecorator, {
|
||||
initialValue: resourceOptions[0].name
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}">
|
||||
}"
|
||||
@change="val => { this.handleSelectChange(val) }">
|
||||
<a-select-option v-for="(opt) in resourceOptions" :key="opt.name" :disabled="!opt.enabled">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
@ -54,6 +55,14 @@ export default {
|
||||
resourceOptions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
checkDecorator: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
selectDecorator: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -71,7 +80,10 @@ export default {
|
||||
if (this.checked && this.arrayHasItems(this.resourceOptions)) {
|
||||
this.selectedOption = this.resourceOptions[0].name
|
||||
}
|
||||
this.$emit('handle-check-change', this.resourceKey, this.checked)
|
||||
this.$emit('handle-checkpair-change', this.resourceKey, this.checked, '')
|
||||
},
|
||||
handleSelectChange (val) {
|
||||
this.$emit('handle-checkpair-change', this.resourceKey, this.checked, val)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,13 +91,13 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pair-checkbox {
|
||||
width: 20vw;
|
||||
width: 18vw;
|
||||
}
|
||||
.pair-select-container {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-left: 5vw;
|
||||
margin-bottom: 0;
|
||||
width: 25vw
|
||||
width: 20vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,30 +27,28 @@
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter name' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Name')"/>
|
||||
:placeholder="this.$t('name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('description')">
|
||||
<a-form-item :label="$t('displaytext')">
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: 'Please enter description' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
:placeholder="this.$t('displaytext')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.networkrate.mbps')">
|
||||
<a-form-item :label="$t('networkrate')">
|
||||
<a-input
|
||||
v-decorator="['disksize', {
|
||||
rules: [{ required: true, message: 'Please enter disk size' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
v-decorator="['networkrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.networkrate.mbps')"/>
|
||||
:placeholder="this.$t('networkrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.guesttype')">
|
||||
<a-radio-group
|
||||
@ -60,31 +58,31 @@
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleGuestTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="isolated">
|
||||
{{ $t('label.isolated') }}
|
||||
{{ $t('isolated') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="l2">
|
||||
{{ $t('label.l2') }}
|
||||
{{ $t('l2') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="shared">
|
||||
{{ $t('label.shared') }}
|
||||
{{ $t('shared') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.persisitent')">
|
||||
<a-form-item :label="$t('ispersisitent')">
|
||||
<a-switch v-decorator="['ispersisitent', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.specifyvlan')">
|
||||
<a-form-item :label="$t('specifyvlan')">
|
||||
<a-switch v-decorator="['specifyvlan', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.vpc')" v-if="this.guestType === 'isolated'">
|
||||
<a-form-item :label="$t('forvpc')" v-if="this.guestType === 'isolated'">
|
||||
<a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="this.handleForVpcChange(val)" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('userdatal2')" v-if="this.guestType === 'l2'">
|
||||
<a-switch v-decorator="['userdatal2', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('load.balancer.type')" v-if="this.forVpc && this.lbServiceChecked">
|
||||
<a-form-item :label="$t('lbtype')" v-if="this.forVpc && this.lbServiceChecked">
|
||||
<a-radio-group
|
||||
v-decorator="['lbType', {
|
||||
v-decorator="['lbtype', {
|
||||
initialValue: 'publicLb'
|
||||
}]"
|
||||
buttonStyle="solid">
|
||||
@ -96,7 +94,7 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.promiscuousmode')">
|
||||
<a-form-item :label="$t('promiscuousmode')">
|
||||
<a-radio-group
|
||||
v-decorator="['promiscuousmode', {
|
||||
initialValue: this.promiscuousMode
|
||||
@ -104,17 +102,17 @@
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handlePromiscuousModeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
{{ $t('none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="accept">
|
||||
{{ $t('label.accept') }}
|
||||
{{ $t('accept') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="reject">
|
||||
{{ $t('label.reject') }}
|
||||
{{ $t('reject') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.macaddresschanges')">
|
||||
<a-form-item :label="$t('macaddresschanges')">
|
||||
<a-radio-group
|
||||
v-decorator="['macaddresschanges', {
|
||||
initialValue: this.macAddressChanges
|
||||
@ -122,17 +120,17 @@
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleMacAddressChangesChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
{{ $t('none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="accept">
|
||||
{{ $t('label.accept') }}
|
||||
{{ $t('accept') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="reject">
|
||||
{{ $t('label.reject') }}
|
||||
{{ $t('reject') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.forgedtransmits')">
|
||||
<a-form-item :label="$t('forgedtransmits')">
|
||||
<a-radio-group
|
||||
v-decorator="['forgedtransmits', {
|
||||
initialValue: this.forgedTransmits
|
||||
@ -140,17 +138,17 @@
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleForgedTransmitsChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
{{ $t('none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="accept">
|
||||
{{ $t('label.accept') }}
|
||||
{{ $t('accept') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="reject">
|
||||
{{ $t('label.reject') }}
|
||||
{{ $t('reject') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.supported.services')" v-if="this.guestType !== 'l2'">
|
||||
<a-form-item :label="$t('supportedservices')" v-if="this.guestType !== 'l2'">
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-list itemLayout="horizontal" :dataSource="this.supportedServices">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
@ -159,7 +157,9 @@
|
||||
:resourceKey="item.name"
|
||||
:resourceTitle="item.description"
|
||||
:resourceOptions="item.provider"
|
||||
@handle-check-change="handleSupportedServiceChange"/>
|
||||
:checkDecorator="'service.' + item.name"
|
||||
:selectDecorator="item.name + '.provider'"
|
||||
@handle-checkpair-change="handleSupportedServiceChange"/>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
@ -197,10 +197,10 @@
|
||||
}]"
|
||||
buttonStyle="solid">
|
||||
<a-radio-button value="peraccount">
|
||||
{{ $t('label.peraccount') }}
|
||||
{{ $t('peraccount') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="perzone">
|
||||
{{ $t('label.perzone') }}
|
||||
{{ $t('perzone') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
@ -223,14 +223,7 @@
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('service.Lb.netscaler.service.packages')" v-if="this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
|
||||
<a-select
|
||||
v-decorator="['netscalerservicepackages', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
]
|
||||
}]"
|
||||
v-decorator="['netscalerservicepackages', {}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
@ -248,7 +241,7 @@
|
||||
v-decorator="['netscalerservicepackagesdescription', {}]"
|
||||
:placeholder="this.$t('netscaler.service.packages.description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('service.Lb.lbIsolation')" v-if="this.lbServiceChecked">
|
||||
<a-form-item :label="$t('service.Lb.lbIsolation')" v-if="false">
|
||||
<a-radio-group
|
||||
v-decorator="['isolation', {
|
||||
initialValue: 'dedicated'
|
||||
@ -271,16 +264,16 @@
|
||||
<a-form-item :label="$t('service.Connectivity.supportsstrechedl2subnet')" v-if="this.connectivityServiceChecked">
|
||||
<a-switch v-decorator="['supportsstrechedl2subnet', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('service.Connectivity.supportspublicaccess')" v-if="this.connectivityServiceChecked">
|
||||
<a-form-item :label="$t('service.Connectivity.supportspublicaccess')" v-if="false">
|
||||
<a-switch v-decorator="['supportspublicaccess', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.conservemode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
|
||||
<a-switch v-decorator="['isconservemode', {initialValue: true}]" :defaultChecked="true" />
|
||||
<a-form-item :label="$t('conservemode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
|
||||
<a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.tags')">
|
||||
<a-form-item :label="$t('tags')">
|
||||
<a-input
|
||||
v-decorator="['tags', {}]"
|
||||
:placeholder="this.$t('label.networktags')"/>
|
||||
:placeholder="this.$t('networktags')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('availability')" v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
|
||||
<a-radio-group
|
||||
@ -330,7 +323,7 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
:placeholder="this.$t('domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
@ -358,7 +351,7 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
:placeholder="this.$t('zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
@ -528,7 +521,7 @@ export default {
|
||||
for (var j in this.supportedServices[i].provider) {
|
||||
var provider = this.supportedServices[i].provider[j]
|
||||
provider.description = provider.name
|
||||
provider.enabled = provider.canenableindividualservice
|
||||
provider.enabled = true
|
||||
if (provider.name === 'VpcVirtualRouter') {
|
||||
provider.enabled = false
|
||||
}
|
||||
@ -849,10 +842,10 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-layout {
|
||||
width: 60vw;
|
||||
width: 50vw;
|
||||
|
||||
@media (min-width: 450px) {
|
||||
width: 40vw;
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
.supported-services-container {
|
||||
|
||||
@ -44,7 +44,9 @@
|
||||
:resourceKey="item.name"
|
||||
:resourceTitle="item.description"
|
||||
:resourceOptions="item.provider"
|
||||
@handle-check-change="handleSupportedServiceChange"/>
|
||||
:checkDecorator="'service.' + item.name"
|
||||
:selectDecorator="item.name + '.provider'"
|
||||
@handle-checkpair-change="handleSupportedServiceChange"/>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
@ -78,7 +80,7 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
:placeholder="this.$t('domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
@ -106,7 +108,7 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
:placeholder="this.$t('zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
@ -170,6 +172,9 @@ export default {
|
||||
isAdmin () {
|
||||
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||
},
|
||||
isSupportedServiceObject (obj) {
|
||||
return (obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object && 'provider' in obj)
|
||||
},
|
||||
fetchDomainData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
@ -269,7 +274,7 @@ export default {
|
||||
})
|
||||
for (var i in this.supportedServices) {
|
||||
var serviceName = this.supportedServices[i].name
|
||||
var serviceDisplayName = 'label.' + serviceName
|
||||
var serviceDisplayName = serviceName
|
||||
// Sanitize names
|
||||
// switch (serviceName) {
|
||||
// case 'Vpn':
|
||||
@ -303,7 +308,7 @@ export default {
|
||||
this.supportedServices[i].description = serviceDisplayName
|
||||
}
|
||||
},
|
||||
handleSupportedServiceChange (service, checked) {
|
||||
handleSupportedServiceChange (service, checked, provider) {
|
||||
if (service === 'Connectivity') {
|
||||
this.connectivityServiceChecked = checked
|
||||
}
|
||||
@ -346,7 +351,16 @@ export default {
|
||||
if (zoneId) {
|
||||
params.zoneid = zoneId
|
||||
}
|
||||
var selectedServices = values.label
|
||||
var selectedServices = null
|
||||
var keys = Object.keys(values)
|
||||
keys.forEach(function (key, keyIndex) {
|
||||
if (this.isSupportedServiceObject(values[key])) {
|
||||
if (selectedServices == null) {
|
||||
selectedServices = {}
|
||||
}
|
||||
selectedServices[key] = values[key]
|
||||
}
|
||||
})
|
||||
if (selectedServices != null) {
|
||||
var supportedServices = Object.keys(selectedServices)
|
||||
params.supportedservices = supportedServices.join(',')
|
||||
@ -401,10 +415,10 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-layout {
|
||||
width: 60vw;
|
||||
width: 50vw;
|
||||
|
||||
@media (min-width: 450px) {
|
||||
width: 60vw;
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
.supported-services-container {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user