[Kimchi-devel] [PATCH] UI: template supports networks
Aline Manera
alinefm at linux.vnet.ibm.com
Mon Jan 6 18:00:32 UTC 2014
The way you did it, the user can add multiples equals networks.
But Kimchi accepts just different networks.
So I can add multiple equals networks but only one will be there.
Isn't there a combo box in which user can select multiple entries?
Or we can only expose the used networks (like a label) and add a edit
icon aside.
When clicking on edit icon a pop list all networks will be shown in a
check box view.
And then the user can add/remove networks by selecting them
Any other idea?
On 01/06/2014 06:30 AM, Xin Ding wrote:
> 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>
More information about the Kimchi-devel
mailing list