compute: Simplifying Deploy VM Wizard (#499)

Fixes #490
Fixes #491

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/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",

ui/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') }}
@@ -203,24 +209,6 @@
                   </div>
                 </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'">
@@ -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({

ui/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')"

ui/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)
     }
   }