Reviewed-By: Ramon Medeiros <ramonn(a)br.ibm.com&gt; Tested-By: Ramon Medeiros <ramonn(a)br.ibm.com&gt; 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&gt; > --- > 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>

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&gt; > --- > 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