[Kimchi-devel] [PATCHv3] [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
Tue Jul 19 22:28:43 UTC 2016
Reviewed-by: Paulo Ricardo Paz Vital <pvital at linux.vnet.ibm.com>
On Jul 19 12:28PM, Socorro Stoppler wrote:
> 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 at linux.vnet.ibm.com>
> ---
> 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 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