[Kimchi-devel] [PATCHv2] [Kimchi] Add UI netboot support for adding templates; add loading icon when switching back to image src

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/js/src/kimchi.template_add_main.js | 74 ++++++++++++++++++++++++++++++++--- ui/pages/template-add.html.tmpl | 29 +++++++++----- 2 files changed, 89 insertions(+), 14 deletions(-) diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index 948f710..28057a7 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -17,6 +17,7 @@ */ kimchi.template_add_main = function() { "use strict"; + var currentPage = 'iso-local-box'; $('#loading-isos').removeClass('hidden'); kimchi.deepScanHandler = null; var isos = []; @@ -53,6 +54,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(); @@ -64,6 +66,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 }; @@ -98,6 +101,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 }; @@ -116,6 +120,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(); @@ -222,12 +227,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() { @@ -238,6 +242,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'); @@ -250,6 +255,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']); @@ -299,11 +314,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 }; @@ -340,6 +353,57 @@ 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: "635px" + }, 400); + initLocalIsoField(); + initIsoFileField(); + $('#loading-isos').removeClass('hidden'); + 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() { + $('#loading-isos').addClass('hidden'); + }); + }); + 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 4226a8f..87d6cb4 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -30,11 +30,18 @@ <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 id="loading-isos hidden"> <div class="wok-mask-loader-container"> <div class="wok-mask-loading"> <div class="wok-mask-loading-icon"></div> @@ -103,16 +110,20 @@ </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> + <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