Re: [Kimchi-devel] [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&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>