[Kimchi-devel] [PATCHv2] [Kimchi] Add UI netboot support for adding templates; add loading icon when switching back to image src
Aline Manera
alinefm at linux.vnet.ibm.com
Mon Jul 4 14:14:22 UTC 2016
Hi Socorro,
The loading icon keeps showing on "Image Template" view even with the
ISOs listed there.
On 06/20/2016 07:09 PM, Socorro Stoppler wrote:
> 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 at linux.vnet.ibm.com>
> ---
> 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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20160704/96243cab/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: glgchajhahcfanll.jpg
Type: image/jpeg
Size: 23916 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20160704/96243cab/attachment.jpg>
More information about the Kimchi-devel
mailing list