[PATCH] [Kimchi] Create template (UI part) without specifying media type
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote. This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend) Socorro Stoppler (1): Create template without specifying media type ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-) -- 2.5.0
Signed-off-by: Socorro Stoppler <socorro@linux.vnet.ibm.com> --- ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 27f7787..554eda6 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -1624,7 +1624,7 @@ body.wok-gallery { left: 1082px; } -#template-add-window.modal-content div#iso-local-box { +#template-add-window.modal-content div#vm-image-local-box { left: 0; } diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index 86b9305..f8bad2b 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -214,7 +214,7 @@ &.modal-content div#iso-remote-box { left: 1082px; } - &.modal-content div#iso-local-box { + &.modal-content div#vm-image-local-box { left: 0; } } diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index 3146f49..881ad7d 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -48,111 +48,25 @@ kimchi.switchPage = function(fromPageId, toPageId, direction) { kimchi.template_add_main = function() { "use strict"; - var currentPage = 'iso-local-box'; - kimchi.deepScanHandler = null; - - var deepScan = function(button) { - kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished) { - if (isos && isos.length) { - if (button === '#iso-search') { - $(button + '-loading').hide(); - button = '#iso-more'; - $(button + '-loading').show(); - } - showLocalIsoField(isos); - } else { - if (isFinished) { - wok.message.warn(i18n['KCHTMPL6001W'], '#local-iso-warning-container'); - } - } - if (isFinished) { - $(button + '-loading').hide(); - $(button).show(); - } - }, function(err) { - wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); - $(button + '-loading').hide(); - $(button).show(); - }); - }; - + var currentPage = 'vm-image-local-box'; + //1-1-1 local iso list - var initLocalIsoField = function() { - kimchi.isoInfo = {}; - $('#local-iso-field').hide(); - $('#select-all-local-iso').prop('checked', false); - $('#btn-template-local-iso-create').attr('disabled', 'disabled'); - $('#iso-search').hide(); - $('#iso-more').hide(); - $('#iso-search-loading').hide(); - $('#iso-more-loading').hide(); - $('#list-local-iso').empty(); - + var initLocal = function() { // Resets input fields and hide other buttons - $('#iso-file').val(''); // 1 - Folder path text - $('vm-image-local-text').val(''); // 3 - File path text - $('#iso-url').val(''); // 4 - Remote folder path text - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path + $('#src-local-text').val(''); // 1 - File path text + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - File path $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes - $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes - - }; - - var showLocalIsoField = function(isos) { - var html = ''; - var template = $('#tmpl-list-local-iso').html(); - $.each(isos, function(index, volume) { - var isoId = volume.os_distro + '*' + volume.name + '*' + volume.os_version; - if (!kimchi.isoInfo[isoId]) { - volume.isoId = isoId; - volume.capacity = wok.changetoProperUnit(volume.capacity, 1); - kimchi.isoInfo[isoId] = volume; - html += wok.substitute(template, volume); - } - }); - $('#list-local-iso').append(html); - $('#local-iso-field').show(); }; - - //1-1-2 local iso file - var initIsoFileField = function() { - //$('#iso-file-check').prop('checked', false); - $('#iso-file').val(''); - $('vm-image-local-text').val(''); - $('#iso-url').val(''); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - - $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes - - $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes - - }; - - $('#iso-file').on('input propertychange keyup focus cut paste click', function() { + $('#src-local-text').on('input propertychange keyup focus cut paste click', function() { $('#btn-template-file-create').css('display', 'inline-block'); // 1 - Folder path - $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); - $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); - setTimeout(function() { - var isValid = kimchi.template_check_path($('input#iso-file').val()); - $('input#iso-file').parent().toggleClass('has-error', !isValid); + setTimeout(function() { + var isValid = kimchi.template_check_path($('input#src-local-text').val()); + $('input#src-local-text').parent().toggleClass('has-error', !isValid); $('#btn-template-file-create').attr('disabled', (isValid ? false : true)); }, 0); - if ($('#iso-file').val()) { - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path + if ($('#src-local-text').val()) { $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos } else { @@ -160,164 +74,12 @@ kimchi.template_add_main = function() { } }); - initLocalIsoField(); - initIsoFileField(); - kimchi.listIsos(function(isos) { - if (isos && isos.length) { - showLocalIsoField(isos); - $('#iso-more').show(); - } else { - $('#iso-search').show(); - } - }, function(err) { - wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); - }); + initLocal(); + $('#template-add-window .modal-body .template-pager').animate({ - height: "689px" + height: "200px" }, 400); - - // 1-1 local iso - $('#iso-local').change(function() { - if (this.checked) { - if (currentPage === 'vm-image-local-box') { - kimchi.switchPage(currentPage, 'iso-local-box', 'right'); - } else if (currentPage === 'iso-remote-box') { - kimchi.switchPage(currentPage, 'iso-local-box', 'right'); - } - currentPage = 'iso-local-box'; - $('#template-add-window .modal-body .template-pager').animate({ - height: "689px" - }, 400); - initLocalIsoField(); - initIsoFileField(); - - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - - kimchi.listIsos(function(isos) { - if (isos && isos.length) { - showLocalIsoField(isos); - $('#iso-more').show(); - } else { - $('#iso-search').show(); - } - }, function(err) { - wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); - }); - } - }); - - $('#iso-search').click(function() { - var settings = { - content: i18n['KCHTMPL6002M'] - }; - wok.confirm(settings, function() { - $('#iso-search').hide(); - $('#iso-search-loading').show(); - deepScan('#iso-search'); - }); - }); - - $('#iso-more').click(function() { - var settings = { - content: i18n['KCHTMPL6002M'] - }; - wok.confirm(settings, function() { - $('#iso-more').hide(); - $('#iso-more-loading').show(); - deepScan('#iso-more'); - }); - }); - - $('#iso-search-loading').click(function() { - $('#iso-search-loading').hide(); - $('#iso-search').show(); - if (kimchi.deepScanHandler) { - kimchi.deepScanHandler.stop = true; - } - }); - - $('#iso-more-loading').click(function() { - $('#iso-more-loading').hide(); - $('#iso-more').show(); - if (kimchi.deepScanHandler) { - kimchi.deepScanHandler.stop = true; - } - }); - - $('#select-all-local-iso').click(function() { - $('#list-local-iso [type="checkbox"]').prop('checked', $(this).prop('checked')); - if ($(this).prop('checked')) { - $('#iso-file').val(''); - $('#iso-file').parent().removeClass('has-error'); - $('vm-image-local-text').val(''); - - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - - } else { - $('#btn-template-local-iso-create').attr('disabled', 'disabled'); - } - }); - - $('#list-local-iso').on('click', '[type="checkbox"]', function() { - $('#iso-file').parent().removeClass('has-error'); - var checkedLength = $('#list-local-iso [type="checkbox"]:checked').length; - $('#iso-file').val(''); - $('vm-image-local-text').val(''); - $('#iso-url').val(''); - - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - if (checkedLength) { - $('#btn-template-local-iso-create').removeAttr('disabled'); - var length = $('#list-local-iso [type="checkbox"]').length; - $('#select-all-local-iso').prop('checked', length === checkedLength); - $('#btn-template-local-iso-create').removeAttr('disabled'); - } else { - $('#select-all-local-iso').prop('checked', false); - $('#btn-template-local-iso-create').attr('disabled', 'disabled'); - } - }); - - $('#btn-template-local-iso-create').click(function() { - submitIso('form-local-iso'); - }); - - $('#btn-template-file-create').click(function() { - var isoFile = $('#iso-file').val(); - $('vm-image-local-text').val(''); - if (!kimchi.template_check_path(isoFile)) { - wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container'); - return; - } - var data = { - "cdrom": isoFile - }; - addTemplate(data); - }); - + //1-2 remote iso $('#iso-remote').attr("disabled", true).css('cursor', 'not-allowed'); @@ -326,17 +88,13 @@ kimchi.template_add_main = function() { setTimeout(enabledRemoteIso, 2000); return; } - if (kimchi.capabilities.qemu_stream !== true) { return; } - $('#iso-remote').attr("disabled", false).css('cursor', 'pointer'); $('#iso-remote').change(function() { if (this.checked) { - if (currentPage === 'iso-local-box') { // slide twice - kimchi.switchPage(currentPage, 'iso-remote-box', 'left'); - } else if (currentPage === 'vm-image-local-box') { // slide once + if (currentPage === 'vm-image-local-box') { // slide once kimchi.switchPage(currentPage, 'iso-remote-box', 'left'); } currentPage = 'iso-remote-box'; @@ -360,23 +118,13 @@ kimchi.template_add_main = function() { $('#iso-url-field').hide(); $('#select-all-remote-iso').prop('checked', false); $('#btn-template-remote-iso-create').attr('disabled', 'disabled'); - - $('#iso-file').val(''); - $('vm-image-local-text').val(''); + $('src-local-text').val(''); $('#iso-url').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes - $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes }; @@ -408,22 +156,13 @@ kimchi.template_add_main = function() { $('#select-all-remote-iso').click(function() { $('#list-remote-iso [type="checkbox"]').prop('checked', $(this).prop('checked')); if ($(this).prop('checked')) { - - $('#iso-file').val(''); - $('vm-image-local-text').val(''); + $('#src-local-text').val(''); $('#iso-url').val(''); $('#iso-url').parent().removeClass('has-error'); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos - } else { $('#btn-template-remote-iso-create').attr('disabled', 'disabled'); } @@ -437,18 +176,11 @@ kimchi.template_add_main = function() { var length = $('#list-remote-iso [type="checkbox"]').length; $('#select-all-remote-iso').prop('checked', length === checkedLength); - $('#iso-file').val(''); - $('vm-image-local-text').val(''); + $('src-local-text').val(''); $('#iso-url').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos } else { @@ -463,19 +195,11 @@ kimchi.template_add_main = function() { //1-2-2 remote iso url var initIsoUrlField = function() { - - $('#iso-file').val(''); - $('vm-image-local-text').val(''); + $('src-local-text').val(''); $('#iso-url').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos }; @@ -492,64 +216,43 @@ kimchi.template_add_main = function() { }, 0); }); - $('#vm-image-local').change(function() { + $('#src-local').change(function() { if (this.checked) { - if (currentPage === 'iso-local-box') { - kimchi.switchPage(currentPage, 'vm-image-local-box', 'left'); + if (currentPage === 'vm-image-local-box') { + kimchi.switchPage(currentPage, 'iso-remote-box', 'left'); } else if (currentPage === 'iso-remote-box') { kimchi.switchPage(currentPage, 'vm-image-local-box', 'right'); } currentPage = 'vm-image-local-box'; $('#template-add-window .modal-body .template-pager').animate({ - height: "100px" + height: "200px" }, 400); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'inline-block'); // 3 - File path $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - } }); $('input', '#vm-image-local-box').on('input propertychange keyup focus cut paste click', function() { setTimeout(function() { var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val()); $('input', '#vm-image-local-box').parent().toggleClass('has-error', !isValid); - $('#vm-image-local-box-button').attr('disabled', (isValid ? false : true)); + $('#btn-template-file-create').attr('disabled', (isValid ? false : true)) }, 0); }); - $('input', '#vm-image-local-box').on('input propertychange keyup focus cut paste click', function() { - setTimeout(function() { - var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val()); - $('input', '#vm-image-local-box').parent().toggleClass('has-error', !isValid); - $('#vm-image-local-box-button').attr('disabled', (isValid ? false : true)); - }, 0); - }); - $('#vm-image-local-box-button').on('click', function(){ + $('#btn-template-file-create').on('click', function(){ $('input', '#vm-image-local-box').prop('disabled', true); - $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']); - $('#vm-image-local-box-button').prop('disabled', true); - addTemplate({ - disks: [{ - base: $('input', '#vm-image-local-box').val() - }] - }, function() { - $('input', '#vm-image-local-box').prop('disabled', false); - $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']); - $('#vm-image-local-box-button').prop('disabled', false); - }); - }); - - $('#btn-template-url-create').click(function() { - var isoUrl = $('#iso-url').val(); - if (!kimchi.template_check_url(isoUrl)) { - wok.message.error.code('KCHAPI6004E'); + $('#btn-template-file-create').text(i18n['KCHAPI6008M']); + $('#btn-template-file-create').prop('disabled', true); + var file = $('#src-local-text').val(); + if (!kimchi.template_check_path(file)) { + wok.message.error(i18n['KCHAPI6003E'],'#local-file-error-container'); return; } var data = { - "cdrom": isoUrl + "source_media": file }; + addTemplate(data); }); @@ -567,6 +270,20 @@ kimchi.template_add_main = function() { callback(); } wok.message.error(err.responseJSON.reason, '#alert-modal-container'); + $('#src-local-text').prop('disabled', false); + // Change from 'Creating...' to 'Create' when there's an error + if($('#btn-template-file-create').is(":visible") === true ) { + $('#btn-template-file-create').text(i18n['KCHAPI6005M']); + $('#btn-template-file-create').prop('disabled', false); + } + if($('#btn-template-url-create').is(":visible") === true ) { + $('#btn-template-url-create').text(i18n['KCHAPI6005M']); + $('#btn-template-url-create').prop('disabled', false); + } + if($('#btn-template-remote-iso-create').is(":visible") === true ) { + $('#btn-template-remote-iso-create').text(i18n['KCHAPI6005M']); + $('#btn-template-remote-iso-create').prop('disabled', false); + } }); }; @@ -579,7 +296,7 @@ kimchi.template_add_main = function() { var data = { "os_distro": isoInfo.os_distro, "os_version": isoInfo.os_version, - "cdrom": isoInfo.path + "source_media": isoInfo.path }; kimchi.createTemplate(data, function() { successNum++; @@ -622,3 +339,4 @@ kimchi.template_check_path = function(filePath) { } return false; }; + diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index 2926cfa..7bf3275 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -32,82 +32,21 @@ <div> <span id="alert-modal-container"></span> <h5>$_("Where is the source media for this template? ")</h5> - <input type="radio" checked="checked" name="iso-source" id="iso-local" value="iso-local" class="wok-radio"> - <label for="iso-local">$_("Local ISO Image")</label> - <input type="radio" name="iso-source" id="vm-image-local" value="vm-image-local" class="wok-radio"> - <label for="vm-image-local">$_("Local Image File")</label> + <input type="radio" checked="checked" name="iso-source" id="src-local" value="src-local" class="wok-radio"> + <label for="src-local">$_("Local Image File")</label> <input type="radio" name="iso-source" id="iso-remote" value="iso-remote" class="wok-radio"> <label for="iso-remote">$_("Remote ISO Image")</label> </div> </div> <div class="template-pager"> <div class="page-list"> - <div class="page" id="iso-local-box"> - <!-- 1-1-2 --> - <div id="iso-file-field"> - <div id="iso-file-box" class="custom-iso-field"> - <div class="form-group"> - <label for="iso-file">$_("Provide a File Path for a specific ISO image:")</label> - <input type="text" class="form-control" id="iso-file" name="iso-file"> - </div> - </div> - </div> - <span id="local-iso-warning-container"></span> - <span id="local-iso-error-container"></span> - <button class="btn btn-primary" id="iso-search" style="display: none">$_("Search ISOs")</button> - <button class="btn btn-primary" id="iso-search-loading" style="display: none"><span class="wok-loading-icon"></span> $_("Please, wait...")</button> - <!-- 1-1-1 --> - <div id="local-iso-field" class="iso-field" style="display: none;"> - <div class="row"> - <p>$_("The following ISOs are available:")</p> - </div> - <div class="checkbox"> - <label class="check-all"> - <input type="checkbox" id="select-all-local-iso">$_("All") - </label> - </div> - <div class="row"> - <form id="form-local-iso"> - <ul id="list-local-iso" class="list-iso"> - </ul> - </form> - <script id="tmpl-list-local-iso" type="text/html"> - <li class="col-md-3"> - <label class="box-iso-outer"> - <input type="checkbox" class="iso-checkbox-hidden" name="iso" value="{isoId}"> - <span class="box-iso-border"> - <span class="box-iso-inner"> - <h3 class="iso-title {os_distro}" title="{name}"> - {name} - </h3> - <dl class="iso-info"> - <dt>{os_distro}</dt> - <dd>$_("OS")</dd> - <dt>{os_version}</dt> - <dd>$_("Version")</dd> - <dt>{capacity}</dt> - <dd>$_("Size")</dd> - </dl> - </span> - </span> - </label> - </li> - </script> - </div> - <div class="row"> - <button class="btn btn-primary" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button> - <button class="btn btn-primary" id="iso-more-loading" style="display: none"><span class="wok-loading-icon"></span> $_("Please, wait...")</button> - </div> - </div> - </div> - <div class="page" id="vm-image-local-box"> <div class="from-group"> - <label for="vm-image-local-text">$_("File Path:")</label> - <input type="text" class="form-control" id="vm-image-local-text" /> + <label for="src-local-text">$_("File Path:")</label> + <input type="text" class="form-control" id="src-local-text" /> </div> </div> - + <span id="local-file-error-container"></span> <!-- 1-2 --> <div class="page" id="iso-remote-box"> <!-- 1-2-2 --> @@ -167,8 +106,6 @@ </div> <div class="modal-footer"> <button class="btn btn-default" id="btn-template-file-create" disabled="disabled">$_("Create")</button> - <button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled">$_("Create")</button> - <button id="vm-image-local-box-button" class="btn btn-default ui-button-primary">$_("Create")</button> <button class="btn btn-default" id="btn-template-url-create" disabled="disabled">$_("Create")</button> <button class="btn btn-default" id="btn-template-remote-iso-create" disabled="disabled">$_("Create")</button> <button class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button> -- 2.5.0
Tested-By: Ramon Medeiros <ramonn@br.ibm.com> On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
-- Ramon Nunes Medeiros Kimchi Developer Linux Technology Center Brazil IBM Systems & Technology Group Phone : +55 19 2132 7878 ramonn@br.ibm.com
Hi Socorro, The user will not need to choose any template type, ie, choose between local file or remote ISO. Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one. I think in something like below: ---------------------------------------------------------------------------------- | Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
---------------------------------------------------------------------------------- Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter. Please, let me know your thoughts on it. On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
----------------------------------------------------------------------------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
----------------------------------------------------------------------------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?) Samuel, I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
Hi, I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right. I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images. For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/ Samuel -----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
---------------------------------------------------------------------- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
---------------------------------------------------------------------- ------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?) Samuel, I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
On 04/13/2016 04:05 PM, Samuel Henrique De Oliveira Guimaraes wrote:
Hi,
I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right.
Agree. In the old UI, we had a globe icon for remote ISOs and a disk icon for local ISOs. Maybe we can get it back. I like the idea of filter and sort too.
I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images.
If we add filter and sort, I think we can do it in a single way by now, ie, displaying the ISOs as we do today. We can fix the height to list at least 2 or 3 rows of ISOs and add vertical scroll bar. And don't forget that user can select multiple ISOs from those listed to create a bunch of Templates at once.
For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/
I don't think it is interesting to have for source media. I don't expect the user to create multiple templates using the same source media. He/she can use the Template clone option for it so I suggest to keep the simple input box there.
Samuel
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
---------------------------------------------------------------------- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
---------------------------------------------------------------------- ------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?)
Samuel,
I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
On 04/13/2016 12:56 PM, Aline Manera wrote:
On 04/13/2016 04:05 PM, Samuel Henrique De Oliveira Guimaraes wrote:
Hi,
I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right.
Agree.
In the old UI, we had a globe icon for remote ISOs and a disk icon for local ISOs. Maybe we can get it back. I like the idea of filter and sort too.
I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images.
If we add filter and sort, I think we can do it in a single way by now, ie, displaying the ISOs as we do today. We can fix the height to list at least 2 or 3 rows of ISOs and add vertical scroll bar.
And don't forget that user can select multiple ISOs from those listed to create a bunch of Templates at once.
Since the user is able to select multiple ISOs and it's in a list, what if we use the same widget like we are doing for updating selected packages/deleting debug reports? Is that available yet and if not, when will that be available?
For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/
I don't think it is interesting to have for source media. I don't expect the user to create multiple templates using the same source media. He/she can use the Template clone option for it so I suggest to keep the simple input box there.
I agree to make this as simple as possible.
Samuel
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
---------------------------------------------------------------------- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?)
Samuel,
I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
On 04/13/2016 05:11 PM, Socorro Stoppler wrote:
On 04/13/2016 12:56 PM, Aline Manera wrote:
On 04/13/2016 04:05 PM, Samuel Henrique De Oliveira Guimaraes wrote:
Hi,
I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right.
Agree.
In the old UI, we had a globe icon for remote ISOs and a disk icon for local ISOs. Maybe we can get it back. I like the idea of filter and sort too.
I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images.
If we add filter and sort, I think we can do it in a single way by now, ie, displaying the ISOs as we do today. We can fix the height to list at least 2 or 3 rows of ISOs and add vertical scroll bar.
And don't forget that user can select multiple ISOs from those listed to create a bunch of Templates at once.
Since the user is able to select multiple ISOs and it's in a list, what if we use the same widget like we are doing for updating selected packages/deleting debug reports? Is that available yet and if not, when will that be available?
Do you mean use a list view instead of a gallery view as it is today? If so, I am OK with it. It will free space for us when having several ISOs to display.
For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/
I don't think it is interesting to have for source media. I don't expect the user to create multiple templates using the same source media. He/she can use the Template clone option for it so I suggest to keep the simple input box there.
I agree to make this as simple as possible.
Samuel
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
---------------------------------------------------------------------- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?)
Samuel,
I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 17:11 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; Kimchi Devel <kimchi-devel@ovirt.org>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type On 04/13/2016 12:56 PM, Aline Manera wrote:
On 04/13/2016 04:05 PM, Samuel Henrique De Oliveira Guimaraes wrote:
Hi,
I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right.
Agree.
In the old UI, we had a globe icon for remote ISOs and a disk icon for local ISOs. Maybe we can get it back. I like the idea of filter and sort too.
I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images.
If we add filter and sort, I think we can do it in a single way by now, ie, displaying the ISOs as we do today. We can fix the height to list at least 2 or 3 rows of ISOs and add vertical scroll bar.
And don't forget that user can select multiple ISOs from those listed to create a bunch of Templates at once.
Since the user is able to select multiple ISOs and it's in a list, what if we use the same widget like we are doing for updating selected packages/deleting debug reports? Is that available yet and if not, when will that be available?
Debug Reports and Repositories are using wok.list.js and Peter is porting System Updates to jQuery Bootgrid so we can discard wok.grid.js since only Updates section is using it. I think the wok-list widget is very limited to a plain text list. The CSS and HTML for ISO and Template selection is good and the only issue we have is with keyboard navigation (I'm going to send a patch to fix it soon). If we want to add a gallery/list view toggle like we use in Guests and Templates (and in Storages in the future), we can change the parent CSS class and the styles based on inheritance (when the user toggles from Gallery to List, only the parent element changes it classes and the other styles are overwritten by the cascade, ex .wok-list > li will have a different style from .wok-gallery > li but the same HTML markup). Samuel
For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/
I don't think it is interesting to have for source media. I don't expect the user to create multiple templates using the same source media. He/she can use the Template clone option for it so I suggest to keep the simple input box there.
I agree to make this as simple as possible.
Samuel
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
-------------------------------------------------------------------- -- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
-- ------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?)
Samuel,
I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
On 04/13/2016 06:49 PM, Samuel Henrique De Oliveira Guimaraes wrote:
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 17:11 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; Kimchi Devel <kimchi-devel@ovirt.org>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/13/2016 12:56 PM, Aline Manera wrote:
On 04/13/2016 04:05 PM, Samuel Henrique De Oliveira Guimaraes wrote:
Hi,
I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right. Agree.
In the old UI, we had a globe icon for remote ISOs and a disk icon for local ISOs. Maybe we can get it back. I like the idea of filter and sort too.
I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images. If we add filter and sort, I think we can do it in a single way by now, ie, displaying the ISOs as we do today. We can fix the height to list at least 2 or 3 rows of ISOs and add vertical scroll bar.
And don't forget that user can select multiple ISOs from those listed to create a bunch of Templates at once. Since the user is able to select multiple ISOs and it's in a list, what if we use the same widget like we are doing for updating selected packages/deleting debug reports? Is that available yet and if not, when will that be available?
Debug Reports and Repositories are using wok.list.js and Peter is porting System Updates to jQuery Bootgrid so we can discard wok.grid.js since only Updates section is using it. I think the wok-list widget is very limited to a plain text list. The CSS and HTML for ISO and Template selection is good and the only issue we have is with keyboard navigation (I'm going to send a patch to fix it soon). If we want to add a gallery/list view toggle like we use in Guests and Templates (and in Storages in the future), we can change the parent CSS class and the styles based on inheritance (when the user toggles from Gallery to List, only the parent element changes it classes and the other styles are overwritten by the cascade, ex .wok-list > li will have a different style from .wok-gallery > li but the same HTML markup).
So your suggestion is to keep the gallery view as it is today and implement the list view later. Is that correct? What do you think we should do now for this feature?
Samuel
For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/ I don't think it is interesting to have for source media. I don't expect the user to create multiple templates using the same source media. He/she can use the Template clone option for it so I suggest to keep the simple input box there. I agree to make this as simple as possible. Samuel
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
-------------------------------------------------------------------- -- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
-- ------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?)
Samuel,
I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
-----Original Message----- From: Aline Manera [mailto:alinefm@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 18:55 To: Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; Socorro Stoppler <socorro@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type On 04/13/2016 06:49 PM, Samuel Henrique De Oliveira Guimaraes wrote:
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 17:11 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; Kimchi Devel <kimchi-devel@ovirt.org>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/13/2016 12:56 PM, Aline Manera wrote:
On 04/13/2016 04:05 PM, Samuel Henrique De Oliveira Guimaraes wrote:
Hi,
I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right. Agree.
In the old UI, we had a globe icon for remote ISOs and a disk icon for local ISOs. Maybe we can get it back. I like the idea of filter and sort too.
I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images. If we add filter and sort, I think we can do it in a single way by now, ie, displaying the ISOs as we do today. We can fix the height to list at least 2 or 3 rows of ISOs and add vertical scroll bar.
And don't forget that user can select multiple ISOs from those listed to create a bunch of Templates at once. Since the user is able to select multiple ISOs and it's in a list, what if we use the same widget like we are doing for updating selected packages/deleting debug reports? Is that available yet and if not, when will that be available?
Debug Reports and Repositories are using wok.list.js and Peter is porting System Updates to jQuery Bootgrid so we can discard wok.grid.js since only Updates section is using it. I think the wok-list widget is very limited to a plain text list. The CSS and HTML for ISO and Template selection is good and the only issue we have is with keyboard navigation (I'm going to send a patch to fix it soon). If we want to add a gallery/list view toggle like we use in Guests and Templates (and in Storages in the future), we can change the parent CSS class and the styles based on inheritance (when the user toggles from Gallery to List, only the parent element changes it classes and the other styles are overwritten by the cascade, ex .wok-list > li will have a different style from .wok-gallery > li but the same HTML markup).
So your suggestion is to keep the gallery view as it is today and implement the list view later. Is that correct? What do you think we should do now for this feature? Yes. I think for now we can bring back the remote and local icons on top of the image items and put a simple filter and sort button like PCI tab. We set the panel scrollable area height with CSS media queries.
Samuel
For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/ I don't think it is interesting to have for source media. I don't expect the user to create multiple templates using the same source media. He/she can use the Template clone option for it so I suggest to keep the simple input box there. I agree to make this as simple as possible. Samuel
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
------------------------------------------------------------------- - -- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
- -- ------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?)
Samuel,
I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
On 04/13/2016 06:58 PM, Samuel Henrique De Oliveira Guimaraes wrote:
-----Original Message----- From: Aline Manera [mailto:alinefm@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 18:55 To: Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; Socorro Stoppler <socorro@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/13/2016 06:49 PM, Samuel Henrique De Oliveira Guimaraes wrote:
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 17:11 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; Kimchi Devel <kimchi-devel@ovirt.org>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/13/2016 12:56 PM, Aline Manera wrote:
On 04/13/2016 04:05 PM, Samuel Henrique De Oliveira Guimaraes wrote:
Hi,
I think we can display the remote and local isos in the same list, maybe showing a label or icon to distinguish between remote or local images (and even adding a filter and sort option like when editing the PCI devices from a Guest, to sort local or remote isos first) and keep the source media input on top. This way we would only have one "tab" in this modal window and no sliding animation from left to right. Agree.
In the old UI, we had a globe icon for remote ISOs and a disk icon for local ISOs. Maybe we can get it back. I like the idea of filter and sort too.
I'm not sure if adding paginators would be a good idea, a Gallery/List view toggle button could do the trick if space is an issue for numerous images.
If we add filter and sort, I think we can do it in a single way by now, ie, displaying the ISOs as we do today. We can fix the height to list at least 2 or 3 rows of ISOs and add vertical scroll bar.
And don't forget that user can select multiple ISOs from those listed to create a bunch of Templates at once. Since the user is able to select multiple ISOs and it's in a list, what if we use the same widget like we are doing for updating selected packages/deleting debug reports? Is that available yet and if not, when will that be available? Debug Reports and Repositories are using wok.list.js and Peter is porting System Updates to jQuery Bootgrid so we can discard wok.grid.js since only Updates section is using it. I think the wok-list widget is very limited to a plain text list. The CSS and HTML for ISO and Template selection is good and the only issue we have is with keyboard navigation (I'm going to send a patch to fix it soon). If we want to add a gallery/list view toggle like we use in Guests and Templates (and in Storages in the future), we can change the parent CSS class and the styles based on inheritance (when the user toggles from Gallery to List, only the parent element changes it classes and the other styles are overwritten by the cascade, ex .wok-list > li will have a different style from .wok-gallery > li but the same HTML markup). So your suggestion is to keep the gallery view as it is today and implement the list view later. Is that correct? What do you think we should do now for this feature?
Yes. I think for now we can bring back the remote and local icons on top of the image items and put a simple filter and sort button like PCI tab. We set the panel scrollable area height with CSS media queries.
OK. Great! It sounds good for me too.
Samuel
For the source media input, I think we could use Typeahead.js the same way it is used for Ginger System Modules page. In this page the typeahead input suggests loaded modules only instead of all available modules. We would have to create some sort of source media history mechanism or get the source media path from all existing templates and put in a list and integrate with Typeahead: https://twitter.github.io/typeahead.js/examples/ I don't think it is interesting to have for source media. I don't expect the user to create multiple templates using the same source media. He/she can use the Template clone option for it so I suggest to keep the simple input box there. I agree to make this as simple as possible. Samuel
-----Original Message----- From: Socorro Stoppler [mailto:socorro@linux.vnet.ibm.com] Sent: quarta-feira, 13 de abril de 2016 14:51 To: Aline Manera <alinefm@linux.vnet.ibm.com>; Kimchi Devel <kimchi-devel@ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; sguimaraes943@gmail.com Subject: Re: [PATCH] [Kimchi] Create template (UI part) without specifying media type
On 04/12/2016 10:19 AM, Aline Manera wrote:
Hi Socorro,
The user will not need to choose any template type, ie, choose between local file or remote ISO.
Said that, when selecting "Add Template" a new dialog will be open to collect the source media path which can be a local file or remote one.
I think in something like below:
------------------------------------------------------------------- - -- ------------
| Source media: < input box > | | <info icon> Specify a local ISO file or a local image file or | | even an URL to an specific ISO image | | | | Suggested ISO files: | | < keep displaying the ISOs found in the active storage pools > | | | | Suggested Remote ISO files: | | < keep displaying the remote ISOs
|
- -- ------------
While the concept is good regarding the UI suggestion, I'm questioning if that'll be too much in one panel? (i.e. what if there are numerous local and remote ISOs?)
Samuel,
I'd like to get your thoughts on this --- do you have a suggestion on how to handle what Aline is trying to get across?
Either way, you just need to collect the file path (local or remote) and pass it to 'source_media' parameter.
Please, let me know your thoughts on it.
On 04/06/2016 03:20 PM, Socorro Stoppler wrote:
Rather than specifying whether local file is an img or an ISO, all the user has to do is to input the file including the path of its location. Kimchi will handle the rest on the backend. Rather than originally having 3 radio buttons, it is now 2 radio buttons -- one for local and the other for remote.
This patch needs to work in conjunction w/Ramon's latest patch set sent today - Use a single field to create a template - (backend)
Socorro Stoppler (1): Create template without specifying media type
ui/css/kimchi.css | 2 +- ui/css/src/modules/_templates.scss | 2 +- ui/js/src/kimchi.template_add_main.js | 378 +++++----------------------------- ui/pages/template-add.html.tmpl | 73 +------ 4 files changed, 55 insertions(+), 400 deletions(-)
Thanks -Socorro
participants (4)
-
Aline Manera -
Ramon Medeiros -
Samuel Henrique De Oliveira Guimaraes -
Socorro Stoppler