[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