mirror of https://github.com/apache/cloudstack.git
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 <abhishek.mrt22@gmail.com> Co-authored-by: Abhishek Kumar <abhishek.mrt22@gmail.com> Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Nicolas Vazquez
Rohit Yadav
parent
6a2e15d147
commit
3a81c55932
|
|
@ -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 = []
|
||||
|
|
|
|||
Loading…
Reference in New Issue