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 <[email protected]>
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)
}
}
