mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
initial work
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
5565b7659e
commit
cc4b403e09
@ -16,25 +16,629 @@
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
This must also check and handle for add system offering as it's the same API
|
||||
<div class="form-layout">
|
||||
<a-spin :spinning="loading">
|
||||
<a-form
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('name')">
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter name' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('description')">
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
rules: [{ required: true, message: 'Please enter description' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetype')">
|
||||
<a-radio-group
|
||||
v-decorator="['storagetype', {
|
||||
initialValue: this.storageType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleStorageTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="shared">
|
||||
{{ $t('label.shared') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="local">
|
||||
{{ $t('label.local') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.provisioningtype')">
|
||||
<a-radio-group
|
||||
v-decorator="['provisioningtype', {
|
||||
initialValue: this.provisioningType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="thin">
|
||||
{{ $t('label.thin') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="sparse">
|
||||
{{ $t('label.sparse') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="fat">
|
||||
{{ $t('label.fat') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.computeofferingtype')">
|
||||
<a-radio-group
|
||||
v-decorator="['computeofferingtype', {
|
||||
initialValue: this.computeOfferingType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleComputeOfferingTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="fixed">
|
||||
{{ $t('label.fixed') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="customconstrained">
|
||||
{{ $t('label.customconstrained') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="customunconstrained">
|
||||
{{ $t('label.customunconstrained') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cpucores')" v-if="this.computeOfferingType === 'fixed'">
|
||||
<a-input
|
||||
v-decorator="['cpucores', {
|
||||
rules: [{ required: true, message: 'Please enter value' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.cpucores')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cpuspeed')" v-if="this.computeOfferingType !== 'customunconstrained'">
|
||||
<a-input
|
||||
v-decorator="['cpuspeed', {
|
||||
rules: [{ required: true, message: 'Please enter value' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.cpuspeed')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.mincpucores')" v-if="this.computeOfferingType === 'customconstrained'">
|
||||
<a-input
|
||||
v-decorator="['mincpucores', {
|
||||
rules: [{ required: true, message: 'Please enter value' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.mincpucores')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.maxcpucores')" v-if="this.computeOfferingType === 'customconstrained'">
|
||||
<a-input
|
||||
v-decorator="['maxcpucores', {
|
||||
rules: [{ required: true, message: 'Please enter value' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.maxcpucores')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.memory.mb')" v-if="this.computeOfferingType === 'fixed'">
|
||||
<a-input
|
||||
v-decorator="['memory', {
|
||||
rules: [{ required: true, message: 'Please enter value' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.memory.mb')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.minmemory.mb')" v-if="this.computeOfferingType === 'customconstrained'">
|
||||
<a-input
|
||||
v-decorator="['minmemory', {
|
||||
rules: [{ required: true, message: 'Please enter value' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.minmemory.mb')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.maxmemory.mb')" v-if="this.computeOfferingType === 'customconstrained'">
|
||||
<a-input
|
||||
v-decorator="['maxmemory', {
|
||||
rules: [{ required: true, message: 'Please enter value' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.maxmemory.mb')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.qostype')">
|
||||
<a-radio-group
|
||||
v-decorator="['qostype', {
|
||||
initialValue: this.qosType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleQosTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="hypervisor">
|
||||
{{ $t('label.hypervisor') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="storage">
|
||||
{{ $t('label.storage') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.bytes.read.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskbytesreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.bytes.read.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.bytes.write.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskbyteswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.bytes.write.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.read.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskiopsreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.read.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.write.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskiopswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.write.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.custom.disk.iops')" v-if="this.qosType === 'storage'">
|
||||
<a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.min')" v-if="!this.isCustomizedDiskIops">
|
||||
<a-input
|
||||
v-decorator="['diskiopsmin', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.min')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.max')" v-if="!this.isCustomizedDiskIops">
|
||||
<a-input
|
||||
v-decorator="['diskiopsmax', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.max')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.hypervisor.snapshot.reserve')" v-if="this.qosType === 'storage'">
|
||||
<a-input
|
||||
v-decorator="['hypervisorsnapshotreserve', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.hypervisor.snapshot.reserve')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.offerha')">
|
||||
<a-switch v-decorator="['isofferha']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.hosttags')" v-if="this.isAdmin()">
|
||||
<a-input
|
||||
v-decorator="['hosttags', {}]"
|
||||
:placeholder="this.$t('label.hosttags')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetags')" v-if="this.isAdmin()">
|
||||
<a-input
|
||||
v-decorator="['storagetags', {}]"
|
||||
:placeholder="this.$t('label.storagetags')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cpucap')">
|
||||
<a-switch v-decorator="['iscpucap']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.volatile')">
|
||||
<a-switch v-decorator="['isvolatile']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.deploymentplanner')">
|
||||
<a-select
|
||||
v-decorator="['deploymentplanner', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="deploymentPlannerLoading"
|
||||
:placeholder="this.$t('label.deploymentplanner')"
|
||||
@change="val => { this.handleDeploymentPlannerChange(this.deploymentPlanners[val]) }"
|
||||
v-if="this.isAdmin()">
|
||||
<a-select-option v-for="(opt, optIndex) in this.deploymentPlanners" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.plannermode')" v-if="this.plannerModeVisible">
|
||||
<a-radio-group
|
||||
v-decorator="['plannermode', {
|
||||
initialValue: this.plannerMode
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handlePlannerModeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="strict">
|
||||
{{ $t('label.strict') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="preferred">
|
||||
{{ $t('label.preferred') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.gpu')">
|
||||
<a-radio-group
|
||||
v-decorator="['gpu', {
|
||||
initialValue: this.selectedGpu
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleGpuChange(selected.target.value) }">
|
||||
<a-radio-button v-for="(opt, optIndex) in this.gpuTypes" :key="optIndex" :value="opt.value">
|
||||
{{ opt.title }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.vgputype')" v-if="this.vGpuVisible">
|
||||
<a-select
|
||||
v-decorator="['vgputype', {}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:placeholder="this.$t('label.vgputype')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.vGpuTypes" :key="optIndex">
|
||||
{{ opt }}
|
||||
</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>
|
||||
<a-form-item :label="$t('domainid')" v-if="!this.isPublic">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('zoneid')">
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
v-decorator="['zoneid', {
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && value.length > 1 && value.indexOf(0) !== -1) {
|
||||
callback('All Zones cannot be combined with any other zone')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
name: 'AddServiceOffering',
|
||||
props: {
|
||||
},
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
storageType: 'shared',
|
||||
provisioningType: 'thin',
|
||||
computeOfferingType: 'fixed',
|
||||
qosType: '',
|
||||
isCustomizedDiskIops: false,
|
||||
isPublic: true,
|
||||
selectedDomains: [],
|
||||
domains: [],
|
||||
domainLoading: false,
|
||||
selectedZones: [],
|
||||
zones: [],
|
||||
zoneLoading: false,
|
||||
selectedDeployementPlanner: null,
|
||||
deploymentPlanners: [],
|
||||
deploymentPlannerLoading: false,
|
||||
plannerModeVisible: false,
|
||||
plannerMode: '',
|
||||
selectedGpu: '',
|
||||
gpuTypes: [
|
||||
{
|
||||
value: '',
|
||||
title: 'None',
|
||||
vgpu: []
|
||||
},
|
||||
{
|
||||
value: 'Group of NVIDIA Corporation GK107GL [GRID K1] GPUs',
|
||||
title: 'NVIDIA GRID K1',
|
||||
vgpu: ['', 'passthrough', 'GRID K100', 'GRID K120Q', 'GRID K140Q', 'GRID K160Q', 'GRID K180Q']
|
||||
},
|
||||
{
|
||||
value: 'Group of NVIDIA Corporation GK104GL [GRID K2] GPUs',
|
||||
title: 'NVIDIA GRID K2',
|
||||
vgpu: ['', 'passthrough', 'GRID K200', 'GRID K220Q', 'GRID K240Q', 'GRID K260Q', 'GRID K280Q']
|
||||
}
|
||||
],
|
||||
vGpuVisible: false,
|
||||
vGpuTypes: [],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
{
|
||||
id: 'all',
|
||||
name: this.$t('label.all.zone')
|
||||
}
|
||||
]
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
if (this.isAdmin()) {
|
||||
this.fetchDeploymentPlannerData()
|
||||
}
|
||||
},
|
||||
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
|
||||
params.details = 'min'
|
||||
this.domainLoading = true
|
||||
api('listDomains', params).then(json => {
|
||||
const listDomains = json.listdomainsresponse.domain
|
||||
this.domains = this.domains.concat(listDomains)
|
||||
}).finally(() => {
|
||||
this.domainLoading = false
|
||||
})
|
||||
},
|
||||
fetchZoneData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.zoneLoading = true
|
||||
api('listZones', params).then(json => {
|
||||
const listZones = json.listzonesresponse.zone
|
||||
this.zones = this.zones.concat(listZones)
|
||||
}).finally(() => {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
fetchDeploymentPlannerData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.deploymentPlannerLoading = true
|
||||
api('listDeploymentPlanners', params).then(json => {
|
||||
const planners = json.listdeploymentplannersresponse.deploymentPlanner
|
||||
this.deploymentPlanners = this.deploymentPlanners.concat(planners)
|
||||
}).finally(() => {
|
||||
this.deploymentPlannerLoading = false
|
||||
})
|
||||
},
|
||||
handleStorageTypeChange (val) {
|
||||
this.storageType = val
|
||||
},
|
||||
handleProvisioningTypeChange (val) {
|
||||
this.provisioningType = val
|
||||
},
|
||||
handleComputeOfferingTypeChange (val) {
|
||||
this.computeOfferingType = val
|
||||
},
|
||||
handleQosTypeChange (val) {
|
||||
this.qosType = val
|
||||
},
|
||||
handleDeploymentPlannerChange (planner) {
|
||||
this.selectedDeployementPlanner = planner
|
||||
this.plannerModeVisible = false
|
||||
if (this.selectedDeployementPlanner.name === 'ImplicitDedicationPlanner') {
|
||||
this.plannerModeVisible = this.isAdmin()
|
||||
}
|
||||
},
|
||||
handlePlannerModeChange (val) {
|
||||
this.plannerMode = val
|
||||
},
|
||||
handleGpuChange (val) {
|
||||
this.vGpuTypes = []
|
||||
for (var i in this.gpuTypes) {
|
||||
if (this.gpuTypes[i].value === val) {
|
||||
this.vGpuTypes = this.gpuTypes[i].vgpu
|
||||
break
|
||||
}
|
||||
}
|
||||
this.vGpuVisible = true
|
||||
if (!this.arrayHasItems(this.vGpuTypes)) {
|
||||
this.vGpuVisible = false
|
||||
}
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
var params = {}
|
||||
console.log(params)
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
this.$emit('close-action')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.action-button {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,25 +16,385 @@
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="form-layout">
|
||||
<a-spin :spinning="loading">
|
||||
<a-form
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('name')">
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter name' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('description')">
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
rules: [{ required: true, message: 'Please enter description' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetype')">
|
||||
<a-radio-group
|
||||
v-decorator="['storagetype', {
|
||||
initialValue: this.storageType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleStorageTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="shared">
|
||||
{{ $t('label.shared') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="local">
|
||||
{{ $t('label.local') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.provisioningtype')">
|
||||
<a-radio-group
|
||||
v-decorator="['provisioningtype', {
|
||||
initialValue: this.provisioningType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="thin">
|
||||
{{ $t('label.thin') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="sparse">
|
||||
{{ $t('label.sparse') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="fat">
|
||||
{{ $t('label.fat') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.customdisksize')">
|
||||
<a-switch v-decorator="['ciustomdisksize']" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disksize.gb')" v-if="this.isCustomDiskSize">
|
||||
<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()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.qostype')">
|
||||
<a-radio-group
|
||||
v-decorator="['qostype', {
|
||||
initialValue: this.qosType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleQosTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="hypervisor">
|
||||
{{ $t('label.hypervisor') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="storage">
|
||||
{{ $t('label.storage') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.bytes.read.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskbytesreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.bytes.read.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.bytes.write.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskbyteswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.bytes.write.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.read.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskiopsreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.read.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.write.rate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-input
|
||||
v-decorator="['diskiopswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.write.rate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.custom.disk.iops')" v-if="this.qosType === 'storage'">
|
||||
<a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.min')" v-if="!this.isCustomizedDiskIops">
|
||||
<a-input
|
||||
v-decorator="['diskiopsmin', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.min')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disk.iops.max')" v-if="!this.isCustomizedDiskIops">
|
||||
<a-input
|
||||
v-decorator="['diskiopsmax', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disk.iops.max')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.hypervisor.snapshot.reserve')" v-if="this.qosType === 'storage'">
|
||||
<a-input
|
||||
v-decorator="['hypervisorsnapshotreserve', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback('Please enter a valid number')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.hypervisor.snapshot.reserve')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.writecachetype')">
|
||||
<a-radio-group
|
||||
v-decorator="['writecachetype', {
|
||||
initialValue: this.writeCacheType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleWriteCacheTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="nodiskcache">
|
||||
{{ $t('label.nodiskcache') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="writebackdiskcaching">
|
||||
{{ $t('label.writebackdiskcaching') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="writethroughdiskcaching">
|
||||
{{ $t('label.writethroughdiskcaching') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</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>
|
||||
<a-form-item :label="$t('domainid')" v-if="!this.isPublic">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('zoneid')">
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
v-decorator="['zoneid', {
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && value.length > 1 && value.indexOf(0) !== -1) {
|
||||
callback('All Zones cannot be combined with any other zone')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
name: 'AddDiskOffering',
|
||||
props: {
|
||||
},
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
storageType: 'shared',
|
||||
provisioningType: 'thin',
|
||||
isCustomDiskSize: false,
|
||||
qosType: '',
|
||||
isCustomizedDiskIops: false,
|
||||
writeCacheType: 'nodiskcache',
|
||||
selectedDomains: [],
|
||||
selectedZones: [],
|
||||
isPublic: true,
|
||||
domains: [],
|
||||
domainLoading: false,
|
||||
zones: [],
|
||||
zoneLoading: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
{
|
||||
id: 'all',
|
||||
name: this.$t('label.all.zone')
|
||||
}
|
||||
]
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
},
|
||||
isAdmin () {
|
||||
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||
},
|
||||
fetchDomainData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
params.details = 'min'
|
||||
this.domainLoading = true
|
||||
api('listDomains', params).then(json => {
|
||||
const listDomains = json.listdomainsresponse.domain
|
||||
this.domains = this.domains.concat(listDomains)
|
||||
}).finally(() => {
|
||||
this.domainLoading = false
|
||||
})
|
||||
},
|
||||
fetchZoneData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.zoneLoading = true
|
||||
api('listZones', params).then(json => {
|
||||
const listZones = json.listzonesresponse.zone
|
||||
this.zones = this.zones.concat(listZones)
|
||||
}).finally(() => {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
handleStorageTypeChange (val) {
|
||||
this.storageType = val
|
||||
},
|
||||
handleProvisioningTypeChange (val) {
|
||||
this.provisioningType = val
|
||||
},
|
||||
handleQosTypeChange (val) {
|
||||
this.qosType = val
|
||||
},
|
||||
handleWriteCacheTypeChange (val) {
|
||||
this.writeCacheType = val
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
var params = {}
|
||||
console.log(params)
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
this.$emit('close-action')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.action-button {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,22 +16,288 @@
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="form-layout">
|
||||
<a-spin :spinning="loading">
|
||||
<a-form
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('name')">
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter name' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('description')">
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
rules: [{ required: true, message: 'Please enter description' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.networkrate.mbps')">
|
||||
<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()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.networkrate.mbps')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.guesttype')">
|
||||
<a-radio-group
|
||||
v-decorator="['guesttype', {
|
||||
initialValue: this.guestType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleGuestTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="isolated">
|
||||
{{ $t('label.isolated') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="l2">
|
||||
{{ $t('label.l2') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="shared">
|
||||
{{ $t('label.shared') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.persisitent')">
|
||||
<a-switch v-decorator="['ispersisitent']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.specifyvlan')">
|
||||
<a-switch v-decorator="['isspecifyvlan']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.vpc')">
|
||||
<a-switch v-decorator="['isvpc']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.promiscuousmode')">
|
||||
<a-radio-group
|
||||
v-decorator="['promiscuousmode', {
|
||||
initialValue: this.promiscuousMode
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handlePromiscuousModeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="accept">
|
||||
{{ $t('label.accept') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="reject">
|
||||
{{ $t('label.reject') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.macaddresschanges')">
|
||||
<a-radio-group
|
||||
v-decorator="['macaddresschanges', {
|
||||
initialValue: this.macAddressChanges
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleMacAddressChangesChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="accept">
|
||||
{{ $t('label.accept') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="reject">
|
||||
{{ $t('label.reject') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.forgedtransmits')">
|
||||
<a-radio-group
|
||||
v-decorator="['forgedtransmits', {
|
||||
initialValue: this.forgedTransmits
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleForgedTransmitsChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="accept">
|
||||
{{ $t('label.accept') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="reject">
|
||||
{{ $t('label.reject') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.conservemode')">
|
||||
<a-switch v-decorator="['isconservemode']" :checked="this.isConserveMode" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.tags')">
|
||||
<a-input
|
||||
v-decorator="['tags', {}]"
|
||||
:placeholder="this.$t('label.networktags')"/>
|
||||
</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>
|
||||
<a-form-item :label="$t('domainid')" v-if="!this.isPublic">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('zoneid')">
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
v-decorator="['zoneid', {
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && value.length > 1 && value.indexOf(0) !== -1) {
|
||||
callback('All Zones cannot be combined with any other zone')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
name: 'AddNetworkOffering',
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
guestType: 'isolated',
|
||||
promiscuousMode: '',
|
||||
macAddressChanges: '',
|
||||
forgedTransmits: '',
|
||||
selectedDomains: [],
|
||||
selectedZones: [],
|
||||
isConserveMode: true,
|
||||
isPublic: true,
|
||||
domains: [],
|
||||
domainLoading: false,
|
||||
zones: [],
|
||||
zoneLoading: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
{
|
||||
id: 'all',
|
||||
name: this.$t('label.all.zone')
|
||||
}
|
||||
]
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
},
|
||||
isAdmin () {
|
||||
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||
},
|
||||
fetchDomainData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
params.details = 'min'
|
||||
this.domainLoading = true
|
||||
api('listDomains', params).then(json => {
|
||||
const listDomains = json.listdomainsresponse.domain
|
||||
this.domains = this.domains.concat(listDomains)
|
||||
}).finally(() => {
|
||||
this.domainLoading = false
|
||||
})
|
||||
},
|
||||
fetchZoneData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.zoneLoading = true
|
||||
api('listZones', params).then(json => {
|
||||
const listZones = json.listzonesresponse.zone
|
||||
this.zones = this.zones.concat(listZones)
|
||||
}).finally(() => {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
handleGuestTypeChange (val) {
|
||||
this.guestType = val
|
||||
},
|
||||
handlePromiscuousModeChange (val) {
|
||||
this.promiscuousMode = val
|
||||
},
|
||||
handleMacAddressChangesChange (val) {
|
||||
this.macAddressChanges = val
|
||||
},
|
||||
handleForgedTransmitsChange (val) {
|
||||
this.forgedTransmits = val
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
var params = {}
|
||||
console.log(params)
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
this.$emit('close-action')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -16,22 +16,167 @@
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="form-layout">
|
||||
<a-spin :spinning="loading">
|
||||
<a-form
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('name')">
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter name' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('description')">
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
rules: [{ required: true, message: 'Please enter description' }]
|
||||
}]"
|
||||
:placeholder="this.$t('Description')"/>
|
||||
</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>
|
||||
<a-form-item :label="$t('domainid')" v-if="!this.isPublic">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select option'
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('zoneid')">
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
v-decorator="['zoneid', {
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && value.length > 1 && value.indexOf(0) !== -1) {
|
||||
callback('All Zones cannot be combined with any other zone')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
name: 'AddVpcOffering',
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedDomains: [],
|
||||
selectedZones: [],
|
||||
isConserveMode: true,
|
||||
isPublic: true,
|
||||
domains: [],
|
||||
domainLoading: false,
|
||||
zones: [],
|
||||
zoneLoading: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
{
|
||||
id: 'all',
|
||||
name: this.$t('label.all.zone')
|
||||
}
|
||||
]
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
},
|
||||
isAdmin () {
|
||||
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||
},
|
||||
fetchDomainData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
params.details = 'min'
|
||||
this.domainLoading = true
|
||||
api('listDomains', params).then(json => {
|
||||
const listDomains = json.listdomainsresponse.domain
|
||||
this.domains = this.domains.concat(listDomains)
|
||||
}).finally(() => {
|
||||
this.domainLoading = false
|
||||
})
|
||||
},
|
||||
fetchZoneData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
this.zoneLoading = true
|
||||
api('listZones', params).then(json => {
|
||||
const listZones = json.listzonesresponse.zone
|
||||
this.zones = this.zones.concat(listZones)
|
||||
}).finally(() => {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
var params = {}
|
||||
console.log(params)
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
this.$emit('close-action')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -281,8 +281,8 @@ export default {
|
||||
.form-layout {
|
||||
width: 80vw;
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
width: 35vw;
|
||||
@media (min-width: 600px) {
|
||||
width: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user