[v3] UI: CPU Topology

From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/template-edit.css | 28 ++++++++++++++++- ui/js/src/kimchi.api.js | 14 ++++++++ ui/js/src/kimchi.template_edit_main.js | 52 ++++++++++++++++++++++++++++++- ui/pages/template-edit.html.tmpl | 19 +++++++---- 4 files changed, 103 insertions(+), 10 deletions(-) diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css index 094e909..7abee7c 100644 --- a/ui/css/theme-default/template-edit.css +++ b/ui/css/theme-default/template-edit.css @@ -142,4 +142,30 @@ #edit-template-tabs .hide { display: none; -} \ No newline at end of file +} + +#form-template-processor select, +#form-template-processor input[type="text"] { + margin-left: 10px; +} + +#form-template-processor input[type="checkbox"] { + margin-right: 5px; +} + +#form-template-processor .manual { + margin-top: 10px; + margin-left: -3px; +} + +#form-template-processor .topology { + margin: 10px 30px; +} + +#form-template-processor .topology div { + margin-bottom: 10px; +} + +#form-template-processor .topology select { + width: 80px; +} diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index 78c6d66..7a239c0 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -1260,5 +1260,19 @@ var kimchi = { kimchi.message.error(data.responseJSON.reason); } }); + }, + + getCPUInfo : function(suc, err) { + kimchi.requestJSON({ + url : kimchi.url + 'host/cpuinfo', + type : 'GET', + contentType : 'application/json', + dataType : 'json', + resend : true, + success : suc, + error : err ? err : function(data) { + kimchi.message.error(data.responseJSON.reason); + } + }); } }; diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index d4e19c2..1149541 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -200,14 +200,51 @@ kimchi.template_edit_main = function() { }); }); }; + var initProcessor = function(){ + var setCPUValue = function(){ + if(!$('#cores').hasClass("invalid-field")&&$('#cores').val()!=""){ + $("#cpus").val(parseInt($("#cores").val())*parseInt($("#threads").val())); + }else{ + $("#cpus").val(''); + } + }; + $("input:text", "#form-template-processor").on('keyup', function(){ + $(this).toggleClass("invalid-field", !$(this).val().match('^[0-9]*$')); + if($(this).prop('id')=='cores') setCPUValue(); + }); + $("input:checkbox", "#form-template-processor").click(function(){ + $(".topology", "#form-template-processor").toggleClass("hide", !$(this).prop("checked")); + $("#cpus").attr("disabled", $(this).prop("checked")); + setCPUValue(); + }); + $('select', '#form-template-processor').change(function(){ + setCPUValue(); + }); + kimchi.getCPUInfo(function(data){ + var options = ""; + for(var i=0;Math.pow(2,i)<=data.threads_per_core;i++){ + var lastOne = Math.pow(2,i+1)>data.threads_per_core?" selected":""; + options += "<option"+lastOne+">"+Math.pow(2,i)+"</option>"; + } + $('select', '#form-template-processor').append(options); + if(template.cpus) $("#cpus").val(template.cpus); + var topo = template.cpu_info.topology; + if(topo&&topo.cores) $("#cores").val(topo.cores); + if(topo&&topo.threads){ + $('select', '#form-template-processor').val(topo.threads); + $("input:checkbox", "#form-template-processor").trigger('click'); + } + }); + }; kimchi.listNetworks(initInterface); kimchi.listStoragePools(initStorage); + initProcessor(); }; kimchi.retrieveTemplate(kimchi.selectedTemplate, initTemplate); $('#tmpl-edit-button-save').on('click', function() { - var editableFields = [ 'name', 'cpus', 'memory', 'disks', 'graphics']; + var editableFields = [ 'name', 'memory', 'disks', 'graphics']; var data = {}; //Fix me: Only support one storage pool now var storages = $('.template-tab-body .item', '#form-template-storage'); @@ -241,7 +278,18 @@ kimchi.template_edit_main = function() { } }); data['memory'] = Number(data['memory']); - data['cpus'] = Number(data['cpus']); + data['cpus'] = parseInt($('#cpus').val()); + if($("input:checkbox", "#form-template-processor").prop("checked")){ + data['cpu_info'] = { + topology: { + sockets: 1, + cores: parseInt($("#cores").val()), + threads: parseInt($("#threads").val()) + } + }; + }else{ + data['cpu_info'] = {}; + } var networks = $('.template-tab-body .item', '#form-template-interface'); var networkForUpdate = new Array(); $.each(networks, function(index, networkEntities) { diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index 90a6256..7177bf0 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -40,6 +40,9 @@ <li> <a href="#form-template-interface">$_("Interface")</a> </li> + <li> + <a href="#form-template-processor">$_("Processor")</a> + </li> </ul> <form id="form-template-general"> <div class="form-template-inline-wrapper"> @@ -53,9 +56,6 @@ <label for="template-edit-version-textbox">$_("Version")</label> </div> <div class="template-edit-wrapper-label"> - <label for="template-edit-cpu-textbox">$_("CPU Number")</label> - </div> - <div class="template-edit-wrapper-label"> <label for="template-edit-memory-textbox">$_("Memory (MB)")</label> </div> <div class="template-edit-wrapper-label templ-edit-cdrom"> @@ -79,9 +79,6 @@ <input id="template-edit-version-textbox" name="os_version" type="text" disabled="disabled" /> </div> <div class="template-edit-wrapper-controls"> - <input id="template-edit-cpu-textbox" name="cpus" type="text" /> - </div> - <div class="template-edit-wrapper-controls"> <input id="template-edit-memory-textbox" name="memory" type="text" /> </div> <div class="template-edit-wrapper-controls templ-edit-cdrom"> @@ -120,6 +117,14 @@ </div> <div class="template-tab-body"></div> </form> + <form id="form-template-processor"> + <div>$_("CPU Number"):<input type="text" value="1" id="cpus"></div> + <div class="manual"><input type="checkbox">$_("Manually set CPU topology")</div> + <div class="topology hide"> + <div>$_("Cores"):<input type="text" value="1" id="cores"></div> + <div>$_("Threads"):<select id="threads"></select></div> + </div> + </form> </div> </div> <footer> @@ -157,4 +162,4 @@ <button class="delete"></button> </span> </div> -</script> \ No newline at end of file +</script> -- 1.7.1

Reviewed-By: Christy Perez <christy@linux.vnet.ibm.com> Tested-By: Christy Perez <christy@linux.vnet.ibm.com> Manually tested: - Template create - Template edit topo - VM create with topo template (verified topo was added to guest xml) - Template edit with too many vcpus (sockets * cores * threads > total host threads) resulted in the appropriate error - Template delete Thanks! On 11/24/2014 02:05 AM, huoyuxin@linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/template-edit.css | 28 ++++++++++++++++- ui/js/src/kimchi.api.js | 14 ++++++++ ui/js/src/kimchi.template_edit_main.js | 52 ++++++++++++++++++++++++++++++- ui/pages/template-edit.html.tmpl | 19 +++++++---- 4 files changed, 103 insertions(+), 10 deletions(-)
diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css index 094e909..7abee7c 100644 --- a/ui/css/theme-default/template-edit.css +++ b/ui/css/theme-default/template-edit.css @@ -142,4 +142,30 @@
#edit-template-tabs .hide { display: none; -} \ No newline at end of file +} + +#form-template-processor select, +#form-template-processor input[type="text"] { + margin-left: 10px; +} + +#form-template-processor input[type="checkbox"] { + margin-right: 5px; +} + +#form-template-processor .manual { + margin-top: 10px; + margin-left: -3px; +} + +#form-template-processor .topology { + margin: 10px 30px; +} + +#form-template-processor .topology div { + margin-bottom: 10px; +} + +#form-template-processor .topology select { + width: 80px; +} diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index 78c6d66..7a239c0 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -1260,5 +1260,19 @@ var kimchi = { kimchi.message.error(data.responseJSON.reason); } }); + }, + + getCPUInfo : function(suc, err) { + kimchi.requestJSON({ + url : kimchi.url + 'host/cpuinfo', + type : 'GET', + contentType : 'application/json', + dataType : 'json', + resend : true, + success : suc, + error : err ? err : function(data) { + kimchi.message.error(data.responseJSON.reason); + } + }); } }; diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index d4e19c2..1149541 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -200,14 +200,51 @@ kimchi.template_edit_main = function() { }); }); }; + var initProcessor = function(){ + var setCPUValue = function(){ + if(!$('#cores').hasClass("invalid-field")&&$('#cores').val()!=""){ + $("#cpus").val(parseInt($("#cores").val())*parseInt($("#threads").val())); + }else{ + $("#cpus").val(''); + } + }; + $("input:text", "#form-template-processor").on('keyup', function(){ + $(this).toggleClass("invalid-field", !$(this).val().match('^[0-9]*$')); + if($(this).prop('id')=='cores') setCPUValue(); + }); + $("input:checkbox", "#form-template-processor").click(function(){ + $(".topology", "#form-template-processor").toggleClass("hide", !$(this).prop("checked")); + $("#cpus").attr("disabled", $(this).prop("checked")); + setCPUValue(); + }); + $('select', '#form-template-processor').change(function(){ + setCPUValue(); + }); + kimchi.getCPUInfo(function(data){ + var options = ""; + for(var i=0;Math.pow(2,i)<=data.threads_per_core;i++){ + var lastOne = Math.pow(2,i+1)>data.threads_per_core?" selected":""; + options += "<option"+lastOne+">"+Math.pow(2,i)+"</option>"; + } + $('select', '#form-template-processor').append(options); + if(template.cpus) $("#cpus").val(template.cpus); + var topo = template.cpu_info.topology; + if(topo&&topo.cores) $("#cores").val(topo.cores); + if(topo&&topo.threads){ + $('select', '#form-template-processor').val(topo.threads); + $("input:checkbox", "#form-template-processor").trigger('click'); + } + }); + }; kimchi.listNetworks(initInterface); kimchi.listStoragePools(initStorage); + initProcessor(); }; kimchi.retrieveTemplate(kimchi.selectedTemplate, initTemplate);
$('#tmpl-edit-button-save').on('click', function() { - var editableFields = [ 'name', 'cpus', 'memory', 'disks', 'graphics']; + var editableFields = [ 'name', 'memory', 'disks', 'graphics']; var data = {}; //Fix me: Only support one storage pool now var storages = $('.template-tab-body .item', '#form-template-storage'); @@ -241,7 +278,18 @@ kimchi.template_edit_main = function() { } }); data['memory'] = Number(data['memory']); - data['cpus'] = Number(data['cpus']); + data['cpus'] = parseInt($('#cpus').val()); + if($("input:checkbox", "#form-template-processor").prop("checked")){ + data['cpu_info'] = { + topology: { + sockets: 1, + cores: parseInt($("#cores").val()), + threads: parseInt($("#threads").val()) + } + }; + }else{ + data['cpu_info'] = {}; + } var networks = $('.template-tab-body .item', '#form-template-interface'); var networkForUpdate = new Array(); $.each(networks, function(index, networkEntities) { diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index 90a6256..7177bf0 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -40,6 +40,9 @@ <li> <a href="#form-template-interface">$_("Interface")</a> </li> + <li> + <a href="#form-template-processor">$_("Processor")</a> + </li> </ul> <form id="form-template-general"> <div class="form-template-inline-wrapper"> @@ -53,9 +56,6 @@ <label for="template-edit-version-textbox">$_("Version")</label> </div> <div class="template-edit-wrapper-label"> - <label for="template-edit-cpu-textbox">$_("CPU Number")</label> - </div> - <div class="template-edit-wrapper-label"> <label for="template-edit-memory-textbox">$_("Memory (MB)")</label> </div> <div class="template-edit-wrapper-label templ-edit-cdrom"> @@ -79,9 +79,6 @@ <input id="template-edit-version-textbox" name="os_version" type="text" disabled="disabled" /> </div> <div class="template-edit-wrapper-controls"> - <input id="template-edit-cpu-textbox" name="cpus" type="text" /> - </div> - <div class="template-edit-wrapper-controls"> <input id="template-edit-memory-textbox" name="memory" type="text" /> </div> <div class="template-edit-wrapper-controls templ-edit-cdrom"> @@ -120,6 +117,14 @@ </div> <div class="template-tab-body"></div> </form> + <form id="form-template-processor"> + <div>$_("CPU Number"):<input type="text" value="1" id="cpus"></div> + <div class="manual"><input type="checkbox">$_("Manually set CPU topology")</div> + <div class="topology hide"> + <div>$_("Cores"):<input type="text" value="1" id="cores"></div> + <div>$_("Threads"):<select id="threads"></select></div> + </div> + </form> </div> </div> <footer> @@ -157,4 +162,4 @@ <button class="delete"></button> </span> </div> -</script> \ No newline at end of file +</script>
participants (3)
-
Aline Manera
-
Christy Perez
-
huoyuxin@linux.vnet.ibm.com