[PATCH 0/3] UI: Create Template with VM Image
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Yu Xin Huo (3): UI: Template with VM Image - Create UI: Template with VM Image - Edit UI: Template with VM Image - List ui/css/theme-default/form.css | 13 ++++++++----- ui/css/theme-default/template_add.css | 18 ++++++++++++++++++ ui/js/src/kimchi.template_add_main.js | 17 +++++++++++++++++ ui/js/src/kimchi.template_edit_main.js | 8 ++++++++ ui/js/src/kimchi.template_main.js | 12 +++++++++++- ui/pages/template-add.html.tmpl | 13 +++++++++++++ ui/pages/template-edit.html.tmpl | 6 +++++- 7 files changed, 80 insertions(+), 7 deletions(-)
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/form.css | 13 ++++++++----- ui/css/theme-default/template_add.css | 18 ++++++++++++++++++ ui/js/src/kimchi.template_add_main.js | 17 +++++++++++++++++ ui/pages/template-add.html.tmpl | 13 +++++++++++++ 4 files changed, 56 insertions(+), 5 deletions(-) diff --git a/ui/css/theme-default/form.css b/ui/css/theme-default/form.css index 9a442fb..523d42d 100644 --- a/ui/css/theme-default/form.css +++ b/ui/css/theme-default/form.css @@ -43,13 +43,16 @@ padding: 0 5px; } - -.form-section input.invalid-field[type="text"] { - border-color: #FF4444!important; -} - .text-help { font-size: 12px; color: #333; margin: 0 0 5px 5px; } + +input.invalid-field[type="text"] { + border-color: #FF4444!important; +} + +input.invalid-field[type="text"][disabled] { + border-color: #666666!important; +} diff --git a/ui/css/theme-default/template_add.css b/ui/css/theme-default/template_add.css index 15f1dca..69a00dc 100644 --- a/ui/css/theme-default/template_add.css +++ b/ui/css/theme-default/template_add.css @@ -290,3 +290,21 @@ center no-repeat; padding: 0 20px 0 26px; } + +#vm-image-local-box .body { + margin: 30px 0 0 26px; +} + +#vm-image-local-box .body input { + margin-left: 10px; + padding: 3px 3px 3px 10px; + border: 1px solid #CCCCCC; + border-radius: 1px 1px 1px 1px; + font-size: 14px; + height: 30px; + width: 600px; +} + +#vm-image-local-box .body button { + margin-left: 10px; +} diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index 0306571..ebd5402 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -332,6 +332,23 @@ kimchi.template_add_main = function() { } }); + $('#vm-image-local').click(function(){ + kimchi.switchPage('iso-type-box', 'vm-image-local-box'); + }); + $('#vm-image-local-box-back').click(function(){ + kimchi.switchPage('vm-image-local-box', 'iso-type-box', 'right'); + }); + $('input', '#vm-image-local-box').on('keyup', function(){ + var isValid = kimchi.template_check_path($(this).val()); + $(this).toggleClass('invalid-field', !isValid); + $('button', $('.body', '#vm-image-local-box')).button(isValid ? "enable" : "disable"); + }); + $('button', $('.body', '#vm-image-local-box')).button({ + disabled: true + }).click(function(){ + addTemplate({disks:[{base:$('input', '#vm-image-local-box').val()}]}); + }); + $('#btn-template-url-create').click(function() { var isoUrl = $('#iso-url').val(); if (!kimchi.template_check_url(isoUrl)) { diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index 418c5e8..65febda 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -39,6 +39,9 @@ <a id="iso-local" class="local">$_("Local ISO Image")</a> </li> <li> + <a id="vm-image-local" class="local">$_("Local VM Image")</a> + </li> + <li> <a id="iso-remote" class="remote">$_("Remote ISO Image")</a> </li> </ul> @@ -121,6 +124,16 @@ </div> + <div class="page" id="vm-image-local-box"> + <header> + <a class="back" id="vm-image-local-box-back"></a> + <h2 class="step-title">$_("Local VM Image")</h2> + </header> + <div class="body"> + <span>File Path:</span><input type="text"><button class="ui-button-primary">$_("Create")</button> + </div> + </div> + <!-- 1-2 --> <div class="page" id="iso-remote-box"> <header> -- 1.7.1
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/js/src/kimchi.template_edit_main.js | 8 ++++++++ ui/pages/template-edit.html.tmpl | 6 +++++- 2 files changed, 13 insertions(+), 1 deletions(-) diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index 97d6b6c..cb43091 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -23,6 +23,14 @@ kimchi.template_edit_main = function() { kimchi.retrieveTemplate(kimchi.selectedTemplate, function(template) { origDisks = template.disks; origPool = template.storagepool; + for(var i=0;i<template.disks.length;i++){ + if(template.disks[i].base){ + template["vm-image"] = template.disks[i].base; + $('#templ-edit-cdrom').addClass('hide-content'); + $('#templ-edit-vm-image').removeClass('hide-content'); + break; + } + } for ( var prop in template) { var value = template[prop]; if (prop == 'graphics') { diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index 15d3a97..69ed474 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -81,7 +81,7 @@ </div> </fieldset> <fieldset class="template-edit-fieldset"> - <div> + <div id="templ-edit-cdrom"> <div class="template-edit-wrapper-label"> <label for="template-edit-cdrom-textbox">$_("CDROM")</label> </div> @@ -89,6 +89,10 @@ <input id="template-edit-cdrom-textbox" name="cdrom" type="text" disabled="disabled"/> </div> </div> + <div id="templ-edit-vm-image" class="hide-content"> + <div class="template-edit-wrapper-label">$_("VM Image")</div> + <div class="template-edit-wrapper-controls"><input name="vm-image" type="text" disabled/></div> + </div> <div> <div class="template-edit-wrapper-label"> <label>$_("Graphics")</label> -- 1.7.1
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/js/src/kimchi.template_main.js | 12 +++++++++++- 1 files changed, 11 insertions(+), 1 deletions(-) diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js index 3c8421d..775cb0b 100644 --- a/ui/js/src/kimchi.template_main.js +++ b/ui/js/src/kimchi.template_main.js @@ -22,7 +22,17 @@ kimchi.doListTemplates = function() { var listHtml = ''; var templateHtml = $('#templateTmpl').html(); $.each(result, function(index, value) { - var isLocal = /^\//.test(value['cdrom']); + var isLocal; + if(value.cdrom){ + isLocal = /^\//.test(value['cdrom']); + }else{ + for(var i=0;i<value.disks.length;i++){ + if(value.disks[i].base){ + isLocal = /^\//.test(value.disks[i].base); + break; + } + } + } if(isLocal){ value.location = "images/theme-default/icon-local.png"; }else{ -- 1.7.1
Thanks, Yu Xin for the patch set! I just have some comments: 1) On new template dialog, name the new option as "Local image file" instead of "Local VM Image" 2) On edit template view, name it as "Image file" instead of "VM image" 3) The input box style differs from Kimchi style. It needs to have rounded border 4) When selecting "Create" it takes too much time to finish the request - it is because the backend checks the image file prior to create the template. So I suggest to when selecting "Create" change it to "Creating..." (as we need on network tab) with disabled style. And once you get the server response you close the dialog. On 09/04/2014 07:04 AM, huoyuxin@linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
Yu Xin Huo (3): UI: Template with VM Image - Create UI: Template with VM Image - Edit UI: Template with VM Image - List
ui/css/theme-default/form.css | 13 ++++++++----- ui/css/theme-default/template_add.css | 18 ++++++++++++++++++ ui/js/src/kimchi.template_add_main.js | 17 +++++++++++++++++ ui/js/src/kimchi.template_edit_main.js | 8 ++++++++ ui/js/src/kimchi.template_main.js | 12 +++++++++++- ui/pages/template-add.html.tmpl | 13 +++++++++++++ ui/pages/template-edit.html.tmpl | 6 +++++- 7 files changed, 80 insertions(+), 7 deletions(-)
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
On 9/4/2014 11:59 PM, Aline Manera wrote:
Thanks, Yu Xin for the patch set!
I just have some comments:
1) On new template dialog, name the new option as "Local image file" instead of "Local VM Image"
2) On edit template view, name it as "Image file" instead of "VM image"
3) The input box style differs from Kimchi style. It needs to have rounded border
4) When selecting "Create" it takes too much time to finish the request - it is because the backend checks the image file prior to create the template. So I suggest to when selecting "Create" change it to "Creating..." (as we need on network tab) with disabled style. And once you get the server response you close the dialog.
Addressed in V2. Patch title is "[PATCH 0/3] UI: Create Template with Image File". Forgot to add version number when generating patch.
On 09/04/2014 07:04 AM, huoyuxin@linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
Yu Xin Huo (3): UI: Template with VM Image - Create UI: Template with VM Image - Edit UI: Template with VM Image - List
ui/css/theme-default/form.css | 13 ++++++++----- ui/css/theme-default/template_add.css | 18 ++++++++++++++++++ ui/js/src/kimchi.template_add_main.js | 17 +++++++++++++++++ ui/js/src/kimchi.template_edit_main.js | 8 ++++++++ ui/js/src/kimchi.template_main.js | 12 +++++++++++- ui/pages/template-add.html.tmpl | 13 +++++++++++++ ui/pages/template-edit.html.tmpl | 6 +++++- 7 files changed, 80 insertions(+), 7 deletions(-)
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (3)
-
Aline Manera -
huoyuxin＠linux.vnet.ibm.com -
Yu Xin Huo