v3: Addressed the issue pointed out by Aline regarding the loading icon not going away even after the list of isos have finished loading when switching to the image template radio button. Also fixed the double scrollbars in the panel that Samuel pointed out. v2: Add loading icon when switching back to image src radio button per feedback from pvital v1: Add UI netboot support for adding templates Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com&gt; --- ui/css/kimchi.css | 5 +++ ui/css/src/modules/_templates.scss | 4 ++ ui/js/src/kimchi.template_add_main.js | 78 +++++++++++++++++++++++++++++++---- ui/pages/template-add.html.tmpl | 45 +++++++++++++------- 4 files changed, 107 insertions(+), 25 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 261d203..34347c2 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -1730,6 +1730,11 @@ body.wok-gallery { display: none; } +#template-add-window #loading-isos { + top: 0 !important; + z-index: 4 !important; +} + /* VM List View classes*/ #templates-root-container .grid-control input[type="text"] { height: 38px; diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index 2f58385..d8f3da8 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -270,6 +270,10 @@ .tooltip-arrow { display: none; } + #loading-isos { + top: 0 !important; + z-index: 4 !important; + } } diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index 7bdfc51..341bab3 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -17,7 +17,8 @@ */ kimchi.template_add_main = function() { "use strict"; - $('#loading-isos').removeClass('hidden'); + var currentPage = 'iso-local-box'; + $('#loading-isos').fadeIn(100, function() {}); kimchi.deepScanHandler = null; var isos = []; var local_isos = []; @@ -54,6 +55,7 @@ kimchi.template_add_main = function() { $('#local-iso-field').hide(); $('#select-all-local-iso').prop('checked', false); $('#btn-template-local-iso-create').attr('disabled', 'disabled'); + $('#btn-template-netboot-create').attr('disabled', 'disabled'); $('#iso-search').hide(); $('#iso-more').hide(); $('#iso-search-loading').hide(); @@ -65,6 +67,7 @@ kimchi.template_add_main = function() { $('#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 + $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot $('#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 }; @@ -107,6 +110,7 @@ kimchi.template_add_main = function() { $('#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 + $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot $('#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 }; @@ -125,6 +129,7 @@ kimchi.template_add_main = function() { } else { $('#btn-template-file-create').attr('disabled', 'disabled'); } + $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot }); initLocalIsoField(); @@ -144,9 +149,7 @@ kimchi.template_add_main = function() { }); }, function(err) { wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); - $('#loading-isos').fadeOut(300, function() { - $('#loading-isos').addClass('hidden'); - }); + $('#loading-isos').fadeOut(300, function() {}); }); $('#template-add-window .modal-body .template-pager').animate({ @@ -232,12 +235,11 @@ kimchi.template_add_main = function() { $('#iso-file').parent().removeClass('has-error'); $('#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 - } else { $('#btn-template-local-iso-create').attr('disabled', 'disabled'); } + $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot }); $('#list-local-iso').on('click', '[type="checkbox"]', function() { @@ -248,6 +250,7 @@ kimchi.template_add_main = function() { $('#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 + $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot if (checkedLength) { $('#btn-template-local-iso-create').removeAttr('disabled'); @@ -260,6 +263,16 @@ kimchi.template_add_main = function() { } }); + $('#btn-template-netboot-create').click(function() { + var data = { + "source_media": {"type": "netboot"} + }; + addTemplate(data, function() { + $('#btn-template-netboot-create').text(i18n['KCHAPI6005M']); + $('#btn-template-netboot-create').prop('disabled', false); + }); + }); + $('#btn-template-local-iso-create').click(function() { $('input', '#iso-file-box').prop('disabled', true); $('#btn-template-local-iso-create').text(i18n['KCHAPI6008M']); @@ -309,11 +322,9 @@ kimchi.template_add_main = function() { $('#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 - + $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot $('#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 }; @@ -350,6 +361,55 @@ kimchi.template_add_main = function() { $('input#iso-url').parent().toggleClass('has-error', !isValid); }, 0); }); + + $('#image-src').change(function() { + if (this.checked) { + if (currentPage === 'netboot-path') { + kimchi.switchPage(currentPage, 'iso-local-box', 'right'); + } + currentPage = 'iso-local-box'; + $('#template-add-window .modal-body .template-pager').animate({ + height: "700px" + }, 400); + initLocalIsoField(); + initIsoFileField(); + $('#loading-isos').fadeIn(100, function() {}); + kimchi.listIsos(function(local_isos) { //local ISOs + kimchi.listDistros(function(remote_isos) { //remote ISOs + + isos = local_isos.concat(remote_isos); //all isos + if (isos && isos.length) { + showLocalIsoField(isos); + $('#iso-more').show(); + } else { + $('#iso-search').show(); + } + $('#loading-isos').fadeOut(100, function() {}); + }); + }, function(err) { + wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); + $('#loading-isos').fadeOut(300, function() {}); + }); + setupFilters(); + enabledRemoteIso(); + } + }); + + $('#netboot-src').change(function() { + if (this.checked) { + if (currentPage === 'iso-local-box') { + kimchi.switchPage(currentPage, 'netboot-path', 'left'); + } + currentPage = 'netboot-path'; + $('#template-add-window .modal-body .template-pager').animate({ + height: "300px" + }, 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 + $('#btn-template-netboot-create').removeAttr('disabled').css('display', 'inline-block'); // 3 - Netboot + } + }); + //do create var addTemplate = function(data, callback) { kimchi.createTemplate(data, function() { diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index 5584f00..d4c7216 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -30,18 +30,17 @@ <div class="modal-body"> <div class="template-modal-container"> <div id="alert-modal-container"></div> + <div> + <h5>$_("Where is the source media for this template? ")</h5> + <input type="radio" checked="checked" name="iso-source" id="image-src" value="image-src" class="wok-radio"> + <label for="image-src">$_("Image Template")</label> + <input type="radio" name="iso-source" id="netboot-src" value="netboot-src" class="wok-radio"> + <label for="netboot-src">$_("Netboot Template")</label> + </div> </div> <div class="template-pager"> <div class="page-list"> <div class="page" id="iso-local-box"> - <div id="loading-isos"> - <div class="wok-mask-loader-container"> - <div class="wok-mask-loading"> - <div class="wok-mask-loading-icon"></div> - <div class="wok-mask-loading-text">$_("Loading...")</div> - </div> - </div> - </div> <!-- 1-1-2 --> <div id="iso-file-field"> <div id="iso-file-box" class="custom-iso-field"> @@ -104,16 +103,30 @@ </div> </div> </div> - </div> - </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 class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button> - </div> -</div> + <div class="page" id="netboot-path"> + </div> + </div> + <div id="loading-isos"> + <div class="wok-mask-loader-container"> + <div class="wok-mask-loading"> + <div class="wok-mask-loading-icon"></div> + <div class="wok-mask-loading-text">$_("Loading...")</div> + </div> + </div> + </div> + </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 class="btn btn-default" id="btn-template-netboot-create" disabled="disabled">$_("Create")</button> + <button class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button> + </div> + </div> <script> kimchi.template_add_main(); </script> + + +</div> </body> </html> -- 2.5.0 _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel