mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
wip changes for add offerings 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
cc4b403e09
commit
39f6f23ac1
93
ui/src/components/CheckBoxSelectPair.vue
Normal file
93
ui/src/components/CheckBoxSelectPair.vue
Normal file
@ -0,0 +1,93 @@
|
||||
// Licensed to the Apache Software Foundation (ASF) under one
|
||||
// or more contributor license agreements. See the NOTICE file
|
||||
// distributed with this work for additional information
|
||||
// regarding copyright ownership. The ASF licenses this file
|
||||
// to you under the Apache License, Version 2.0 (the
|
||||
// "License"); you may not use this file except in compliance
|
||||
// with the License. You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing,
|
||||
// software distributed under the License is distributed on an
|
||||
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
// KIND, either express or implied. See the License for the
|
||||
// specific language governing permissions and limitations
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-checkbox class="pair-checkbox" @change="handleCheckChange">
|
||||
{{ resourceTitle }}
|
||||
</a-checkbox>
|
||||
<a-form-item class="pair-select-container" :label="$t('label.provider')" v-if="this.checked">
|
||||
<a-select
|
||||
v-decorator="[resourceTitle + '.provider', {
|
||||
initialValue: resourceOptions[0].name
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}">
|
||||
<a-select-option v-for="(opt) in resourceOptions" :key="opt.name">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'CheckBoxSelectPair',
|
||||
props: {
|
||||
resourceKey: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
resourceTitle: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
resourceOptions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checked: false,
|
||||
selectedOption: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arrayHasItems (array) {
|
||||
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
|
||||
},
|
||||
handleCheckChange (e) {
|
||||
this.checked = e.target.checked
|
||||
if (this.checked && this.arrayHasItems(this.resourceOptions)) {
|
||||
// console.log(this.resourceOptions[0].name)
|
||||
this.selectedOption = this.resourceOptions[0].name
|
||||
}
|
||||
// console.log(e.target)
|
||||
this.$emit('handle-check-change', this.resourceKey, this.checked)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pair-checkbox {
|
||||
width: 20vw;
|
||||
}
|
||||
.pair-select-container {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-left: 5vw;
|
||||
margin-bottom: 0;
|
||||
width: 25vw
|
||||
}
|
||||
</style>
|
||||
@ -326,10 +326,22 @@
|
||||
v-decorator="['hosttags', {}]"
|
||||
:placeholder="this.$t('label.hosttags')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetags')" v-if="this.isAdmin()">
|
||||
<a-input
|
||||
<a-form-item :label="$t('label.storage.tags')" v-if="this.isAdmin()">
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-decorator="['storagetags', {}]"
|
||||
:placeholder="this.$t('label.storagetags')"/>
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="storageTagLoading"
|
||||
:placeholder="this.$t('label.storage.tags')"
|
||||
v-if="this.isAdmin()">
|
||||
<a-select-option v-for="(opt) in this.storageTags" :key="opt.name">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cpucap')">
|
||||
<a-switch v-decorator="['iscpucap']" />
|
||||
@ -337,7 +349,7 @@
|
||||
<a-form-item :label="$t('label.volatile')">
|
||||
<a-switch v-decorator="['isvolatile']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.deploymentplanner')">
|
||||
<a-form-item :label="$t('label.deploymentplanner')" v-if="this.isAdmin()">
|
||||
<a-select
|
||||
v-decorator="['deploymentplanner', {
|
||||
rules: [
|
||||
@ -345,7 +357,8 @@
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
]
|
||||
],
|
||||
initialValue: 0
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
@ -354,8 +367,7 @@
|
||||
}"
|
||||
:loading="deploymentPlannerLoading"
|
||||
:placeholder="this.$t('label.deploymentplanner')"
|
||||
@change="val => { this.handleDeploymentPlannerChange(this.deploymentPlanners[val]) }"
|
||||
v-if="this.isAdmin()">
|
||||
@change="val => { this.handleDeploymentPlannerChange(this.deploymentPlanners[val]) }">
|
||||
<a-select-option v-for="(opt, optIndex) in this.deploymentPlanners" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
@ -492,6 +504,8 @@ export default {
|
||||
zones: [],
|
||||
zoneLoading: false,
|
||||
selectedDeployementPlanner: null,
|
||||
storageTags: [],
|
||||
storageTagLoading: false,
|
||||
deploymentPlanners: [],
|
||||
deploymentPlannerLoading: false,
|
||||
plannerModeVisible: false,
|
||||
@ -538,6 +552,7 @@ export default {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
if (this.isAdmin()) {
|
||||
this.fetchStorageTagData()
|
||||
this.fetchDeploymentPlannerData()
|
||||
}
|
||||
},
|
||||
@ -570,6 +585,24 @@ export default {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
fetchStorageTagData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.storageTagLoading = true
|
||||
api('listStorageTags', params).then(json => {
|
||||
const tags = json.liststoragetagsresponse.storagetag
|
||||
if (this.arrayHasItems(tags)) {
|
||||
for (var i in tags) {
|
||||
var tag = {}
|
||||
tag.id = tags[i].name
|
||||
tag.name = tags[i].name
|
||||
this.storageTags.push(tag)
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.storageTagLoading = false
|
||||
})
|
||||
},
|
||||
fetchDeploymentPlannerData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetype')">
|
||||
<a-form-item :label="$t('label.storage.type')">
|
||||
<a-radio-group
|
||||
v-decorator="['storagetype', {
|
||||
initialValue: this.storageType
|
||||
@ -51,7 +51,7 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.provisioningtype')">
|
||||
<a-form-item :label="$t('label.disk.provisioningtype')">
|
||||
<a-radio-group
|
||||
v-decorator="['provisioningtype', {
|
||||
initialValue: this.provisioningType
|
||||
@ -225,6 +225,23 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storage.tags')" v-if="this.isAdmin()">
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-decorator="['storagetags', {}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="storageTagLoading"
|
||||
:placeholder="this.$t('label.storage.tags')"
|
||||
v-if="this.isAdmin()">
|
||||
<a-select-option v-for="(opt) in this.storageTags" :key="opt.name">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic']" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
</a-form-item>
|
||||
@ -307,6 +324,8 @@ export default {
|
||||
writeCacheType: 'nodiskcache',
|
||||
selectedDomains: [],
|
||||
selectedZones: [],
|
||||
storageTags: [],
|
||||
storageTagLoading: false,
|
||||
isPublic: true,
|
||||
domains: [],
|
||||
domainLoading: false,
|
||||
@ -333,10 +352,16 @@ export default {
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
if (this.isAdmin()) {
|
||||
this.fetchStorageTagData()
|
||||
}
|
||||
},
|
||||
isAdmin () {
|
||||
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||
},
|
||||
arrayHasItems (array) {
|
||||
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
|
||||
},
|
||||
fetchDomainData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
@ -360,6 +385,24 @@ export default {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
fetchStorageTagData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.storageTagLoading = true
|
||||
api('listStorageTags', params).then(json => {
|
||||
const tags = json.liststoragetagsresponse.storagetag
|
||||
if (this.arrayHasItems(tags)) {
|
||||
for (var i in tags) {
|
||||
var tag = {}
|
||||
tag.id = tags[i].name
|
||||
tag.name = tags[i].name
|
||||
this.storageTags.push(tag)
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.storageTagLoading = false
|
||||
})
|
||||
},
|
||||
handleStorageTypeChange (val) {
|
||||
this.storageType = val
|
||||
},
|
||||
|
||||
@ -133,6 +133,71 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.supported.services')">
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-list itemLayout="horizontal" :dataSource="this.supportedServices">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<CheckBoxSelectPair
|
||||
:resourceKey="item.name"
|
||||
:resourceTitle="item.description"
|
||||
:resourceOptions="item.provider"
|
||||
@handle-check-change="handleSupportedServiceChange"/>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('serviceofferingid')">
|
||||
<a-select
|
||||
v-decorator="['serviceofferingid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
],
|
||||
initialValue: 0
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="serviceOfferingLoading"
|
||||
:placeholder="this.$t('serviceofferingid')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.serviceOfferings" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('redundant.router.capability')" v-if="this.redundantRouterCapabilityVisible">
|
||||
<a-switch v-decorator="['redundant.router.capability']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('service.SourceNat.sourceNatType')" v-if="this.sourceNatTypeVisible">
|
||||
<a-radio-group
|
||||
v-decorator="['sourcenattype', {
|
||||
initialValue: 'peraccount'
|
||||
}]"
|
||||
buttonStyle="solid">
|
||||
<a-radio-button value="peraccount">
|
||||
{{ $t('label.peraccount') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="perzone">
|
||||
{{ $t('label.perzone') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('service.StaticNat.elasticIp')" v-if="this.elasticIpCheckVisible">
|
||||
<a-switch v-decorator="['staticnatelasticip']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('StaticNat.associatePublicIP')" v-if="this.associatePublicIPCheckVisible">
|
||||
<a-switch v-decorator="['staticnatassociatepublicip']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('supportsstrechedl2subnet')" v-if="this.supportsStrechedL2SubnetVisible">
|
||||
<a-switch v-decorator="['supportsstrechedl2subnet']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('supportspublicaccess')" v-if="this.supportsPublicAccessVisible">
|
||||
<a-switch v-decorator="['supportspublicaccess']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.conservemode')">
|
||||
<a-switch v-decorator="['isconservemode']" :checked="this.isConserveMode" />
|
||||
</a-form-item>
|
||||
@ -206,10 +271,12 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
|
||||
|
||||
export default {
|
||||
name: 'AddNetworkOffering',
|
||||
components: {
|
||||
CheckBoxSelectPair
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -219,6 +286,10 @@ export default {
|
||||
forgedTransmits: '',
|
||||
selectedDomains: [],
|
||||
selectedZones: [],
|
||||
supportedServices: [],
|
||||
supportedServiceLoading: false,
|
||||
serviceOfferings: [],
|
||||
serviceOfferingLoading: false,
|
||||
isConserveMode: true,
|
||||
isPublic: true,
|
||||
domains: [],
|
||||
@ -246,6 +317,8 @@ export default {
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
this.fetchSupportedServiceData()
|
||||
this.fetchServiceOfferingData()
|
||||
},
|
||||
isAdmin () {
|
||||
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||
@ -285,6 +358,77 @@ export default {
|
||||
handleForgedTransmitsChange (val) {
|
||||
this.forgedTransmits = val
|
||||
},
|
||||
fetchSupportedServiceData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.supportedServiceLoading = true
|
||||
this.supportedServices = []
|
||||
api('listSupportedNetworkServices', params).then(json => {
|
||||
this.supportedServices = json.listsupportednetworkservicesresponse.networkservice
|
||||
for (var i in this.supportedServices) {
|
||||
var networkServiceObj = this.supportedServices[i]
|
||||
var serviceName = networkServiceObj.name
|
||||
var serviceDisplayName = ''
|
||||
|
||||
// Sanitize names
|
||||
switch (serviceName) {
|
||||
case 'Vpn':
|
||||
serviceDisplayName = this.$t('label.vpn')
|
||||
break
|
||||
case 'Dhcp':
|
||||
serviceDisplayName = this.$t('label.dhcp')
|
||||
break
|
||||
case 'Dns':
|
||||
serviceDisplayName = this.$t('label.dns')
|
||||
break
|
||||
case 'Lb':
|
||||
serviceDisplayName = this.$t('label.load.balancer')
|
||||
break
|
||||
case 'SourceNat':
|
||||
serviceDisplayName = this.$t('label.source.nat')
|
||||
break
|
||||
case 'StaticNat':
|
||||
serviceDisplayName = this.$t('label.static.nat')
|
||||
break
|
||||
case 'PortForwarding':
|
||||
serviceDisplayName = this.$t('label.port.forwarding')
|
||||
break
|
||||
case 'UserData':
|
||||
serviceDisplayName = this.$t('label.user.data')
|
||||
break
|
||||
case 'Connectivity':
|
||||
serviceDisplayName = this.$t('label.virtual.networking')
|
||||
break
|
||||
default:
|
||||
serviceDisplayName = serviceName
|
||||
break
|
||||
}
|
||||
this.supportedServices[i].description = serviceDisplayName
|
||||
console.log(this.supportedServices[i])
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSupportedServiceChange (service, checked) {
|
||||
if (service === 'Connectivity') {
|
||||
this.regionLevelVpcVisible = checked
|
||||
this.distributedRouterVisible = checked
|
||||
}
|
||||
if (service === 'SourceNat') {
|
||||
this.redundantRouterCapabilityVisible = checked
|
||||
}
|
||||
},
|
||||
fetchServiceOfferingData () {
|
||||
const params = {}
|
||||
params.issystem = true
|
||||
params.systemvmtype = 'domainrouter'
|
||||
this.supportedServiceLoading = true
|
||||
api('listServiceOfferings', params).then(json => {
|
||||
const listServiceOfferings = json.listserviceofferingsresponse.serviceoffering
|
||||
this.serviceOfferings = this.serviceOfferings.concat(listServiceOfferings)
|
||||
}).finally(() => {
|
||||
this.supportedServiceLoading = false
|
||||
})
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
@ -302,5 +446,24 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.form-layout {
|
||||
width: 60vw;
|
||||
|
||||
@media (min-width: 450px) {
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
.supported-services-container {
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,7 +36,29 @@
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
|
||||
<a-form-item :label="$t('label.supported.services')">
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-list itemLayout="horizontal" :dataSource="this.supportedServices">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<CheckBoxSelectPair
|
||||
:resourceKey="item.name"
|
||||
:resourceTitle="item.description"
|
||||
:resourceOptions="item.provider"
|
||||
@handle-check-change="handleSupportedServiceChange"/>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('regionlevelvpc')" v-if="this.regionLevelVpcVisible">
|
||||
<a-switch v-decorator="['regionlevelvpc']" defaultChecked="true" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('distributedrouter')" v-if="this.distributedRouterVisible">
|
||||
<a-switch v-decorator="['distributedrouter']" defaultChecked="true" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('redundant.router.capability')" v-if="this.redundantRouterCapabilityVisible">
|
||||
<a-switch v-decorator="['redundant.router.capability']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('ispublic')" v-if="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic']" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('domainid')" v-if="!this.isPublic">
|
||||
@ -101,10 +123,12 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
|
||||
|
||||
export default {
|
||||
name: 'AddVpcOffering',
|
||||
components: {
|
||||
CheckBoxSelectPair
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -116,7 +140,12 @@ export default {
|
||||
domainLoading: false,
|
||||
zones: [],
|
||||
zoneLoading: false,
|
||||
loading: false
|
||||
loading: false,
|
||||
supportedServices: [],
|
||||
supportedServiceLoading: false,
|
||||
regionLevelVpcVisible: false,
|
||||
distributedRouterVisible: false,
|
||||
redundantRouterCapabilityVisible: false
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
@ -137,6 +166,7 @@ export default {
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
this.fetchSupportedServiceData()
|
||||
},
|
||||
isAdmin () {
|
||||
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||
@ -164,6 +194,265 @@ export default {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
fetchSupportedServiceData () {
|
||||
// const params = {}
|
||||
// params.listAll = true
|
||||
// this.supportedServiceLoading = true
|
||||
// api('listSupportedNetworkServices', params).then(json => {
|
||||
// const networkServiceObjs = json.listsupportednetworkservicesresponse.networkservice
|
||||
// var fields = {}; var providerCanenableindividualserviceMap = {}; var providerServicesMap = {}; var providerDropdownsForciblyChangedTogether = {}
|
||||
// for (i in networkServiceObjs) {
|
||||
// var networkServiceObj = networkServiceObjs[i]
|
||||
// var serviceName = networkServiceObj.name;
|
||||
// var providerObjs = networkServiceObj.provider;
|
||||
// var serviceDisplayName;
|
||||
|
||||
// // Sanitize names
|
||||
// switch (serviceName) {
|
||||
// case 'Vpn':
|
||||
// serviceDisplayName = _l('label.vpn');
|
||||
// break;
|
||||
// case 'Dhcp':
|
||||
// serviceDisplayName = _l('label.dhcp');
|
||||
// break;
|
||||
// case 'Dns':
|
||||
// serviceDisplayName = _l('label.dns');
|
||||
// break;
|
||||
// case 'Lb':
|
||||
// serviceDisplayName = _l('label.load.balancer');
|
||||
// break;
|
||||
// case 'SourceNat':
|
||||
// serviceDisplayName = _l('label.source.nat');
|
||||
// break;
|
||||
// case 'StaticNat':
|
||||
// serviceDisplayName = _l('label.static.nat');
|
||||
// break;
|
||||
// case 'PortForwarding':
|
||||
// serviceDisplayName = _l('label.port.forwarding');
|
||||
// break;
|
||||
// case 'SecurityGroup':
|
||||
// serviceDisplayName = _l('label.security.groups');
|
||||
// break;
|
||||
// case 'UserData':
|
||||
// serviceDisplayName = _l('label.user.data');
|
||||
// break;
|
||||
// case 'Connectivity':
|
||||
// serviceDisplayName = _l('label.virtual.networking');
|
||||
// break;
|
||||
// default:
|
||||
// serviceDisplayName = serviceName;
|
||||
// break;
|
||||
// }
|
||||
|
||||
// var id = {
|
||||
// isEnabled: 'service' + '.' + serviceName + '.' + 'isEnabled',
|
||||
// capabilities: 'service' + '.' + serviceName + '.' + 'capabilities',
|
||||
// provider: 'service' + '.' + serviceName + '.' + 'provider'
|
||||
// };
|
||||
|
||||
// serviceCheckboxNames.push(id.isEnabled);
|
||||
|
||||
// fields[id.isEnabled] = {
|
||||
// label: serviceDisplayName,
|
||||
// isBoolean: true
|
||||
// };
|
||||
// serviceFields.push(id.isEnabled);
|
||||
|
||||
// if (providerObjs != null && providerObjs.length > 1) { //present provider dropdown when there are multiple providers for a service
|
||||
// fields[id.provider] = {
|
||||
// label: serviceDisplayName + ' Provider',
|
||||
// isHidden: true,
|
||||
// dependsOn: id.isEnabled,
|
||||
// select: function(args) {
|
||||
// //Virtual Router needs to be the first choice in provider dropdown (Bug 12509)
|
||||
// var items = [];
|
||||
// for (j in providerObjs) {
|
||||
// var providerObj = providerObjs[j]
|
||||
// if (this.name == "VirtualRouter")
|
||||
// items.unshift({
|
||||
// id: this.name,
|
||||
// description: this.name
|
||||
// });
|
||||
// else
|
||||
// items.push({
|
||||
// id: this.name,
|
||||
// description: this.name
|
||||
// });
|
||||
|
||||
// if (!(this.name in providerCanenableindividualserviceMap))
|
||||
// providerCanenableindividualserviceMap[this.name] = this.canenableindividualservice;
|
||||
|
||||
// if (!(this.name in providerServicesMap))
|
||||
// providerServicesMap[this.name] = [serviceName];
|
||||
// else
|
||||
// providerServicesMap[this.name].push(serviceName);
|
||||
// }
|
||||
|
||||
// args.response.success({
|
||||
// data: items
|
||||
// });
|
||||
|
||||
// // Disable VPC virtual router by default
|
||||
// args.$select.find('option[value=VpcVirtualRouter]').attr('disabled', true);
|
||||
|
||||
// args.$select.change(function() {
|
||||
// var $thisProviderDropdown = $(this);
|
||||
// var providerName = $(this).val();
|
||||
// var canenableindividualservice = providerCanenableindividualserviceMap[providerName];
|
||||
// if (canenableindividualservice == false) { //This provider can NOT enable individual service, therefore, force all services supported by this provider have this provider selected in provider dropdown
|
||||
// var serviceNames = providerServicesMap[providerName];
|
||||
// if (serviceNames != null && serviceNames.length > 1) {
|
||||
// providerDropdownsForciblyChangedTogether = {}; //reset
|
||||
// $(serviceNames).each(function() {
|
||||
// var providerDropdownId = 'service' + '.' + this + '.' + 'provider';
|
||||
// providerDropdownsForciblyChangedTogether[providerDropdownId] = 1;
|
||||
// $("select[name='" + providerDropdownId + "']").val(providerName);
|
||||
// });
|
||||
// }
|
||||
// } else { //canenableindividualservice == true
|
||||
// if (this.name in providerDropdownsForciblyChangedTogether) { //if this provider dropdown is one of provider dropdowns forcibly changed together earlier, make other forcibly changed provider dropdowns restore default option (i.e. 1st option in dropdown)
|
||||
// for (var key in providerDropdownsForciblyChangedTogether) {
|
||||
// if (key == this.name)
|
||||
// continue; //skip to next item in for loop
|
||||
// else
|
||||
// $("select[name='" + key + "'] option:first").attr("selected", "selected");
|
||||
// }
|
||||
// providerDropdownsForciblyChangedTogether = {}; //reset
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
// } else if (providerObjs != null && providerObjs.length == 1) { //present hidden field when there is only one provider for a service
|
||||
// fields[id.provider] = {
|
||||
// label: serviceDisplayName + ' Provider',
|
||||
// isHidden: true,
|
||||
// defaultValue: providerObjs[0].name
|
||||
// };
|
||||
// }
|
||||
// });
|
||||
// this.supportedServices = this.supportedServices.concat(networkServiceObjs)
|
||||
// }).finally(() => {
|
||||
// this.supportedServiceLoading = false
|
||||
// })
|
||||
this.supportedServices = []
|
||||
this.supportedServices.push({
|
||||
name: 'Dhcp',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'Dns',
|
||||
provider: [{ name: 'VpcVirtualRouter' }]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'Lb',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' },
|
||||
{ name: 'InternalLbVm' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'Gateway',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' },
|
||||
{ name: 'BigSwitchBcf' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'StaticNat',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' },
|
||||
{ name: 'BigSwitchBcf' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'SourceNat',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' },
|
||||
{ name: 'BigSwitchBcf' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'NetworkACL',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' },
|
||||
{ name: 'BigSwitchBcf' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'PortForwarding',
|
||||
provider: [{ name: 'VpcVirtualRouter' }]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'UserData',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' },
|
||||
{ name: 'ConfigDrive' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'Vpn',
|
||||
provider: [
|
||||
{ name: 'VpcVirtualRouter' },
|
||||
{ name: 'BigSwitchBcf' }
|
||||
]
|
||||
})
|
||||
this.supportedServices.push({
|
||||
name: 'Connectivity',
|
||||
provider: [
|
||||
{ name: 'BigSwitchBcf' },
|
||||
{ name: 'NiciraNvp' },
|
||||
{ name: 'Ovs' },
|
||||
{ name: 'JuniperContrailVpcRouter' }
|
||||
]
|
||||
})
|
||||
for (var i in this.supportedServices) {
|
||||
var serviceName = this.supportedServices[i].name
|
||||
var serviceDisplayName
|
||||
// Sanitize names
|
||||
switch (serviceName) {
|
||||
case 'Vpn':
|
||||
serviceDisplayName = this.$t('label.vpn')
|
||||
break
|
||||
case 'Dhcp':
|
||||
serviceDisplayName = this.$t('label.dhcp')
|
||||
break
|
||||
case 'Dns':
|
||||
serviceDisplayName = this.$t('label.dns')
|
||||
break
|
||||
case 'Lb':
|
||||
serviceDisplayName = this.$t('label.load.balancer')
|
||||
break
|
||||
case 'SourceNat':
|
||||
serviceDisplayName = this.$t('label.source.nat')
|
||||
break
|
||||
case 'StaticNat':
|
||||
serviceDisplayName = this.$t('label.static.nat')
|
||||
break
|
||||
case 'PortForwarding':
|
||||
serviceDisplayName = this.$t('label.port.forwarding')
|
||||
break
|
||||
case 'UserData':
|
||||
serviceDisplayName = this.$t('label.user.data')
|
||||
break
|
||||
default:
|
||||
serviceDisplayName = serviceName
|
||||
break
|
||||
}
|
||||
this.supportedServices[i].description = serviceDisplayName
|
||||
}
|
||||
},
|
||||
handleSupportedServiceChange (service, checked) {
|
||||
if (service === 'Connectivity') {
|
||||
this.regionLevelVpcVisible = checked
|
||||
this.distributedRouterVisible = checked
|
||||
}
|
||||
if (service === 'SourceNat') {
|
||||
this.redundantRouterCapabilityVisible = checked
|
||||
}
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
@ -171,7 +460,34 @@ export default {
|
||||
return
|
||||
}
|
||||
var params = {}
|
||||
console.log(params)
|
||||
params.name = values.name
|
||||
params.description = values.description
|
||||
var ispublic = values.ispublic
|
||||
if (ispublic === true) {
|
||||
params.domainid = 'public'
|
||||
} else {
|
||||
var domainIndexes = values.domainid
|
||||
var domainId = 'public'
|
||||
if (domainIndexes && domainIndexes.length > 0) {
|
||||
var domainIds = []
|
||||
for (var i = 0; i < domainIndexes.length; i++) {
|
||||
domainIds = domainIds.concat(this.domains[domainIndexes[i]].id)
|
||||
}
|
||||
domainId = domainIds.join(',')
|
||||
}
|
||||
params.domainid = domainId
|
||||
}
|
||||
var zoneIndexes = values.zoneid
|
||||
var zoneId = 'all'
|
||||
if (zoneIndexes && zoneIndexes.length > 0) {
|
||||
var zoneIds = []
|
||||
for (var j = 0; j < zoneIndexes.length; j++) {
|
||||
zoneIds = zoneIds.concat(this.zones[zoneIndexes[j]].id)
|
||||
}
|
||||
zoneId = zoneIds.join(',')
|
||||
params.zoneid = zoneId
|
||||
}
|
||||
console.log(values, params)
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
@ -181,5 +497,24 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.form-layout {
|
||||
width: 60vw;
|
||||
|
||||
@media (min-width: 450px) {
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
.supported-services-container {
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -251,23 +251,24 @@ export default {
|
||||
zoneId = zoneIds.join(',')
|
||||
}
|
||||
params.zoneid = zoneId
|
||||
console.log(values, params)
|
||||
|
||||
this.loading = true
|
||||
api('update' + this.offeringType, params).then(json => {
|
||||
this.$emit('refresh-data')
|
||||
this.$notification.success({
|
||||
message: this.$t('label.action.update.offering.access'),
|
||||
description: this.$t('label.action.update.offering.access')
|
||||
})
|
||||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: 'Request Failed',
|
||||
description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
|
||||
})
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.closeAction()
|
||||
})
|
||||
// this.loading = true
|
||||
// api('update' + this.offeringType, params).then(json => {
|
||||
// this.$emit('refresh-data')
|
||||
// this.$notification.success({
|
||||
// message: this.$t('label.action.update.offering.access'),
|
||||
// description: this.$t('label.action.update.offering.access')
|
||||
// })
|
||||
// }).catch(error => {
|
||||
// this.$notification.error({
|
||||
// message: 'Request Failed',
|
||||
// description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
|
||||
// })
|
||||
// }).finally(() => {
|
||||
// this.loading = false
|
||||
// this.closeAction()
|
||||
// })
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user