2:23 p.m.
v2:
Added 'Not Available' for size to be displayed when there's no value
for size; otherwise, the container for the templates are showing up
as different sizes due to missing value for the size field. Also
moved the local/remote iso icon to bottom right corner
v1:
This is a brand new patch to implement create template UI without the user
having to distinguish between iso and image files since the original
one wasn't done quite right. Therefore, please ignore the original patch
and this is v1.
There are no longer any radio buttons, all the remote and local isos, if any,
are displayed in the same panel and are distinguished by having a 'globe' icon
for
remote and a 'hdd' icon for local at the top left corner of each tile. Also,
filtering by typing in the textbox has been added.
Socorro Stoppler (1):
Create Template UI adjustments based on feedback; added Not
Available to be displayed for Size when there's no size and move
remote/local iso icon to bottom right
ui/css/kimchi.css | 36 ++++
ui/css/src/modules/_templates.scss | 30 +++
ui/js/src/kimchi.template_add_main.js | 337 ++++++----------------------------
ui/pages/i18n.json.tmpl | 1 +
ui/pages/template-add.html.tmpl | 81 ++------
5 files changed, 136 insertions(+), 349 deletions(-)
--
2.5.0
2:23 p.m.
New subject: [PATCH] [Kimchi] Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right
Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com>
---
ui/css/kimchi.css | 36 ++++
ui/css/src/modules/_templates.scss | 30 +++
ui/js/src/kimchi.template_add_main.js | 337 ++++++----------------------------
ui/pages/i18n.json.tmpl | 1 +
ui/pages/template-add.html.tmpl | 81 ++------
5 files changed, 136 insertions(+), 349 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 5afa55d..1d33d45 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1628,6 +1628,42 @@ body.wok-gallery {
left: 0;
}
+#template-add-window .filter {
+ height: 40px;
+ overflow: visible;
+ clear: both;
+}
+
+#template-add-window .pull-right
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 133px;
+}
+
+#template-add-window .filter input[type="text"].form-control {
+ width: 460px;
+ height: 40px;
+ float: right;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+#template-add-window .filter .bootstrap-select.btn-group .btn .caret {
+ border-left: 0;
+}
+
+#template-add-window .filter
button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ background: #fcfcfc;
+ border-right: 0;
+}
+
+#template-add-window span.iso-image-indicator {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ font-size: 32px;
+}
+
/* 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 86b9305..a9f0e8f 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -217,6 +217,36 @@
&.modal-content div#iso-local-box {
left: 0;
}
+ .filter {
+ height: 40px;
+ overflow: visible;
+ clear: both;
+ }
+ .pull-right
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 133px;
+ }
+ .filter input[type="text"].form-control {
+ width: 460px;
+ height: 40px;
+ float: right;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .filter .bootstrap-select.btn-group .btn .caret {
+ border-left: 0;
+ }
+ .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ background: $table-bg-accent;
+ border-right: 0;
+ }
+ span.iso-image-indicator {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ font-size: 32px;
+ }
}
diff --git a/ui/js/src/kimchi.template_add_main.js
b/ui/js/src/kimchi.template_add_main.js
index fa5c847..c3dd014 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -15,41 +15,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-kimchi.switchPage = function(fromPageId, toPageId, direction) {
- $('.tab-content').css('overflow', 'hidden');
- direction = direction || 'left';
- var toLeftBegin;
- var fromLeftEnd;
- if ('left' === direction) {
- toLeftBegin = '100%';
- fromLeftEnd = '-100%';
- } else if ('right' === direction) {
- toLeftBegin = '-100%';
- fromLeftEnd = '100%';
- }
- var formPage = $('#' + fromPageId);
- var toPage = $('#' + toPageId);
- toPage.css({
- left: toLeftBegin
- });
- formPage.animate({
- left: fromLeftEnd,
- opacity: 0.1
- }, 400, function() {
- $('.tab-content').css('overflow', 'visible');
- });
- toPage.animate({
- left: '0',
- opacity: 1
- }, 400, function() {
- $('.tab-content').css('overflow', 'visible');
- });
-};
-
kimchi.template_add_main = function() {
"use strict";
- var currentPage = 'iso-local-box';
kimchi.deepScanHandler = null;
+ var isos = [];
+ var local_isos = [];
+ var remote_isos = [];
var deepScan = function(button) {
kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished)
{
@@ -76,7 +47,6 @@ kimchi.template_add_main = function() {
});
};
- //1-1-1 local iso list
var initLocalIsoField = function() {
kimchi.isoInfo = {};
$('#local-iso-field').hide();
@@ -94,51 +64,43 @@ 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
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
$('#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
-
};
var showLocalIsoField = function(isos) {
var html = '';
var template = $('#tmpl-list-local-iso').html();
$.each(isos, function(index, volume) {
+ if ((volume.path).indexOf('http') === -1) { // Didn't find
'http', so must be local
+ volume.icon = 'fa fa-hdd-o';
+ } else {
+ volume.icon = 'fa fa-globe';
+ }
var isoId = volume.os_distro + '*' + volume.name + '*' +
volume.os_version;
if (!kimchi.isoInfo[isoId]) {
volume.isoId = isoId;
volume.capacity = wok.changetoProperUnit(volume.capacity, 1);
+ if (volume.capacity === "") {
+ volume.capacity = i18n['KCHTMPL6006M'];
+ }
kimchi.isoInfo[isoId] = volume;
html += wok.substitute(template, volume);
}
});
+
$('#list-local-iso').append(html);
$('#local-iso-field').show();
};
-
- //1-1-2 local iso file
var initIsoFileField = function() {
- //$('#iso-file-check').prop('checked', false);
$('#iso-file').val('');
$('vm-image-local-text').val('');
$('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
$('#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
-
};
$('#iso-file').on('input propertychange keyup focus cut paste click',
function() {
@@ -152,9 +114,6 @@ kimchi.template_add_main = function() {
}, 0);
if ($('#iso-file').val()) {
$('#btn-template-local-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
} else {
$('#btn-template-file-create').attr('disabled',
'disabled');
}
@@ -162,57 +121,58 @@ kimchi.template_add_main = function() {
initLocalIsoField();
initIsoFileField();
- kimchi.listIsos(function(isos) {
- if (isos && isos.length) {
- showLocalIsoField(isos);
- $('#iso-more').show();
- } else {
- $('#iso-search').show();
- }
+
+ 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();
+ }
+ });
}, function(err) {
wok.message.error(err.responseJSON.reason,
'#local-iso-error-container');
});
+
$('#template-add-window .modal-body .template-pager').animate({
height: "689px"
}, 400);
- // 1-1 local iso
- $('#iso-local').change(function() {
- if (this.checked) {
- if (currentPage === 'vm-image-local-box') {
- kimchi.switchPage(currentPage, 'iso-local-box',
'right');
- } else if (currentPage === 'iso-remote-box') {
- kimchi.switchPage(currentPage, 'iso-local-box',
'right');
+ var filterISOs = function(group, text) {
+ text = text.trim().split(" ");
+ var list = $('#isoRow').find('li');
+ if(text === ""){
+ list.show();
+ return;
+ }
+ list.hide();
+
+ list.filter(function(index, value){
+ var $li = $(this);
+ for (var i = 0; i < text.length; ++i){
+ if ($li.is(":containsNC('" + text[i] + "')"))
{
+ if (group === 'all') {
+ return true;
+ } else if (group === 'local') {
+ return true;
+ } else if (group === 'remote') {
+ return true;
+ }
+ }
}
- currentPage = 'iso-local-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "689px"
- }, 400);
- initLocalIsoField();
- initIsoFileField();
-
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
+ return false;
+ }).show();
+ };
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
+ var setupFilters = function() {
+ $('input#template-add-iso-filter',
'#form-template-add').on('keyup', function() {
+ filterISOs("all", $(this).val()); // Default to 'all' for
now
+ });
+ };
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- kimchi.listIsos(function(isos) {
- if (isos && isos.length) {
- showLocalIsoField(isos);
- $('#iso-more').show();
- } else {
- $('#iso-search').show();
- }
- }, function(err) {
- wok.message.error(err.responseJSON.reason,
'#local-iso-error-container');
- });
- }
- });
+ setupFilters();
$('#iso-search').click(function() {
var settings = {
@@ -263,12 +223,6 @@ kimchi.template_add_main = function() {
$('#btn-template-local-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
} else {
$('#btn-template-local-iso-create').attr('disabled',
'disabled');
}
@@ -282,14 +236,8 @@ 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', 'inline-block'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
if (checkedLength) {
$('#btn-template-local-iso-create').removeAttr('disabled');
var length = $('#list-local-iso
[type="checkbox"]').length;
@@ -302,12 +250,11 @@ kimchi.template_add_main = function() {
});
$('#btn-template-local-iso-create').click(function() {
- submitIso('form-local-iso');
+ submitIso();
});
$('#btn-template-file-create').click(function() {
var isoFile = $('#iso-file').val();
- $('vm-image-local-text').val('');
if (!kimchi.template_check_path(isoFile)) {
wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container');
return;
@@ -318,9 +265,6 @@ kimchi.template_add_main = function() {
addTemplate(data);
});
- //1-2 remote iso
- $('#iso-remote').attr("disabled", true).css('cursor',
'not-allowed');
-
var enabledRemoteIso = function() {
if (kimchi.capabilities === undefined) {
setTimeout(enabledRemoteIso, 2000);
@@ -330,36 +274,15 @@ kimchi.template_add_main = function() {
if (kimchi.capabilities.qemu_stream !== true) {
return;
}
-
- $('#iso-remote').attr("disabled", false).css('cursor',
'pointer');
- $('#iso-remote').change(function() {
- if (this.checked) {
- if (currentPage === 'iso-local-box') { // slide twice
- kimchi.switchPage(currentPage, 'iso-remote-box',
'left');
- } else if (currentPage === 'vm-image-local-box') { // slide once
- kimchi.switchPage(currentPage, 'iso-remote-box',
'left');
- }
- currentPage = 'iso-remote-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "635px"
- }, 400);
- initRemoteIsoField();
- initIsoUrlField();
- kimchi.listDistros(function(isos) {
- showRemoteIsoField(isos);
- }, function() {});
- }
- });
};
+
enabledRemoteIso();
- //1-2-1 remote iso list
var initRemoteIsoField = function() {
$('#load-remote-iso').show();
$('#remote-iso-field').hide();
$('#iso-url-field').hide();
$('#select-all-remote-iso').prop('checked', false);
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
$('#iso-file').val('');
$('vm-image-local-text').val('');
@@ -369,12 +292,6 @@ kimchi.template_add_main = function() {
$('#btn-template-local-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block'); // 4 - Remote folder
path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
$('#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
@@ -405,152 +322,14 @@ kimchi.template_add_main = function() {
}
};
- $('#select-all-remote-iso').click(function() {
- $('#list-remote-iso [type="checkbox"]').prop('checked',
$(this).prop('checked'));
- if ($(this).prop('checked')) {
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#iso-url').val('');
- $('#iso-url').parent().removeClass('has-error');
-
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
-
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 5 - Remote selected isos
-
- } else {
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
- }
- });
-
- $('#list-remote-iso').on('click',
'[type="checkbox"]', function() {
- $('#iso-url').parent().removeClass('has-error');
- var checkedLength = $('#list-remote-iso
[type="checkbox"]:checked').length;
- if (checkedLength) {
- $('#btn-template-remote-iso-create').removeAttr('disabled');
- var length = $('#list-remote-iso
[type="checkbox"]').length;
- $('#select-all-remote-iso').prop('checked', length ===
checkedLength);
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
-
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 5 - Remote selected isos
-
- } else {
- $('#select-all-remote-iso').prop('checked', false);
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
- }
- });
-
- $('#btn-template-remote-iso-create').click(function() {
- submitIso('form-remote-iso');
- });
-
- //1-2-2 remote iso url
- var initIsoUrlField = function() {
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block'); // 4 - Remote folder
path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- };
-
$('#iso-url').on('input propertychange keyup focus cut paste click',
function() {
$('#select-all-local-iso,
#select-all-remote-iso').prop('checked', false);
$('#list-local-iso [type="checkbox"], #list-remote-iso
[type="checkbox"]').prop('checked', false);
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block');
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none');
setTimeout(function() {
var isValid = kimchi.template_check_url($('input#iso-url').val());
$('input#iso-url').parent().toggleClass('has-error',
!isValid);
- $('#btn-template-url-create').attr('disabled', (isValid ?
false : true));
}, 0);
});
-
- $('#vm-image-local').change(function() {
- if (this.checked) {
- if (currentPage === 'iso-local-box') {
- kimchi.switchPage(currentPage, 'vm-image-local-box',
'left');
- } else if (currentPage === 'iso-remote-box') {
- kimchi.switchPage(currentPage, 'vm-image-local-box',
'right');
- }
- currentPage = 'vm-image-local-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "100px"
- }, 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
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'inline-block'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- }
- });
- $('input', '#vm-image-local-box').on('input propertychange keyup
focus cut paste click', function() {
- setTimeout(function() {
- var isValid = kimchi.template_check_path($('input',
'#vm-image-local-box').val());
- $('input',
'#vm-image-local-box').parent().toggleClass('has-error', !isValid);
- $('#vm-image-local-box-button').attr('disabled', (isValid ?
false : true));
- }, 0);
- });
- $('input', '#vm-image-local-box').on('input propertychange keyup
focus cut paste click', function() {
- setTimeout(function() {
- var isValid = kimchi.template_check_path($('input',
'#vm-image-local-box').val());
- $('input',
'#vm-image-local-box').parent().toggleClass('has-error', !isValid);
- $('#vm-image-local-box-button').attr('disabled', (isValid ?
false : true));
- }, 0);
- });
- $('#vm-image-local-box-button').on('click', function(){
- $('input', '#vm-image-local-box').prop('disabled',
true);
- $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']);
- $('#vm-image-local-box-button').prop('disabled', true);
- addTemplate({
- source_media: $('input', '#vm-image-local-box').val()
- }, function() {
- $('input', '#vm-image-local-box').prop('disabled',
false);
- $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']);
- $('#vm-image-local-box-button').prop('disabled', false);
- });
- });
-
- $('#btn-template-url-create').click(function() {
- var isoUrl = $('#iso-url').val();
- if (!kimchi.template_check_url(isoUrl)) {
- wok.message.error.code('KCHAPI6004E');
- return;
- }
- var data = {
- "source_media": isoUrl
- };
- addTemplate(data);
- });
-
//do create
var addTemplate = function(data, callback) {
kimchi.createTemplate(data, function() {
@@ -568,8 +347,8 @@ kimchi.template_add_main = function() {
});
};
- var submitIso = function(formId) {
- var formData = $('#' + formId).serializeObject();
+ var submitIso = function() {
+ var formData = $('#form-local-iso').serializeObject();
if (formData.iso) {
var length = 0;
var successNum = 0;
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index 24abeb6..e030a45 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -51,6 +51,7 @@
"KCHTMPL6003M": "$_("This will permanently delete the template.
Would you like to continue?")",
"KCHTMPL6004M": "$_("View Table")",
"KCHTMPL6005M": "$_("View Gallery")",
+ "KCHTMPL6006M": "$_("Not Available")",
"KCHVM6001M": "$_("This will delete the virtual machine and its
virtual disks. This operation cannot be undone. Would you like to continue?")",
"KCHVM6002M": "$_("Power off Confirmation")",
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 2926cfa..670c7a2 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -29,16 +29,6 @@
</div>
<div class="modal-body">
<div class="template-modal-container">
- <div>
- <span id="alert-modal-container"></span>
- <h5>$_("Where is the source media for this template?
")</h5>
- <input type="radio" checked="checked"
name="iso-source" id="iso-local" value="iso-local"
class="wok-radio">
- <label for="iso-local">$_("Local ISO
Image")</label>
- <input type="radio" name="iso-source"
id="vm-image-local" value="vm-image-local"
class="wok-radio">
- <label for="vm-image-local">$_("Local Image
File")</label>
- <input type="radio" name="iso-source"
id="iso-remote" value="iso-remote" class="wok-radio">
- <label for="iso-remote">$_("Remote ISO
Image")</label>
- </div>
</div>
<div class="template-pager">
<div class="page-list">
@@ -47,7 +37,7 @@
<div id="iso-file-field">
<div id="iso-file-box"
class="custom-iso-field">
<div class="form-group">
- <label
for="iso-file">$_("Provide a File Path for a specific ISO
image:")</label>
+ <label
for="iso-file">$_("File Path:")</label>
<input type="text"
class="form-control" id="iso-file" name="iso-file">
</div>
</div>
@@ -56,8 +46,16 @@
<span
id="local-iso-error-container"></span>
<button class="btn btn-primary"
id="iso-search" style="display: none">$_("Search
ISOs")</button>
<button class="btn btn-primary"
id="iso-search-loading" style="display: none"><span
class="wok-loading-icon"></span> $_("Please,
wait...")</button>
+
<!-- 1-1-1 -->
<div id="local-iso-field"
class="iso-field" style="display: none;">
+ <form id="form-template-add">
+ <div class="filter">
+ <div class="form-group
pull-right">
+ <input type="text"
class="form-control" id="template-add-iso-filter"
placeholder="$_("Filter")" />
+ </div>
+ </div>
+ </form>
<div class="row">
<p>$_("The following ISOs are
available:")</p>
</div>
@@ -66,7 +64,7 @@
<input type="checkbox"
id="select-all-local-iso">$_("All")
</label>
</div>
- <div class="row">
+ <div class="row"
id="isoRow">
<form id="form-local-iso">
<ul id="list-local-iso"
class="list-iso">
</ul>
@@ -88,6 +86,7 @@
<dt>{capacity}</dt>
<dd>$_("Size")</dd>
</dl>
+ <span
class="iso-image-indicator"><i
class="{icon}"></i></span>
</span>
</span>
</label>
@@ -108,69 +107,11 @@
</div>
</div>
- <!-- 1-2 -->
- <div class="page" id="iso-remote-box">
- <!-- 1-2-2 -->
- <div id="iso-url-field" style="display:
none;">
- <div id="iso-url-box"
class="form-group">
- <label for="iso-url">$_("Provide
a URL for a specific ISO image:")</label>
- <input type="text"
class="form-control" id="iso-url" name="iso-url">
- </div>
- </div>
- <!-- 1-2-0 -->
- <div id="load-remote-iso">
- <p><span
class="wok-loading-icon"></span> $_("Loading default remote ISOs
...")</p>
- </div>
- <span
id="remote-iso-warning-container"></span>
- <span
id="remote-iso-error-container"></span>
- <!-- 1-2-1 -->
- <div id="remote-iso-field"
class="iso-field" style="display: none;">
- <div class="row">
- <p>$_("The following ISOs are
available:")</p>
- </div>
- <div class="checkbox">
- <label class="check-all">
- <input type="checkbox"
id="select-all-remote-iso">$_("All")
- </label>
- </div>
- <div class="row">
- <form id="form-remote-iso">
- <ul id="list-remote-iso"
class="list-iso">
- </ul>
- </form>
- <script id="tmpl-list-remote-iso"
type="text/html">
- <li class="col-md-3">
- <label
class="box-iso-outer">
- <input type="checkbox"
class="iso-checkbox-hidden" name="iso" value="{isoId}">
- <span
class="box-iso-border">
- <span
class="box-iso-inner">
- <h3 class="iso-title
{os_distro}" title="{name}">
- {name}
- </h3>
- <dl
class="iso-info">
-
<dt>{os_distro}</dt>
-
<dd>$_("OS")</dd>
-
<dt>{os_version}</dt>
-
<dd>$_("Version")</dd>
-
<dt>{os_arch}</dt>
-
<dd>$_("Arch")</dd>
- </dl>
- </span>
- </span>
- </label>
- </li>
- </script>
- </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 id="vm-image-local-box-button" class="btn
btn-default ui-button-primary">$_("Create")</button>
- <button class="btn btn-default"
id="btn-template-url-create"
disabled="disabled">$_("Create")</button>
- <button class="btn btn-default"
id="btn-template-remote-iso-create"
disabled="disabled">$_("Create")</button>
<button class="btn btn-default"
data-dismiss="modal"
type="button">$_("Cancel")</button>
</div>
</div>
--
2.5.0
2:50 p.m.
New subject: [PATCH] [Kimchi] Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right
Reviewed-By: Ramon Medeiros <ramonn(a)br.ibm.com>
Tested-By: Ramon Medeiros <ramonn(a)br.ibm.com>
Just a question, why is taking so long to discover remote and local
templates?
On 04/20/2016 04:23 PM, Socorro Stoppler wrote:
Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com>
---
ui/css/kimchi.css | 36 ++++
ui/css/src/modules/_templates.scss | 30 +++
ui/js/src/kimchi.template_add_main.js | 337 ++++++----------------------------
ui/pages/i18n.json.tmpl | 1 +
ui/pages/template-add.html.tmpl | 81 ++------
5 files changed, 136 insertions(+), 349 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 5afa55d..1d33d45 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1628,6 +1628,42 @@ body.wok-gallery {
left: 0;
}
+#template-add-window .filter {
+ height: 40px;
+ overflow: visible;
+ clear: both;
+}
+
+#template-add-window .pull-right
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 133px;
+}
+
+#template-add-window .filter input[type="text"].form-control {
+ width: 460px;
+ height: 40px;
+ float: right;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+#template-add-window .filter .bootstrap-select.btn-group .btn .caret {
+ border-left: 0;
+}
+
+#template-add-window .filter
button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ background: #fcfcfc;
+ border-right: 0;
+}
+
+#template-add-window span.iso-image-indicator {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ font-size: 32px;
+}
+
/* 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 86b9305..a9f0e8f 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -217,6 +217,36 @@
&.modal-content div#iso-local-box {
left: 0;
}
+ .filter {
+ height: 40px;
+ overflow: visible;
+ clear: both;
+ }
+ .pull-right
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 133px;
+ }
+ .filter input[type="text"].form-control {
+ width: 460px;
+ height: 40px;
+ float: right;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .filter .bootstrap-select.btn-group .btn .caret {
+ border-left: 0;
+ }
+ .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ background: $table-bg-accent;
+ border-right: 0;
+ }
+ span.iso-image-indicator {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ font-size: 32px;
+ }
}
diff --git a/ui/js/src/kimchi.template_add_main.js
b/ui/js/src/kimchi.template_add_main.js
index fa5c847..c3dd014 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -15,41 +15,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-kimchi.switchPage = function(fromPageId, toPageId, direction) {
- $('.tab-content').css('overflow', 'hidden');
- direction = direction || 'left';
- var toLeftBegin;
- var fromLeftEnd;
- if ('left' === direction) {
- toLeftBegin = '100%';
- fromLeftEnd = '-100%';
- } else if ('right' === direction) {
- toLeftBegin = '-100%';
- fromLeftEnd = '100%';
- }
- var formPage = $('#' + fromPageId);
- var toPage = $('#' + toPageId);
- toPage.css({
- left: toLeftBegin
- });
- formPage.animate({
- left: fromLeftEnd,
- opacity: 0.1
- }, 400, function() {
- $('.tab-content').css('overflow', 'visible');
- });
- toPage.animate({
- left: '0',
- opacity: 1
- }, 400, function() {
- $('.tab-content').css('overflow', 'visible');
- });
-};
-
kimchi.template_add_main = function() {
"use strict";
- var currentPage = 'iso-local-box';
kimchi.deepScanHandler = null;
+ var isos = [];
+ var local_isos = [];
+ var remote_isos = [];
var deepScan = function(button) {
kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished)
{
@@ -76,7 +47,6 @@ kimchi.template_add_main = function() {
});
};
- //1-1-1 local iso list
var initLocalIsoField = function() {
kimchi.isoInfo = {};
$('#local-iso-field').hide();
@@ -94,51 +64,43 @@ 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
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
$('#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
-
};
var showLocalIsoField = function(isos) {
var html = '';
var template = $('#tmpl-list-local-iso').html();
$.each(isos, function(index, volume) {
+ if ((volume.path).indexOf('http') === -1) { // Didn't find
'http', so must be local
+ volume.icon = 'fa fa-hdd-o';
+ } else {
+ volume.icon = 'fa fa-globe';
+ }
var isoId = volume.os_distro + '*' + volume.name + '*' +
volume.os_version;
if (!kimchi.isoInfo[isoId]) {
volume.isoId = isoId;
volume.capacity = wok.changetoProperUnit(volume.capacity, 1);
+ if (volume.capacity === "") {
+ volume.capacity = i18n['KCHTMPL6006M'];
+ }
kimchi.isoInfo[isoId] = volume;
html += wok.substitute(template, volume);
}
});
+
$('#list-local-iso').append(html);
$('#local-iso-field').show();
};
-
- //1-1-2 local iso file
var initIsoFileField = function() {
- //$('#iso-file-check').prop('checked', false);
$('#iso-file').val('');
$('vm-image-local-text').val('');
$('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
$('#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
-
};
$('#iso-file').on('input propertychange keyup focus cut paste
click', function() {
@@ -152,9 +114,6 @@ kimchi.template_add_main = function() {
}, 0);
if ($('#iso-file').val()) {
$('#btn-template-local-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
} else {
$('#btn-template-file-create').attr('disabled',
'disabled');
}
@@ -162,57 +121,58 @@ kimchi.template_add_main = function() {
initLocalIsoField();
initIsoFileField();
- kimchi.listIsos(function(isos) {
- if (isos && isos.length) {
- showLocalIsoField(isos);
- $('#iso-more').show();
- } else {
- $('#iso-search').show();
- }
+
+ 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();
+ }
+ });
}, function(err) {
wok.message.error(err.responseJSON.reason,
'#local-iso-error-container');
});
+
$('#template-add-window .modal-body .template-pager').animate({
height: "689px"
}, 400);
- // 1-1 local iso
- $('#iso-local').change(function() {
- if (this.checked) {
- if (currentPage === 'vm-image-local-box') {
- kimchi.switchPage(currentPage, 'iso-local-box',
'right');
- } else if (currentPage === 'iso-remote-box') {
- kimchi.switchPage(currentPage, 'iso-local-box',
'right');
+ var filterISOs = function(group, text) {
+ text = text.trim().split(" ");
+ var list = $('#isoRow').find('li');
+ if(text === ""){
+ list.show();
+ return;
+ }
+ list.hide();
+
+ list.filter(function(index, value){
+ var $li = $(this);
+ for (var i = 0; i < text.length; ++i){
+ if ($li.is(":containsNC('" + text[i] +
"')")) {
+ if (group === 'all') {
+ return true;
+ } else if (group === 'local') {
+ return true;
+ } else if (group === 'remote') {
+ return true;
+ }
+ }
}
- currentPage = 'iso-local-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "689px"
- }, 400);
- initLocalIsoField();
- initIsoFileField();
-
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
+ return false;
+ }).show();
+ };
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
+ var setupFilters = function() {
+ $('input#template-add-iso-filter',
'#form-template-add').on('keyup', function() {
+ filterISOs("all", $(this).val()); // Default to 'all' for
now
+ });
+ };
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- kimchi.listIsos(function(isos) {
- if (isos && isos.length) {
- showLocalIsoField(isos);
- $('#iso-more').show();
- } else {
- $('#iso-search').show();
- }
- }, function(err) {
- wok.message.error(err.responseJSON.reason,
'#local-iso-error-container');
- });
- }
- });
+ setupFilters();
$('#iso-search').click(function() {
var settings = {
@@ -263,12 +223,6 @@ kimchi.template_add_main = function() {
$('#btn-template-local-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
} else {
$('#btn-template-local-iso-create').attr('disabled',
'disabled');
}
@@ -282,14 +236,8 @@ 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', 'inline-block'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
if (checkedLength) {
$('#btn-template-local-iso-create').removeAttr('disabled');
var length = $('#list-local-iso
[type="checkbox"]').length;
@@ -302,12 +250,11 @@ kimchi.template_add_main = function() {
});
$('#btn-template-local-iso-create').click(function() {
- submitIso('form-local-iso');
+ submitIso();
});
$('#btn-template-file-create').click(function() {
var isoFile = $('#iso-file').val();
- $('vm-image-local-text').val('');
if (!kimchi.template_check_path(isoFile)) {
wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container');
return;
@@ -318,9 +265,6 @@ kimchi.template_add_main = function() {
addTemplate(data);
});
- //1-2 remote iso
- $('#iso-remote').attr("disabled", true).css('cursor',
'not-allowed');
-
var enabledRemoteIso = function() {
if (kimchi.capabilities === undefined) {
setTimeout(enabledRemoteIso, 2000);
@@ -330,36 +274,15 @@ kimchi.template_add_main = function() {
if (kimchi.capabilities.qemu_stream !== true) {
return;
}
-
- $('#iso-remote').attr("disabled", false).css('cursor',
'pointer');
- $('#iso-remote').change(function() {
- if (this.checked) {
- if (currentPage === 'iso-local-box') { // slide twice
- kimchi.switchPage(currentPage, 'iso-remote-box',
'left');
- } else if (currentPage === 'vm-image-local-box') { // slide
once
- kimchi.switchPage(currentPage, 'iso-remote-box',
'left');
- }
- currentPage = 'iso-remote-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "635px"
- }, 400);
- initRemoteIsoField();
- initIsoUrlField();
- kimchi.listDistros(function(isos) {
- showRemoteIsoField(isos);
- }, function() {});
- }
- });
};
+
enabledRemoteIso();
- //1-2-1 remote iso list
var initRemoteIsoField = function() {
$('#load-remote-iso').show();
$('#remote-iso-field').hide();
$('#iso-url-field').hide();
$('#select-all-remote-iso').prop('checked', false);
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
$('#iso-file').val('');
$('vm-image-local-text').val('');
@@ -369,12 +292,6 @@ kimchi.template_add_main = function() {
$('#btn-template-local-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block'); // 4 - Remote folder
path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
$('#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
@@ -405,152 +322,14 @@ kimchi.template_add_main = function() {
}
};
- $('#select-all-remote-iso').click(function() {
- $('#list-remote-iso
[type="checkbox"]').prop('checked',
$(this).prop('checked'));
- if ($(this).prop('checked')) {
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#iso-url').val('');
- $('#iso-url').parent().removeClass('has-error');
-
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
-
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 5 - Remote selected isos
-
- } else {
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
- }
- });
-
- $('#list-remote-iso').on('click',
'[type="checkbox"]', function() {
- $('#iso-url').parent().removeClass('has-error');
- var checkedLength = $('#list-remote-iso
[type="checkbox"]:checked').length;
- if (checkedLength) {
-
$('#btn-template-remote-iso-create').removeAttr('disabled');
- var length = $('#list-remote-iso
[type="checkbox"]').length;
- $('#select-all-remote-iso').prop('checked', length ===
checkedLength);
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
-
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 5 - Remote selected isos
-
- } else {
- $('#select-all-remote-iso').prop('checked', false);
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
- }
- });
-
- $('#btn-template-remote-iso-create').click(function() {
- submitIso('form-remote-iso');
- });
-
- //1-2-2 remote iso url
- var initIsoUrlField = function() {
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block'); // 4 - Remote folder
path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- };
-
$('#iso-url').on('input propertychange keyup focus cut paste
click', function() {
$('#select-all-local-iso,
#select-all-remote-iso').prop('checked', false);
$('#list-local-iso [type="checkbox"], #list-remote-iso
[type="checkbox"]').prop('checked', false);
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block');
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none');
setTimeout(function() {
var isValid = kimchi.template_check_url($('input#iso-url').val());
$('input#iso-url').parent().toggleClass('has-error',
!isValid);
- $('#btn-template-url-create').attr('disabled', (isValid ?
false : true));
}, 0);
});
-
- $('#vm-image-local').change(function() {
- if (this.checked) {
- if (currentPage === 'iso-local-box') {
- kimchi.switchPage(currentPage, 'vm-image-local-box',
'left');
- } else if (currentPage === 'iso-remote-box') {
- kimchi.switchPage(currentPage, 'vm-image-local-box',
'right');
- }
- currentPage = 'vm-image-local-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "100px"
- }, 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
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'inline-block'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- }
- });
- $('input', '#vm-image-local-box').on('input propertychange keyup
focus cut paste click', function() {
- setTimeout(function() {
- var isValid = kimchi.template_check_path($('input',
'#vm-image-local-box').val());
- $('input',
'#vm-image-local-box').parent().toggleClass('has-error', !isValid);
- $('#vm-image-local-box-button').attr('disabled', (isValid ?
false : true));
- }, 0);
- });
- $('input', '#vm-image-local-box').on('input propertychange keyup
focus cut paste click', function() {
- setTimeout(function() {
- var isValid = kimchi.template_check_path($('input',
'#vm-image-local-box').val());
- $('input',
'#vm-image-local-box').parent().toggleClass('has-error', !isValid);
- $('#vm-image-local-box-button').attr('disabled', (isValid ?
false : true));
- }, 0);
- });
- $('#vm-image-local-box-button').on('click', function(){
- $('input', '#vm-image-local-box').prop('disabled',
true);
- $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']);
- $('#vm-image-local-box-button').prop('disabled', true);
- addTemplate({
- source_media: $('input', '#vm-image-local-box').val()
- }, function() {
- $('input', '#vm-image-local-box').prop('disabled',
false);
- $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']);
- $('#vm-image-local-box-button').prop('disabled', false);
- });
- });
-
- $('#btn-template-url-create').click(function() {
- var isoUrl = $('#iso-url').val();
- if (!kimchi.template_check_url(isoUrl)) {
- wok.message.error.code('KCHAPI6004E');
- return;
- }
- var data = {
- "source_media": isoUrl
- };
- addTemplate(data);
- });
-
//do create
var addTemplate = function(data, callback) {
kimchi.createTemplate(data, function() {
@@ -568,8 +347,8 @@ kimchi.template_add_main = function() {
});
};
- var submitIso = function(formId) {
- var formData = $('#' + formId).serializeObject();
+ var submitIso = function() {
+ var formData = $('#form-local-iso').serializeObject();
if (formData.iso) {
var length = 0;
var successNum = 0;
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index 24abeb6..e030a45 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -51,6 +51,7 @@
"KCHTMPL6003M": "$_("This will permanently delete the template.
Would you like to continue?")",
"KCHTMPL6004M": "$_("View Table")",
"KCHTMPL6005M": "$_("View Gallery")",
+ "KCHTMPL6006M": "$_("Not Available")",
"KCHVM6001M": "$_("This will delete the virtual machine and its
virtual disks. This operation cannot be undone. Would you like to continue?")",
"KCHVM6002M": "$_("Power off Confirmation")",
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 2926cfa..670c7a2 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -29,16 +29,6 @@
</div>
<div class="modal-body">
<div class="template-modal-container">
- <div>
- <span id="alert-modal-container"></span>
- <h5>$_("Where is the source media for this template?
")</h5>
- <input type="radio" checked="checked"
name="iso-source" id="iso-local" value="iso-local"
class="wok-radio">
- <label for="iso-local">$_("Local ISO
Image")</label>
- <input type="radio" name="iso-source"
id="vm-image-local" value="vm-image-local"
class="wok-radio">
- <label for="vm-image-local">$_("Local Image
File")</label>
- <input type="radio" name="iso-source"
id="iso-remote" value="iso-remote" class="wok-radio">
- <label for="iso-remote">$_("Remote ISO
Image")</label>
- </div>
</div>
<div class="template-pager">
<div class="page-list">
@@ -47,7 +37,7 @@
<div id="iso-file-field">
<div id="iso-file-box"
class="custom-iso-field">
<div class="form-group">
- <label
for="iso-file">$_("Provide a File Path for a specific ISO
image:")</label>
+ <label
for="iso-file">$_("File Path:")</label>
<input type="text"
class="form-control" id="iso-file" name="iso-file">
</div>
</div>
@@ -56,8 +46,16 @@
<span
id="local-iso-error-container"></span>
<button class="btn btn-primary"
id="iso-search" style="display: none">$_("Search
ISOs")</button>
<button class="btn btn-primary"
id="iso-search-loading" style="display: none"><span
class="wok-loading-icon"></span> $_("Please,
wait...")</button>
+
<!-- 1-1-1 -->
<div id="local-iso-field"
class="iso-field" style="display: none;">
+ <form id="form-template-add">
+ <div class="filter">
+ <div class="form-group
pull-right">
+ <input type="text"
class="form-control" id="template-add-iso-filter"
placeholder="$_("Filter")" />
+ </div>
+ </div>
+ </form>
<div class="row">
<p>$_("The following ISOs are
available:")</p>
</div>
@@ -66,7 +64,7 @@
<input type="checkbox"
id="select-all-local-iso">$_("All")
</label>
</div>
- <div class="row">
+ <div class="row"
id="isoRow">
<form id="form-local-iso">
<ul id="list-local-iso"
class="list-iso">
</ul>
@@ -88,6 +86,7 @@
<dt>{capacity}</dt>
<dd>$_("Size")</dd>
</dl>
+ <span
class="iso-image-indicator"><i
class="{icon}"></i></span>
</span>
</span>
</label>
@@ -108,69 +107,11 @@
</div>
</div>
- <!-- 1-2 -->
- <div class="page"
id="iso-remote-box">
- <!-- 1-2-2 -->
- <div id="iso-url-field" style="display:
none;">
- <div id="iso-url-box"
class="form-group">
- <label
for="iso-url">$_("Provide a URL for a specific ISO
image:")</label>
- <input type="text"
class="form-control" id="iso-url" name="iso-url">
- </div>
- </div>
- <!-- 1-2-0 -->
- <div id="load-remote-iso">
- <p><span
class="wok-loading-icon"></span> $_("Loading default remote ISOs
...")</p>
- </div>
- <span
id="remote-iso-warning-container"></span>
- <span
id="remote-iso-error-container"></span>
- <!-- 1-2-1 -->
- <div id="remote-iso-field"
class="iso-field" style="display: none;">
- <div class="row">
- <p>$_("The following ISOs are
available:")</p>
- </div>
- <div class="checkbox">
- <label class="check-all">
- <input type="checkbox"
id="select-all-remote-iso">$_("All")
- </label>
- </div>
- <div class="row">
- <form id="form-remote-iso">
- <ul id="list-remote-iso"
class="list-iso">
- </ul>
- </form>
- <script id="tmpl-list-remote-iso"
type="text/html">
- <li class="col-md-3">
- <label
class="box-iso-outer">
- <input type="checkbox"
class="iso-checkbox-hidden" name="iso" value="{isoId}">
- <span
class="box-iso-border">
- <span
class="box-iso-inner">
- <h3 class="iso-title
{os_distro}" title="{name}">
- {name}
- </h3>
- <dl
class="iso-info">
-
<dt>{os_distro}</dt>
-
<dd>$_("OS")</dd>
-
<dt>{os_version}</dt>
-
<dd>$_("Version")</dd>
-
<dt>{os_arch}</dt>
-
<dd>$_("Arch")</dd>
- </dl>
- </span>
- </span>
- </label>
- </li>
- </script>
- </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 id="vm-image-local-box-button" class="btn
btn-default ui-button-primary">$_("Create")</button>
- <button class="btn btn-default"
id="btn-template-url-create"
disabled="disabled">$_("Create")</button>
- <button class="btn btn-default"
id="btn-template-remote-iso-create"
disabled="disabled">$_("Create")</button>
<button class="btn btn-default"
data-dismiss="modal"
type="button">$_("Cancel")</button>
</div>
</div>
--
Ramon Nunes Medeiros
Kimchi Developer
Linux Technology Center Brazil
IBM Systems & Technology Group
Phone : +55 19 2132 7878
ramonn(a)br.ibm.com
3 p.m.
New subject: [PATCH] [Kimchi] Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right
On 04/20/2016 12:50 PM, Ramon Medeiros wrote:
Reviewed-By: Ramon Medeiros <ramonn(a)br.ibm.com>
Tested-By: Ramon Medeiros <ramonn(a)br.ibm.com>
Just a question, why is taking so long to discover remote and local
templates?
The calls to retrieve the ISOs are the same so the only thing I can
think of is the check being made to see
if 'http' exists in the path to determine whether or not it's remote or
local since we need this due to adding
of the icons to distinguish between the 2. If that's the case, I'm open
to suggestions if there's a better way
to determine that or we can add a 'loading' at the beginning. However,
I've seen other times when it's pretty
quick as well.
On 04/20/2016 04:23 PM, Socorro Stoppler wrote:
> Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com>
> ---
> ui/css/kimchi.css | 36 ++++
> ui/css/src/modules/_templates.scss | 30 +++
> ui/js/src/kimchi.template_add_main.js | 337
> ++++++----------------------------
> ui/pages/i18n.json.tmpl | 1 +
> ui/pages/template-add.html.tmpl | 81 ++------
> 5 files changed, 136 insertions(+), 349 deletions(-)
>
> diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
> index 5afa55d..1d33d45 100644
> --- a/ui/css/kimchi.css
> +++ b/ui/css/kimchi.css
> @@ -1628,6 +1628,42 @@ body.wok-gallery {
> left: 0;
> }
>
> +#template-add-window .filter {
> + height: 40px;
> + overflow: visible;
> + clear: both;
> +}
> +
> +#template-add-window .pull-right
> .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn)
> {
> + width: 133px;
> +}
> +
> +#template-add-window .filter input[type="text"].form-control {
> + width: 460px;
> + height: 40px;
> + float: right;
> + border-top-left-radius: 0;
> + border-bottom-left-radius: 0;
> +}
> +
> +#template-add-window .filter .bootstrap-select.btn-group .btn .caret {
> + border-left: 0;
> +}
> +
> +#template-add-window .filter
> button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
> + border-top-right-radius: 0 !important;
> + border-bottom-right-radius: 0 !important;
> + background: #fcfcfc;
> + border-right: 0;
> +}
> +
> +#template-add-window span.iso-image-indicator {
> + position: absolute;
> + bottom: 10px;
> + right: 10px;
> + font-size: 32px;
> +}
> +
> /* 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 86b9305..a9f0e8f 100644
> --- a/ui/css/src/modules/_templates.scss
> +++ b/ui/css/src/modules/_templates.scss
> @@ -217,6 +217,36 @@
> &.modal-content div#iso-local-box {
> left: 0;
> }
> + .filter {
> + height: 40px;
> + overflow: visible;
> + clear: both;
> + }
> + .pull-right
> .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn)
> {
> + width: 133px;
> + }
> + .filter input[type="text"].form-control {
> + width: 460px;
> + height: 40px;
> + float: right;
> + border-top-left-radius: 0;
> + border-bottom-left-radius: 0;
> + }
> + .filter .bootstrap-select.btn-group .btn .caret {
> + border-left: 0;
> + }
> + .filter
> button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
> + border-top-right-radius: 0 !important;
> + border-bottom-right-radius: 0 !important;
> + background: $table-bg-accent;
> + border-right: 0;
> + }
> + span.iso-image-indicator {
> + position: absolute;
> + bottom: 10px;
> + right: 10px;
> + font-size: 32px;
> + }
> }
>
>
> diff --git a/ui/js/src/kimchi.template_add_main.js
> b/ui/js/src/kimchi.template_add_main.js
> index fa5c847..c3dd014 100644
> --- a/ui/js/src/kimchi.template_add_main.js
> +++ b/ui/js/src/kimchi.template_add_main.js
> @@ -15,41 +15,12 @@
> * See the License for the specific language governing permissions and
> * limitations under the License.
> */
> -kimchi.switchPage = function(fromPageId, toPageId, direction) {
> - $('.tab-content').css('overflow', 'hidden');
> - direction = direction || 'left';
> - var toLeftBegin;
> - var fromLeftEnd;
> - if ('left' === direction) {
> - toLeftBegin = '100%';
> - fromLeftEnd = '-100%';
> - } else if ('right' === direction) {
> - toLeftBegin = '-100%';
> - fromLeftEnd = '100%';
> - }
> - var formPage = $('#' + fromPageId);
> - var toPage = $('#' + toPageId);
> - toPage.css({
> - left: toLeftBegin
> - });
> - formPage.animate({
> - left: fromLeftEnd,
> - opacity: 0.1
> - }, 400, function() {
> - $('.tab-content').css('overflow', 'visible');
> - });
> - toPage.animate({
> - left: '0',
> - opacity: 1
> - }, 400, function() {
> - $('.tab-content').css('overflow', 'visible');
> - });
> -};
> -
> kimchi.template_add_main = function() {
> "use strict";
> - var currentPage = 'iso-local-box';
> kimchi.deepScanHandler = null;
> + var isos = [];
> + var local_isos = [];
> + var remote_isos = [];
>
> var deepScan = function(button) {
> kimchi.deepScanHandler =
> kimchi.stepListDeepScanIsos(function(isos, isFinished) {
> @@ -76,7 +47,6 @@ kimchi.template_add_main = function() {
> });
> };
>
> - //1-1-1 local iso list
> var initLocalIsoField = function() {
> kimchi.isoInfo = {};
> $('#local-iso-field').hide();
> @@ -94,51 +64,43 @@ 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
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> $('#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
> -
> };
>
> var showLocalIsoField = function(isos) {
> var html = '';
> var template = $('#tmpl-list-local-iso').html();
> $.each(isos, function(index, volume) {
> + if ((volume.path).indexOf('http') === -1) { // Didn't
> find 'http', so must be local
> + volume.icon = 'fa fa-hdd-o';
> + } else {
> + volume.icon = 'fa fa-globe';
> + }
> var isoId = volume.os_distro + '*' + volume.name + '*'
> + volume.os_version;
> if (!kimchi.isoInfo[isoId]) {
> volume.isoId = isoId;
> volume.capacity =
> wok.changetoProperUnit(volume.capacity, 1);
> + if (volume.capacity === "") {
> + volume.capacity = i18n['KCHTMPL6006M'];
> + }
> kimchi.isoInfo[isoId] = volume;
> html += wok.substitute(template, volume);
> }
> });
> +
> $('#list-local-iso').append(html);
> $('#local-iso-field').show();
> };
>
> -
> - //1-1-2 local iso file
> var initIsoFileField = function() {
> - //$('#iso-file-check').prop('checked', false);
> $('#iso-file').val('');
> $('vm-image-local-text').val('');
> $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> $('#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
> -
> };
>
> $('#iso-file').on('input propertychange keyup focus cut paste
> click', function() {
> @@ -152,9 +114,6 @@ kimchi.template_add_main = function() {
> }, 0);
> if ($('#iso-file').val()) {
> $('#btn-template-local-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 2 - Selected ISOs
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> } else {
> $('#btn-template-file-create').attr('disabled',
> 'disabled');
> }
> @@ -162,57 +121,58 @@ kimchi.template_add_main = function() {
>
> initLocalIsoField();
> initIsoFileField();
> - kimchi.listIsos(function(isos) {
> - if (isos && isos.length) {
> - showLocalIsoField(isos);
> - $('#iso-more').show();
> - } else {
> - $('#iso-search').show();
> - }
> +
> + 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();
> + }
> + });
> }, function(err) {
> wok.message.error(err.responseJSON.reason,
> '#local-iso-error-container');
> });
> +
> $('#template-add-window .modal-body .template-pager').animate({
> height: "689px"
> }, 400);
>
> - // 1-1 local iso
> - $('#iso-local').change(function() {
> - if (this.checked) {
> - if (currentPage === 'vm-image-local-box') {
> - kimchi.switchPage(currentPage, 'iso-local-box',
> 'right');
> - } else if (currentPage === 'iso-remote-box') {
> - kimchi.switchPage(currentPage, 'iso-local-box',
> 'right');
> + var filterISOs = function(group, text) {
> + text = text.trim().split(" ");
> + var list = $('#isoRow').find('li');
> + if(text === ""){
> + list.show();
> + return;
> + }
> + list.hide();
> +
> + list.filter(function(index, value){
> + var $li = $(this);
> + for (var i = 0; i < text.length; ++i){
> + if ($li.is(":containsNC('" + text[i] +
"')")) {
> + if (group === 'all') {
> + return true;
> + } else if (group === 'local') {
> + return true;
> + } else if (group === 'remote') {
> + return true;
> + }
> + }
> }
> - currentPage = 'iso-local-box';
> - $('#template-add-window .modal-body
> .template-pager').animate({
> - height: "689px"
> - }, 400);
> - initLocalIsoField();
> - initIsoFileField();
> -
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> + return false;
> + }).show();
> + };
>
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> + var setupFilters = function() {
> + $('input#template-add-iso-filter',
> '#form-template-add').on('keyup', function() {
> + filterISOs("all", $(this).val()); // Default to 'all'
> for now
> + });
> + };
>
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> - kimchi.listIsos(function(isos) {
> - if (isos && isos.length) {
> - showLocalIsoField(isos);
> - $('#iso-more').show();
> - } else {
> - $('#iso-search').show();
> - }
> - }, function(err) {
> - wok.message.error(err.responseJSON.reason,
> '#local-iso-error-container');
> - });
> - }
> - });
> + setupFilters();
>
> $('#iso-search').click(function() {
> var settings = {
> @@ -263,12 +223,6 @@ kimchi.template_add_main = function() {
>
>
$('#btn-template-local-iso-create').removeAttr('disabled').css('display',
> 'inline-block'); // 2 - Selected ISOs
>
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> } else {
> $('#btn-template-local-iso-create').attr('disabled',
'disabled');
> }
> @@ -282,14 +236,8 @@ 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', 'inline-block'); // 2 - Selected
ISOs
>
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> if (checkedLength) {
> $('#btn-template-local-iso-create').removeAttr('disabled');
> var length = $('#list-local-iso
> [type="checkbox"]').length;
> @@ -302,12 +250,11 @@ kimchi.template_add_main = function() {
> });
>
> $('#btn-template-local-iso-create').click(function() {
> - submitIso('form-local-iso');
> + submitIso();
> });
>
> $('#btn-template-file-create').click(function() {
> var isoFile = $('#iso-file').val();
> - $('vm-image-local-text').val('');
> if (!kimchi.template_check_path(isoFile)) {
> wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container');
> return;
> @@ -318,9 +265,6 @@ kimchi.template_add_main = function() {
> addTemplate(data);
> });
>
> - //1-2 remote iso
> - $('#iso-remote').attr("disabled", true).css('cursor',
> 'not-allowed');
> -
> var enabledRemoteIso = function() {
> if (kimchi.capabilities === undefined) {
> setTimeout(enabledRemoteIso, 2000);
> @@ -330,36 +274,15 @@ kimchi.template_add_main = function() {
> if (kimchi.capabilities.qemu_stream !== true) {
> return;
> }
> -
> - $('#iso-remote').attr("disabled",
false).css('cursor',
> 'pointer');
> - $('#iso-remote').change(function() {
> - if (this.checked) {
> - if (currentPage === 'iso-local-box') { // slide twice
> - kimchi.switchPage(currentPage, 'iso-remote-box',
> 'left');
> - } else if (currentPage === 'vm-image-local-box') {
> // slide once
> - kimchi.switchPage(currentPage, 'iso-remote-box',
> 'left');
> - }
> - currentPage = 'iso-remote-box';
> - $('#template-add-window .modal-body
> .template-pager').animate({
> - height: "635px"
> - }, 400);
> - initRemoteIsoField();
> - initIsoUrlField();
> - kimchi.listDistros(function(isos) {
> - showRemoteIsoField(isos);
> - }, function() {});
> - }
> - });
> };
> +
> enabledRemoteIso();
>
> - //1-2-1 remote iso list
> var initRemoteIsoField = function() {
> $('#load-remote-iso').show();
> $('#remote-iso-field').hide();
> $('#iso-url-field').hide();
> $('#select-all-remote-iso').prop('checked', false);
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled');
>
> $('#iso-file').val('');
> $('vm-image-local-text').val('');
> @@ -369,12 +292,6 @@ kimchi.template_add_main = function() {
>
> $('#btn-template-local-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 2 - Selected ISOs
>
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'inline-block'); // 4 - Remote
folder path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> $('#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
> @@ -405,152 +322,14 @@ kimchi.template_add_main = function() {
> }
> };
>
> - $('#select-all-remote-iso').click(function() {
> - $('#list-remote-iso
[type="checkbox"]').prop('checked',
> $(this).prop('checked'));
> - if ($(this).prop('checked')) {
> -
> - $('#iso-file').val('');
> - $('vm-image-local-text').val('');
> - $('#iso-url').val('');
> - $('#iso-url').parent().removeClass('has-error');
> -
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> -
>
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
> 'inline-block'); // 5 - Remote selected isos
> -
> - } else {
> - $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
> - }
> - });
> -
> - $('#list-remote-iso').on('click',
'[type="checkbox"]', function() {
> - $('#iso-url').parent().removeClass('has-error');
> - var checkedLength = $('#list-remote-iso
> [type="checkbox"]:checked').length;
> - if (checkedLength) {
> - $('#btn-template-remote-iso-create').removeAttr('disabled');
> - var length = $('#list-remote-iso
> [type="checkbox"]').length;
> - $('#select-all-remote-iso').prop('checked', length ===
> checkedLength);
> -
> - $('#iso-file').val('');
> - $('vm-image-local-text').val('');
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> -
>
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
> 'inline-block'); // 5 - Remote selected isos
> -
> - } else {
> - $('#select-all-remote-iso').prop('checked', false);
> - $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
> - }
> - });
> -
> - $('#btn-template-remote-iso-create').click(function() {
> - submitIso('form-remote-iso');
> - });
> -
> - //1-2-2 remote iso url
> - var initIsoUrlField = function() {
> -
> - $('#iso-file').val('');
> - $('vm-image-local-text').val('');
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'inline-block'); // 4 - Remote
folder path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> - };
> -
> $('#iso-url').on('input propertychange keyup focus cut paste
> click', function() {
> $('#select-all-local-iso,
> #select-all-remote-iso').prop('checked', false);
> $('#list-local-iso [type="checkbox"], #list-remote-iso
> [type="checkbox"]').prop('checked', false);
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'inline-block');
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none');
> setTimeout(function() {
> var isValid =
> kimchi.template_check_url($('input#iso-url').val());
> $('input#iso-url').parent().toggleClass('has-error', !isValid);
> - $('#btn-template-url-create').attr('disabled', (isValid
> ? false : true));
> }, 0);
> });
> -
> - $('#vm-image-local').change(function() {
> - if (this.checked) {
> - if (currentPage === 'iso-local-box') {
> - kimchi.switchPage(currentPage, 'vm-image-local-box',
> 'left');
> - } else if (currentPage === 'iso-remote-box') {
> - kimchi.switchPage(currentPage, 'vm-image-local-box',
> 'right');
> - }
> - currentPage = 'vm-image-local-box';
> - $('#template-add-window .modal-body
> .template-pager').animate({
> - height: "100px"
> - }, 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
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'inline-block'); // 3 - File path
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> - }
> - });
> - $('input', '#vm-image-local-box').on('input propertychange
keyup
> focus cut paste click', function() {
> - setTimeout(function() {
> - var isValid = kimchi.template_check_path($('input',
> '#vm-image-local-box').val());
> - $('input',
> '#vm-image-local-box').parent().toggleClass('has-error', !isValid);
> - $('#vm-image-local-box-button').attr('disabled',
> (isValid ? false : true));
> - }, 0);
> - });
> - $('input', '#vm-image-local-box').on('input propertychange
keyup
> focus cut paste click', function() {
> - setTimeout(function() {
> - var isValid = kimchi.template_check_path($('input',
> '#vm-image-local-box').val());
> - $('input',
> '#vm-image-local-box').parent().toggleClass('has-error', !isValid);
> - $('#vm-image-local-box-button').attr('disabled',
> (isValid ? false : true));
> - }, 0);
> - });
> - $('#vm-image-local-box-button').on('click', function(){
> - $('input', '#vm-image-local-box').prop('disabled',
true);
> - $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']);
> - $('#vm-image-local-box-button').prop('disabled', true);
> - addTemplate({
> - source_media: $('input', '#vm-image-local-box').val()
> - }, function() {
> - $('input',
'#vm-image-local-box').prop('disabled', false);
> - $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']);
> - $('#vm-image-local-box-button').prop('disabled',
false);
> - });
> - });
> -
> - $('#btn-template-url-create').click(function() {
> - var isoUrl = $('#iso-url').val();
> - if (!kimchi.template_check_url(isoUrl)) {
> - wok.message.error.code('KCHAPI6004E');
> - return;
> - }
> - var data = {
> - "source_media": isoUrl
> - };
> - addTemplate(data);
> - });
> -
> //do create
> var addTemplate = function(data, callback) {
> kimchi.createTemplate(data, function() {
> @@ -568,8 +347,8 @@ kimchi.template_add_main = function() {
> });
> };
>
> - var submitIso = function(formId) {
> - var formData = $('#' + formId).serializeObject();
> + var submitIso = function() {
> + var formData = $('#form-local-iso').serializeObject();
> if (formData.iso) {
> var length = 0;
> var successNum = 0;
> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
> index 24abeb6..e030a45 100644
> --- a/ui/pages/i18n.json.tmpl
> +++ b/ui/pages/i18n.json.tmpl
> @@ -51,6 +51,7 @@
> "KCHTMPL6003M": "$_("This will permanently delete the
template.
> Would you like to continue?")",
> "KCHTMPL6004M": "$_("View Table")",
> "KCHTMPL6005M": "$_("View Gallery")",
> + "KCHTMPL6006M": "$_("Not Available")",
>
> "KCHVM6001M": "$_("This will delete the virtual machine and
its
> virtual disks. This operation cannot be undone. Would you like to
> continue?")",
> "KCHVM6002M": "$_("Power off Confirmation")",
> diff --git a/ui/pages/template-add.html.tmpl
> b/ui/pages/template-add.html.tmpl
> index 2926cfa..670c7a2 100644
> --- a/ui/pages/template-add.html.tmpl
> +++ b/ui/pages/template-add.html.tmpl
> @@ -29,16 +29,6 @@
> </div>
> <div class="modal-body">
> <div class="template-modal-container">
> - <div>
> - <span
id="alert-modal-container"></span>
> - <h5>$_("Where is the source media for this
> template? ")</h5>
> - <input type="radio" checked="checked"
> name="iso-source" id="iso-local" value="iso-local"
class="wok-radio">
> - <label for="iso-local">$_("Local ISO
> Image")</label>
> - <input type="radio" name="iso-source"
> id="vm-image-local" value="vm-image-local"
class="wok-radio">
> - <label for="vm-image-local">$_("Local
Image
> File")</label>
> - <input type="radio" name="iso-source"
> id="iso-remote" value="iso-remote"
class="wok-radio">
> - <label for="iso-remote">$_("Remote ISO
> Image")</label>
> - </div>
> </div>
> <div class="template-pager">
> <div class="page-list">
> @@ -47,7 +37,7 @@
> <div id="iso-file-field">
> <div id="iso-file-box"
> class="custom-iso-field">
> <div class="form-group">
> - <label
> for="iso-file">$_("Provide a File Path for a specific ISO
> image:")</label>
> + <label
> for="iso-file">$_("File Path:")</label>
> <input type="text"
> class="form-control" id="iso-file" name="iso-file">
> </div>
> </div>
> @@ -56,8 +46,16 @@
> <span
> id="local-iso-error-container"></span>
> <button class="btn btn-primary"
> id="iso-search" style="display: none">$_("Search
ISOs")</button>
> <button class="btn btn-primary"
> id="iso-search-loading" style="display: none"><span
> class="wok-loading-icon"></span> $_("Please,
wait...")</button>
> +
> <!-- 1-1-1 -->
> <div id="local-iso-field"
> class="iso-field" style="display: none;">
> + <form id="form-template-add">
> + <div class="filter">
> + <div class="form-group
> pull-right">
> + <input type="text"
> class="form-control" id="template-add-iso-filter"
> placeholder="$_("Filter")" />
> + </div>
> + </div>
> + </form>
> <div class="row">
> <p>$_("The following ISOs
> are available:")</p>
> </div>
> @@ -66,7 +64,7 @@
> <input type="checkbox"
> id="select-all-local-iso">$_("All")
> </label>
> </div>
> - <div class="row">
> + <div class="row"
id="isoRow">
> <form id="form-local-iso">
> <ul id="list-local-iso"
> class="list-iso">
> </ul>
> @@ -88,6 +86,7 @@
> <dt>{capacity}</dt>
> <dd>$_("Size")</dd>
> </dl>
> + <span class="iso-image-indicator"><i
class="{icon}"></i></span>
> </span>
> </span>
> </label>
> @@ -108,69 +107,11 @@
> </div>
> </div>
>
> - <!-- 1-2 -->
> - <div class="page"
id="iso-remote-box">
> - <!-- 1-2-2 -->
> - <div id="iso-url-field"
style="display:
> none;">
> - <div id="iso-url-box"
> class="form-group">
> - <label
for="iso-url">$_("Provide
> a URL for a specific ISO image:")</label>
> - <input type="text"
> class="form-control" id="iso-url" name="iso-url">
> - </div>
> - </div>
> - <!-- 1-2-0 -->
> - <div id="load-remote-iso">
> - <p><span
> class="wok-loading-icon"></span> $_("Loading default remote
ISOs
> ...")</p>
> - </div>
> - <span
> id="remote-iso-warning-container"></span>
> - <span
> id="remote-iso-error-container"></span>
> - <!-- 1-2-1 -->
> - <div id="remote-iso-field"
> class="iso-field" style="display: none;">
> - <div class="row">
> - <p>$_("The following ISOs are
> available:")</p>
> - </div>
> - <div class="checkbox">
> - <label class="check-all">
> - <input type="checkbox"
> id="select-all-remote-iso">$_("All")
> - </label>
> - </div>
> - <div class="row">
> - <form id="form-remote-iso">
> - <ul id="list-remote-iso"
> class="list-iso">
> - </ul>
> - </form>
> - <script
> id="tmpl-list-remote-iso" type="text/html">
> - <li class="col-md-3">
> - <label
> class="box-iso-outer">
> - <input
> type="checkbox" class="iso-checkbox-hidden" name="iso"
value="{isoId}">
> - <span
> class="box-iso-border">
> - <span
> class="box-iso-inner">
> - <h3
> class="iso-title {os_distro}" title="{name}">
> - {name}
> - </h3>
> - <dl
> class="iso-info">
> - <dt>{os_distro}</dt>
> - <dd>$_("OS")</dd>
> - <dt>{os_version}</dt>
> - <dd>$_("Version")</dd>
> - <dt>{os_arch}</dt>
> - <dd>$_("Arch")</dd>
> - </dl>
> - </span>
> - </span>
> - </label>
> - </li>
> - </script>
> - </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 id="vm-image-local-box-button" class="btn
> btn-default ui-button-primary">$_("Create")</button>
> - <button class="btn btn-default"
> id="btn-template-url-create"
disabled="disabled">$_("Create")</button>
> - <button class="btn btn-default"
> id="btn-template-remote-iso-create"
> disabled="disabled">$_("Create")</button>
> <button class="btn btn-default"
> data-dismiss="modal"
type="button">$_("Cancel")</button>
> </div>
> </div>
8:13 a.m.
New subject: [PATCH] [Kimchi] Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right
Hi Socorro,
I have some suggestions to do:
1. Move the filter input box to the same line of select "All" check box.
2. Add a loader icon until get all the information to display the ISOs
(as Ramon also suggested)
3. When selecting "Create" button, it may take some time, specially when
using an local Image file, so, please, once user selects it, disable the
button and change its label to "Creating..." (it was the same behavior
we had before). When you receive the server response, display the error
or close the dialog on success.
I will apply this patch for now and wait for another one with those
improvements I suggested.
Regards,
Aline Manera
On 04/20/2016 04:23 PM, Socorro Stoppler wrote:
Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com>
---
ui/css/kimchi.css | 36 ++++
ui/css/src/modules/_templates.scss | 30 +++
ui/js/src/kimchi.template_add_main.js | 337 ++++++----------------------------
ui/pages/i18n.json.tmpl | 1 +
ui/pages/template-add.html.tmpl | 81 ++------
5 files changed, 136 insertions(+), 349 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 5afa55d..1d33d45 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1628,6 +1628,42 @@ body.wok-gallery {
left: 0;
}
+#template-add-window .filter {
+ height: 40px;
+ overflow: visible;
+ clear: both;
+}
+
+#template-add-window .pull-right
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 133px;
+}
+
+#template-add-window .filter input[type="text"].form-control {
+ width: 460px;
+ height: 40px;
+ float: right;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+#template-add-window .filter .bootstrap-select.btn-group .btn .caret {
+ border-left: 0;
+}
+
+#template-add-window .filter
button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ background: #fcfcfc;
+ border-right: 0;
+}
+
+#template-add-window span.iso-image-indicator {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ font-size: 32px;
+}
+
/* 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 86b9305..a9f0e8f 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -217,6 +217,36 @@
&.modal-content div#iso-local-box {
left: 0;
}
+ .filter {
+ height: 40px;
+ overflow: visible;
+ clear: both;
+ }
+ .pull-right
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 133px;
+ }
+ .filter input[type="text"].form-control {
+ width: 460px;
+ height: 40px;
+ float: right;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .filter .bootstrap-select.btn-group .btn .caret {
+ border-left: 0;
+ }
+ .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ background: $table-bg-accent;
+ border-right: 0;
+ }
+ span.iso-image-indicator {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ font-size: 32px;
+ }
}
diff --git a/ui/js/src/kimchi.template_add_main.js
b/ui/js/src/kimchi.template_add_main.js
index fa5c847..c3dd014 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -15,41 +15,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-kimchi.switchPage = function(fromPageId, toPageId, direction) {
- $('.tab-content').css('overflow', 'hidden');
- direction = direction || 'left';
- var toLeftBegin;
- var fromLeftEnd;
- if ('left' === direction) {
- toLeftBegin = '100%';
- fromLeftEnd = '-100%';
- } else if ('right' === direction) {
- toLeftBegin = '-100%';
- fromLeftEnd = '100%';
- }
- var formPage = $('#' + fromPageId);
- var toPage = $('#' + toPageId);
- toPage.css({
- left: toLeftBegin
- });
- formPage.animate({
- left: fromLeftEnd,
- opacity: 0.1
- }, 400, function() {
- $('.tab-content').css('overflow', 'visible');
- });
- toPage.animate({
- left: '0',
- opacity: 1
- }, 400, function() {
- $('.tab-content').css('overflow', 'visible');
- });
-};
-
kimchi.template_add_main = function() {
"use strict";
- var currentPage = 'iso-local-box';
kimchi.deepScanHandler = null;
+ var isos = [];
+ var local_isos = [];
+ var remote_isos = [];
var deepScan = function(button) {
kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished)
{
@@ -76,7 +47,6 @@ kimchi.template_add_main = function() {
});
};
- //1-1-1 local iso list
var initLocalIsoField = function() {
kimchi.isoInfo = {};
$('#local-iso-field').hide();
@@ -94,51 +64,43 @@ 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
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
$('#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
-
};
var showLocalIsoField = function(isos) {
var html = '';
var template = $('#tmpl-list-local-iso').html();
$.each(isos, function(index, volume) {
+ if ((volume.path).indexOf('http') === -1) { // Didn't find
'http', so must be local
+ volume.icon = 'fa fa-hdd-o';
+ } else {
+ volume.icon = 'fa fa-globe';
+ }
var isoId = volume.os_distro + '*' + volume.name + '*' +
volume.os_version;
if (!kimchi.isoInfo[isoId]) {
volume.isoId = isoId;
volume.capacity = wok.changetoProperUnit(volume.capacity, 1);
+ if (volume.capacity === "") {
+ volume.capacity = i18n['KCHTMPL6006M'];
+ }
kimchi.isoInfo[isoId] = volume;
html += wok.substitute(template, volume);
}
});
+
$('#list-local-iso').append(html);
$('#local-iso-field').show();
};
-
- //1-1-2 local iso file
var initIsoFileField = function() {
- //$('#iso-file-check').prop('checked', false);
$('#iso-file').val('');
$('vm-image-local-text').val('');
$('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
$('#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
-
};
$('#iso-file').on('input propertychange keyup focus cut paste
click', function() {
@@ -152,9 +114,6 @@ kimchi.template_add_main = function() {
}, 0);
if ($('#iso-file').val()) {
$('#btn-template-local-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
} else {
$('#btn-template-file-create').attr('disabled',
'disabled');
}
@@ -162,57 +121,58 @@ kimchi.template_add_main = function() {
initLocalIsoField();
initIsoFileField();
- kimchi.listIsos(function(isos) {
- if (isos && isos.length) {
- showLocalIsoField(isos);
- $('#iso-more').show();
- } else {
- $('#iso-search').show();
- }
+
+ 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();
+ }
+ });
}, function(err) {
wok.message.error(err.responseJSON.reason,
'#local-iso-error-container');
});
+
$('#template-add-window .modal-body .template-pager').animate({
height: "689px"
}, 400);
- // 1-1 local iso
- $('#iso-local').change(function() {
- if (this.checked) {
- if (currentPage === 'vm-image-local-box') {
- kimchi.switchPage(currentPage, 'iso-local-box',
'right');
- } else if (currentPage === 'iso-remote-box') {
- kimchi.switchPage(currentPage, 'iso-local-box',
'right');
+ var filterISOs = function(group, text) {
+ text = text.trim().split(" ");
+ var list = $('#isoRow').find('li');
+ if(text === ""){
+ list.show();
+ return;
+ }
+ list.hide();
+
+ list.filter(function(index, value){
+ var $li = $(this);
+ for (var i = 0; i < text.length; ++i){
+ if ($li.is(":containsNC('" + text[i] +
"')")) {
+ if (group === 'all') {
+ return true;
+ } else if (group === 'local') {
+ return true;
+ } else if (group === 'remote') {
+ return true;
+ }
+ }
}
- currentPage = 'iso-local-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "689px"
- }, 400);
- initLocalIsoField();
- initIsoFileField();
-
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
+ return false;
+ }).show();
+ };
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
+ var setupFilters = function() {
+ $('input#template-add-iso-filter',
'#form-template-add').on('keyup', function() {
+ filterISOs("all", $(this).val()); // Default to 'all' for
now
+ });
+ };
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- kimchi.listIsos(function(isos) {
- if (isos && isos.length) {
- showLocalIsoField(isos);
- $('#iso-more').show();
- } else {
- $('#iso-search').show();
- }
- }, function(err) {
- wok.message.error(err.responseJSON.reason,
'#local-iso-error-container');
- });
- }
- });
+ setupFilters();
$('#iso-search').click(function() {
var settings = {
@@ -263,12 +223,6 @@ kimchi.template_add_main = function() {
$('#btn-template-local-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
} else {
$('#btn-template-local-iso-create').attr('disabled',
'disabled');
}
@@ -282,14 +236,8 @@ 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', 'inline-block'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
if (checkedLength) {
$('#btn-template-local-iso-create').removeAttr('disabled');
var length = $('#list-local-iso
[type="checkbox"]').length;
@@ -302,12 +250,11 @@ kimchi.template_add_main = function() {
});
$('#btn-template-local-iso-create').click(function() {
- submitIso('form-local-iso');
+ submitIso();
});
$('#btn-template-file-create').click(function() {
var isoFile = $('#iso-file').val();
- $('vm-image-local-text').val('');
if (!kimchi.template_check_path(isoFile)) {
wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container');
return;
@@ -318,9 +265,6 @@ kimchi.template_add_main = function() {
addTemplate(data);
});
- //1-2 remote iso
- $('#iso-remote').attr("disabled", true).css('cursor',
'not-allowed');
-
var enabledRemoteIso = function() {
if (kimchi.capabilities === undefined) {
setTimeout(enabledRemoteIso, 2000);
@@ -330,36 +274,15 @@ kimchi.template_add_main = function() {
if (kimchi.capabilities.qemu_stream !== true) {
return;
}
-
- $('#iso-remote').attr("disabled", false).css('cursor',
'pointer');
- $('#iso-remote').change(function() {
- if (this.checked) {
- if (currentPage === 'iso-local-box') { // slide twice
- kimchi.switchPage(currentPage, 'iso-remote-box',
'left');
- } else if (currentPage === 'vm-image-local-box') { // slide
once
- kimchi.switchPage(currentPage, 'iso-remote-box',
'left');
- }
- currentPage = 'iso-remote-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "635px"
- }, 400);
- initRemoteIsoField();
- initIsoUrlField();
- kimchi.listDistros(function(isos) {
- showRemoteIsoField(isos);
- }, function() {});
- }
- });
};
+
enabledRemoteIso();
- //1-2-1 remote iso list
var initRemoteIsoField = function() {
$('#load-remote-iso').show();
$('#remote-iso-field').hide();
$('#iso-url-field').hide();
$('#select-all-remote-iso').prop('checked', false);
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
$('#iso-file').val('');
$('vm-image-local-text').val('');
@@ -369,12 +292,6 @@ kimchi.template_add_main = function() {
$('#btn-template-local-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 2 - Selected ISOs
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block'); // 4 - Remote folder
path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
$('#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
@@ -405,152 +322,14 @@ kimchi.template_add_main = function() {
}
};
- $('#select-all-remote-iso').click(function() {
- $('#list-remote-iso
[type="checkbox"]').prop('checked',
$(this).prop('checked'));
- if ($(this).prop('checked')) {
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#iso-url').val('');
- $('#iso-url').parent().removeClass('has-error');
-
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
-
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 5 - Remote selected isos
-
- } else {
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
- }
- });
-
- $('#list-remote-iso').on('click',
'[type="checkbox"]', function() {
- $('#iso-url').parent().removeClass('has-error');
- var checkedLength = $('#list-remote-iso
[type="checkbox"]:checked').length;
- if (checkedLength) {
-
$('#btn-template-remote-iso-create').removeAttr('disabled');
- var length = $('#list-remote-iso
[type="checkbox"]').length;
- $('#select-all-remote-iso').prop('checked', length ===
checkedLength);
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
-
-
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
'inline-block'); // 5 - Remote selected isos
-
- } else {
- $('#select-all-remote-iso').prop('checked', false);
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
- }
- });
-
- $('#btn-template-remote-iso-create').click(function() {
- submitIso('form-remote-iso');
- });
-
- //1-2-2 remote iso url
- var initIsoUrlField = function() {
-
- $('#iso-file').val('');
- $('vm-image-local-text').val('');
- $('#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
-
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'none'); // 3 - File path
-
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block'); // 4 - Remote folder
path
-
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- };
-
$('#iso-url').on('input propertychange keyup focus cut paste
click', function() {
$('#select-all-local-iso,
#select-all-remote-iso').prop('checked', false);
$('#list-local-iso [type="checkbox"], #list-remote-iso
[type="checkbox"]').prop('checked', false);
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'inline-block');
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none');
setTimeout(function() {
var isValid = kimchi.template_check_url($('input#iso-url').val());
$('input#iso-url').parent().toggleClass('has-error',
!isValid);
- $('#btn-template-url-create').attr('disabled', (isValid ?
false : true));
}, 0);
});
-
- $('#vm-image-local').change(function() {
- if (this.checked) {
- if (currentPage === 'iso-local-box') {
- kimchi.switchPage(currentPage, 'vm-image-local-box',
'left');
- } else if (currentPage === 'iso-remote-box') {
- kimchi.switchPage(currentPage, 'vm-image-local-box',
'right');
- }
- currentPage = 'vm-image-local-box';
- $('#template-add-window .modal-body .template-pager').animate({
- height: "100px"
- }, 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
- $('#vm-image-local-box-button').attr('disabled',
'disabled').css('display', 'inline-block'); // 3 - File path
- $('#btn-template-url-create').attr('disabled',
'disabled').css('display', 'none'); // 4 - Remote folder path
- $('#btn-template-remote-iso-create').attr('disabled',
'disabled').css('display', 'none'); // 5 - Remote selected isos
-
- }
- });
- $('input', '#vm-image-local-box').on('input propertychange keyup
focus cut paste click', function() {
- setTimeout(function() {
- var isValid = kimchi.template_check_path($('input',
'#vm-image-local-box').val());
- $('input',
'#vm-image-local-box').parent().toggleClass('has-error', !isValid);
- $('#vm-image-local-box-button').attr('disabled', (isValid ?
false : true));
- }, 0);
- });
- $('input', '#vm-image-local-box').on('input propertychange keyup
focus cut paste click', function() {
- setTimeout(function() {
- var isValid = kimchi.template_check_path($('input',
'#vm-image-local-box').val());
- $('input',
'#vm-image-local-box').parent().toggleClass('has-error', !isValid);
- $('#vm-image-local-box-button').attr('disabled', (isValid ?
false : true));
- }, 0);
- });
- $('#vm-image-local-box-button').on('click', function(){
- $('input', '#vm-image-local-box').prop('disabled',
true);
- $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']);
- $('#vm-image-local-box-button').prop('disabled', true);
- addTemplate({
- source_media: $('input', '#vm-image-local-box').val()
- }, function() {
- $('input', '#vm-image-local-box').prop('disabled',
false);
- $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']);
- $('#vm-image-local-box-button').prop('disabled', false);
- });
- });
-
- $('#btn-template-url-create').click(function() {
- var isoUrl = $('#iso-url').val();
- if (!kimchi.template_check_url(isoUrl)) {
- wok.message.error.code('KCHAPI6004E');
- return;
- }
- var data = {
- "source_media": isoUrl
- };
- addTemplate(data);
- });
-
//do create
var addTemplate = function(data, callback) {
kimchi.createTemplate(data, function() {
@@ -568,8 +347,8 @@ kimchi.template_add_main = function() {
});
};
- var submitIso = function(formId) {
- var formData = $('#' + formId).serializeObject();
+ var submitIso = function() {
+ var formData = $('#form-local-iso').serializeObject();
if (formData.iso) {
var length = 0;
var successNum = 0;
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index 24abeb6..e030a45 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -51,6 +51,7 @@
"KCHTMPL6003M": "$_("This will permanently delete the template.
Would you like to continue?")",
"KCHTMPL6004M": "$_("View Table")",
"KCHTMPL6005M": "$_("View Gallery")",
+ "KCHTMPL6006M": "$_("Not Available")",
"KCHVM6001M": "$_("This will delete the virtual machine and its
virtual disks. This operation cannot be undone. Would you like to continue?")",
"KCHVM6002M": "$_("Power off Confirmation")",
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 2926cfa..670c7a2 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -29,16 +29,6 @@
</div>
<div class="modal-body">
<div class="template-modal-container">
- <div>
- <span id="alert-modal-container"></span>
- <h5>$_("Where is the source media for this template?
")</h5>
- <input type="radio" checked="checked"
name="iso-source" id="iso-local" value="iso-local"
class="wok-radio">
- <label for="iso-local">$_("Local ISO
Image")</label>
- <input type="radio" name="iso-source"
id="vm-image-local" value="vm-image-local"
class="wok-radio">
- <label for="vm-image-local">$_("Local Image
File")</label>
- <input type="radio" name="iso-source"
id="iso-remote" value="iso-remote" class="wok-radio">
- <label for="iso-remote">$_("Remote ISO
Image")</label>
- </div>
</div>
<div class="template-pager">
<div class="page-list">
@@ -47,7 +37,7 @@
<div id="iso-file-field">
<div id="iso-file-box"
class="custom-iso-field">
<div class="form-group">
- <label
for="iso-file">$_("Provide a File Path for a specific ISO
image:")</label>
+ <label
for="iso-file">$_("File Path:")</label>
<input type="text"
class="form-control" id="iso-file" name="iso-file">
</div>
</div>
@@ -56,8 +46,16 @@
<span
id="local-iso-error-container"></span>
<button class="btn btn-primary"
id="iso-search" style="display: none">$_("Search
ISOs")</button>
<button class="btn btn-primary"
id="iso-search-loading" style="display: none"><span
class="wok-loading-icon"></span> $_("Please,
wait...")</button>
+
<!-- 1-1-1 -->
<div id="local-iso-field"
class="iso-field" style="display: none;">
+ <form id="form-template-add">
+ <div class="filter">
+ <div class="form-group
pull-right">
+ <input type="text"
class="form-control" id="template-add-iso-filter"
placeholder="$_("Filter")" />
+ </div>
+ </div>
+ </form>
<div class="row">
<p>$_("The following ISOs are
available:")</p>
</div>
@@ -66,7 +64,7 @@
<input type="checkbox"
id="select-all-local-iso">$_("All")
</label>
</div>
- <div class="row">
+ <div class="row"
id="isoRow">
<form id="form-local-iso">
<ul id="list-local-iso"
class="list-iso">
</ul>
@@ -88,6 +86,7 @@
<dt>{capacity}</dt>
<dd>$_("Size")</dd>
</dl>
+ <span
class="iso-image-indicator"><i
class="{icon}"></i></span>
</span>
</span>
</label>
@@ -108,69 +107,11 @@
</div>
</div>
- <!-- 1-2 -->
- <div class="page"
id="iso-remote-box">
- <!-- 1-2-2 -->
- <div id="iso-url-field" style="display:
none;">
- <div id="iso-url-box"
class="form-group">
- <label
for="iso-url">$_("Provide a URL for a specific ISO
image:")</label>
- <input type="text"
class="form-control" id="iso-url" name="iso-url">
- </div>
- </div>
- <!-- 1-2-0 -->
- <div id="load-remote-iso">
- <p><span
class="wok-loading-icon"></span> $_("Loading default remote ISOs
...")</p>
- </div>
- <span
id="remote-iso-warning-container"></span>
- <span
id="remote-iso-error-container"></span>
- <!-- 1-2-1 -->
- <div id="remote-iso-field"
class="iso-field" style="display: none;">
- <div class="row">
- <p>$_("The following ISOs are
available:")</p>
- </div>
- <div class="checkbox">
- <label class="check-all">
- <input type="checkbox"
id="select-all-remote-iso">$_("All")
- </label>
- </div>
- <div class="row">
- <form id="form-remote-iso">
- <ul id="list-remote-iso"
class="list-iso">
- </ul>
- </form>
- <script id="tmpl-list-remote-iso"
type="text/html">
- <li class="col-md-3">
- <label
class="box-iso-outer">
- <input type="checkbox"
class="iso-checkbox-hidden" name="iso" value="{isoId}">
- <span
class="box-iso-border">
- <span
class="box-iso-inner">
- <h3 class="iso-title
{os_distro}" title="{name}">
- {name}
- </h3>
- <dl
class="iso-info">
-
<dt>{os_distro}</dt>
-
<dd>$_("OS")</dd>
-
<dt>{os_version}</dt>
-
<dd>$_("Version")</dd>
-
<dt>{os_arch}</dt>
-
<dd>$_("Arch")</dd>
- </dl>
- </span>
- </span>
- </label>
- </li>
- </script>
- </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 id="vm-image-local-box-button" class="btn
btn-default ui-button-primary">$_("Create")</button>
- <button class="btn btn-default"
id="btn-template-url-create"
disabled="disabled">$_("Create")</button>
- <button class="btn btn-default"
id="btn-template-remote-iso-create"
disabled="disabled">$_("Create")</button>
<button class="btn btn-default"
data-dismiss="modal"
type="button">$_("Cancel")</button>
</div>
</div>
8:27 a.m.
New subject: [PATCH] [Kimchi] Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right
On 04/25/2016 10:13 AM, Aline Manera wrote:
Hi Socorro,
I have some suggestions to do:
1. Move the filter input box to the same line of select "All" check box.
2. Add a loader icon until get all the information to display the ISOs
(as Ramon also suggested)
3. When selecting "Create" button, it may take some time, specially
when using an local Image file, so, please, once user selects it,
disable the button and change its label to "Creating..." (it was the
same behavior we had before). When you receive the server response,
display the error or close the dialog on success.
More suggestions =)
4. Add an information icon right below the path input box to point user
to the allowed inputs.
"The source media path may be a local or remote ISO path or local
image file path".
5. Remember you can get an empty list of ISOs, so it would be good to
display "No ISOs found" in that case. I haven't tested this scenario so
ignore it if it is already working as I suggested.
I will apply this patch for now and wait for another one with those
improvements I suggested.
Regards,
Aline Manera
On 04/20/2016 04:23 PM, Socorro Stoppler wrote:
> Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com>
> ---
> ui/css/kimchi.css | 36 ++++
> ui/css/src/modules/_templates.scss | 30 +++
> ui/js/src/kimchi.template_add_main.js | 337
> ++++++----------------------------
> ui/pages/i18n.json.tmpl | 1 +
> ui/pages/template-add.html.tmpl | 81 ++------
> 5 files changed, 136 insertions(+), 349 deletions(-)
>
> diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
> index 5afa55d..1d33d45 100644
> --- a/ui/css/kimchi.css
> +++ b/ui/css/kimchi.css
> @@ -1628,6 +1628,42 @@ body.wok-gallery {
> left: 0;
> }
>
> +#template-add-window .filter {
> + height: 40px;
> + overflow: visible;
> + clear: both;
> +}
> +
> +#template-add-window .pull-right
> .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn)
> {
> + width: 133px;
> +}
> +
> +#template-add-window .filter input[type="text"].form-control {
> + width: 460px;
> + height: 40px;
> + float: right;
> + border-top-left-radius: 0;
> + border-bottom-left-radius: 0;
> +}
> +
> +#template-add-window .filter .bootstrap-select.btn-group .btn .caret {
> + border-left: 0;
> +}
> +
> +#template-add-window .filter
> button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
> + border-top-right-radius: 0 !important;
> + border-bottom-right-radius: 0 !important;
> + background: #fcfcfc;
> + border-right: 0;
> +}
> +
> +#template-add-window span.iso-image-indicator {
> + position: absolute;
> + bottom: 10px;
> + right: 10px;
> + font-size: 32px;
> +}
> +
> /* 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 86b9305..a9f0e8f 100644
> --- a/ui/css/src/modules/_templates.scss
> +++ b/ui/css/src/modules/_templates.scss
> @@ -217,6 +217,36 @@
> &.modal-content div#iso-local-box {
> left: 0;
> }
> + .filter {
> + height: 40px;
> + overflow: visible;
> + clear: both;
> + }
> + .pull-right
> .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn)
> {
> + width: 133px;
> + }
> + .filter input[type="text"].form-control {
> + width: 460px;
> + height: 40px;
> + float: right;
> + border-top-left-radius: 0;
> + border-bottom-left-radius: 0;
> + }
> + .filter .bootstrap-select.btn-group .btn .caret {
> + border-left: 0;
> + }
> + .filter
> button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
> + border-top-right-radius: 0 !important;
> + border-bottom-right-radius: 0 !important;
> + background: $table-bg-accent;
> + border-right: 0;
> + }
> + span.iso-image-indicator {
> + position: absolute;
> + bottom: 10px;
> + right: 10px;
> + font-size: 32px;
> + }
> }
>
>
> diff --git a/ui/js/src/kimchi.template_add_main.js
> b/ui/js/src/kimchi.template_add_main.js
> index fa5c847..c3dd014 100644
> --- a/ui/js/src/kimchi.template_add_main.js
> +++ b/ui/js/src/kimchi.template_add_main.js
> @@ -15,41 +15,12 @@
> * See the License for the specific language governing permissions and
> * limitations under the License.
> */
> -kimchi.switchPage = function(fromPageId, toPageId, direction) {
> - $('.tab-content').css('overflow', 'hidden');
> - direction = direction || 'left';
> - var toLeftBegin;
> - var fromLeftEnd;
> - if ('left' === direction) {
> - toLeftBegin = '100%';
> - fromLeftEnd = '-100%';
> - } else if ('right' === direction) {
> - toLeftBegin = '-100%';
> - fromLeftEnd = '100%';
> - }
> - var formPage = $('#' + fromPageId);
> - var toPage = $('#' + toPageId);
> - toPage.css({
> - left: toLeftBegin
> - });
> - formPage.animate({
> - left: fromLeftEnd,
> - opacity: 0.1
> - }, 400, function() {
> - $('.tab-content').css('overflow', 'visible');
> - });
> - toPage.animate({
> - left: '0',
> - opacity: 1
> - }, 400, function() {
> - $('.tab-content').css('overflow', 'visible');
> - });
> -};
> -
> kimchi.template_add_main = function() {
> "use strict";
> - var currentPage = 'iso-local-box';
> kimchi.deepScanHandler = null;
> + var isos = [];
> + var local_isos = [];
> + var remote_isos = [];
>
> var deepScan = function(button) {
> kimchi.deepScanHandler =
> kimchi.stepListDeepScanIsos(function(isos, isFinished) {
> @@ -76,7 +47,6 @@ kimchi.template_add_main = function() {
> });
> };
>
> - //1-1-1 local iso list
> var initLocalIsoField = function() {
> kimchi.isoInfo = {};
> $('#local-iso-field').hide();
> @@ -94,51 +64,43 @@ 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
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> $('#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
> -
> };
>
> var showLocalIsoField = function(isos) {
> var html = '';
> var template = $('#tmpl-list-local-iso').html();
> $.each(isos, function(index, volume) {
> + if ((volume.path).indexOf('http') === -1) { // Didn't
> find 'http', so must be local
> + volume.icon = 'fa fa-hdd-o';
> + } else {
> + volume.icon = 'fa fa-globe';
> + }
> var isoId = volume.os_distro + '*' + volume.name + '*'
> + volume.os_version;
> if (!kimchi.isoInfo[isoId]) {
> volume.isoId = isoId;
> volume.capacity =
> wok.changetoProperUnit(volume.capacity, 1);
> + if (volume.capacity === "") {
> + volume.capacity = i18n['KCHTMPL6006M'];
> + }
> kimchi.isoInfo[isoId] = volume;
> html += wok.substitute(template, volume);
> }
> });
> +
> $('#list-local-iso').append(html);
> $('#local-iso-field').show();
> };
>
> -
> - //1-1-2 local iso file
> var initIsoFileField = function() {
> - //$('#iso-file-check').prop('checked', false);
> $('#iso-file').val('');
> $('vm-image-local-text').val('');
> $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> $('#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
> -
> };
>
> $('#iso-file').on('input propertychange keyup focus cut paste
> click', function() {
> @@ -152,9 +114,6 @@ kimchi.template_add_main = function() {
> }, 0);
> if ($('#iso-file').val()) {
> $('#btn-template-local-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 2 - Selected ISOs
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> } else {
> $('#btn-template-file-create').attr('disabled',
> 'disabled');
> }
> @@ -162,57 +121,58 @@ kimchi.template_add_main = function() {
>
> initLocalIsoField();
> initIsoFileField();
> - kimchi.listIsos(function(isos) {
> - if (isos && isos.length) {
> - showLocalIsoField(isos);
> - $('#iso-more').show();
> - } else {
> - $('#iso-search').show();
> - }
> +
> + 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();
> + }
> + });
> }, function(err) {
> wok.message.error(err.responseJSON.reason,
> '#local-iso-error-container');
> });
> +
> $('#template-add-window .modal-body .template-pager').animate({
> height: "689px"
> }, 400);
>
> - // 1-1 local iso
> - $('#iso-local').change(function() {
> - if (this.checked) {
> - if (currentPage === 'vm-image-local-box') {
> - kimchi.switchPage(currentPage, 'iso-local-box',
> 'right');
> - } else if (currentPage === 'iso-remote-box') {
> - kimchi.switchPage(currentPage, 'iso-local-box',
> 'right');
> + var filterISOs = function(group, text) {
> + text = text.trim().split(" ");
> + var list = $('#isoRow').find('li');
> + if(text === ""){
> + list.show();
> + return;
> + }
> + list.hide();
> +
> + list.filter(function(index, value){
> + var $li = $(this);
> + for (var i = 0; i < text.length; ++i){
> + if ($li.is(":containsNC('" + text[i] +
"')")) {
> + if (group === 'all') {
> + return true;
> + } else if (group === 'local') {
> + return true;
> + } else if (group === 'remote') {
> + return true;
> + }
> + }
> }
> - currentPage = 'iso-local-box';
> - $('#template-add-window .modal-body
> .template-pager').animate({
> - height: "689px"
> - }, 400);
> - initLocalIsoField();
> - initIsoFileField();
> -
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> + return false;
> + }).show();
> + };
>
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> + var setupFilters = function() {
> + $('input#template-add-iso-filter',
> '#form-template-add').on('keyup', function() {
> + filterISOs("all", $(this).val()); // Default to 'all'
> for now
> + });
> + };
>
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> - kimchi.listIsos(function(isos) {
> - if (isos && isos.length) {
> - showLocalIsoField(isos);
> - $('#iso-more').show();
> - } else {
> - $('#iso-search').show();
> - }
> - }, function(err) {
> - wok.message.error(err.responseJSON.reason,
> '#local-iso-error-container');
> - });
> - }
> - });
> + setupFilters();
>
> $('#iso-search').click(function() {
> var settings = {
> @@ -263,12 +223,6 @@ kimchi.template_add_main = function() {
>
>
$('#btn-template-local-iso-create').removeAttr('disabled').css('display',
> 'inline-block'); // 2 - Selected ISOs
>
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> } else {
> $('#btn-template-local-iso-create').attr('disabled',
'disabled');
> }
> @@ -282,14 +236,8 @@ 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', 'inline-block'); // 2 - Selected
ISOs
>
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> if (checkedLength) {
> $('#btn-template-local-iso-create').removeAttr('disabled');
> var length = $('#list-local-iso
> [type="checkbox"]').length;
> @@ -302,12 +250,11 @@ kimchi.template_add_main = function() {
> });
>
> $('#btn-template-local-iso-create').click(function() {
> - submitIso('form-local-iso');
> + submitIso();
> });
>
> $('#btn-template-file-create').click(function() {
> var isoFile = $('#iso-file').val();
> - $('vm-image-local-text').val('');
> if (!kimchi.template_check_path(isoFile)) {
> wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container');
> return;
> @@ -318,9 +265,6 @@ kimchi.template_add_main = function() {
> addTemplate(data);
> });
>
> - //1-2 remote iso
> - $('#iso-remote').attr("disabled", true).css('cursor',
> 'not-allowed');
> -
> var enabledRemoteIso = function() {
> if (kimchi.capabilities === undefined) {
> setTimeout(enabledRemoteIso, 2000);
> @@ -330,36 +274,15 @@ kimchi.template_add_main = function() {
> if (kimchi.capabilities.qemu_stream !== true) {
> return;
> }
> -
> - $('#iso-remote').attr("disabled",
false).css('cursor',
> 'pointer');
> - $('#iso-remote').change(function() {
> - if (this.checked) {
> - if (currentPage === 'iso-local-box') { // slide twice
> - kimchi.switchPage(currentPage, 'iso-remote-box',
> 'left');
> - } else if (currentPage === 'vm-image-local-box') {
> // slide once
> - kimchi.switchPage(currentPage, 'iso-remote-box',
> 'left');
> - }
> - currentPage = 'iso-remote-box';
> - $('#template-add-window .modal-body
> .template-pager').animate({
> - height: "635px"
> - }, 400);
> - initRemoteIsoField();
> - initIsoUrlField();
> - kimchi.listDistros(function(isos) {
> - showRemoteIsoField(isos);
> - }, function() {});
> - }
> - });
> };
> +
> enabledRemoteIso();
>
> - //1-2-1 remote iso list
> var initRemoteIsoField = function() {
> $('#load-remote-iso').show();
> $('#remote-iso-field').hide();
> $('#iso-url-field').hide();
> $('#select-all-remote-iso').prop('checked', false);
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled');
>
> $('#iso-file').val('');
> $('vm-image-local-text').val('');
> @@ -369,12 +292,6 @@ kimchi.template_add_main = function() {
>
> $('#btn-template-local-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 2 - Selected ISOs
>
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'inline-block'); // 4 - Remote
folder path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> $('#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
> @@ -405,152 +322,14 @@ kimchi.template_add_main = function() {
> }
> };
>
> - $('#select-all-remote-iso').click(function() {
> - $('#list-remote-iso
[type="checkbox"]').prop('checked',
> $(this).prop('checked'));
> - if ($(this).prop('checked')) {
> -
> - $('#iso-file').val('');
> - $('vm-image-local-text').val('');
> - $('#iso-url').val('');
> - $('#iso-url').parent().removeClass('has-error');
> -
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> -
>
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
> 'inline-block'); // 5 - Remote selected isos
> -
> - } else {
> - $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
> - }
> - });
> -
> - $('#list-remote-iso').on('click',
'[type="checkbox"]', function() {
> - $('#iso-url').parent().removeClass('has-error');
> - var checkedLength = $('#list-remote-iso
> [type="checkbox"]:checked').length;
> - if (checkedLength) {
> - $('#btn-template-remote-iso-create').removeAttr('disabled');
> - var length = $('#list-remote-iso
> [type="checkbox"]').length;
> - $('#select-all-remote-iso').prop('checked', length ===
> checkedLength);
> -
> - $('#iso-file').val('');
> - $('vm-image-local-text').val('');
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> -
> -
>
$('#btn-template-remote-iso-create').removeAttr('disabled').css('display',
> 'inline-block'); // 5 - Remote selected isos
> -
> - } else {
> - $('#select-all-remote-iso').prop('checked', false);
> - $('#btn-template-remote-iso-create').attr('disabled',
'disabled');
> - }
> - });
> -
> - $('#btn-template-remote-iso-create').click(function() {
> - submitIso('form-remote-iso');
> - });
> -
> - //1-2-2 remote iso url
> - var initIsoUrlField = function() {
> -
> - $('#iso-file').val('');
> - $('vm-image-local-text').val('');
> - $('#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
> -
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'none'); // 3 - File path
> -
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'inline-block'); // 4 - Remote
folder path
> -
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> - };
> -
> $('#iso-url').on('input propertychange keyup focus cut paste
> click', function() {
> $('#select-all-local-iso,
> #select-all-remote-iso').prop('checked', false);
> $('#list-local-iso [type="checkbox"], #list-remote-iso
> [type="checkbox"]').prop('checked', false);
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'inline-block');
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none');
> setTimeout(function() {
> var isValid =
> kimchi.template_check_url($('input#iso-url').val());
> $('input#iso-url').parent().toggleClass('has-error', !isValid);
> - $('#btn-template-url-create').attr('disabled', (isValid
> ? false : true));
> }, 0);
> });
> -
> - $('#vm-image-local').change(function() {
> - if (this.checked) {
> - if (currentPage === 'iso-local-box') {
> - kimchi.switchPage(currentPage, 'vm-image-local-box',
> 'left');
> - } else if (currentPage === 'iso-remote-box') {
> - kimchi.switchPage(currentPage, 'vm-image-local-box',
> 'right');
> - }
> - currentPage = 'vm-image-local-box';
> - $('#template-add-window .modal-body
> .template-pager').animate({
> - height: "100px"
> - }, 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
> - $('#vm-image-local-box-button').attr('disabled',
> 'disabled').css('display', 'inline-block'); // 3 - File path
> - $('#btn-template-url-create').attr('disabled',
> 'disabled').css('display', 'none'); // 4 - Remote folder
path
> - $('#btn-template-remote-iso-create').attr('disabled',
> 'disabled').css('display', 'none'); // 5 - Remote selected
isos
> -
> - }
> - });
> - $('input', '#vm-image-local-box').on('input propertychange
keyup
> focus cut paste click', function() {
> - setTimeout(function() {
> - var isValid = kimchi.template_check_path($('input',
> '#vm-image-local-box').val());
> - $('input',
> '#vm-image-local-box').parent().toggleClass('has-error', !isValid);
> - $('#vm-image-local-box-button').attr('disabled',
> (isValid ? false : true));
> - }, 0);
> - });
> - $('input', '#vm-image-local-box').on('input propertychange
keyup
> focus cut paste click', function() {
> - setTimeout(function() {
> - var isValid = kimchi.template_check_path($('input',
> '#vm-image-local-box').val());
> - $('input',
> '#vm-image-local-box').parent().toggleClass('has-error', !isValid);
> - $('#vm-image-local-box-button').attr('disabled',
> (isValid ? false : true));
> - }, 0);
> - });
> - $('#vm-image-local-box-button').on('click', function(){
> - $('input', '#vm-image-local-box').prop('disabled',
true);
> - $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']);
> - $('#vm-image-local-box-button').prop('disabled', true);
> - addTemplate({
> - source_media: $('input', '#vm-image-local-box').val()
> - }, function() {
> - $('input',
'#vm-image-local-box').prop('disabled', false);
> - $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']);
> - $('#vm-image-local-box-button').prop('disabled',
false);
> - });
> - });
> -
> - $('#btn-template-url-create').click(function() {
> - var isoUrl = $('#iso-url').val();
> - if (!kimchi.template_check_url(isoUrl)) {
> - wok.message.error.code('KCHAPI6004E');
> - return;
> - }
> - var data = {
> - "source_media": isoUrl
> - };
> - addTemplate(data);
> - });
> -
> //do create
> var addTemplate = function(data, callback) {
> kimchi.createTemplate(data, function() {
> @@ -568,8 +347,8 @@ kimchi.template_add_main = function() {
> });
> };
>
> - var submitIso = function(formId) {
> - var formData = $('#' + formId).serializeObject();
> + var submitIso = function() {
> + var formData = $('#form-local-iso').serializeObject();
> if (formData.iso) {
> var length = 0;
> var successNum = 0;
> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
> index 24abeb6..e030a45 100644
> --- a/ui/pages/i18n.json.tmpl
> +++ b/ui/pages/i18n.json.tmpl
> @@ -51,6 +51,7 @@
> "KCHTMPL6003M": "$_("This will permanently delete the
template.
> Would you like to continue?")",
> "KCHTMPL6004M": "$_("View Table")",
> "KCHTMPL6005M": "$_("View Gallery")",
> + "KCHTMPL6006M": "$_("Not Available")",
>
> "KCHVM6001M": "$_("This will delete the virtual machine and
its
> virtual disks. This operation cannot be undone. Would you like to
> continue?")",
> "KCHVM6002M": "$_("Power off Confirmation")",
> diff --git a/ui/pages/template-add.html.tmpl
> b/ui/pages/template-add.html.tmpl
> index 2926cfa..670c7a2 100644
> --- a/ui/pages/template-add.html.tmpl
> +++ b/ui/pages/template-add.html.tmpl
> @@ -29,16 +29,6 @@
> </div>
> <div class="modal-body">
> <div class="template-modal-container">
> - <div>
> - <span
id="alert-modal-container"></span>
> - <h5>$_("Where is the source media for this
> template? ")</h5>
> - <input type="radio" checked="checked"
> name="iso-source" id="iso-local" value="iso-local"
class="wok-radio">
> - <label for="iso-local">$_("Local ISO
> Image")</label>
> - <input type="radio" name="iso-source"
> id="vm-image-local" value="vm-image-local"
class="wok-radio">
> - <label for="vm-image-local">$_("Local
Image
> File")</label>
> - <input type="radio" name="iso-source"
> id="iso-remote" value="iso-remote"
class="wok-radio">
> - <label for="iso-remote">$_("Remote ISO
> Image")</label>
> - </div>
> </div>
> <div class="template-pager">
> <div class="page-list">
> @@ -47,7 +37,7 @@
> <div id="iso-file-field">
> <div id="iso-file-box"
> class="custom-iso-field">
> <div class="form-group">
> - <label
> for="iso-file">$_("Provide a File Path for a specific ISO
> image:")</label>
> + <label
> for="iso-file">$_("File Path:")</label>
> <input type="text"
> class="form-control" id="iso-file" name="iso-file">
> </div>
> </div>
> @@ -56,8 +46,16 @@
> <span
> id="local-iso-error-container"></span>
> <button class="btn btn-primary"
> id="iso-search" style="display: none">$_("Search
ISOs")</button>
> <button class="btn btn-primary"
> id="iso-search-loading" style="display: none"><span
> class="wok-loading-icon"></span> $_("Please,
wait...")</button>
> +
> <!-- 1-1-1 -->
> <div id="local-iso-field"
> class="iso-field" style="display: none;">
> + <form id="form-template-add">
> + <div class="filter">
> + <div class="form-group
> pull-right">
> + <input type="text"
> class="form-control" id="template-add-iso-filter"
> placeholder="$_("Filter")" />
> + </div>
> + </div>
> + </form>
> <div class="row">
> <p>$_("The following ISOs
> are available:")</p>
> </div>
> @@ -66,7 +64,7 @@
> <input type="checkbox"
> id="select-all-local-iso">$_("All")
> </label>
> </div>
> - <div class="row">
> + <div class="row"
id="isoRow">
> <form id="form-local-iso">
> <ul id="list-local-iso"
> class="list-iso">
> </ul>
> @@ -88,6 +86,7 @@
> <dt>{capacity}</dt>
> <dd>$_("Size")</dd>
> </dl>
> + <span class="iso-image-indicator"><i
class="{icon}"></i></span>
> </span>
> </span>
> </label>
> @@ -108,69 +107,11 @@
> </div>
> </div>
>
> - <!-- 1-2 -->
> - <div class="page"
id="iso-remote-box">
> - <!-- 1-2-2 -->
> - <div id="iso-url-field"
style="display:
> none;">
> - <div id="iso-url-box"
> class="form-group">
> - <label
for="iso-url">$_("Provide
> a URL for a specific ISO image:")</label>
> - <input type="text"
> class="form-control" id="iso-url" name="iso-url">
> - </div>
> - </div>
> - <!-- 1-2-0 -->
> - <div id="load-remote-iso">
> - <p><span
> class="wok-loading-icon"></span> $_("Loading default remote
ISOs
> ...")</p>
> - </div>
> - <span
> id="remote-iso-warning-container"></span>
> - <span
> id="remote-iso-error-container"></span>
> - <!-- 1-2-1 -->
> - <div id="remote-iso-field"
> class="iso-field" style="display: none;">
> - <div class="row">
> - <p>$_("The following ISOs are
> available:")</p>
> - </div>
> - <div class="checkbox">
> - <label class="check-all">
> - <input type="checkbox"
> id="select-all-remote-iso">$_("All")
> - </label>
> - </div>
> - <div class="row">
> - <form id="form-remote-iso">
> - <ul id="list-remote-iso"
> class="list-iso">
> - </ul>
> - </form>
> - <script
> id="tmpl-list-remote-iso" type="text/html">
> - <li class="col-md-3">
> - <label
> class="box-iso-outer">
> - <input
> type="checkbox" class="iso-checkbox-hidden" name="iso"
value="{isoId}">
> - <span
> class="box-iso-border">
> - <span
> class="box-iso-inner">
> - <h3
> class="iso-title {os_distro}" title="{name}">
> - {name}
> - </h3>
> - <dl
> class="iso-info">
> - <dt>{os_distro}</dt>
> - <dd>$_("OS")</dd>
> - <dt>{os_version}</dt>
> - <dd>$_("Version")</dd>
> - <dt>{os_arch}</dt>
> - <dd>$_("Arch")</dd>
> - </dl>
> - </span>
> - </span>
> - </label>
> - </li>
> - </script>
> - </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 id="vm-image-local-box-button" class="btn
> btn-default ui-button-primary">$_("Create")</button>
> - <button class="btn btn-default"
> id="btn-template-url-create"
disabled="disabled">$_("Create")</button>
> - <button class="btn btn-default"
> id="btn-template-remote-iso-create"
> disabled="disabled">$_("Create")</button>
> <button class="btn btn-default"
> data-dismiss="modal"
type="button">$_("Cancel")</button>
> </div>
> </div>
_______________________________________________
Kimchi-devel mailing list
Kimchi-devel(a)ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel
2926
days inactive
2931
days old
6 comments
3 participants
participants (3)
-
Aline Manera -
Ramon Medeiros -
Socorro Stoppler