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

From: Daniel Henrique Barboza <danielhb(a)linux.vnet.ibm.com&gt; 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(a)linux.vnet.ibm.com&gt; --- 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