[Kimchi-devel] [PATCH] [Kimchi 4/9] 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 | 43 +++++++++++++++------ 4 files changed, 121 insertions(+), 57 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 9a9ff25..b4b2603 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 fde25a7..e9eab0a 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 d720cf0..cda132b 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -730,8 +730,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)); @@ -762,14 +760,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()); @@ -791,6 +781,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); @@ -810,7 +801,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]; @@ -841,12 +856,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) { @@ -874,34 +885,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 a9a468e..8513dc1 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -37,6 +37,8 @@ <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 +47,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" /> @@ -182,6 +173,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