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@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>