mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
views: add form element info tooltips (#483)
Added info tooltips for some custom forms 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
847f48609b
commit
179d57bd1e
@ -22,21 +22,39 @@
|
|||||||
:form="form"
|
:form="form"
|
||||||
@submit="handleSubmit"
|
@submit="handleSubmit"
|
||||||
layout="vertical">
|
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
|
<a-input
|
||||||
v-decorator="['name', {
|
v-decorator="['name', {
|
||||||
rules: [{ required: true, message: 'Please enter Kubernetes cluster name' }]
|
rules: [{ required: true, message: 'Please enter Kubernetes cluster name' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.name.description"/>
|
:placeholder="apiParams.name.description"/>
|
||||||
</a-form-item>
|
</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
|
<a-input
|
||||||
v-decorator="['description', {
|
v-decorator="['description', {
|
||||||
rules: [{ required: true, message: 'Please enter Kubernetes cluster description' }]
|
rules: [{ required: true, message: 'Please enter Kubernetes cluster description' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.description.description"/>
|
:placeholder="apiParams.description.description"/>
|
||||||
</a-form-item>
|
</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
|
<a-select
|
||||||
id="zone-selection"
|
id="zone-selection"
|
||||||
v-decorator="['zoneid', {
|
v-decorator="['zoneid', {
|
||||||
@ -55,7 +73,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.kubernetesversionid')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.kubernetesversionid') }}
|
||||||
|
<a-tooltip :title="apiParams.kubernetesversionid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
id="version-selection"
|
id="version-selection"
|
||||||
v-decorator="['kubernetesversionid', {
|
v-decorator="['kubernetesversionid', {
|
||||||
@ -74,7 +98,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.serviceofferingid')">
|
<a-form-item>
|
||||||
|
<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
|
<a-select
|
||||||
id="offering-selection"
|
id="offering-selection"
|
||||||
v-decorator="['serviceofferingid', {
|
v-decorator="['serviceofferingid', {
|
||||||
@ -92,7 +122,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.noderootdisksize')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.noderootdisksize') }}
|
||||||
|
<a-tooltip :title="apiParams.noderootdisksize.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['noderootdisksize', {
|
v-decorator="['noderootdisksize', {
|
||||||
rules: [{
|
rules: [{
|
||||||
@ -106,7 +142,13 @@
|
|||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.noderootdisksize.description"/>
|
:placeholder="apiParams.noderootdisksize.description"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.networkid')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.networkid') }}
|
||||||
|
<a-tooltip :title="apiParams.networkid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
id="network-selection"
|
id="network-selection"
|
||||||
v-decorator="['networkid', {}]"
|
v-decorator="['networkid', {}]"
|
||||||
@ -125,7 +167,13 @@
|
|||||||
<a-form-item :label="$t('label.haenable')" v-if="this.selectedKubernetesVersion != null && this.selectedKubernetesVersion != undefined && this.selectedKubernetesVersion.supportsha === true">
|
<a-form-item :label="$t('label.haenable')" v-if="this.selectedKubernetesVersion != null && this.selectedKubernetesVersion != undefined && this.selectedKubernetesVersion.supportsha === true">
|
||||||
<a-switch v-decorator="['haenable', {initialValue: this.haEnabled}]" :checked="this.haEnabled" @change="val => { this.haEnabled = val }" />
|
<a-switch v-decorator="['haenable', {initialValue: this.haEnabled}]" :checked="this.haEnabled" @change="val => { this.haEnabled = val }" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.masternodes')" v-if="this.haEnabled">
|
<a-form-item v-if="this.haEnabled">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.masternodes') }}
|
||||||
|
<a-tooltip :title="apiParams.masternodes.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['masternodes', {
|
v-decorator="['masternodes', {
|
||||||
initialValue: '1',
|
initialValue: '1',
|
||||||
@ -142,12 +190,24 @@
|
|||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.masternodes.description"/>
|
:placeholder="apiParams.masternodes.description"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.externalloadbalanceripaddress')" v-if="this.haEnabled">
|
<a-form-item v-if="this.haEnabled">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.externalloadbalanceripaddress') }}
|
||||||
|
<a-tooltip :title="apiParams.externalloadbalanceripaddress.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['externalloadbalanceripaddress', {}]"
|
v-decorator="['externalloadbalanceripaddress', {}]"
|
||||||
:placeholder="apiParams.externalloadbalanceripaddress.description"/>
|
:placeholder="apiParams.externalloadbalanceripaddress.description"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.cks.cluster.size')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.cks.cluster.size') }}
|
||||||
|
<a-tooltip :title="apiParams.size.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['size', {
|
v-decorator="['size', {
|
||||||
initialValue: '1',
|
initialValue: '1',
|
||||||
@ -164,7 +224,13 @@
|
|||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.size.description"/>
|
:placeholder="apiParams.size.description"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.keypair')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.keypair') }}
|
||||||
|
<a-tooltip :title="apiParams.keypair.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
id="keypair-selection"
|
id="keypair-selection"
|
||||||
v-decorator="['keypair', {}]"
|
v-decorator="['keypair', {}]"
|
||||||
|
|||||||
@ -170,54 +170,32 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
if (this.isAdminOrDomainAdmin()) {
|
this.vmColumns = [
|
||||||
this.vmColumns = [
|
{
|
||||||
{
|
title: this.$t('label.name'),
|
||||||
title: this.$t('label.name'),
|
dataIndex: 'name',
|
||||||
dataIndex: 'name',
|
scopedSlots: { customRender: 'name' }
|
||||||
scopedSlots: { customRender: 'name' }
|
},
|
||||||
},
|
{
|
||||||
{
|
title: this.$t('label.state'),
|
||||||
title: this.$t('label.state'),
|
dataIndex: 'state',
|
||||||
dataIndex: 'state',
|
scopedSlots: { customRender: 'state' }
|
||||||
scopedSlots: { customRender: 'state' }
|
},
|
||||||
},
|
{
|
||||||
{
|
title: this.$t('label.instancename'),
|
||||||
title: this.$t('label.instancename'),
|
dataIndex: 'instancename'
|
||||||
dataIndex: 'instancename'
|
},
|
||||||
},
|
{
|
||||||
{
|
title: this.$t('label.ipaddress'),
|
||||||
title: this.$t('label.ipaddress'),
|
dataIndex: 'ipaddress'
|
||||||
dataIndex: 'ipaddress'
|
},
|
||||||
},
|
{
|
||||||
{
|
title: this.$t('label.zonename'),
|
||||||
title: this.$t('label.zonename'),
|
dataIndex: 'zonename'
|
||||||
dataIndex: 'zonename'
|
}
|
||||||
}
|
]
|
||||||
]
|
if (!this.isAdmin()) {
|
||||||
} else {
|
this.vmColumns = this.vmColumns.filter(x => x.dataIndex !== 'instancename')
|
||||||
this.vmColumns = [
|
|
||||||
{
|
|
||||||
title: this.$t('label.name'),
|
|
||||||
dataIndex: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('label.displayname'),
|
|
||||||
dataIndex: 'displayname'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('label.ipaddress'),
|
|
||||||
dataIndex: 'ipaddress'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('label.zonename'),
|
|
||||||
dataIndex: 'zonename'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('label.state'),
|
|
||||||
dataIndex: 'state'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
@ -231,6 +209,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
isAdmin () {
|
||||||
|
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
|
||||||
|
},
|
||||||
isAdminOrDomainAdmin () {
|
isAdminOrDomainAdmin () {
|
||||||
return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
|
return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
|
||||||
},
|
},
|
||||||
|
|||||||
@ -22,7 +22,13 @@
|
|||||||
:form="form"
|
:form="form"
|
||||||
@submit="handleSubmit"
|
@submit="handleSubmit"
|
||||||
layout="vertical">
|
layout="vertical">
|
||||||
<a-form-item :label="$t('label.cks.cluster.size')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.cks.cluster.size') }}
|
||||||
|
<a-tooltip :title="apiParams.size.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['size', {
|
v-decorator="['size', {
|
||||||
initialValue: originalSize,
|
initialValue: originalSize,
|
||||||
@ -37,7 +43,13 @@
|
|||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.size.description"/>
|
:placeholder="apiParams.size.description"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.serviceofferingid')">
|
<a-form-item>
|
||||||
|
<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
|
<a-select
|
||||||
id="offering-selection"
|
id="offering-selection"
|
||||||
v-decorator="['serviceofferingid', {}]"
|
v-decorator="['serviceofferingid', {}]"
|
||||||
|
|||||||
@ -22,7 +22,13 @@
|
|||||||
:form="form"
|
:form="form"
|
||||||
@submit="handleSubmit"
|
@submit="handleSubmit"
|
||||||
layout="vertical">
|
layout="vertical">
|
||||||
<a-form-item :label="$t('label.kubernetesversionid')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.kubernetesversionid') }}
|
||||||
|
<a-tooltip :title="apiParams.kubernetesversionid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
id="version-selection"
|
id="version-selection"
|
||||||
v-decorator="['kubernetesversionid', {
|
v-decorator="['kubernetesversionid', {
|
||||||
|
|||||||
@ -22,21 +22,39 @@
|
|||||||
:form="form"
|
:form="form"
|
||||||
@submit="handleSubmit"
|
@submit="handleSubmit"
|
||||||
layout="vertical">
|
layout="vertical">
|
||||||
<a-form-item :label="$t('label.semanticversion')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.semanticversion') }}
|
||||||
|
<a-tooltip :title="apiParams.semanticversion.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['semanticversion', {
|
v-decorator="['semanticversion', {
|
||||||
rules: [{ required: true, message: 'Please enter Kubernetes semantic version' }]
|
rules: [{ required: true, message: 'Please enter Kubernetes semantic version' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.semanticversion.description"/>
|
:placeholder="apiParams.semanticversion.description"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<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
|
<a-input
|
||||||
v-decorator="['name', {
|
v-decorator="['name', {
|
||||||
rules: [{ message: 'Please enter name' }]
|
rules: [{ message: 'Please enter name' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="$t('label.name')"/>
|
:placeholder="$t('label.name')"/>
|
||||||
</a-form-item>
|
</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
|
<a-select
|
||||||
id="zone-selection"
|
id="zone-selection"
|
||||||
v-decorator="['zoneid', {
|
v-decorator="['zoneid', {
|
||||||
@ -63,21 +81,39 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.url')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.url') }}
|
||||||
|
<a-tooltip :title="apiParams.url.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['url', {
|
v-decorator="['url', {
|
||||||
rules: [{ required: true, message: 'Please enter binaries ISO URL' }]
|
rules: [{ required: true, message: 'Please enter binaries ISO URL' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.url.description" />
|
:placeholder="apiParams.url.description" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.checksum')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.checksum') }}
|
||||||
|
<a-tooltip :title="apiParams.checksum.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['checksum', {
|
v-decorator="['checksum', {
|
||||||
rules: [{ required: false, message: 'Please enter input' }]
|
rules: [{ required: false, message: 'Please enter input' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.checksum.description" />
|
:placeholder="apiParams.checksum.description" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.mincpunumber')">
|
<a-form-item>
|
||||||
|
<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
|
<a-input
|
||||||
v-decorator="['mincpunumber', {
|
v-decorator="['mincpunumber', {
|
||||||
rules: [{ required: true, message: 'Please enter value' },
|
rules: [{ required: true, message: 'Please enter value' },
|
||||||
@ -93,7 +129,13 @@
|
|||||||
}]"
|
}]"
|
||||||
:placeholder="apiParams.mincpunumber.description"/>
|
:placeholder="apiParams.mincpunumber.description"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.minmemory')">
|
<a-form-item>
|
||||||
|
<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
|
<a-input
|
||||||
v-decorator="['minmemory', {
|
v-decorator="['minmemory', {
|
||||||
rules: [{ required: true, message: 'Please enter value' },
|
rules: [{ required: true, message: 'Please enter value' },
|
||||||
|
|||||||
@ -23,21 +23,39 @@
|
|||||||
:form="form"
|
:form="form"
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
@submit="handleSubmit">
|
@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
|
<a-input
|
||||||
v-decorator="['name', {
|
v-decorator="['name', {
|
||||||
rules: [{ required: true, message: 'Please enter name' }]
|
rules: [{ required: true, message: 'Please enter name' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.name')"/>
|
:placeholder="this.$t('label.name')"/>
|
||||||
</a-form-item>
|
</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
|
<a-input
|
||||||
v-decorator="['displaytext', {
|
v-decorator="['displaytext', {
|
||||||
rules: [{ required: true, message: 'Please enter display text' }]
|
rules: [{ required: true, message: 'Please enter display text' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.display.text')"/>
|
:placeholder="this.$t('label.display.text')"/>
|
||||||
</a-form-item>
|
</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
|
<a-select
|
||||||
v-decorator="['zoneid', {
|
v-decorator="['zoneid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -60,7 +78,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.domain')" v-if="this.isAdminOrDomainAdmin()">
|
<a-form-item v-if="this.isAdminOrDomainAdmin()">
|
||||||
|
<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
|
<a-select
|
||||||
v-decorator="['domainid', {}]"
|
v-decorator="['domainid', {}]"
|
||||||
showSearch
|
showSearch
|
||||||
@ -76,7 +100,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.networkofferingid')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.networkofferingid') }}
|
||||||
|
<a-tooltip :title="apiParams.networkofferingid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
v-decorator="['networkofferingid', {
|
v-decorator="['networkofferingid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -99,14 +129,26 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.vlan') }}
|
||||||
|
<a-tooltip :title="apiParams.vlan.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['vlanid', {
|
v-decorator="['vlanid', {
|
||||||
rules: [{ required: true, message: 'Please enter value' }]
|
rules: [{ required: true, message: 'Please enter value' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.vlanid')"/>
|
:placeholder="this.$t('label.vlanid')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.vpcid')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.forvpc">
|
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.forvpc">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.vpcid') }}
|
||||||
|
<a-tooltip :title="apiParams.vpcid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
v-decorator="['vpcid', {
|
v-decorator="['vpcid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -129,27 +171,57 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</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-input
|
<a-input
|
||||||
v-decorator="['externalid', {}]"
|
v-decorator="['externalid', {}]"
|
||||||
:placeholder="$t('label.externalid')"/>
|
:placeholder="$t('label.externalid')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.gateway')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.gateway') }}
|
||||||
|
<a-tooltip :title="apiParams.gateway.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['gateway', {}]"
|
v-decorator="['gateway', {}]"
|
||||||
:placeholder="this.$t('label.gateway')"/>
|
:placeholder="this.$t('label.gateway')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.netmask')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.netmask') }}
|
||||||
|
<a-tooltip :title="apiParams.netmask.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['netmask', {}]"
|
v-decorator="['netmask', {}]"
|
||||||
:placeholder="this.$t('label.netmask')"/>
|
:placeholder="this.$t('label.netmask')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.networkdomain')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && !this.selectedNetworkOffering.forvpc">
|
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && !this.selectedNetworkOffering.forvpc">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.networkdomain') }}
|
||||||
|
<a-tooltip :title="apiParams.networkdomain.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['networkdomain', {}]"
|
v-decorator="['networkdomain', {}]"
|
||||||
:placeholder="this.$t('label.networkdomain')"/>
|
:placeholder="this.$t('label.networkdomain')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.account')" v-if="this.accountVisible">
|
<a-form-item v-if="this.accountVisible">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.account') }}
|
||||||
|
<a-tooltip :title="apiParams.account.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['account', {
|
v-decorator="['account', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -212,6 +284,11 @@ export default {
|
|||||||
},
|
},
|
||||||
beforeCreate () {
|
beforeCreate () {
|
||||||
this.form = this.$form.createForm(this)
|
this.form = this.$form.createForm(this)
|
||||||
|
this.apiConfig = this.$store.getters.apis.createNetwork || {}
|
||||||
|
this.apiParams = {}
|
||||||
|
this.apiConfig.params.forEach(param => {
|
||||||
|
this.apiParams[param.name] = param
|
||||||
|
})
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.domains = [
|
this.domains = [
|
||||||
|
|||||||
@ -23,21 +23,39 @@
|
|||||||
:form="form"
|
:form="form"
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
@submit="handleSubmit">
|
@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
|
<a-input
|
||||||
v-decorator="['name', {
|
v-decorator="['name', {
|
||||||
rules: [{ required: true, message: 'Please enter name' }]
|
rules: [{ required: true, message: 'Please enter name' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.name')"/>
|
:placeholder="this.$t('label.name')"/>
|
||||||
</a-form-item>
|
</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
|
<a-input
|
||||||
v-decorator="['displaytext', {
|
v-decorator="['displaytext', {
|
||||||
rules: [{ required: true, message: 'Please enter display text' }]
|
rules: [{ required: true, message: 'Please enter display text' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.displaytext')"/>
|
:placeholder="this.$t('label.displaytext')"/>
|
||||||
</a-form-item>
|
</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
|
<a-select
|
||||||
v-decorator="['zoneid', {
|
v-decorator="['zoneid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -60,7 +78,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.domain')" v-if="this.isAdminOrDomainAdmin()">
|
<a-form-item v-if="this.isAdminOrDomainAdmin()">
|
||||||
|
<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
|
<a-select
|
||||||
v-decorator="['domainid', {}]"
|
v-decorator="['domainid', {}]"
|
||||||
showSearch
|
showSearch
|
||||||
@ -76,7 +100,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.networkofferingid')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.networkofferingid') }}
|
||||||
|
<a-tooltip :title="apiParams.networkofferingid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
v-decorator="['networkofferingid', {
|
v-decorator="['networkofferingid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -99,17 +129,35 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.vlan') }}
|
||||||
|
<a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['vlanid', {
|
v-decorator="['vlanid', {
|
||||||
rules: [{ required: true, message: 'Please enter value' }]
|
rules: [{ required: true, message: 'Please enter value' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.vlanid')"/>
|
:placeholder="this.$t('label.vlanid')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.bypassvlanoverlapcheck')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.bypassvlanoverlapcheck') }}
|
||||||
|
<a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
|
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.isolatedpvlantype')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.isolatedpvlantype') }}
|
||||||
|
<a-tooltip :title="apiParams.isolatedpvlantype.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
v-decorator="['isolatedpvlantype', {
|
v-decorator="['isolatedpvlantype', {
|
||||||
initialValue: this.isolatePvlanType
|
initialValue: this.isolatePvlanType
|
||||||
@ -130,12 +178,24 @@
|
|||||||
</a-radio-button>
|
</a-radio-button>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.isolatedpvlanid')" v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
|
<a-form-item v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.isolatedpvlanid') }}
|
||||||
|
<a-tooltip :title="apiParams.isolatedpvlan.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['isolatedpvlan', {}]"
|
v-decorator="['isolatedpvlan', {}]"
|
||||||
:placeholder="this.$t('label.isolatedpvlanid')"/>
|
:placeholder="this.$t('label.isolatedpvlanid')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.account')" v-if="this.accountVisible">
|
<a-form-item v-if="this.accountVisible">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.account') }}
|
||||||
|
<a-tooltip :title="apiParams.account.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['account', {
|
v-decorator="['account', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -196,6 +256,11 @@ export default {
|
|||||||
},
|
},
|
||||||
beforeCreate () {
|
beforeCreate () {
|
||||||
this.form = this.$form.createForm(this)
|
this.form = this.$form.createForm(this)
|
||||||
|
this.apiConfig = this.$store.getters.apis.createNetwork || {}
|
||||||
|
this.apiParams = {}
|
||||||
|
this.apiConfig.params.forEach(param => {
|
||||||
|
this.apiParams[param.name] = param
|
||||||
|
})
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.domains = [
|
this.domains = [
|
||||||
|
|||||||
@ -24,20 +24,38 @@
|
|||||||
layout="vertical"
|
layout="vertical"
|
||||||
@submit="handleSubmit">
|
@submit="handleSubmit">
|
||||||
<a-form-item :label="$t('label.name')">
|
<a-form-item :label="$t('label.name')">
|
||||||
|
<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
|
<a-input
|
||||||
v-decorator="['name', {
|
v-decorator="['name', {
|
||||||
rules: [{ required: true, message: 'Please enter name' }]
|
rules: [{ required: true, message: 'Please enter name' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.name')"/>
|
:placeholder="this.$t('label.name')"/>
|
||||||
</a-form-item>
|
</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
|
<a-input
|
||||||
v-decorator="['displaytext', {
|
v-decorator="['displaytext', {
|
||||||
rules: [{ required: true, message: 'Please enter display text' }]
|
rules: [{ required: true, message: 'Please enter display text' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.display.text')"/>
|
:placeholder="this.$t('label.display.text')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.zoneid')" v-if="this.isObjectEmpty(this.zone)">
|
<a-form-item v-if="this.isObjectEmpty(this.zone)">
|
||||||
|
<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
|
<a-select
|
||||||
v-decorator="['zoneid', {
|
v-decorator="['zoneid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -60,7 +78,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.physicalnetworkid')" v-if="this.isObjectEmpty(this.zone)">
|
<a-form-item v-if="this.isObjectEmpty(this.zone)">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.physicalnetworkid') }}
|
||||||
|
<a-tooltip :title="apiParams.physicalnetworkid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
v-decorator="['physicalnetworkid', {}]"
|
v-decorator="['physicalnetworkid', {}]"
|
||||||
showSearch
|
showSearch
|
||||||
@ -76,17 +100,35 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.vlan')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.vlan') }}
|
||||||
|
<a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['vlanid', {
|
v-decorator="['vlanid', {
|
||||||
rules: [{ required: true, message: 'Please enter value' }]
|
rules: [{ required: true, message: 'Please enter value' }]
|
||||||
}]"
|
}]"
|
||||||
:placeholder="this.$t('label.vlanid')"/>
|
:placeholder="this.$t('label.vlanid')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.bypassvlanoverlapcheck')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.bypassvlanoverlapcheck') }}
|
||||||
|
<a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
|
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.isolatedpvlantype')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.isolatedpvlantype') }}
|
||||||
|
<a-tooltip :title="apiParams.isolatedpvlantype.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
v-decorator="['isolatedpvlantype', {
|
v-decorator="['isolatedpvlantype', {
|
||||||
initialValue: this.isolatePvlanType
|
initialValue: this.isolatePvlanType
|
||||||
@ -107,7 +149,13 @@
|
|||||||
</a-radio-button>
|
</a-radio-button>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.isolatedpvlanid')" v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
|
<a-form-item v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.isolatedpvlanid') }}
|
||||||
|
<a-tooltip :title="apiParams.isolatedpvlan.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['isolatedpvlan', {}]"
|
v-decorator="['isolatedpvlan', {}]"
|
||||||
:placeholder="this.$t('label.isolatedpvlanid')"/>
|
:placeholder="this.$t('label.isolatedpvlanid')"/>
|
||||||
@ -133,7 +181,13 @@
|
|||||||
</a-radio-button>
|
</a-radio-button>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.domain')" v-if="this.scopeType !== 'all'">
|
<a-form-item v-if="this.scopeType !== 'all'">
|
||||||
|
<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
|
<a-select
|
||||||
v-decorator="['domainid', {
|
v-decorator="['domainid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -156,15 +210,33 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.subdomainaccess')" v-if="this.scopeType === 'domain'">
|
<a-form-item v-if="this.scopeType === 'domain'">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.subdomainaccess') }}
|
||||||
|
<a-tooltip :title="apiParams.subdomainaccess.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-switch v-decorator="['subdomainaccess']" />
|
<a-switch v-decorator="['subdomainaccess']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.account')" v-if="this.scopeType === 'account'">
|
<a-form-item v-if="this.scopeType === 'account'">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.account') }}
|
||||||
|
<a-tooltip :title="apiParams.account.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['account', {}]"
|
v-decorator="['account', {}]"
|
||||||
:placeholder="this.$t('label.account')"/>
|
:placeholder="this.$t('label.account')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.projectid')" v-if="this.scopeType === 'project'">
|
<a-form-item v-if="this.scopeType === 'project'">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.projectid') }}
|
||||||
|
<a-tooltip :title="apiParams.projectid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
v-decorator="['projectid', {
|
v-decorator="['projectid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -187,7 +259,13 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.networkofferingid')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.networkofferingid') }}
|
||||||
|
<a-tooltip :title="apiParams.networkofferingid.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-select
|
<a-select
|
||||||
v-decorator="['networkofferingid', {
|
v-decorator="['networkofferingid', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -210,52 +288,112 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.ip4gateway')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.ip4gateway') }}
|
||||||
|
<a-tooltip :title="apiParams.gateway.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['ip4gateway', {}]"
|
v-decorator="['ip4gateway', {}]"
|
||||||
:placeholder="this.$t('label.ip4gateway')"/>
|
:placeholder="this.$t('label.ip4gateway')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.ip4netmask')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.ip4netmask') }}
|
||||||
|
<a-tooltip :title="apiParams.netmask.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['netmask', {}]"
|
v-decorator="['netmask', {}]"
|
||||||
:placeholder="this.$t('label.netmask')"/>
|
:placeholder="this.$t('label.netmask')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.startipv4')">
|
<a-form-item :label="$t('label.startipv4')">
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.startipv4') }}
|
||||||
|
<a-tooltip :title="apiParams.startip.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['startipv4', {}]"
|
v-decorator="['startipv4', {}]"
|
||||||
:placeholder="this.$t('label.startipv4')"/>
|
:placeholder="this.$t('label.startipv4')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.endipv4')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.endipv4') }}
|
||||||
|
<a-tooltip :title="apiParams.endip.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['endipv4', {}]"
|
v-decorator="['endipv4', {}]"
|
||||||
:placeholder="this.$t('label.endipv4')"/>
|
:placeholder="this.$t('label.endipv4')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.ip6gateway')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.ip6gateway') }}
|
||||||
|
<a-tooltip :title="apiParams.ip6gateway.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['ip6gateway', {}]"
|
v-decorator="['ip6gateway', {}]"
|
||||||
:placeholder="this.$t('label.ip6gateway')"/>
|
:placeholder="this.$t('label.ip6gateway')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.ip6cidr')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.ip6cidr') }}
|
||||||
|
<a-tooltip :title="apiParams.ip6cidr.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['ip6cidr', {}]"
|
v-decorator="['ip6cidr', {}]"
|
||||||
:placeholder="this.$t('label.ip6cidr')"/>
|
:placeholder="this.$t('label.ip6cidr')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.startipv6')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.startipv6') }}
|
||||||
|
<a-tooltip :title="apiParams.startipv6.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['startipv6', {}]"
|
v-decorator="['startipv6', {}]"
|
||||||
:placeholder="this.$t('label.startipv6')"/>
|
:placeholder="this.$t('label.startipv6')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.endipv6')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.endipv6') }}
|
||||||
|
<a-tooltip :title="apiParams.endipv6.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['endipv6', {}]"
|
v-decorator="['endipv6', {}]"
|
||||||
:placeholder="this.$t('label.endipv6')"/>
|
:placeholder="this.$t('label.endipv6')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.networkdomain')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.networkdomain') }}
|
||||||
|
<a-tooltip :title="apiParams.networkdomain.description">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-input
|
<a-input
|
||||||
v-decorator="['networkdomain', {}]"
|
v-decorator="['networkdomain', {}]"
|
||||||
:placeholder="this.$t('label.networkdomain')"/>
|
:placeholder="this.$t('label.networkdomain')"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :label="$t('label.hideipaddressusage')">
|
<a-form-item>
|
||||||
|
<span slot="label">
|
||||||
|
{{ $t('label.hideipaddressusage') }}
|
||||||
|
<a-tooltip :title="apiParams.hideipaddressusage.description" v-if="'hideipaddressusage' in apiParams">
|
||||||
|
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</span>
|
||||||
<a-switch v-decorator="['hideipaddressusage']" />
|
<a-switch v-decorator="['hideipaddressusage']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<div :span="24" class="action-button">
|
<div :span="24" class="action-button">
|
||||||
@ -320,6 +458,12 @@ export default {
|
|||||||
},
|
},
|
||||||
beforeCreate () {
|
beforeCreate () {
|
||||||
this.form = this.$form.createForm(this)
|
this.form = this.$form.createForm(this)
|
||||||
|
this.apiConfig = this.$store.getters.apis.createNetwork || {}
|
||||||
|
this.apiParams = {}
|
||||||
|
this.apiConfig.params.forEach(param => {
|
||||||
|
this.apiParams[param.name] = param
|
||||||
|
})
|
||||||
|
console.log(this.apiParams)
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user