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 22b1899 Improve vApps properties section adding categories and sort
order (#593)
22b1899 is described below
commit 22b18995284f44d94c663b40056aadb4c0a7c068
Author: Nicolas Vazquez <[email protected]>
AuthorDate: Wed Aug 19 09:21:00 2020 -0300
Improve vApps properties section adding categories and sort order (#593)
* Improve vApps properties section adding categories and sort order
* fix vapps property with select error
Signed-off-by: Abhishek Kumar <[email protected]>
Co-authored-by: Abhishek Kumar <[email protected]>
---
src/views/compute/DeployVM.vue | 129 +++++++++++++++++++++++------------------
1 file changed, 71 insertions(+), 58 deletions(-)
diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 18f48cc..18f90a4 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -332,61 +332,64 @@
<a-step
:title="$t('label.ovf.properties')"
:status="zoneSelected ? 'process' : 'wait'"
- v-if="vm.templateid && templateProperties &&
templateProperties.length > 0">
+ v-if="vm.templateid && templateProperties &&
Object.keys(templateProperties).length > 0">
<template slot="description">
- <div>
- <a-form-item
- v-for="(property, propertyIndex) in templateProperties"
- :key="propertyIndex"
- :v-bind="property.key" >
- <span slot="label">
- {{ property.label }}
- <a-tooltip :title="property.description">
- <a-icon type="info-circle" style="color:
rgba(0,0,0,.45)" />
- </a-tooltip>
- </span>
+ <div v-for="(props, category) in templateProperties"
:key="category">
+ <a-alert :message="'Category: ' + category + ' (' +
props.length + ' properties)'" type="info" />
+ <div style="margin-left: 15px; margin-top: 10px">
+ <a-form-item
+ v-for="(property, propertyIndex) in props"
+ :key="propertyIndex"
+ :v-bind="property.key" >
+ <span slot="label">
+ {{ property.label }}
+ <a-tooltip :title="property.description">
+ <a-icon type="info-circle" style="color:
rgba(0,0,0,.45)" />
+ </a-tooltip>
+ </span>
- <span v-if="property.type && property.type==='boolean'">
- <a-switch
- v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue:
property.value==='TRUE'?true:false}]"
- :defaultChecked="property.value==='TRUE'?true:false"
- :placeholder="property.description"
- />
- </span>
- <span v-else-if="property.type && (property.type==='int'
|| property.type==='real')">
- <a-input-number
- v-decorator="['properties.'+
escapePropertyKey(property.key) ]"
- :defaultValue="property.value"
- :placeholder="property.description"
- :min="getPropertyQualifiers(property.qualifiers,
'number-select').min"
- :max="getPropertyQualifiers(property.qualifiers,
'number-select').max" />
- </span>
- <span v-else-if="property.type &&
property.type==='string' && property.qualifiers &&
property.qualifiers.startsWith('ValueMap')">
- <a-select
- showSearch
- optionFilterProp="children"
- v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue: property.value.length>0 ?
property.value: getPropertyQualifiers(property.qualifiers, 'select')[0] }]"
- :placeholder="property.description"
- :filterOption="(input, option) => {
- return
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())
>= 0
- }"
- >
- <a-select-option v-for="opt in
getPropertyQualifiers(property.qualifiers, 'select')" :key="opt">
- {{ opt }}
- </a-select-option>
- </a-select>
- </span>
- <span v-else-if="property.type &&
property.type==='string' && property.password">
- <a-input-password
- v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue: property.value }]"
- :placeholder="property.description" />
- </span>
- <span v-else>
- <a-input
- v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue: property.value }]"
- :placeholder="property.description" />
- </span>
- </a-form-item>
+ <span v-if="property.type &&
property.type==='boolean'">
+ <a-switch
+ v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue:
property.value==='TRUE'?true:false}]"
+
:defaultChecked="property.value==='TRUE'?true:false"
+ :placeholder="property.description"
+ />
+ </span>
+ <span v-else-if="property.type &&
(property.type==='int' || property.type==='real')">
+ <a-input-number
+ v-decorator="['properties.'+
escapePropertyKey(property.key) ]"
+ :defaultValue="property.value"
+ :placeholder="property.description"
+ :min="getPropertyQualifiers(property.qualifiers,
'number-select').min"
+ :max="getPropertyQualifiers(property.qualifiers,
'number-select').max" />
+ </span>
+ <span v-else-if="property.type &&
property.type==='string' && property.qualifiers &&
property.qualifiers.startsWith('ValueMap')">
+ <a-select
+ showSearch
+ optionFilterProp="children"
+ v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue: property.value &&
property.value.length>0 ? property.value:
getPropertyQualifiers(property.qualifiers, 'select')[0] }]"
+ :placeholder="property.description"
+ :filterOption="(input, option) => {
+ return
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())
>= 0
+ }"
+ >
+ <a-select-option v-for="opt in
getPropertyQualifiers(property.qualifiers, 'select')" :key="opt">
+ {{ opt }}
+ </a-select-option>
+ </a-select>
+ </span>
+ <span v-else-if="property.type &&
property.type==='string' && property.password">
+ <a-input-password
+ v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue: property.value }]"
+ :placeholder="property.description" />
+ </span>
+ <span v-else>
+ <a-input
+ v-decorator="['properties.' +
escapePropertyKey(property.key), { initialValue: property.value }]"
+ :placeholder="property.description" />
+ </span>
+ </a-form-item>
+ </div>
</div>
</template>
</a-step>
@@ -643,7 +646,7 @@ export default {
templateConfigurations: [],
templateNics: [],
templateLicenses: [],
- templateProperties: [],
+ templateProperties: {},
selectedTemplateConfiguration: {},
iso: {},
hypervisor: '',
@@ -1133,7 +1136,7 @@ export default {
this.selectedTemplateConfiguration = {}
this.templateNics = []
this.templateLicenses = []
- this.templateProperties = []
+ this.templateProperties = {}
this.updateTemplateParameters()
if (t.deployasis === true && !t.details && (!this.template || t.id
!== this.template.id)) {
// Deploy as-is template without details detected, need to
retrieve the template details
@@ -1152,7 +1155,7 @@ export default {
this.selectedTemplateConfiguration = {}
this.templateNics = []
this.templateLicenses = []
- this.templateProperties = []
+ this.templateProperties = {}
this.tabKey = 'isoid'
this.form.setFieldsValue({
isoid: value,
@@ -1629,6 +1632,16 @@ export default {
}
return nics
},
+ groupBy (array, key) {
+ const result = {}
+ array.forEach(item => {
+ if (!result[item[key]]) {
+ result[item[key]] = []
+ }
+ result[item[key]].push(item)
+ })
+ return result
+ },
fetchTemplateProperties (template) {
var properties = []
if (template && template.details && Object.keys(template.details).length
> 0) {
@@ -1639,10 +1652,10 @@ export default {
properties.push(propertyMap)
}
properties.sort(function (a, b) {
- return a.label.localeCompare(b.label)
+ return a.index - b.index
})
}
- return properties
+ return this.groupBy(properties, 'category')
},
fetchTemplateConfigurations (template) {
var configurations = []
