From a9a2d38ff47e8731df664dea520dc37c5cdccc5a Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Tue, 18 Aug 2020 16:51:31 +0200
Subject: [PATCH] M #~: Fix capacity inputs in forms (#156)

(cherry picked from commit 358d0ec5c58c97cdd99bcc121ed0842bc52843c6)
---
 .../wizard-tabs/general/capacity-inputs.js    | 40 ++++++++++++++-----
 .../general/capacity-inputs/html.hbs          | 14 ++++---
 .../public/app/utils/range-slider/html.hbs    |  2 +-
 src/sunstone/public/app/utils/user-inputs.js  |  3 +-
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js
index dd3d8ce26c..85daf33a13 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js
@@ -161,21 +161,39 @@ define(function(require) {
     }
 
     $("div.vcpu_input", context).html(input);
-    $("div.vcpu_input input", context).val(attr.min);
+
+    var cpuInput = $("div.cpu_input input, div.cpu_input select", context);
     var vcpuInput = $("div.vcpu_input input, div.vcpu_input select", context);
     vcpuInput.off();
 
     if (Config.isFeatureEnabled("instantiate_cpu_factor")){
-      vcpuInput.on("change", function() {
+      vcpuInput.on("change keyup", function() {
         var vcpuValue = $(this).val();
-        if (vcpuValue !== ""){
-          $("div.cpu_input input", context).val(vcpuValue * Config.scaleFactor);
+        if (vcpuValue !== "") {
+          var scaleFactorValue = vcpuValue * Config.scaleFactor
+          var minCpuValue = $("div.cpu_input input.visor", context).attr("min");
+          var maxCpuValue = $("div.cpu_input input.visor", context).attr("max");
+
+          if (scaleFactorValue <= minCpuValue) {
+            cpuInput.val(minCpuValue);
+          }
+          else if (scaleFactorValue >= maxCpuValue) {
+            cpuInput.val(maxCpuValue);
+          }
+          else {
+            if (cpuInput.is("select")) {
+              if ($("option[value='"+ scaleFactorValue +"']", cpuInput).length !== 0) {
+                cpuInput.val(scaleFactorValue);
+              }
+            }
+            else cpuInput.val(scaleFactorValue);
+          }
         } else {
-          $("div.cpu_input input", context).val("");
+          cpuInput.val("");
         }
       });
       
-      $("div.cpu_input input", context).prop("disabled", true);
+      cpuInput.prop("disabled", true);
       var vcpuValue = vcpuInput.val();
       if (vcpuValue && vcpuValue !== "") {
         vcpuInput.trigger("change")
@@ -194,20 +212,20 @@ define(function(require) {
 
       vcpuInput.on("change keyup", function(e){
         element = $("div.vcpu_input input.visor", context);
-        if(element.length){
-          min = element.attr("data-min");
-          max = element.attr("data-max");
+        if (element.length) {
+          min = element.attr("min");
+          max = element.attr("max");
           if(parseInt(element.val(),10) >= parseInt(min,10) && parseInt(element.val(),10)<= parseInt(max,10)){
             $("div.vcpu_input input", context).val(element.val());
             _generateCores(context);
             $('#CORES_PER_SOCKET option[value=""]').prop('selected', true);
             _calculateSockets(context);
-          }else{
+          } else{
             element.val(max);
             $("div.vcpu_input input", context).val(max).change();
             Notifier.notifyError(Locale.tr("The value goes out of the allowed limits"));
           }
-        }else{
+        } else{
           _generateCores(context);
           $('#CORES_PER_SOCKET option[value=""]').prop('selected', true);
           _calculateSockets(context);
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs
index 6e2b1617d5..ce2df34c1d 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs
@@ -29,12 +29,14 @@
 </div>
 <div class="row">
   <div class="cpu_input_wrapper small-12 columns">
-    <label style="padding: 0; text-align: left" class="small-5 columns" for="CPU">
-      {{tr "Physical CPU"}}
-      {{{tip (tr "Percentage of CPU divided by 100 required for the Virtual Machine. Half a processor is written 0.5.")}}}
-    </label>
-    <label style="padding: 0; text-align: right" class="small-7 columns" id="quotas-cpu" hidden>
-    </label>
+    <div class="row small-12 columns">
+      <label style="padding: 0; text-align: left" class="small-5 columns" for="CPU">
+        {{tr "Physical CPU"}}
+        {{{tip (tr "Percentage of CPU divided by 100 required for the Virtual Machine. Half a processor is written 0.5.")}}}
+      </label>
+      <label style="padding: 0; text-align: right" class="small-7 columns" id="quotas-cpu" hidden>
+      </label>
+    </div>
     <div class="cpu_input">
     </div>
   </div>
diff --git a/src/sunstone/public/app/utils/range-slider/html.hbs b/src/sunstone/public/app/utils/range-slider/html.hbs
index a7eea6e077..0e8cddfb01 100644
--- a/src/sunstone/public/app/utils/range-slider/html.hbs
+++ b/src/sunstone/public/app/utils/range-slider/html.hbs
@@ -40,7 +40,7 @@
       {{#unless wizard_field_disabled}}wizard_field="{{name}}"{{/unless}}
       {{#if disabled}}disabled="true"{{/if}}/>
     <input type="number" class="visor"
-      data-min="{{min}}" data-max="{{max_value}}"
+      min="{{min}}" max="{{max_value}}"
       value="{{initial}}" required/>
   </div>
 </div>
diff --git a/src/sunstone/public/app/utils/user-inputs.js b/src/sunstone/public/app/utils/user-inputs.js
index d171fcaacd..c746dd9362 100644
--- a/src/sunstone/public/app/utils/user-inputs.js
+++ b/src/sunstone/public/app/utils/user-inputs.js
@@ -881,7 +881,8 @@ define(function(require) {
         input = "<select "+wizard_field+" "+required+">";
         $.each(attr.options, function(){
           var selected = (attr.initial == this);
-          input +=  "<option value='"+this+"' "+(selected? "selected" : "")+">"+this+"</option>";
+          var trimmedValue = $.trim(this);
+          input +=  "<option value='"+trimmedValue+"' "+(selected? "selected" : "")+">"+trimmedValue+"</option>";
         });
         input += "</select>";
       break;