This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new 7790f60 Contextual data (#611)
7790f60 is described below
commit 7790f60414c95af9e5094267b2991fa087730549
Author: Pearl Dsilva <[email protected]>
AuthorDate: Tue Aug 25 13:07:09 2020 +0530
Contextual data (#611)
* Add contextual info to forms
* additional tooltips - Primary storage form
Co-authored-by: Pearl Dsilva <[email protected]>
---
src/locales/en.json | 5 +
src/views/infra/AddPrimaryStorage.vue | 141 ++++++++++++++++++++++---
src/views/network/CreateSharedNetworkForm.vue | 1 -
src/views/network/CreateVpnCustomerGateway.vue | 78 +++++++++++---
src/views/storage/CreateVolume.vue | 37 ++++++-
src/views/storage/UploadLocalVolume.vue | 37 ++++++-
6 files changed, 258 insertions(+), 41 deletions(-)
diff --git a/src/locales/en.json b/src/locales/en.json
index 00dc048..c185ed1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -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 ad [...]
@@ -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 [...]
+"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:",
diff --git a/src/views/infra/AddPrimaryStorage.vue
b/src/views/infra/AddPrimaryStorage.vue
index 00716a4..0537889 100644
--- a/src/views/infra/AddPrimaryStorage.vue
+++ b/src/views/infra/AddPrimaryStorage.vue
@@ -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()
diff --git a/src/views/network/CreateSharedNetworkForm.vue
b/src/views/network/CreateSharedNetworkForm.vue
index f7820d0..4aa28f8 100644
--- a/src/views/network/CreateSharedNetworkForm.vue
+++ b/src/views/network/CreateSharedNetworkForm.vue
@@ -463,7 +463,6 @@ export default {
this.apiConfig.params.forEach(param => {
this.apiParams[param.name] = param
})
- console.log(this.apiParams)
},
created () {
},
diff --git a/src/views/network/CreateVpnCustomerGateway.vue
b/src/views/network/CreateVpnCustomerGateway.vue
index 865044e..87941b8 100644
--- a/src/views/network/CreateVpnCustomerGateway.vue
+++ b/src/views/network/CreateVpnCustomerGateway.vue
@@ -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 () {
diff --git a/src/views/storage/CreateVolume.vue
b/src/views/storage/CreateVolume.vue
index 05da6b3..4211aec 100644
--- a/src/views/storage/CreateVolume.vue
+++ b/src/views/storage/CreateVolume.vue
@@ -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()
diff --git a/src/views/storage/UploadLocalVolume.vue
b/src/views/storage/UploadLocalVolume.vue
index cc9e004..d2f6058 100644
--- a/src/views/storage/UploadLocalVolume.vue
+++ b/src/views/storage/UploadLocalVolume.vue
@@ -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()
