Re: [Kimchi-devel] [v2] UI: CPU Topology

From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/template-edit.css | 28 ++++++++++++++++++- ui/js/src/kimchi.api.js | 14 +++++++++ ui/js/src/kimchi.template_edit_main.js | 47 +++++++++++++++++++++++++++++++- ui/pages/template-edit.html.tmpl | 16 ++++++++--- 4 files changed, 99 insertions(+), 6 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..9536ab7 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -200,8 +200,44 @@ 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); + if(template.cpu_info.cores) $("#cores").val(template.cpu_info.cores); + if(template.cpu_info.threads){ + $('select', '#form-template-processor').val(template.cpu_info.threads); + $("input:checkbox", "#form-template-processor").trigger('click'); + } + }); + }; kimchi.listNetworks(initInterface); kimchi.listStoragePools(initStorage); + initProcessor(); }; kimchi.retrieveTemplate(kimchi.selectedTemplate, initTemplate); @@ -241,7 +277,16 @@ 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'] = { + 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..f43b9c0 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"> @@ -120,6 +120,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 +165,4 @@ <button class="delete"></button> </span> </div> -</script> \ No newline at end of file +</script>