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 9e61270 compute: Simplifying Deploy VM Wizard (#499) 9e61270 is described below commit 9e61270a9b87ab840a8a885f3996ef5f097a8f33 Author: davidjumani <dj.davidjumani1...@gmail.com> AuthorDate: Wed Jul 8 12:32:39 2020 +0530 compute: Simplifying Deploy VM Wizard (#499) Fixes #490 Fixes #491 --- src/locales/en.json | 1 + src/views/compute/DeployVM.vue | 95 +++++++++++++--------- .../compute/wizard/AffinityGroupSelection.vue | 1 + src/views/compute/wizard/DiskSizeSelection.vue | 36 +++++--- 4 files changed, 82 insertions(+), 51 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 285fafa..f8530b4 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1408,6 +1408,7 @@ "label.overprovisionfactor": "Overprovisioning Factor", "label.override.guest.traffic": "Override Guest-Traffic", "label.override.public.traffic": "Override Public-Traffic", +"label.override.rootdisk.size": "Override Root Disk Size", "label.overrideguesttraffic": "Override Guest-Traffic", "label.overridepublictraffic": "Override Public-Traffic", "label.ovf.properties": "OVF Properties", diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue index ce7084b..cd1836e 100644 --- a/src/views/compute/DeployVM.vue +++ b/src/views/compute/DeployVM.vue @@ -89,12 +89,18 @@ :selected="tabKey" :loading="loading.templates" :preFillContent="dataPreFill" - @update-template-iso="updateFieldValue" - ></template-iso-selection> + @update-template-iso="updateFieldValue" /> + <span> + {{ $t('label.override.rootdisk.size') }} + <a-switch @change="val => { this.showRootDiskSizeChanger = val }" style="margin-left: 10px;"/> + </span> <disk-size-selection + v-show="showRootDiskSizeChanger" input-decorator="rootdisksize" :preFillContent="dataPreFill" - @update-disk-size="updateFieldValue"/> + :minDiskSize="dataPreFill.minrootdisksize" + @update-disk-size="updateFieldValue" + style="margin-top: 10px;"/> </p> <p v-else> {{ $t('message.iso.desc') }} @@ -204,24 +210,6 @@ </template> </a-step> <a-step - :title="this.$t('label.affinity.groups')" - :status="zoneSelected ? 'process' : 'wait'"> - <template slot="description"> - <div v-if="zoneSelected"> - <affinity-group-selection - :items="options.affinityGroups" - :row-count="rowCount.affinityGroups" - :zoneId="zoneId" - :value="affinityGroupIds" - :loading="loading.affinityGroups" - :preFillContent="dataPreFill" - @select-affinity-group-item="($event) => updateAffinityGroups($event)" - @handle-search-filter="($event) => handleSearchFilter('affinityGroups', $event)" - ></affinity-group-selection> - </div> - </template> - </a-step> - <a-step :title="this.$t('label.networks')" :status="zoneSelected ? 'process' : 'wait'"> <template slot="description"> @@ -265,25 +253,14 @@ </template> </a-step> <a-step - :title="this.$t('label.details')" + :title="$t('label.advanced.mode')" :status="zoneSelected ? 'process' : 'wait'"> <template slot="description" v-if="zoneSelected"> - {{ $t('message.vm.review.launch') }} - <div style="margin-top: 15px"> - <a-form-item :label="$t('label.name.optional')"> - <a-input - v-decorator="['name']" - /> - </a-form-item> - <a-form-item :label="$t('label.group.optional')"> - <a-input v-decorator="['group']" /> - </a-form-item> - <a-form-item :label="$t('label.keyboard')"> - <a-select - v-decorator="['keyboard']" - :options="keyboardSelectOptions" - ></a-select> - </a-form-item> + <span> + {{ $t('label.isadvanced') }} + <a-switch @change="val => { this.showDetails = val }" style="margin-left: 10px"/> + </span> + <div style="margin-top: 15px" v-show="this.showDetails"> <div v-if="vm.templateid && ['KVM', 'VMware'].includes(hypervisor)"> <a-form-item :label="$t('label.vm.boottype')"> @@ -317,6 +294,40 @@ v-decorator="['userdata']"> </a-textarea> </a-form-item> + <a-form-item :label="this.$t('label.affinity.groups')"> + <affinity-group-selection + :items="options.affinityGroups" + :row-count="rowCount.affinityGroups" + :zoneId="zoneId" + :value="affinityGroupIds" + :loading="loading.affinityGroups" + :preFillContent="dataPreFill" + @select-affinity-group-item="($event) => updateAffinityGroups($event)" + @handle-search-filter="($event) => handleSearchFilter('affinityGroups', $event)"/> + </a-form-item> + </div> + </template> + </a-step> + <a-step + :title="this.$t('label.details')" + :status="zoneSelected ? 'process' : 'wait'"> + <template slot="description" v-if="zoneSelected"> + <div style="margin-top: 15px"> + {{ $t('message.vm.review.launch') }} + <a-form-item :label="$t('label.name.optional')"> + <a-input + v-decorator="['name']" + /> + </a-form-item> + <a-form-item :label="$t('label.group.optional')"> + <a-input v-decorator="['group']" /> + </a-form-item> + <a-form-item :label="$t('label.keyboard')"> + <a-select + v-decorator="['keyboard']" + :options="keyboardSelectOptions" + ></a-select> + </a-form-item> </div> </template> </a-step> @@ -505,7 +516,9 @@ export default { } ], tabKey: 'templateid', - dataPreFill: {} + dataPreFill: {}, + showDetails: false, + showRootDiskSizeChanger: false } }, computed: { @@ -880,6 +893,10 @@ export default { templateid: value, isoid: null }) + const templates = this.options.templates.filter(x => x.id === value) + if (templates.length > 0) { + this.dataPreFill.minrootdisksize = templates[0].size / (1024 * 1024 * 1024) || 0 // bytes to GB + } } else if (name === 'isoid') { this.tabKey = 'isoid' this.form.setFieldsValue({ diff --git a/src/views/compute/wizard/AffinityGroupSelection.vue b/src/views/compute/wizard/AffinityGroupSelection.vue index 25a9fbd..8c6d5e9 100644 --- a/src/views/compute/wizard/AffinityGroupSelection.vue +++ b/src/views/compute/wizard/AffinityGroupSelection.vue @@ -17,6 +17,7 @@ <template> <div> + {{ $t('message.select.affinity.groups') }} <a-input-search style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8" :placeholder="$t('label.search')" diff --git a/src/views/compute/wizard/DiskSizeSelection.vue b/src/views/compute/wizard/DiskSizeSelection.vue index 204b65f..b4f9a77 100644 --- a/src/views/compute/wizard/DiskSizeSelection.vue +++ b/src/views/compute/wizard/DiskSizeSelection.vue @@ -20,24 +20,17 @@ :label="inputDecorator === 'rootdisksize' ? $t('label.root.disk.size') : $t('label.disksize')" class="form-item"> <a-row :gutter="12"> - <a-col :md="10" :lg="10"> - <a-slider - :min="0" - :max="1024" - v-model="inputValue" - @change="($event) => updateDiskSize($event)" - /> - </a-col> <a-col :md="4" :lg="4"> <span style="display: inline-flex"> <a-input-number v-model="inputValue" @change="($event) => updateDiskSize($event)" /> - <span style="padding-top: 6px">GB</span> + <span style="padding-top: 6px; margin-left: 5px">GB</span> </span> </a-col> </a-row> + <p v-if="error" style="color: red"> {{ $t(error) }} </p> </a-form-item> </template> @@ -52,11 +45,23 @@ export default { preFillContent: { type: Object, default: () => {} + }, + minDiskSize: { + type: Number, + default: 0 + } + }, + watch: { + minDiskSize (newItem) { + if (this.inputValue < newItem) { + this.inputValue = newItem + } } }, data () { return { - inputValue: 0 + inputValue: 0, + error: false } }, mounted () { @@ -64,14 +69,21 @@ export default { }, methods: { fillValue () { + this.inputValue = this.minDiskSize if (this.inputDecorator === 'rootdisksize') { - this.inputValue = this.preFillContent.rootdisksize ? this.preFillContent.rootdisksize : 0 + this.inputValue = this.preFillContent.rootdisksize ? this.preFillContent.rootdisksize : this.minDiskSize } else if (this.inputDecorator === 'size') { - this.inputValue = this.preFillContent.size ? this.preFillContent.size : 0 + this.inputValue = this.preFillContent.size ? this.preFillContent.size : this.minDiskSize } this.$emit('update-disk-size', this.inputDecorator, this.inputValue) }, updateDiskSize (value) { + if (value < this.minDiskSize) { + this.inputValue = this.minDiskSize + this.error = 'The value must not be less than ' + this.minDiskSize + ' GB' + return + } + this.error = false this.$emit('update-disk-size', this.inputDecorator, value) } }