mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
Contextual data (#611)
* Add contextual info to forms * additional tooltips - Primary storage form 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
a0a69ca758
commit
ec3b28caf4
@ -2618,6 +2618,8 @@
|
||||
"message.creating.secondary.storage": "Creating secondary storage",
|
||||
"message.creating.systemvm": "Creating system VMs (this may take a while)",
|
||||
"message.creating.zone": "Creating zone",
|
||||
"message.datacenter.description": "Name of the datacenter on vCenter",
|
||||
"message.datastore.description": "Name of the datastore on vCenter",
|
||||
"message.dedicate.zone": "Dedicating zone",
|
||||
"message.dedicated.zone.released": "Zone dedication released",
|
||||
"message.dedicating.cluster": "Dedicating Cluster...",
|
||||
@ -2935,6 +2937,7 @@
|
||||
"message.ovf.properties.available": "There are OVF properties available for customizing the selected appliance. Please edit the values accordingly.",
|
||||
"message.password.has.been.reset.to": "Password has been reset to",
|
||||
"message.password.of.the.vm.has.been.reset.to": "Password of the VM has been reset to",
|
||||
"message.path.description": "NFS: exported path from the server. VMFS: /datacenter name/datastore name. SharedMountPoint: path where primary storage is mounted, such as /mnt/primary",
|
||||
"message.pending.projects.1": "You have pending project invitations:",
|
||||
"message.pending.projects.2": "To view, please go to the projects section, then select invitations from the drop-down.",
|
||||
"message.please.add.at.lease.one.traffic.range": "Please add at least one traffic range.",
|
||||
@ -2950,6 +2953,7 @@
|
||||
"message.pod.dedication.released": "Pod dedication released",
|
||||
"message.portable.ip.delete.confirm": "Please confirm you want to delete Portable IP Range",
|
||||
"message.processing.complete": "Processing complete!",
|
||||
"message.protocol.description": "For XenServer, choose NFS, iSCSI, or PreSetup. For KVM, choose NFS, SharedMountPoint, RDB, CLVM or Gluster. For vSphere, choose NFS, PreSetup (VMFS or iSCSI or FiberChannel or vSAN or vVols) or DatastoreCluster. For Hyper-V, choose SMB/CIFS. For LXC, choose NFS or SharedMountPoint. For OVM, choose NFS or ocfs2.",
|
||||
"message.project.invite.sent": "Invite sent to user; they will be added to the project once they accept the invitation",
|
||||
"message.public.traffic.in.advanced.zone": "Public traffic is generated when VMs in the cloud access the internet. Publicly-accessible IPs must be allocated for this purpose. End users can use the CloudStack UI to acquire these IPs to implement NAT between their guest network and their public network.<br/><br/>Provide at least one range of IP addresses for internet traffic.",
|
||||
"message.public.traffic.in.basic.zone": "Public traffic is generated when VMs in the cloud access the Internet or provide services to clients over the Internet. Publicly accessible IPs must be allocated for this purpose. When a instance is created, an IP from this set of Public IPs will be allocated to the instance in addition to the guest IP address. Static 1-1 NAT will be set up automatically between the public IP and the guest IP. End users can also use the CloudStack UI to acquire additional IPs to implement static NAT between their instances and the public IP.",
|
||||
@ -3020,6 +3024,7 @@
|
||||
"message.select.tier": "Please select a tier",
|
||||
"message.select.zone.description": "Select type of zone basic/advanced",
|
||||
"message.select.zone.hint": "This is the type of zone deployement that you want to use. Basic zone: provides a single network where each VM instance is assigned an IP directly from the network. Guest isolation can be provided through layer-3 means such as security groups (IP address source filtering). Advanced zone: For more sophisticated network topologies. This network model provides the most flexibility in defining guest networks and providing custom network offerings such as firewall, VPN, or load balancer support.",
|
||||
"message.server.description": "NFS, iSCSI, or PreSetup: IP address or DNS name of the storage device. VMWare PreSetup: IP address or DNS name of the vCenter server.",
|
||||
"message.set.default.nic": "Please confirm that you would like to make this NIC the default for this VM.",
|
||||
"message.set.default.nic.manual": "Please manually update the default NIC on the VM now.",
|
||||
"message.setting.updated": "Setting Updated:",
|
||||
|
||||
@ -19,14 +19,26 @@
|
||||
<div class="form-layout">
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" layout="vertical">
|
||||
<a-form-item :label="$t('label.scope')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.scope') }}
|
||||
<a-tooltip :title="apiParams.scope.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select v-decorator="['scope', { initialValue: 'cluster' }]" @change="val => { this.scope = val }">
|
||||
<a-select-option :value="'cluster'"> {{ $t('label.clusterid') }} </a-select-option>
|
||||
<a-select-option :value="'zone'"> {{ $t('label.zoneid') }} </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<div v-if="this.scope === 'zone'">
|
||||
<a-form-item :label="$t('label.hypervisor')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervisor') }}
|
||||
<a-tooltip :title="apiParams.hypervisor.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['hypervisor', { initialValue: hypervisors[0]}]"
|
||||
@change="val => this.selectedHypervisor = val">
|
||||
@ -36,7 +48,13 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<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
|
||||
v-decorator="['zone', { initialValue: this.zoneSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => changeZone(val)">
|
||||
@ -46,7 +64,13 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<div v-if="this.scope === 'cluster' || this.scope === 'host'">
|
||||
<a-form-item :label="$t('label.podid')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.podid') }}
|
||||
<a-tooltip :title="apiParams.podid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['pod', { initialValue: this.podSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => changePod(val)">
|
||||
@ -55,7 +79,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.clusterid')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.clusterid') }}
|
||||
<a-tooltip :title="apiParams.clusterid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['cluster', { initialValue: this.clusterSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => fetchHypervisor(val)">
|
||||
@ -76,10 +106,22 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<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('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.protocol')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.protocol') }}
|
||||
<a-tooltip :title="$t('message.protocol.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['protocol', { initialValue: this.protocols[0], rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => this.protocolSelected = val">
|
||||
@ -91,12 +133,24 @@
|
||||
<div
|
||||
v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'iscsi' || protocolSelected === 'vmfs'|| protocolSelected === 'Gluster' ||
|
||||
(protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
|
||||
<a-form-item :label="$t('label.server')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.server') }}
|
||||
<a-tooltip :title="$t('message.server.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input v-decorator="['server', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'ocfs2' || (protocolSelected === 'PreSetup' && hypervisorType !== 'VMware') || protocolSelected === 'SharedMountPoint'">
|
||||
<a-form-item :label="$t('label.path')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.path') }}
|
||||
<a-tooltip :title="$t('message.path.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input v-decorator="['path', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
@ -120,14 +174,32 @@
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div v-if="protocolSelected === 'vmfs' || (protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
|
||||
<a-form-item :label="$t('label.vcenterdatacenter')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vcenterdatacenter') }}
|
||||
<a-tooltip :title="$t('message.datacenter.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.vcenterdatastore')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vcenterdatastore') }}
|
||||
<a-tooltip :title="$t('message.datastore.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input v-decorator="['vCenterDataStore', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<a-form-item :label="$t('label.providername')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.providername') }}
|
||||
<a-tooltip :title="apiParams.provider.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['provider', { initialValue: providerSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => this.providerSelected = val">
|
||||
@ -137,18 +209,42 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<div v-if="this.providerSelected !== 'DefaultPrimary'">
|
||||
<a-form-item :label="$t('label.ismanaged')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ismanaged') }}
|
||||
<a-tooltip :title="apiParams.managed.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-checkbox-group v-decorator="['managed']" >
|
||||
<a-checkbox value="ismanaged"></a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.capacitybytes')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.capacitybytes') }}
|
||||
<a-tooltip :title="apiParams.capacitybytes.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input v-decorator="['capacityBytes']" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.capacityiops')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.capacityiops') }}
|
||||
<a-tooltip :title="apiParams.capacityiops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input v-decorator="['capacityIops']" />
|
||||
</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 v-decorator="['url']" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
@ -175,7 +271,13 @@
|
||||
<a-input v-decorator="['volume']" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<a-form-item :label="$t('label.storagetags')">
|
||||
<a-form-item>
|
||||
<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-model="selectedTags"
|
||||
@ -230,6 +332,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.createStoragePool || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
|
||||
@ -463,7 +463,6 @@ export default {
|
||||
this.apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
console.log(this.apiParams)
|
||||
},
|
||||
created () {
|
||||
},
|
||||
|
||||
@ -17,7 +17,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form class="form-layout" :form="form" 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',
|
||||
@ -27,7 +33,13 @@
|
||||
]"
|
||||
:placeholder="$t('label.vpncustomergatewayname')" />
|
||||
</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
|
||||
v-decorator="[
|
||||
'gateway',
|
||||
@ -37,7 +49,13 @@
|
||||
]"
|
||||
:placeholder="$t('label.vpncustomergateway')" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.cidrlist')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.cidrlist') }}
|
||||
<a-tooltip :title="apiParams.cidrlist.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'cidrlist',
|
||||
@ -47,8 +65,13 @@
|
||||
]"
|
||||
:placeholder="$t('label.vpncustomergateway.cidrlist')" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="$t('label.ipsecpsk')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ipsecpsk') }}
|
||||
<a-tooltip :title="apiParams.ipsecpsk.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'ipsecpsk',
|
||||
@ -58,8 +81,7 @@
|
||||
]"
|
||||
:placeholder="$t('label.vpncustomergateway.secretkey')" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="$t('label.ikeencryption')">
|
||||
<a-form-item :label="$t('label.ikeencryption')">
|
||||
<a-select
|
||||
v-decorator="[
|
||||
'ikeEncryption',
|
||||
@ -72,8 +94,7 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="$t('label.ikehash')">
|
||||
<a-form-item :label="$t('label.ikehash')">
|
||||
<a-select
|
||||
v-decorator="[
|
||||
'ikeHash',
|
||||
@ -149,8 +170,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="$t('label.ikelifetime')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ikelifetime') }}
|
||||
<a-tooltip :title="apiParams.ikelifetime.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'ikelifetime',
|
||||
@ -160,8 +186,13 @@
|
||||
]"
|
||||
:placeholder="$t('label.vpncustomergateway.ikelifetime')"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="$t('label.esplifetime')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.esplifetime') }}
|
||||
<a-tooltip :title="apiParams.esplifetime.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'esplifetime',
|
||||
@ -171,7 +202,13 @@
|
||||
]"
|
||||
:placeholder="$t('label.vpncustomergateway.esplifetime')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.dpd')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.dpd') }}
|
||||
<a-tooltip :title="apiParams.dpd.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch
|
||||
v-decorator="[
|
||||
'dpd',
|
||||
@ -180,7 +217,13 @@
|
||||
},
|
||||
]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.forceencap')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.forceencap') }}
|
||||
<a-tooltip :title="apiParams.forceencap.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch
|
||||
v-decorator="[
|
||||
'forceencap',
|
||||
@ -241,6 +284,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.createVpnCustomerGateway || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
closeModal () {
|
||||
|
||||
@ -18,14 +18,26 @@
|
||||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<a-form class="form" :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.volume.name') }]
|
||||
}]"
|
||||
:placeholder="$t('label.volumename')"/>
|
||||
</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
|
||||
v-decorator="['zoneid', {
|
||||
initialValue: selectedZoneId,
|
||||
@ -40,7 +52,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.diskoffering')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.diskoffering') }}
|
||||
<a-tooltip :title="apiParams.diskofferingid.description || 'Disk Offering'">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['diskofferingid', {
|
||||
initialValue: selectedDiskOfferingId,
|
||||
@ -57,7 +75,13 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<span v-if="customDiskOffering">
|
||||
<a-form-item :label="$t('label.sizegb')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.sizegb') }}
|
||||
<a-tooltip :title="apiParams.size.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['size', {
|
||||
rules: [{ required: true, message: $t('message.error.custom.disk.size') }]}]"
|
||||
@ -89,6 +113,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.createVolume || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
|
||||
@ -44,14 +44,26 @@
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
</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
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.volume.name') }]
|
||||
}]"
|
||||
:placeholder="$t('label.volumename')" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.zone')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zone') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['zoneId', {
|
||||
initialValue: zoneSelected,
|
||||
@ -67,7 +79,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.format')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.format') }}
|
||||
<a-tooltip :title="apiParams.format.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['format', {
|
||||
initialValue: formats[0],
|
||||
@ -83,7 +101,13 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.volumechecksum')">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.volumechecksum') }}
|
||||
<a-tooltip :title="apiParams.checksum.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['checksum']"
|
||||
:placeholder="$t('label.volumechecksum.description')"
|
||||
@ -117,6 +141,11 @@ export default {
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiParams = {}
|
||||
var apiConfig = this.$store.getters.apis.getUploadParamsForVolume || {}
|
||||
apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.listZones()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user