From a307b4eaa4d0d5ea52023ac70de770581dcec863 Mon Sep 17 00:00:00 2001
From: Hoang Nguyen <hoangnm@unitech.vn>
Date: Wed, 17 Jun 2020 17:11:28 +0700
Subject: [PATCH] compute: Add boottype and bootmode to VM instance (#364)

Fixes #339

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/views/compute/DeployVM.vue            | 146 +++++++++++++++----
 ui/src/views/dashboard/CapacityDashboard.vue |   6 +-
 2 files changed, 120 insertions(+), 32 deletions(-)

diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index 4071a7a2616..9d2ca966684 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -26,14 +26,10 @@
             layout="vertical"
           >
             <a-steps direction="vertical" size="small">
-              <a-step :title="this.$t('label.details')" status="process">
+              <a-step :title="this.$t('label.select.deployment.infrastructure')" status="process">
                 <template slot="description">
                   <div style="margin-top: 15px">
-                    <a-form-item :label="this.$t('label.name')">
-                      <a-input
-                        v-decorator="['name']"
-                      />
-                    </a-form-item>
+                    <span>{{ $t('message.select.a.zone') }}</span><br/>
                     <a-form-item :label="this.$t('label.zoneid')">
                       <a-select
                         v-decorator="['zoneid', {
@@ -73,20 +69,6 @@
                         :loading="loading.hosts"
                       ></a-select>
                     </a-form-item>
-                    <a-form-item :label="this.$t('label.group')">
-                      <a-input v-decorator="['group']" />
-                    </a-form-item>
-                    <a-form-item :label="this.$t('label.keyboard')">
-                      <a-select
-                        v-decorator="['keyboard']"
-                        :options="keyboardSelectOptions"
-                      ></a-select>
-                    </a-form-item>
-                    <a-form-item :label="this.$t('label.userdata')">
-                      <a-textarea
-                        v-decorator="['userdata']">
-                      </a-textarea>
-                    </a-form-item>
                   </div>
                 </template>
               </a-step>
@@ -100,6 +82,7 @@
                       :activeTabKey="tabKey"
                       @tabChange="key => onTabChange(key, 'tabKey')">
                       <p v-if="tabKey === 'templateid'">
+                        {{ $t('message.template.desc') }}
                         <template-iso-selection
                           input-decorator="templateid"
                           :items="options.templates"
@@ -114,6 +97,7 @@
                           @update-disk-size="updateFieldValue"/>
                       </p>
                       <p v-else>
+                        {{ $t('message.iso.desc') }}
                         <template-iso-selection
                           input-decorator="isoid"
                           :items="options.isos"
@@ -133,11 +117,6 @@
                             @change="value => this.hypervisor = value" />
                         </a-form-item>
                       </p>
-                      <a-form-item :label="this.$t('label.bootintosetup')" v-if="zoneSelected && ((tabKey === 'isoid' && hypervisor === 'VMware') || (tabKey === 'templateid' && template && template.hypervisor === 'VMware'))" >
-                        <a-switch
-                          v-decorator="['bootintosetup']">
-                        </a-switch>
-                      </a-form-item>
                     </a-card>
                     <a-form-item class="form-item-hidden">
                       <a-input v-decorator="['templateid']"/>
@@ -275,6 +254,62 @@
                   </div>
                 </template>
               </a-step>
+              <a-step
+                :title="this.$t('label.details')"
+                :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>
+                    <div
+                      v-if="vm.templateid && ['KVM', 'VMware'].includes(hypervisor)">
+                      <a-form-item :label="$t('label.vm.boottype')">
+                        <a-select
+                          v-decorator="['boottype']"
+                          @change="fetchBootModes"
+                        >
+                          <a-select-option v-for="bootType in options.bootTypes" :key="bootType.id">
+                            {{ bootType.description }}
+                          </a-select-option>
+                        </a-select>
+                      </a-form-item>
+                      <a-form-item :label="$t('label.vm.bootmode')">
+                        <a-select
+                          v-decorator="['bootmode']">
+                          <a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id">
+                            {{ bootMode.description }}
+                          </a-select-option>
+                        </a-select>
+                      </a-form-item>
+                    </div>
+                    <a-form-item
+                      :label="this.$t('label.bootintosetup')"
+                      v-if="zoneSelected && ((tabKey === 'isoid' && hypervisor === 'VMware') || (tabKey === 'templateid' && template && template.hypervisor === 'VMware'))" >
+                      <a-switch
+                        v-decorator="['bootintosetup']">
+                      </a-switch>
+                    </a-form-item>
+                    <a-form-item :label="$t('label.userdata')">
+                      <a-textarea
+                        v-decorator="['userdata']">
+                      </a-textarea>
+                    </a-form-item>
+                  </div>
+                </template>
+              </a-step>
             </a-steps>
             <div class="card-footer">
               <!-- ToDo extract as component -->
@@ -373,7 +408,9 @@ export default {
         clusters: [],
         hosts: [],
         groups: [],
-        keyboards: []
+        keyboards: [],
+        bootTypes: [],
+        bootModes: []
       },
       loading: {
         deploy: false,
@@ -634,8 +671,12 @@ export default {
     instanceConfig (instanceConfig) {
       this.template = _.find(this.options.templates, (option) => option.id === instanceConfig.templateid)
       this.iso = _.find(this.options.isos, (option) => option.id === instanceConfig.isoid)
-      var hypervisorItem = _.find(this.options.hypervisors, (option) => option.name === instanceConfig.hypervisor)
-      this.hypervisor = hypervisorItem ? hypervisorItem.name : null
+
+      if (instanceConfig.hypervisor) {
+        var hypervisorItem = _.find(this.options.hypervisors, (option) => option.name === instanceConfig.hypervisor)
+        this.hypervisor = hypervisorItem ? hypervisorItem.name : null
+      }
+
       this.serviceOffering = _.find(this.options.serviceOfferings, (option) => option.id === instanceConfig.computeofferingid)
       this.diskOffering = _.find(this.options.diskOfferings, (option) => option.id === instanceConfig.diskofferingid)
       this.zone = _.find(this.options.zones, (option) => option.id === instanceConfig.zoneid)
@@ -735,8 +776,11 @@ export default {
       }
 
       this.fetchKeyboard()
+      this.fetchBootTypes()
+      this.fetchBootModes()
+
       Vue.nextTick().then(() => {
-        ['name', 'keyboard', 'userdata'].forEach(this.fillValue)
+        ['name', 'keyboard', 'boottype', 'bootmode', 'userdata'].forEach(this.fillValue)
         this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
       })
     },
@@ -782,6 +826,43 @@ export default {
 
       this.$set(this.options, 'keyboards', keyboardType)
     },
+    fetchBootTypes () {
+      const bootTypes = []
+
+      bootTypes.push({
+        id: 'BIOS',
+        description: 'BIOS'
+      })
+      bootTypes.push({
+        id: 'UEFI',
+        description: 'UEFI'
+      })
+
+      this.options.bootTypes = bootTypes
+      this.$forceUpdate()
+    },
+    fetchBootModes (bootType) {
+      const bootModes = []
+
+      if (bootType === 'UEFI') {
+        bootModes.push({
+          id: 'LEGACY',
+          description: 'LEGACY'
+        })
+        bootModes.push({
+          id: 'SECURE',
+          description: 'SECURE'
+        })
+      } else {
+        bootModes.push({
+          id: 'LEGACY',
+          description: 'LEGACY'
+        })
+      }
+
+      this.options.bootModes = bootModes
+      this.$forceUpdate()
+    },
     fetchNetwork () {
       const param = this.params.networks
       this.fetchOptions(param, 'networks')
@@ -885,6 +966,8 @@ export default {
         deployVmData.hostid = values.hostid
         deployVmData.group = values.group
         deployVmData.keyboard = values.keyboard
+        deployVmData.boottype = values.boottype
+        deployVmData.bootmode = values.bootmode
         if (values.userdata && values.userdata.length > 0) {
           deployVmData.userdata = encodeURIComponent(btoa(this.sanitizeReverse(values.userdata)))
         }
@@ -1037,6 +1120,11 @@ export default {
             }
             param.opts = response
             this.options[name] = response
+
+            if (name === 'hypervisors') {
+              this.hypervisor = response[0] && response[0].name ? response[0].name : null
+            }
+
             this.$forceUpdate()
             if (param.field) {
               this.fillValue(param.field)
diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index 593c7a15d3c..55b444bc247 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -17,7 +17,7 @@
 
 <template>
   <a-row class="capacity-dashboard" :gutter="12">
-    <a-col :xl="16">
+    <a-col :xl="18">
       <div class="capacity-dashboard-wrapper">
         <div class="capacity-dashboard-select">
           <a-select
@@ -48,7 +48,7 @@
         <a-col
           :xs="12"
           :sm="8"
-          :md="8"
+          :md="6"
           :style="{ marginBottom: '12px' }"
           v-for="stat in stats"
           :key="stat.type">
@@ -71,7 +71,7 @@
       </a-row>
     </a-col>
 
-    <a-col :xl="8">
+    <a-col :xl="6">
       <chart-card>
         <div style="text-align: center">
           <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper">