UI - Scale VM - Fix compute offering selection not working (apache#5392)

* scale VM: fix compute offering selection not working

* hidden slider when cpuspeed empty & show customiops

* remove logs

* fix condition

* fix condition for coltranned

Author: Hoang Nguyen

ui/src/components/view/InfoCard.vue

@@ -26,7 +26,7 @@
               @click="$message.success(`${$t('label.copied.clipboard')} : ${name}`)"
               v-clipboard:copy="name" >
               <slot name="avatar">
-                <os-logo v-if="resource.ostypeid || resource.ostypename" :osId="resource.ostypeid" :osName="resource.ostypename" size="4x" @update-osname="(name) => this.resource.ostypename = name"/>
+                <os-logo v-if="resource.ostypeid || resource.ostypename" :osId="resource.ostypeid" :osName="resource.ostypename" size="4x" @update-osname="(name) => resource.ostypename = name"/>
                 <a-icon v-else-if="typeof $route.meta.icon ==='string'" style="font-size: 36px" :type="$route.meta.icon" />
                 <a-icon v-else style="font-size: 36px" :component="$route.meta.icon" />
               </slot>

ui/src/views/compute/ScaleVM.vue

@@ -32,7 +32,7 @@
       @handle-search-filter="($event) => fetchData($event)" />
 
     <compute-selection
-      v-if="selectedOffering && selectedOffering.iscustomized"
+      v-if="selectedOffering && (selectedOffering.iscustomized || selectedOffering.iscustomizediops)"
       :cpunumber-input-decorator="cpuNumberKey"
       :cpuspeed-input-decorator="cpuSpeedKey"
       :memory-input-decorator="memoryKey"
@@ -42,6 +42,8 @@
       :maxCpu="'serviceofferingdetails' in selectedOffering ? selectedOffering.serviceofferingdetails.maxcpunumber*1 : Number.MAX_SAFE_INTEGER"
       :minMemory="getMinMemory()"
       :maxMemory="'serviceofferingdetails' in selectedOffering ? selectedOffering.serviceofferingdetails.maxmemory*1 : Number.MAX_SAFE_INTEGER"
+      :isCustomized="selectedOffering.iscustomized"
+      :isCustomizedIOps="'iscustomizediops' in selectedOffering && selectedOffering.iscustomizediops"
       @update-compute-cpunumber="updateFieldValue"
       @update-compute-cpuspeed="updateFieldValue"
       @update-compute-memory="updateFieldValue" />
@@ -120,14 +122,14 @@ export default {
       if (this.resource.state === 'Running') {
         return this.resource.cpunumber
       }
-      return 'serviceofferingdetails' in this.selectedOffering ? this.selectedOffering.serviceofferingdetails.mincpunumber * 1 : 1
+      return this.selectedOffering?.serviceofferingdetails?.mincpunumber * 1 || 1
     },
     getMinMemory () {
       // We can only scale up while a VM is running
       if (this.resource.state === 'Running') {
         return this.resource.memory
       }
-      return 'serviceofferingdetails' in this.selectedOffering ? this.selectedOffering.serviceofferingdetails.minmemory * 1 : 32
+      return this.selectedOffering?.serviceofferingdetails?.minmemory * 1 || 32
     },
     getMessage () {
       if (this.resource.hypervisor === 'VMware') {

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

@@ -25,7 +25,7 @@
             :validate-status="errors.cpu.status"
             :help="errors.cpu.message">
             <a-row :gutter="12">
-              <a-col :md="10" :lg="10" v-show="isConstrained">
+              <a-col :md="10" :lg="10" v-show="isConstrained && maxCpu && !isNaN(maxCpu)">
                 <a-slider
                   :min="minCpu"
                   :max="maxCpu"
@@ -61,7 +61,7 @@
             :validate-status="errors.memory.status"
             :help="errors.memory.message">
             <a-row :gutter="12">
-              <a-col :md="10" :lg="10" v-show="isConstrained">
+              <a-col :md="10" :lg="10" v-show="isConstrained && maxMemory && !isNaN(maxMemory)">
                 <a-slider
                   :min="minMemory"
                   :max="maxMemory"
@@ -175,7 +175,11 @@ export default {
   },
   computed: {
     colContraned () {
-      return this.isConstrained ? 12 : 8
+      if (this.isConstrained && this.maxCpu && !isNaN(this.maxCpu)) {
+        return 12
+      }
+
+      return 8
     }
   },
   watch: {