CPU configuration UI: several improvements

- Removed 'More' button from the Processor tab in Edit Template. This was done to be standardized with the Edit Guest tab that does not have this button to show/hide the max processor value. - Save button state is now being controlled by the init_processor_tab function (at least inside the Processor tab). - 'Current CPU' is now editable at all times, in both Edit Guest and Edit Template dialogs, even when defining a topology. Inserting a wrong value in the field will invalidate the save state, disabling the button. When defining a topology and Current CPU has an inconsistent value, it will be automatically adjusted to be (1) a multiple of threads or (2) equal to new Max CPU value, in that order. - When not defining a topology, setting any Current CPU value greater than Max CPU will force the field back to the Max CPU value. Signed-off-by: Daniel Henrique Barboza <danielhb@linux.vnet.ibm.com>
kimchi-project · Nov 24, 2016 · feb5f88 · feb5f88
1 parent 4ebe1df
commit feb5f88
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 33 deletions.
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
@@ -1669,10 +1669,6 @@ body.wok-gallery {
   display: inline;
 }
 
-#template-edit-window #guest-max-processor-panel {
-  display: none;
-}
-
 #template-edit-window #guest-show-max-processor {
   display: inline-block;
 }

diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
@@ -126,9 +126,6 @@ $kimchi-icon-path: '../images';
         width: 308px !important;
         display: inline;
     }
-    #guest-max-processor-panel {
-        display: none;
-    }
     #guest-show-max-processor {
         display: inline-block;
     }

diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
@@ -1032,7 +1032,7 @@ kimchi.guest_edit_main = function() {
         setupPermission();
         setupPCIDevice();
         setupSnapshot();
-        kimchi.init_processor_tab(guest.cpu_info);
+        kimchi.init_processor_tab(guest.cpu_info, $(saveButton));
 
         wok.topic('kimchi/vmCDROMAttached').subscribe(onAttached);
         wok.topic('kimchi/vmCDROMReplaced').subscribe(onReplaced);

diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
@@ -16,39 +16,59 @@
  * limitations under the License.
  */
 
-kimchi.init_processor_tab = function(cpu_info) {
-    var setCPUValue = function(){
+kimchi.init_processor_tab = function(cpu_info, save_form_button) {
+
+    var getMaxVCpus = function() {
         if (!$('#sockets').hasClass("invalid-field") &&
             !$('#cores').hasClass("invalid-field") &&
-            $('#sockets').val()!="" && $('#cores').val()!="") {
+            $('#sockets').val() != "" && $('#cores').val() != "") {
 
-            var sockets = parseInt($("#sockets").val());
-            var cores = parseInt($("#cores").val());
-            var threads = parseInt($("#threads").val());
+                var sockets = parseInt($("#sockets").val());
+                var cores = parseInt($("#cores").val());
+                var threads = parseInt($("#threads").val());
+                var computedCpu = sockets * cores * threads;
+
+                return computedCpu;
+        }
+        return undefined;
+    };
 
-            var computedCpu = sockets * cores * threads;
-            $("#vcpus").val(computedCpu);
-            if ($("#cpus-check").prop("checked")) {
-                //If topology is checked, set maxcpu to be the same as # of cpu otherwise, backend gives error
-                $("#guest-edit-max-processor-textbox").val(computedCpu);
+    var setCPUValue = function() {
+        var computedCpu = getMaxVCpus();
+        var vcpus = parseInt($("#vcpus").val());
+
+        if (computedCpu && $("#cpus-check").prop("checked")) {
+            // If topology is checked, set maxcpu to be the same as # of cpu otherwise, backend gives error
+            var threads = parseInt($("#threads").val());
+            $("#guest-edit-max-processor-textbox").val(computedCpu);
+            if (vcpus % threads != 0) {
+                $("#vcpus").val(threads);
+            } else if (vcpus > computedCpu) {
+                $("#vcpus").val(computedCpu);
             }
         } else {
-            $("#vcpus").val('');
+            var maxCpu = parseInt($("#guest-edit-max-processor-textbox").val());
+            if (vcpus > maxCpu) {
+                $("#vcpus").val(maxCpu);
+            }
         }
     };
 
     $("input:text", "#form-edit-processor").on('keyup', function() {
-        $(this).toggleClass("invalid-field", !$(this).val().match('^[0-9]*$'));
+        var invalid_field = !$(this).val().match('^[0-9]*$');
+        $(this).toggleClass("invalid-field", invalid_field);
+        save_form_button.prop('disabled', invalid_field);
+
         if ($(this).prop('id') == 'sockets' ||
-        $(this).prop('id') == 'cores') {
+            $(this).prop('id') == 'cores') {
+
             setCPUValue();
         }
     });
 
     $("input:checkbox", "#form-edit-processor").click(function() {
         $('#threads').selectpicker();
         $(".topology", "#form-edit-processor").slideToggle();
-        $("#vcpus").attr("disabled", $(this).prop("checked"));
         $("#guest-edit-max-processor-textbox").attr("disabled", $(this).prop("checked"));
         setCPUValue();
     });
@@ -57,6 +77,23 @@ kimchi.init_processor_tab = function(cpu_info) {
         setCPUValue();
     });
 
+    $('#vcpus').change(function() {
+        var computedCpu = getMaxVCpus();
+        var vcpus = parseInt($('#vcpus').val());
+
+        if (computedCpu && $("#cpus-check").prop("checked")) {
+            var threads = parseInt($("#threads").val());
+            var invalid_vcpu = (vcpus % threads != 0) || (vcpus > computedCpu);
+            $(this).toggleClass("invalid-field", invalid_vcpu);
+            save_form_button.prop('disabled', invalid_vcpu);
+        } else {
+            var maxCpu = parseInt($("#guest-edit-max-processor-textbox").val());
+            if (vcpus > maxCpu) {
+                $("#vcpus").val(maxCpu);
+            }
+         }
+    });
+
     kimchi.getCPUInfo(function(data) {
         var options = "";
         var topo = cpu_info.topology;
@@ -86,14 +123,6 @@ kimchi.init_processor_tab = function(cpu_info) {
             $("input:checkbox", "#form-edit-processor").trigger('click');
         }
     });
-
-    $('#guest-show-max-processor').on('click', function(e) {
-        e.preventDefault;
-        $('#guest-max-processor-panel').slideToggle();
-        var text = $('#guest-show-max-processor span.text').text();
-        $('#guest-show-max-processor span.text').text(text == i18n['KCHVMED6008M'] ? i18n['KCHVMED6009M'] : i18n['KCHVMED6008M']);
-        $('#guest-show-max-processor i.fa').toggleClass('fa-plus-circle fa-minus-circle');
-    });
 };
 
 
@@ -748,7 +777,7 @@ kimchi.template_edit_main = function() {
             kimchi.listStoragePools(initStorage);
         }
 
-        kimchi.init_processor_tab(template.cpu_info);
+        kimchi.init_processor_tab(template.cpu_info, $('#tmpl-edit-button-save'));
         checkInvalids();
     };
     kimchi.retrieveTemplate(kimchi.selectedTemplate, initTemplate);

diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
@@ -156,7 +156,6 @@
                             <div id="guest-processor">
                                 <label for="vcpus">$_("Current CPU Number")</label>
                                 <input id="vcpus" class="form-control" name="processor" type="number" min="1" />
-                                <button id="guest-show-max-processor" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button>
                             </div>
                             <div id="guest-max-processor-panel" class="form-group">
                                 <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label>