[Kimchi-devel] [PATCH] UI: template supports networks

Xin Ding xinding at linux.vnet.ibm.com
Mon Jan 6 08:30:17 UTC 2014


Add network to edit Template.

Signed-off-by: Xin Ding <xinding at linux.vnet.ibm.com>
---
 ui/css/theme-default/template-edit.css | 37 ++++++++++++++++++++++---
 ui/js/src/kimchi.template_edit_main.js | 50 ++++++++++++++++++++++++++++++++++
 ui/pages/template-edit.html.tmpl       | 38 ++++++++++++++++++++++++--
 3 files changed, 119 insertions(+), 6 deletions(-)

diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css
index e61b2fb..360395d 100644
--- a/ui/css/theme-default/template-edit.css
+++ b/ui/css/theme-default/template-edit.css
@@ -20,7 +20,7 @@
  */
 #template-edit-window {
     font-size: 13px;
-    height: 400px;
+    height: 460px;
     width: 1000px;
 }
 
@@ -59,9 +59,9 @@
     width: 250px;
 }
 
-.template-edit-wrapper-controls > .dropdown {
-    margin: 5px 0 0 1px;
-    width: 250px;
+.template-edit-wrapper-controls .dropdown {
+    margin: 5px 0 0 0;
+    width: 245px;
 }
 
 .template-edit-wrapper-controls input[type="text"][disabled] {
@@ -73,3 +73,32 @@
 .hidden-area {
     display: none;
 }
+
+.template-edit-wrapper-controls .delete {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    line-height: 20px;
+    background: #ff0000;
+    -webkit-border-radius: 15px;
+    border-radius: 15px;
+    text-align: center;
+    color: #fff;
+    font-weight: bold;
+    font-size: 24px;
+    margin-top: 15px;
+    cursor: pointer;
+}
+
+.template-edit-wrapper-controls .link {
+    display: inline-block;
+    font-size: 14px;
+    height: 40px;
+    line-height: 40px;
+    color: #06C;
+    margin: 0 5px;
+    font-weight: bold;
+    text-shadow: -1px -1px 1px #eaeaea, 1px 1px 1px #fff;
+    cursor: pointer;
+    text-decoration: underline;
+}
diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
index efe4a6f..94a8154 100644
--- a/ui/js/src/kimchi.template_edit_main.js
+++ b/ui/js/src/kimchi.template_edit_main.js
@@ -21,6 +21,7 @@
 kimchi.template_edit_main = function() {
     var templateEditForm = $('#form-template-edit');
     var origDisks;
+    var networkIndex = 0;
     $('#template-name', templateEditForm).val(kimchi.selectedTemplate);
     kimchi.retrieveTemplate(kimchi.selectedTemplate, function(template) {
         origDisks =  template.disks;
@@ -43,6 +44,45 @@ kimchi.template_edit_main = function() {
             }
             kimchi.select('template-edit-storagePool-list', options);
         });
+        kimchi.listNetworks(function(result) {
+            var options = [];
+            if (result && result.length) {
+                $.each(result, function(index, network) {
+                    options.push({
+                        label: network.name,
+                        value:  network.name
+                    });
+                });
+            }
+            $('#template-edit-network').val(template.networks[0]);
+            kimchi.select('template-edit-network-list', options);
+
+            var addNetwork = function(value) {
+                networkIndex++;
+                var template = $('#tmpl-network').html();
+                var html = kimchi.template(template, {index: networkIndex});
+                $('#more-network-field').append(html);
+                if(value) {
+                    $('#template-edit-network' + networkIndex).val(value);
+                }
+                kimchi.select('template-edit-network-list' + networkIndex, options);
+                $('#network-field' + networkIndex + ' .delete').on('click', function() {
+                    $(this).parent().remove();
+                });
+            };
+            var l = template.networks.length;
+            if(l > 1) {
+                var i;
+                for(i=1; i<l; i++) {
+                    addNetwork(template.networks[i]);
+                }
+            }
+
+            $('#template-edit-network-add').on('click', function() {
+                addNetwork('default');
+            });
+
+        });
     });
 
     $('#tmpl-edit-button-cancel').on('click', function() {
@@ -64,6 +104,16 @@ kimchi.template_edit_main = function() {
         });
         data['memory'] = Number(data['memory']);
         data['cpus']   = Number(data['cpus']);
+
+        var networks = [];
+        $('input[name="networks"]', templateEditForm).each(function(index, element) {
+            var value = $(element).val();
+            if(value && networks.indexOf(value) < 0) {
+                networks.push(value);
+            }
+        });
+        data.networks = networks;
+
         kimchi.updateTemplate($('#template-name').val(), data, function() {
             kimchi.doListTemplates();
             kimchi.window.close();
diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
index fe7314d..4c6e17e 100644
--- a/ui/pages/template-edit.html.tmpl
+++ b/ui/pages/template-edit.html.tmpl
@@ -75,8 +75,6 @@
                         <input id="template-edit-memory-textbox" name="memory" type="text" />
                     </div>
                 </div>
-            </fieldset>
-            <fieldset class="template-edit-fieldset">
                 <div>
                     <div class="template-edit-wrapper-label">
                         <label>$_("Disk (GB)")</label>
@@ -85,6 +83,8 @@
                         <input id="template-edit-version-textbox" name="disks" type="text" />
                     </div>
                 </div>
+            </fieldset>
+            <fieldset class="template-edit-fieldset">
                 <div>
                     <div class="template-edit-wrapper-label">
                         <label>$_("CDROM")</label>
@@ -108,6 +108,40 @@
                         </div>
                     </div>
                 </div>
+                <div>
+                    <div class="template-edit-wrapper-label">
+                        <label>$_("Network")</label>
+                    </div>
+                    <div class="template-edit-wrapper-controls">
+                        <div>
+                            <div class="btn dropdown popable">
+                                <input id="template-edit-network" name="networks" type="hidden" />
+                                <span class="text" id="template-edit-network-label"></span><span class="arrow"></span>
+                                <div class="popover" style="width: 100%">
+                                    <ul class="select-list" id="template-edit-network-list" data-target="template-edit-network" data-label="template-edit-network-label">
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="more-network-field"></div>
+                        <script id="tmpl-network" type="text/html">
+                            <div class="network-field" id="network-field{index}">
+                                <div class="btn dropdown popable">
+                                    <input id="template-edit-network{index}" name="networks" type="hidden" />
+                                    <span class="text" id="template-edit-network-label{index}"></span><span class="arrow"></span>
+                                    <div class="popover" style="width: 100%">
+                                        <ul class="select-list" id="template-edit-network-list{index}" data-target="template-edit-network{index}" data-label="template-edit-network-label{index}">
+                                        </ul>
+                                    </div>
+                                </div>
+                                <a class="delete">-</a>
+                            </div>
+                        </script>
+                        <div>
+                            <a id="template-edit-network-add" class="link">Add one more network</a>
+                        </div>
+                    </div>
+                </div>
             </fieldset>
         </form>
     </div>
-- 
1.8.3.2




More information about the Kimchi-devel mailing list