[Kimchi-devel] [v3] UI: CPU Topology
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Mon Nov 24 08:05:08 UTC 2014
From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin at 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
More information about the Kimchi-devel
mailing list