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

[huoyuxin at linux.vnet.ibm.com]

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 |   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>
-- 
1.7.1