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

Paulo Ricardo Paz Vital pvital at linux.vnet.ibm.com
Wed Jun 22 12:49:37 UTC 2016


Reviewed-by: Paulo Ricardo Paz Vital <pvital at linux.vnet.ibm.com>
Tested-by: Paulo Ricardo Paz Vital <pvital at linux.vnet.ibm.com>

On Jun 20 03:09PM, 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>
> --
> 2.5.0
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>

--
Paulo Ricardo Paz Vital
Linux Technology Center, IBM Systems
http://www.ibm.com/linux/ltc/




More information about the Kimchi-devel mailing list