[Kimchi-devel] [PATCHv3] [Kimchi] Add UI netboot support for adding templates; add loading icon when switching back to image src
Socorro Stoppler
socorro at linux.vnet.ibm.com
Tue Jul 19 19:28:01 UTC 2016
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
More information about the Kimchi-devel
mailing list