Make UI changes to provide root disk size box when the linked disk offering is of custom

Author: harikrishna-patnala

ui/src/views/compute/DeployVM.vue

@@ -282,7 +282,7 @@
                         @change="val => { updateOverrideRootDiskShowParam(val) }"
                         style="margin-left: 10px;"/>
                     </span>
-                    <span v-if="tabKey!=='isoid' && serviceOffering && !serviceOffering.diskofferingstrictness && this.showOverrideDiskOfferingOption">
+                    <span v-if="tabKey!=='isoid' && serviceOffering && !serviceOffering.diskofferingstrictness">
                       <a-step
                         :status="zoneSelected ? 'process' : 'wait'"
                         v-if="!template.deployasis && template.childtemplates && template.childtemplates.length > 0" >
@@ -302,6 +302,7 @@
                         <template slot="description">
                           <div v-if="zoneSelected">
                             <disk-offering-selection
+                              v-if="showOverrideDiskOfferingOption"
                               :items="options.diskOfferings"
                               :row-count="rowCount.diskOfferings"
                               :zoneId="zoneId"
@@ -319,11 +320,11 @@
                               input-decorator="rootdisksize"
                               :preFillContent="dataPreFill"
                               :minDiskSize="dataPreFill.minrootdisksize"
-                              :rootDiskSelected="rootDiskSelected"
+                              :rootDiskSelected="overrideDiskOffering"
                               :isCustomized="overrideDiskOffering.iscustomized"
                               @handler-error="handlerError"
-                              @update-root-disk-iops-value="updateIOPSValue"
-                              @update-disk-size="updateFieldValue"/>
+                              @update-disk-size="updateFieldValue"
+                              @update-root-disk-iops-value="updateIOPSValue"/>
                             <a-form-item class="form-item-hidden">
                               <a-input v-decorator="['rootdisksize']"/>
                             </a-form-item>
@@ -1166,19 +1167,23 @@ export default {
       }
 
       this.serviceOffering = _.find(this.options.serviceOfferings, (option) => option.id === instanceConfig.computeofferingid)
-      if (this.serviceOffering && this.serviceOffering.diskofferingid) {
+      if (this.serviceOffering?.diskofferingid) {
         if (iso) {
           this.diskOffering = _.find(this.options.diskOfferings, (option) => option.id === this.serviceOffering.diskofferingid)
         } else {
           instanceConfig.overridediskofferingid = this.serviceOffering.diskofferingid
         }
-      } else {
-        if (!iso) {
-          this.diskOffering = _.find(this.options.diskOfferings, (option) => option.id === instanceConfig.diskofferingid)
-        }
+      }
+      if (!iso && this.diskSelected) {
+        this.diskOffering = _.find(this.options.diskOfferings, (option) => option.id === instanceConfig.diskofferingid)
+      }
+      if (this.rootDiskSelected?.id) {
+        instanceConfig.overridediskofferingid = this.rootDiskSelected.id
       }
       if (instanceConfig.overridediskofferingid) {
         this.overrideDiskOffering = _.find(this.options.diskOfferings, (option) => option.id === instanceConfig.overridediskofferingid)
+      } else {
+        this.overrideDiskOffering = null
       }
       this.zone = _.find(this.options.zones, (option) => option.id === instanceConfig.zoneid)
       this.affinityGroups = _.filter(this.options.affinityGroups, (option) => _.includes(instanceConfig.affinitygroupids, option.id))
@@ -1381,6 +1386,8 @@ export default {
     updateOverrideRootDiskShowParam (val) {
       if (val) {
         this.showRootDiskSizeChanger = false
+      } else {
+        this.rootDiskSelected = null
       }
       this.showOverrideDiskOfferingOption = val
     },
@@ -1656,7 +1663,7 @@ export default {
           deployVmData.templateid = values.isoid
         }
 
-        if ((this.showRootDiskSizeChanger || this.rootDiskSelected?.iscustomized) && values.rootdisksize && values.rootdisksize > 0) {
+        if (values.rootdisksize && values.rootdisksize > 0) {
           deployVmData.rootdisksize = values.rootdisksize
         } else if (this.rootDiskSizeFixed > 0) {
           deployVmData.rootdisksize = this.rootDiskSizeFixed

ui/src/views/compute/wizard/ComputeSelection.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <a-card>
+  <a-card v-if="isCustomized">
     <a-col>
       <a-row>
         <a-col :md="colContraned" :lg="colContraned" v-if="isCustomized">

ui/src/views/compute/wizard/DiskSizeSelection.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-row :span="24" :style="{ marginTop: '20px' }">
-    <a-col :span="isCustomizedDiskIOps ? 8 : 24" v-if="isCustomized">
+    <a-col :span="isCustomizedDiskIOps || isCustomizedIOps ? 8 : 24" v-if="isCustomized">
       <a-form-item
         :label="inputDecorator === 'rootdisksize' ? $t('label.root.disk.size') : $t('label.disksize')"
         class="form-item">
@@ -32,25 +32,13 @@
         <p v-if="error" style="color: red"> {{ $t(error) }} </p>
       </a-form-item>
     </a-col>
-    <a-col :span="8" v-if="isCustomizedDiskIOps">
+    <a-col :span="8" v-if="isCustomizedDiskIOps || isCustomizedIOps">
       <a-form-item :label="$t('label.diskiopsmin')">
         <a-input-number v-model="minIOps" @change="updateDiskIOps" />
         <p v-if="errorMinIOps" style="color: red"> {{ $t(errorMinIOps) }} </p>
       </a-form-item>
     </a-col>
-    <a-col :span="8" v-if="isCustomizedDiskIOps">
-      <a-form-item :label="$t('label.diskiopsmax')">
-        <a-input-number v-model="maxIOps" @change="updateDiskIOps" />
-        <p v-if="errorMaxIOps" style="color: red"> {{ $t(errorMaxIOps) }} </p>
-      </a-form-item>
-    </a-col>
-    <a-col :span="8" v-if="isCustomizedIOps">
-      <a-form-item :label="$t('label.diskiopsmin')">
-        <a-input-number v-model="minIOps" @change="updateDiskIOps" />
-        <p v-if="errorMinIOps" style="color: red"> {{ $t(errorMinIOps) }} </p>
-      </a-form-item>
-    </a-col>
-    <a-col :span="8" v-if="isCustomizedIOps">
+    <a-col :span="8" v-if="isCustomizedDiskIOps || isCustomizedIOps">
       <a-form-item :label="$t('label.diskiopsmax')">
         <a-input-number v-model="maxIOps" @change="updateDiskIOps" />
         <p v-if="errorMaxIOps" style="color: red"> {{ $t(errorMaxIOps) }} </p>