mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-03 04:12:31 +01:00
views: Contextual info for Service offering forms and upload custom ssl certs (#540)
Co-authored-by: Pearl Dsilva <pearl.dsilva@shapeblue.com> Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Pearl Dsilva
Rohit Yadav
parent
82b63a7109
commit
b6bf2e42f6
@ -48,7 +48,13 @@
|
||||
</p>
|
||||
|
||||
<a-form @submit.prevent="handleSslFormSubmit" ref="sslForm" :form="form">
|
||||
<a-form-item :label="$t('label.root.certificate')" :required="true">
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.root.certificate') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-textarea
|
||||
id="rootCert"
|
||||
rows="2"
|
||||
@ -66,8 +72,13 @@
|
||||
<a-form-item
|
||||
v-for="(item, index) in intermediateCertificates"
|
||||
:key="`key-${index}`"
|
||||
class="intermediate-certificate"
|
||||
:label="$t('label.intermediate.certificate') + ` ${index + 1}`">
|
||||
class="intermediate-certificate">
|
||||
<span slot="label">
|
||||
{{ $t('label.intermediate.certificate') + ` ${index + 1} ` }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.id.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-textarea
|
||||
:id="`intermediateCert${index}`"
|
||||
rows="2"
|
||||
@ -88,7 +99,13 @@
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="$t('label.server.certificate')" :required="true">
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.server.certificate') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.certificate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-textarea
|
||||
id="serverCert"
|
||||
rows="2"
|
||||
@ -101,7 +118,13 @@
|
||||
></a-textarea>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="$t('label.pkcs.private.certificate')" :required="true">
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.pkcs.private.certificate') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.privatekey.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-textarea
|
||||
id="pkcsKey"
|
||||
rows="2"
|
||||
@ -114,7 +137,13 @@
|
||||
></a-textarea>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="$t('label.domain.suffix')" :required="true">
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain.suffix') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.domainsuffix.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
id="dnsSuffix"
|
||||
:placeholder="$t('label.domain.suffix')"
|
||||
@ -184,6 +213,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.uploadCustomCertificate || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
|
||||
@ -22,21 +22,39 @@
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('label.name')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.displaytext')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.systemvmtype')" v-if="this.isSystem">
|
||||
<a-form-item v-if="this.isSystem">
|
||||
<span slot="label">
|
||||
{{ $t('label.systemvmtype') }}
|
||||
<a-tooltip :title="apiParams.systemvmtype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['systemvmtype', {
|
||||
initialValue: 'domainrouter'
|
||||
@ -52,7 +70,13 @@
|
||||
<a-select-option key="secondarystoragevm">Secondary Storage VM</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetype')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetype') }}
|
||||
<a-tooltip :title="apiParams.storagetype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['storagetype', {
|
||||
initialValue: this.storageType
|
||||
@ -67,7 +91,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.provisioningtype')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.provisioningtype') }}
|
||||
<a-tooltip :title="apiParams.provisioningtype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['provisioningtype', {
|
||||
initialValue: this.provisioningType
|
||||
@ -85,7 +115,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cachemode')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.cachemode') }}
|
||||
<a-tooltip :title="apiParams.cachemode.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['cachemode', {
|
||||
initialValue: this.cacheMode
|
||||
@ -121,7 +157,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cpunumber')" v-if="this.offeringType === 'fixed'">
|
||||
<a-form-item v-if="this.offeringType === 'fixed'">
|
||||
<span slot="label">
|
||||
{{ $t('label.cpunumber') }}
|
||||
<a-tooltip :title="apiParams.cpunumber.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['cpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
@ -137,7 +179,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.cpunumber')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cpuspeed')" v-if="this.offeringType !== 'customunconstrained'">
|
||||
<a-form-item v-if="this.offeringType !== 'customunconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.cpuspeed') }}
|
||||
<a-tooltip :title="apiParams.cpuspeed.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['cpuspeed', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
@ -153,7 +201,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.cpuspeed')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.mincpunumber')" v-if="this.offeringType === 'customconstrained'">
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.mincpunumber') }}
|
||||
<a-tooltip :title="apiParams.mincpunumber.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['mincpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
@ -169,7 +223,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.mincpunumber')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.maxcpunumber')" v-if="this.offeringType === 'customconstrained'">
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.maxcpunumber') }}
|
||||
<a-tooltip :title="apiParams.maxcpunumber.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['maxcpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
@ -185,7 +245,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.maxcpunumber')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.memory')" v-if="this.offeringType === 'fixed'">
|
||||
<a-form-item v-if="this.offeringType === 'fixed'">
|
||||
<span slot="label">
|
||||
{{ $t('label.memory') }}
|
||||
<a-tooltip :title="apiParams.memory.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['memory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
@ -201,7 +267,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.memory')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.minmemory')" v-if="this.offeringType === 'customconstrained'">
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.minmemory') }}
|
||||
<a-tooltip :title="apiParams.minmemory.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['minmemory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
@ -217,7 +289,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.minmemory')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.maxmemory')" v-if="this.offeringType === 'customconstrained'">
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.maxmemory') }}
|
||||
<a-tooltip :title="apiParams.maxmemory.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['maxmemory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
@ -233,7 +311,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.maxmemory')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.networkrate')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkrate') }}
|
||||
<a-tooltip :title="apiParams.provisioningtype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['networkrate', {
|
||||
rules: [
|
||||
@ -267,7 +351,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskbytesreadrate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbytesreadrate') }}
|
||||
<a-tooltip :title="apiParams.bytesreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskbytesreadrate', {
|
||||
rules: [{
|
||||
@ -281,7 +371,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbytesreadrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskbyteswriterate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbyteswriterate') }}
|
||||
<a-tooltip :title="apiParams.byteswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskbyteswriterate', {
|
||||
rules: [{
|
||||
@ -295,7 +391,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbyteswriterate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopsreadrate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsreadrate') }}
|
||||
<a-tooltip :title="apiParams.iopsreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsreadrate', {
|
||||
rules: [{
|
||||
@ -309,7 +411,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsreadrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopswriterate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopswriterate') }}
|
||||
<a-tooltip :title="apiParams.iopswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopswriterate', {
|
||||
rules: [{
|
||||
@ -323,10 +431,22 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopswriterate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.iscustomizeddiskiops')" v-if="!this.isSystem && this.qosType === 'storage'">
|
||||
<a-form-item v-if="!this.isSystem && this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.iscustomizeddiskiops') }}
|
||||
<a-tooltip :title="apiParams.customizediops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['iscustomizeddiskiops', {initialValue: this.isCustomizedDiskIops}]" :defaultChecked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopsmin')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmin') }}
|
||||
<a-tooltip :title="apiParams.miniops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmin', {
|
||||
rules: [{
|
||||
@ -340,7 +460,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmin')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopsmax')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmax') }}
|
||||
<a-tooltip :title="apiParams.maxiops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmax', {
|
||||
rules: [{
|
||||
@ -354,7 +480,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmax')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.hypervisorsnapshotreserve')" v-if="!this.isSystem && this.qosType === 'storage'">
|
||||
<a-form-item v-if="!this.isSystem && this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervisorsnapshotreserve') }}
|
||||
<a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['hypervisorsnapshotreserve', {
|
||||
rules: [{
|
||||
@ -368,15 +500,33 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.offerha')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.offerha') }}
|
||||
<a-tooltip :title="apiParams.offerha.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['offerha', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.hosttags')" v-if="this.isAdmin()">
|
||||
<a-form-item v-if="this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.hosttags') }}
|
||||
<a-tooltip :title="apiParams.hosttags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<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-form-item v-if="this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetags') }}
|
||||
<a-tooltip :title="apiParams.tags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-decorator="['storagetags', {}]"
|
||||
@ -393,13 +543,31 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.limitcpuuse')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.limitcpuuse') }}
|
||||
<a-tooltip :title="apiParams.limitcpuuse.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.isvolatile')" v-if="!this.isSystem">
|
||||
<a-form-item v-if="!this.isSystem">
|
||||
<span slot="label">
|
||||
{{ $t('label.isvolatile') }}
|
||||
<a-tooltip :title="apiParams.isvolatile.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['isvolatile', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.deploymentplanner')" v-if="!this.isSystem && this.isAdmin()">
|
||||
<a-form-item v-if="!this.isSystem && this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.deploymentplanner') }}
|
||||
<a-tooltip :title="apiParams.deploymentplanner.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['deploymentplanner', {
|
||||
initialValue: this.deploymentPlanners.length > 0 ? this.deploymentPlanners[0].name : ''
|
||||
@ -464,7 +632,13 @@
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.domain')" v-if="!this.isPublic">
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
@ -487,7 +661,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.zoneid')" v-if="!this.isSystem">
|
||||
<a-form-item v-if="!this.isSystem">
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -581,6 +761,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.createServiceOffering || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
|
||||
@ -22,21 +22,39 @@
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('label.name')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.displaytext')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetype')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetype') }}
|
||||
<a-tooltip :title="apiParams.storagetype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['storagetype', {
|
||||
initialValue: this.storageType
|
||||
@ -51,7 +69,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.provisioningtype')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.provisioningtype') }}
|
||||
<a-tooltip :title="apiParams.provisioningtype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['provisioningtype', {
|
||||
initialValue: this.provisioningType
|
||||
@ -69,10 +93,22 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.customdisksize')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.customdisksize') }}
|
||||
<a-tooltip :title="apiParams.customized.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['customdisksize', { initialValue: this.isCustomDiskSize }]" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.disksize')" v-if="!this.isCustomDiskSize">
|
||||
<a-form-item v-if="!this.isCustomDiskSize">
|
||||
<span slot="label">
|
||||
{{ $t('label.disksize') }}
|
||||
<a-tooltip :title="apiParams.disksize.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['disksize', {
|
||||
rules: [
|
||||
@ -107,7 +143,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskbytesreadrate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbytesreadrate') }}
|
||||
<a-tooltip :title="apiParams.bytesreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskbytesreadrate', {
|
||||
rules: [{
|
||||
@ -121,7 +163,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbytesreadrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskbyteswriterate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbyteswriterate') }}
|
||||
<a-tooltip :title="apiParams.byteswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskbyteswriterate', {
|
||||
rules: [{
|
||||
@ -135,7 +183,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbyteswriterate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopsreadrate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsreadrate') }}
|
||||
<a-tooltip :title="apiParams.iopsreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsreadrate', {
|
||||
rules: [{
|
||||
@ -149,7 +203,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsreadrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopswriterate')" v-if="this.qosType === 'hypervisor'">
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopswriterate') }}
|
||||
<a-tooltip :title="apiParams.iopswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopswriterate', {
|
||||
rules: [{
|
||||
@ -163,10 +223,22 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopswriterate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.iscustomizeddiskiops')" v-if="this.qosType === 'storage'">
|
||||
<a-form-item v-if="this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.iscustomizeddiskiops') }}
|
||||
<a-tooltip :title="apiParams.customizediops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopsmin')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmin') }}
|
||||
<a-tooltip :title="apiParams.miniops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmin', {
|
||||
rules: [{
|
||||
@ -180,7 +252,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmin')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskiopsmax')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmax') }}
|
||||
<a-tooltip :title="apiParams.maxiops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmax', {
|
||||
rules: [{
|
||||
@ -194,7 +272,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmax')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.hypervisorsnapshotreserve')" v-if="this.qosType === 'storage'">
|
||||
<a-form-item v-if="this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervisorsnapshotreserve') }}
|
||||
<a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['hypervisorsnapshotreserve', {
|
||||
rules: [{
|
||||
@ -208,7 +292,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.writecachetype')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.writecachetype') }}
|
||||
<a-tooltip :title="apiParams.cachemode.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['writecachetype', {
|
||||
initialValue: this.writeCacheType
|
||||
@ -226,7 +316,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.storagetags')" v-if="this.isAdmin()">
|
||||
<a-form-item v-if="this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetags') }}
|
||||
<a-tooltip :title="apiParams.tags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-decorator="['tags', {}]"
|
||||
@ -246,7 +342,13 @@
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.domainid')" v-if="!this.isPublic">
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domainid') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
@ -269,7 +371,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.zoneid')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -337,6 +445,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.createDiskOffering || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
|
||||
@ -22,21 +22,39 @@
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('label.name')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter name' }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.displaytext')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: 'Please enter description' }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.networkrate')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkrate') }}
|
||||
<a-tooltip :title="apiParams.networkrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['networkrate', {
|
||||
rules: [{
|
||||
@ -50,7 +68,13 @@
|
||||
}]"
|
||||
:placeholder="this.$t('label.networkrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.guestiptype')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.guestiptype') }}
|
||||
<a-tooltip :title="apiParams.guestiptype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['guestiptype', {
|
||||
initialValue: this.guestType
|
||||
@ -68,13 +92,31 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.ispersistent')" v-if="this.guestType !== 'shared'">
|
||||
<a-form-item v-if="this.guestType !== 'shared'">
|
||||
<span slot="label">
|
||||
{{ $t('label.ispersistent') }}
|
||||
<a-tooltip :title="apiParams.ispersistent.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['ispersistent', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.specifyvlan')" v-if="this.guestType !== 'shared'">
|
||||
<a-form-item v-if="this.guestType !== 'shared'">
|
||||
<span slot="label">
|
||||
{{ $t('label.specifyvlan') }}
|
||||
<a-tooltip :title="apiParams.specifyvlan.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.vpc')" v-if="this.guestType === 'isolated'">
|
||||
<a-form-item v-if="this.guestType === 'isolated'">
|
||||
<span slot="label">
|
||||
{{ $t('label.vpc') }}
|
||||
<a-tooltip :title="apiParams.forvpc.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="val => { this.handleForVpcChange(val) }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.userdatal2')" v-if="this.guestType === 'l2'">
|
||||
@ -82,7 +124,7 @@
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.lbtype')" v-if="this.forVpc && this.lbServiceChecked">
|
||||
<a-radio-group
|
||||
v-decorator="['lbtype', {
|
||||
v-decorator="[' ', {
|
||||
initialValue: 'publicLb'
|
||||
}]"
|
||||
buttonStyle="solid">
|
||||
@ -148,7 +190,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.supportedservices')" v-if="this.guestType !== 'l2'">
|
||||
<a-form-item v-if="this.guestType !== 'l2'">
|
||||
<span slot="label">
|
||||
{{ $t('label.supportedservices') }}
|
||||
<a-tooltip :title="apiParams.supportedservices.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-list itemLayout="horizontal" :dataSource="this.supportedServices">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
@ -164,7 +212,13 @@
|
||||
</a-list>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.serviceofferingid')" v-if="this.isVirtualRouterForAtLeastOneService">
|
||||
<a-form-item v-if="this.isVirtualRouterForAtLeastOneService">
|
||||
<span slot="label">
|
||||
{{ $t('label.serviceofferingid') }}
|
||||
<a-tooltip :title="apiParams.serviceofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['serviceofferingid', {
|
||||
rules: [
|
||||
@ -267,15 +321,33 @@
|
||||
<a-form-item :label="$t('label.supportspublicaccess')" v-show="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-form-item v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
|
||||
<span slot="label">
|
||||
{{ $t('label.conservemode') }}
|
||||
<a-tooltip :title="apiParams.conservemode.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.tags')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.tags') }}
|
||||
<a-tooltip :title="apiParams.tags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['tags', {}]"
|
||||
:placeholder="this.$t('label.tags')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.availability')" v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
|
||||
<a-form-item v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
|
||||
<span slot="label">
|
||||
{{ $t('label.availability') }}
|
||||
<a-tooltip :title="apiParams.availability.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['availability', {
|
||||
initialValue: 'optional'
|
||||
@ -289,7 +361,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.egressdefaultpolicy')" v-if="this.firewallServiceChecked">
|
||||
<a-form-item v-if="this.firewallServiceChecked">
|
||||
<span slot="label">
|
||||
{{ $t('label.egressdefaultpolicy') }}
|
||||
<a-tooltip :title="apiParams.egressdefaultpolicy.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-decorator="['egressdefaultpolicy', {
|
||||
initialValue: 'allow'
|
||||
@ -306,7 +384,13 @@
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.domainid')" v-if="!this.isPublic">
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domainid') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
@ -329,7 +413,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.zoneid')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -412,6 +502,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.createNetworkOffering || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
|
||||
@ -22,21 +22,39 @@
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('label.name')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter name' }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.displaytext')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: 'Please enter description' }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.supportedservices')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.supportedservices') }}
|
||||
<a-tooltip :title="apiParams.supportedservices.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-list itemLayout="horizontal" :dataSource="this.supportedServices">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
@ -64,7 +82,13 @@
|
||||
<a-form-item :label="$t('label.ispublic')" v-if="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.domainid')" v-if="!this.isPublic">
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domainid') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
@ -87,7 +111,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.zoneid')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -152,6 +182,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.createVPCOffering || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
|
||||
@ -21,19 +21,37 @@
|
||||
layout="vertical"
|
||||
:form="form"
|
||||
@submit="handleSubmit">
|
||||
<a-form-item :label="$t('label.name')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: 'Please enter input' }]
|
||||
}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.description')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.description') }}
|
||||
<a-tooltip :title="apiParams.description.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
rules: [{ required: true, message: 'Please enter input' }]
|
||||
}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.zoneid')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
showSearch
|
||||
allowClear
|
||||
@ -47,7 +65,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.externalid')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.externalid') }}
|
||||
<a-tooltip :title="apiParams.externalid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
allowClear
|
||||
v-decorator="['externalid'] "
|
||||
@ -57,7 +81,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.allowuserdrivenbackups')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.allowuserdrivenbackups') }}
|
||||
<a-tooltip :title="apiParams.allowuserdrivenbackups.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch
|
||||
v-decorator="['allowuserdrivenbackups']"
|
||||
:default-checked="true"/>
|
||||
@ -90,6 +120,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.importBackupOffering || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user