[PATCH 0/3] UI: Create Template with Image File

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 | 21 +++++++++++++++++++++ ui/js/src/kimchi.template_add_main.js | 32 +++++++++++++++++++++++++++++++- 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, 97 insertions(+), 8 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 | 21 +++++++++++++++++++++ ui/js/src/kimchi.template_add_main.js | 32 +++++++++++++++++++++++++++++++- ui/pages/template-add.html.tmpl | 13 +++++++++++++ 4 files changed, 73 insertions(+), 6 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..e58bccb 100644 --- a/ui/css/theme-default/template_add.css +++ b/ui/css/theme-default/template_add.css @@ -290,3 +290,24 @@ center no-repeat; padding: 0 20px 0 26px; } + +#vm-image-local-box .body { + margin: 30px 0 0 26px; +} + +#vm-image-local-box .body input { + background: none repeat scroll 0 0 #FFFFFF; + border-left: 1px solid #BBBBBB; + border-radius: 5px 5px 5px 5px; + border-top: 1px solid #BBBBBB; + box-shadow: 2px 2px 2px #EEEEEE inset; + color: #333333; + font-size: 13px; + padding: 10px; + margin-left: 10px; + 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..2d60888 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -332,6 +332,34 @@ 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(){ + $('input', '#vm-image-local-box').prop('disabled', true); + $(this).button('option', { + label: i18n['KCHAPI6008M'], + disabled: true + }); + addTemplate({disks:[{base:$('input', '#vm-image-local-box').val()}]}, function(){ + $('input', '#vm-image-local-box').prop('disabled', false); + $('button', $('.body', '#vm-image-local-box')).button('option', { + label: i18n['KCHAPI6005M'], + disabled: false + }); + }); + }); + $('#btn-template-url-create').click(function() { var isoUrl = $('#iso-url').val(); if (!kimchi.template_check_url(isoUrl)) { @@ -345,12 +373,14 @@ kimchi.template_add_main = function() { }); //do create - var addTemplate = function(data) { + var addTemplate = function(data, callback) { kimchi.createTemplate(data, function() { + if(callback) callback(); kimchi.doListTemplates(); kimchi.window.close(); kimchi.topic('templateCreated').publish(); }, function(err) { + if(callback) callback(); kimchi.message.error(err.responseJSON.reason); }); }; diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index 418c5e8..75bb0ed 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 Image File")</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 Image File")</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..5a71d91 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">$_("Image File")</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
participants (2)
-
Aline Manera
-
huoyuxin@linux.vnet.ibm.com