[Kimchi-devel] [PATCH] [Kimchi 4/6] Adding 'Processor' tab in Edit Guest dialog

dhbarboza82 at gmail.com dhbarboza82 at gmail.com
Wed Nov 23 12:11:18 UTC 2016


From: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>

This patch adds the 'Processor' tab in the Edit Guest dialog,
allowing full control of the CPU configuration of an existing
guest in the same way it is done in the Edit Template dialog.

Signed-off-by: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>
---
 ui/css/kimchi.css                    | 32 +++++++++++++--
 ui/css/src/modules/_edit-guests.scss | 28 ++++++++++++--
 ui/js/src/kimchi.guest_edit_main.js  | 75 +++++++++++++++++-------------------
 ui/pages/guest-edit.html.tmpl        | 42 ++++++++++++++------
 4 files changed, 120 insertions(+), 57 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index de23053..61d8dc0 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1090,9 +1090,7 @@ body.wok-gallery {
 }
 
 #guest-edit-window #form-guest-edit-general #guest-edit-memory-textbox,
-#guest-edit-window #form-guest-edit-general #guest-show-max-memory,
-#guest-edit-window #form-guest-edit-general #guest-edit-cores-textbox,
-#guest-edit-window #form-guest-edit-general #guest-show-max-processor {
+#guest-edit-window #form-guest-edit-general #guest-show-max-memory {
   display: inline-block;
 }
 
@@ -1117,6 +1115,34 @@ body.wok-gallery {
   width: 4.47%;
 }
 
+#guest-edit-window #form-edit-processor #guest-processor label {
+  display: block;
+}
+
+#guest-edit-window #form-edit-processor #guest-max-processor-panel label {
+  display: block;
+}
+
+#guest-edit-window #form-edit-processor #guest-max-processor-panel .form-control,
+#guest-edit-window #form-edit-processor #guest-processor .form-control {
+  display: inline-block;
+  width: 184px;
+}
+
+#guest-edit-window #form-edit-processor .manual {
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+#guest-edit-window #form-edit-processor .topology {
+  display: none;
+  margin: 0 24px;
+}
+
+#guest-edit-window #form-edit-processor .topology label {
+  display: block;
+}
+
 #guest-edit-window form {
   margin: 15px 0 0;
 }
diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss
index fb7a91c..6caa720 100644
--- a/ui/css/src/modules/_edit-guests.scss
+++ b/ui/css/src/modules/_edit-guests.scss
@@ -39,9 +39,7 @@
         }
 
         #guest-edit-memory-textbox,
-        #guest-show-max-memory,
-        #guest-edit-cores-textbox,
-        #guest-show-max-processor {
+        #guest-show-max-memory {
             display: inline-block;
         }
 
@@ -70,6 +68,30 @@
             width: 4.47%;
         }
     }
+    #form-edit-processor {
+        #guest-processor label {
+            display: block;
+        }
+        #guest-max-processor-panel label {
+            display: block;
+        }
+        #guest-max-processor-panel .form-control,
+        #guest-processor .form-control {
+            display: inline-block;
+            width: 184px;
+        }
+        .manual {
+            margin-top: 5px;
+            margin-bottom: 10px;
+        }
+        .topology {
+            display: none;
+            margin: 0 24px;
+        }
+        .topology label {
+            display: block;
+        }
+    }
     form {
         margin: 15px 0 0;
         .header,
diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
index 3261075..0ee0e87 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -968,8 +968,6 @@ kimchi.guest_edit_main = function() {
     };
 
     var initContent = function(guest) {
-        guest['vcpus'] = guest.cpu_info['vcpus'];
-        guest['max-processor'] = guest.cpu_info['maxvcpus'];
         guest['icon'] = guest['icon'] || 'plugins/kimchi/images/icon-vm.png';
         $('#form-guest-edit-general').fillWithObject(guest);
         $('#guest-edit-memory-textbox').val(parseInt(guest.memory.current));
@@ -1000,14 +998,6 @@ kimchi.guest_edit_main = function() {
             $('#guest-show-max-memory i.fa').toggleClass('fa-plus-circle fa-minus-circle');
         });
 
-        $('#guest-show-max-processor').on('click', function(e) {
-            e.preventDefault;
-            $('#guest-max-processor-panel').slideToggle();
-            var cputext = $('#guest-show-max-processor span.cputext').text();
-            $('#guest-show-max-processor span.cputext').text(cputext == i18n['KCHVMED6008M'] ? i18n['KCHVMED6009M'] : i18n['KCHVMED6008M']);
-            $('#guest-show-max-processor i.fa').toggleClass('fa-plus-circle fa-minus-circle');
-        });
-
         if ((kimchi.thisVMState !== "running") && (kimchi.thisVMState !== "paused")) {
             $("#guest-edit-memory-textbox").bind('keyup blur', function(e) {
                 $('#guest-edit-max-memory-textbox').val($(this).val());
@@ -1042,6 +1032,7 @@ kimchi.guest_edit_main = function() {
         setupPermission();
         setupPCIDevice();
         setupSnapshot();
+        kimchi.init_processor_tab(guest.cpu_info);
 
         wok.topic('kimchi/vmCDROMAttached').subscribe(onAttached);
         wok.topic('kimchi/vmCDROMReplaced').subscribe(onReplaced);
@@ -1061,7 +1052,31 @@ kimchi.guest_edit_main = function() {
             $(saveButton).prop('disabled', true);
             var data = $('#form-guest-edit-general').serializeObject();
             data['memory'] = {current: Number(data['memory-ui']), maxmemory: Number(data['max-memory'])};
-            data['cpu_info'] = {maxvcpus: Number(data['max-processor']), vcpus: Number(data['vcpus']), topology: org['cpu_info']['topology']};
+
+            var cpu = parseInt($('#vcpus').val());
+            var maxCpu = parseInt($('#guest-edit-max-processor-textbox').val());
+            var maxCpuFinal = cpu;
+            if (maxCpu >= cpu) {
+                maxCpuFinal = maxCpu;
+            }
+            if ($("input:checkbox", "#form-edit-processor").prop("checked")) {
+                data['cpu_info'] = {
+                    vcpus: cpu,
+                    maxvcpus: maxCpuFinal,
+                    topology: {
+                        sockets: parseInt($("#sockets").val()),
+                        cores: parseInt($("#cores").val()),
+                        threads: parseInt($("#threads").val())
+                    }
+                };
+            } else {
+                data['cpu_info'] = {
+                    vcpus: cpu,
+                    maxvcpus: maxCpuFinal,
+                    topology: {}
+                };
+            }
+
             var changedFields = {};
             for (var key in data) {
                 valueFromUI = data[key];
@@ -1092,12 +1107,8 @@ kimchi.guest_edit_main = function() {
             }
             var origMem = Number(org.memory.current);
             var origMaxMem = Number(org.memory.maxmemory);
-            var origCpu = Number(org.cpu_info.vcpus);
-            var origMaxCpu = Number(org.cpu_info.maxvcpus);
             var currentMem = data['memory-ui'];
             var currentMaxMem = data['max-memory'];
-            var currentCpu = data['vcpus'];
-            var currentMaxCpu = data['max-processor'];
 
             if ('memory' in changedFields) {
                 if (currentMaxMem !== undefined) {
@@ -1125,34 +1136,18 @@ kimchi.guest_edit_main = function() {
                     delete changedFields.memory.current;
                 }
             }
+
             if ('cpu_info' in changedFields) {
-                if (currentMaxCpu !== undefined) {
-                    currentMaxCpu = Number(currentMaxCpu);
-                    if (currentMaxCpu === origMaxCpu) {
-                        delete changedFields.cpu_info.maxvcpus;
-                    }
-                } else {
-                    delete changedFields.cpu_info.maxvcpus;
-                }
-                if (currentCpu !== undefined) {
-                    currentCpu = Number(currentCpu);
-                    if (currentMaxCpu !== undefined && currentCpu > currentMaxCpu) {
-                        wok.message.error(i18n['KCHVM0003E'], '#alert-modal-container');
-                        $(saveButton).prop('disabled', false);
-                        return;
-                    }
-                    if (currentCpu === origCpu) {
-                        delete changedFields.cpu_info.vcpus;
-                    }
-                    if (currentMaxCpu === origMaxCpu) {
-                        delete changedFields.cpu_info.maxvcpus;
-                    }
-                } else {
-                    delete changedFields.cpu_info.vcpus;
+                var currentCpu = data['cpu_info'].vcpus;
+                var currentMaxCpu = data['cpu_info'].maxvcpus;
+
+                if (currentCpu > currentMaxCpu) {
+                    wok.message.error(i18n['KCHVM0003E'], '#alert-modal-container');
+                    $(saveButton).prop('disabled', false);
+                    return;
                 }
-                // Delete this as it is not applicable regardless
-                delete changedFields.cpu_info.topology;
             }
+
             kimchi.updateVM(kimchi.selectedGuest, changedFields, function() {
                 kimchi.listVmsAuto();
                 wok.window.close();
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index 7e0e3d3..66e82ab 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -37,6 +37,7 @@
     <li role="presentation"><a href="#form-guest-edit-permission" aria-controls="form-guest-edit-permission" role="tab" data-id="form-guest-edit-permission" data-toggle="tab">$_("Permission")</a></li>
     <li role="presentation"><a href="#form-guest-edit-pci" aria-controls="form-guest-edit-pci" role="form-guest-edit-pci" data-id="form-guest-edit-pci" data-toggle="tab">$_("Pci")</a></li>
     <li role="presentation"><a href="#form-guest-edit-snapshot" aria-controls="form-guest-edit-snapshot" role="tab" data-id="form-guest-edit-snapshot" data-toggle="tab">$_("Snapshot")</a></li>
+    <li role="presentation"><a href="#form-edit-processor" aria-controls="form-edit-processor" role="tab" data-id="form-edit-processor" data-toggle="tab">$_("Processor")</a></li>
   </ul>
         <div class="tab-content" id="guest-edit-tabs">
             <form role="tabpanel" class="tab-pane active" id="form-guest-edit-general">
@@ -45,17 +46,6 @@
                     <input id="guest-edit-id-textbox" class="form-control" name="name" type="text" />
                 </div>
                 <div class="form-group">
-                    <label for="guest-edit-cores-textbox">$_("Current CPUs")</label>
-                    <div id="guest-processor">
-                        <input id="guest-edit-cores-textbox" class="form-control" name="vcpus" 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="cputext">$_("More")</span></button>
-                    </div>
-                </div>
-                <div id="guest-max-processor-panel" class="form-group">
-                    <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label>
-                    <input id="guest-edit-max-processor-textbox" class="form-control" name="max-processor" type="number" min="1" />
-                </div>
-                <div class="form-group">
                     <label for="guest-edit-memory-textbox">$_("Memory (MB)")</label>
                     <div id="guest-memory">
                         <input id="guest-edit-memory-textbox" class="form-control" name="memory-ui" type="number" min="1024" step="1024" />
@@ -197,6 +187,36 @@
                 <div class="task"></div>
                 <div class="body"></div>
             </form>
+            <form role="tabpanel" class="tab-pane" id="form-edit-processor">
+                <div class="form-group">
+                    <div id="guest-processor">
+                        <label for="vcpus">$_("Current CPU Number")</label>
+                        <input id="vcpus" class="form-control" name="processor" type="number" min="1" />
+                    </div>
+                    <div id="guest-max-processor-panel" class="form-group">
+                        <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label>
+                        <input id="guest-edit-max-processor-textbox" class="form-control" name="max-processor" type="number" min="1" />
+                    </div>
+                </div>
+                <div class="manual form-group">
+                    <input type="checkbox" class="wok-checkbox" id="cpus-check" />
+                    <label for="cpus-check">$_("Manually set CPU topology")</label>
+                </div>
+                <div class="topology">
+                    <div class="form-group">
+                        <label for="sockets">$_("Sockets")</label>
+                        <input type="text" class="form-control" value="1" id="sockets" />
+                    </div>
+                    <div class="form-group">
+                        <label for="cores">$_("Cores")</label>
+                        <input type="text" class="form-control" value="1" id="cores" />
+                    </div>
+                    <div class="form-group">
+                        <label for="threads">$_("Threads")</label>
+                        <select id="threads" class="selectpicker col-md-12 col-lg-12"></select>
+                    </div>
+                </div>
+            </form>
         </div>
     </div>
     <div class="modal-footer">
-- 
2.7.4




More information about the Kimchi-devel mailing list