[Kimchi-devel] [PATCH] [Kimchi 2/2] Issue #606: Change icon to distinguish image generated template and iso generated template

From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- ui/css/kimchi.css | 47 +++++- ui/css/src/modules/_iso-list.scss | 2 +- ui/css/src/modules/_templates.scss | 62 +++++--- ui/js/src/kimchi.template_add_main.js | 5 + ui/js/src/kimchi.template_edit_main.js | 206 +++++++++++++------------ ui/pages/template-add.html.tmpl | 2 +- ui/pages/template-edit.html.tmpl | 272 +++++++++++++++++---------------- 7 files changed, 339 insertions(+), 257 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 1562fd6..66f7cc6 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -207,7 +207,7 @@ #template-add-window.modal-content ul#list-remote-iso li.col-md-3, #guest-add-window.modal-content ul#list-local-iso li.col-md-3, #guest-add-window.modal-content ul#list-remote-iso li.col-md-3 { - width: 241px; + width: 239px; margin: 10px 5px 0; } @@ -1455,6 +1455,11 @@ body.wok-gallery { padding: 10px 30px; } +#template-edit-window .wok-mask { + top: 0 !important; + z-index: 3; +} + #template-edit-window .tab-content .tab-pane { position: relative; } @@ -1482,7 +1487,7 @@ body.wok-gallery { #template-edit-window .template-edit-wrapper-label { vertical-align: top; - min-width: 100px; + min-width: 172px; height: 35px; line-height: 35px; margin: 7px 0 8px; @@ -1491,8 +1496,6 @@ body.wok-gallery { #template-edit-window .template-edit-wrapper-controls { vertical-align: top; width: 400px; - vertical-align: top; - min-width: 100px; height: 35px; line-height: 35px; margin: 7px 0 8px; @@ -1544,6 +1547,11 @@ body.wok-gallery { height: 40px; } +#template-edit-window #template-edit-memory-textbox { + width: 308px !important; + display: inline; +} + #template-edit-window #guest-max-processor-panel { display: none; } @@ -1662,6 +1670,12 @@ body.wok-gallery { font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif; } +#template-add-window.modal-content label.check-all { + display: inline-block; + vertical-align: middle; + padding-top: 8px; +} + #template-add-window.modal-content button#iso-more, #template-add-window.modal-content button#iso-more-loading { clear: both; @@ -1681,7 +1695,7 @@ body.wok-gallery { } #template-add-window .filter { - width: 977px; + float: right; height: 40px; overflow: visible; clear: both; @@ -1720,6 +1734,29 @@ body.wok-gallery { font-size: 32px; } +#template-add-window span.iso-image-indicator .fa { + display: inline-block; + vertical-align: middle; +} + +#template-add-window span.iso-image-indicator i.fa.fa-file-iso, +#template-add-window span.iso-image-indicator i.fa.fa-file-img { + display: inline-block; + width: 27px; + height: 25px; + margin-right: 3px; +} + +#template-add-window span.iso-image-indicator i.fa.fa-file-iso { + background: url("/images/theme-default/file-o-iso.svg") no-repeat 50% 50%; + background-size: contain; +} + +#template-add-window span.iso-image-indicator i.fa.fa-file-img { + background: url("/images/theme-default/file-o-img.svg") no-repeat 50% 50%; + background-size: contain; +} + #template-add-window span.iso-image-alert { position: absolute; bottom: 17px; diff --git a/ui/css/src/modules/_iso-list.scss b/ui/css/src/modules/_iso-list.scss index 355f590..22a5a9c 100644 --- a/ui/css/src/modules/_iso-list.scss +++ b/ui/css/src/modules/_iso-list.scss @@ -103,7 +103,7 @@ } ul#list-local-iso li.col-md-3, ul#list-remote-iso li.col-md-3 { - width: 241px; + width: 239px; margin: 10px 5px 0; } h3.iso-title { diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index d8f3da8..ff7aaf2 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -41,6 +41,10 @@ } #template-edit-window { + .wok-mask { + top: 0 !important; + z-index: 3; + } .tab-content .tab-pane { position: relative; } @@ -63,7 +67,7 @@ } .template-edit-wrapper-label { vertical-align: top; - min-width: 100px; + min-width: 172px; height: 35px; line-height: 35px; margin: 7px 0 8px; @@ -71,8 +75,6 @@ .template-edit-wrapper-controls { vertical-align: top; width: 400px; - vertical-align: top; - min-width: 100px; height: 35px; line-height: 35px; margin: 7px 0 8px; @@ -117,6 +119,10 @@ } } } + #template-edit-memory-textbox { + width: 308px !important; + display: inline; + } #guest-max-processor-panel { display: none; } @@ -213,6 +219,11 @@ font-weight: 400; font-family: $font-family-sans-serif; } + &.modal-content label.check-all { + display: inline-block; + vertical-align: middle; + padding-top: 8px; + } &.modal-content button#iso-more, &.modal-content button#iso-more-loading { clear: both; @@ -228,7 +239,7 @@ padding-left: 0 !important; } .filter { - width: 977px; + float: right; height: 40px; overflow: visible; clear: both; @@ -260,6 +271,26 @@ bottom: 10px; right: 10px; font-size: 32px; + .fa { + display: inline-block; + vertical-align: middle; + } + i.fa.fa-file-iso, + i.fa.fa-file-img { + display: inline-block; + width: 27px; + height: 25px; + margin-right: 3px; + + } + i.fa.fa-file-iso { + background: url('#{$wok-icon-path}/file-o-iso.svg') no-repeat 50% 50%; + background-size: contain; + } + i.fa.fa-file-img { + background: url('#{$wok-icon-path}/file-o-img.svg') no-repeat 50% 50%; + background-size: contain; + } } span.iso-image-alert { position: absolute; @@ -453,7 +484,8 @@ display: none; } .wok-vm-body { - position: relative;; + position: relative; + ; padding: 0 20px 0 20px; width: 240px; display: inline-block; @@ -564,29 +596,23 @@ font-size: 10pt; padding: 6px 8px; } - .wok-vm-list .tooltip-inner { max-width: 300px; } - - .wok-vm-list .tooltip[style] { - left: 79px !important; + .wok-vm-list .tooltip[style] { + left: 79px !important; } - - .wok-vm-list .tooltip-arrow[style] { - left: 10px !important; + .wok-vm-list .tooltip-arrow[style] { + left: 10px !important; } - .wok-vm-gallery .tooltip-inner { max-width: 320px; } - .wok-vm-gallery .tooltip[style] { - left: 7px !important; - right: 7px !important; + left: 7px !important; + right: 7px !important; } - .wok-vm-gallery .tooltip-arrow[style] { - left: 207px !important; + left: 207px !important; } } diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index 341bab3..aa76fcc 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -81,6 +81,11 @@ kimchi.template_add_main = function() { } else { volume.icon = 'fa fa-globe'; } + if ((volume.path).substr((volume.path).lastIndexOf('.')+1) === 'iso'){ + volume.format = 'iso'; + } else { + volume.format = 'img'; + } if (!volume.hasOwnProperty('has_permission')) { volume.has_permission = true; } diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index 13b643b..a2032cc 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -22,43 +22,43 @@ kimchi.template_edit_main = function() { var templateDiskSize; var baseImageTemplate; $('#template-name', templateEditMain).val(kimchi.selectedTemplate); - $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) { - $('.tab-content').css('overflow','hidden'); + $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) { + $('.tab-content').css('overflow', 'hidden'); var target = $(this).attr('href'); - $(target).css('left','-'+$(window).width()+'px'); + $(target).css('left', '-' + $(window).width() + 'px'); var left = $(target).offset().left; $(target).css({ - left: left - }).animate({ - "left": "0px" - },400, function() { - $('.tab-content').css('overflow','visible'); + left: left + }).animate({ + "left": "0px" + }, 400, function() { + $('.tab-content').css('overflow', 'visible'); }); }); $('#template-show-max-memory').on('click', function(e) { - e.preventDefault; - $('.max-memory-field').slideToggle(); - var text = $('#template-show-max-memory span.text').text(); - $('#template-show-max-memory span.text').text(text == i18n['KCHVMED6008M'] ? i18n['KCHVMED6009M'] : i18n['KCHVMED6008M']); - $('#template-show-max-memory i.fa').toggleClass('fa-plus-circle fa-minus-circle'); + e.preventDefault; + $('.max-memory-field').slideToggle(); + var text = $('#template-show-max-memory span.text').text(); + $('#template-show-max-memory span.text').text(text == i18n['KCHVMED6008M'] ? i18n['KCHVMED6009M'] : i18n['KCHVMED6008M']); + $('#template-show-max-memory i.fa').toggleClass('fa-plus-circle fa-minus-circle'); }); var initTemplate = function(template) { origDisks = template.disks; origNetworks = template.networks; - for(var i=0;i<template.disks.length;i++){ - if(template.disks[i].base){ + for (var i = 0; i < template.disks.length; i++) { + if (template.disks[i].base) { template["vm-image"] = template.disks[i].base; $('.templ-edit-cdrom').addClass('hide'); $('.templ-edit-vm-image').removeClass('hide'); break; } } - for ( var prop in template) { + for (var prop in template) { var value = template[prop]; if (prop == 'graphics') { - value = value["type"]; + value = value["type"]; } $('input[name="' + prop + '"]', templateEditMain).val(value); } @@ -98,18 +98,19 @@ kimchi.template_edit_main = function() { // Gather storagepools data var storagePoolsInfo = new Object(); $.each(result, function(index, pool) { - if (pool.state === 'active' && pool.type != 'kimchi-iso') { + if (pool.state === 'active' && pool.type != 'kimchi-iso') { if (pool.type === 'iscsi' || pool.type === 'scsi') { volumes = new Object(); kimchi.listStorageVolumes(pool.name, function(vols) { $.each(vols, function(i, vol) { storagePoolsInfo[pool.name + "/" + vol.name] = { - 'type' : pool.type, - 'volSize': vol.capacity / Math.pow(1024, 3)}; + 'type': pool.type, + 'volSize': vol.capacity / Math.pow(1024, 3) + }; }); }, null, true); } else { - storagePoolsInfo[pool.name] = { 'type' : pool.type }; + storagePoolsInfo[pool.name] = { 'type': pool.type }; } } }); @@ -134,7 +135,7 @@ kimchi.template_edit_main = function() { }); $(storageRow + ' .selectStorageName').append(storageOptions); - if(!$(storageRow + ' .selectStorageName option[value="'+storageData.storageName+'"]').length){ + if (!$(storageRow + ' .selectStorageName option[value="' + storageData.storageName + '"]').length) { var invalidOption = '<option disabled="disabled" selected="selected" value="' + storageData.storageName + '">' + storageData.storageName + '</option>'; $(storageRow + ' .selectStorageName').prepend(invalidOption); $(storageRow + ' .selectStorageName').parent().addClass('has-error') @@ -142,7 +143,7 @@ kimchi.template_edit_main = function() { $(storageRow + ' .selectStorageName').val(storageData.storageName); $(storageRow + ' .selectStorageName').selectpicker(); - if (storageData.storageType === 'iscsi' || storageData.storageType === 'scsi') { + if (storageData.storageType === 'iscsi' || storageData.storageType === 'scsi') { $(storageRow + ' .template-storage-disk').attr('readonly', true).prop('disabled', true); $(storageRow + ' #diskFormat').val('raw'); $(storageRow + ' #diskFormat').prop('disabled', true).change(); @@ -155,8 +156,7 @@ kimchi.template_edit_main = function() { if (isImageBasedTemplate()) { $(storageRow + ' #diskFormat').val('qcow2'); $(storageRow + ' #diskFormat').prop('disabled', 'disabled'); - } - else { + } else { $(storageRow + ' #diskFormat').val(storageData.storageDiskFormat); $(storageRow + ' #diskFormat').on('change', function() { $(storageRow + ' .template-storage-disk-format').val($(this).val()); @@ -164,7 +164,7 @@ kimchi.template_edit_main = function() { } $(storageRow + ' #diskFormat').selectpicker(); - $('.delete', '#form-template-storage').on( "click",function(event) { + $('.delete', '#form-template-storage').on("click", function(event) { event.preventDefault(); $(this).parent().parent().remove(); }); @@ -192,34 +192,35 @@ kimchi.template_edit_main = function() { } $(storageRow + ' #diskFormat').selectpicker('refresh'); }); - }; // End of addStorageItem funtion + }; // End of addStorageItem funtion if (origDisks && origDisks.length) { - origDisks.sort(function(a, b){return a.index-b.index}); + origDisks.sort(function(a, b) { + return a.index - b.index }); $.each(origDisks, function(index, diskEntities) { var defaultPool = diskEntities.pool.name.split('/').pop() var storageNodeData = { - storageIndex : diskEntities.index, - storageName : diskEntities.volume ? defaultPool + '/' + diskEntities.volume : defaultPool, - storageType : diskEntities.pool.type, - storageDisk : diskEntities.size, - storageDiskFormat : diskEntities.format ? diskEntities.format : 'qcow2', - storageVolume : diskEntities.volume + storageIndex: diskEntities.index, + storageName: diskEntities.volume ? defaultPool + '/' + diskEntities.volume : defaultPool, + storageType: diskEntities.pool.type, + storageDisk: diskEntities.size, + storageDiskFormat: diskEntities.format ? diskEntities.format : 'qcow2', + storageVolume: diskEntities.volume } addStorageItem(storageNodeData); }); } - var storageID = origDisks.length -1; + var storageID = origDisks.length - 1; $('#template-edit-storage-add-button').on("click", function(event) { event.preventDefault(); storageID = storageID + 1; var storageNodeData = { - storageName : 'default', - storageType : 'dir', - storageDisk : '10', - storageDiskFormat : 'qcow2', - storageIndex : storageID + storageName: 'default', + storageType: 'dir', + storageDisk: '10', + storageDiskFormat: 'qcow2', + storageIndex: storageID } addStorageItem(storageNodeData); }); @@ -231,16 +232,16 @@ kimchi.template_edit_main = function() { var networkName = networkData.networkV; var nodeInterface = $.parseHTML(wok.substitute($('#template-interface-tmpl').html(), networkData)); $('.template-tab-body', '#form-template-interface').append(nodeInterface); - $('.delete', '#form-template-interface').on( "click",function(event) { + $('.delete', '#form-template-interface').on("click", function(event) { event.preventDefault(); $(this).parent().parent().remove(); }); var networkOptions = ''; - for(var i=0;i<result.length;i++){ - if(networkName===result[i].name) { + for (var i = 0; i < result.length; i++) { + if (networkName === result[i].name) { networkOptions += '<option selected="selected">' + result[i].name + '</option>'; } - if(result[i].state === "active" && networkName!==result[i].name) { + if (result[i].state === "active" && networkName !== result[i].name) { networkOptions += '<option>' + result[i].name + '</option>'; } } @@ -248,70 +249,70 @@ kimchi.template_edit_main = function() { $('select', '#form-template-interface #networkID' + networkItemNum).selectpicker(); networkItemNum += 1; }; - if(result && result.length > 0) { - for(var i=0;i<origNetworks.length;i++) { + if (result && result.length > 0) { + for (var i = 0; i < origNetworks.length; i++) { addInterfaceItem({ - networkID : 'networkID' + networkItemNum, - networkV : origNetworks[i], - type : 'network' + networkID: 'networkID' + networkItemNum, + networkV: origNetworks[i], + type: 'network' }); } } - $('#template-edit-interface-add-button').on( "click", function(event) { + $('#template-edit-interface-add-button').on("click", function(event) { event.preventDefault(); addInterfaceItem({ - networkID : 'networkID' + networkItemNum, - networkV : 'default', - type : 'network' + networkID: 'networkID' + networkItemNum, + networkV: 'default', + type: 'network' }); }); }; - var initProcessor = function(){ - var setCPUValue = function(){ - if(!$('#cores').hasClass("invalid-field")&&$('#cores').val()!=""){ - var computedCpu = parseInt($("#cores").val())*parseInt($("#threads").val()); + var initProcessor = function() { + var setCPUValue = function() { + if (!$('#cores').hasClass("invalid-field") && $('#cores').val() != "") { + var computedCpu = parseInt($("#cores").val()) * parseInt($("#threads").val()); $("#vcpus").val(computedCpu); if ($("#cpus-check").prop("checked")) { //If topology is checked, set maxcpu to be the same as # of cpu otherwise, backend gives error $("#guest-edit-max-processor-textbox").val(computedCpu); } - }else{ + } else { $("#vcpus").val(''); } }; - $("input:text", "#form-template-processor").on('keyup', function(){ + $("input:text", "#form-template-processor").on('keyup', function() { $(this).toggleClass("invalid-field", !$(this).val().match('^[0-9]*$')); - if($(this).prop('id')=='cores') setCPUValue(); + if ($(this).prop('id') == 'cores') setCPUValue(); }); - $("input:checkbox", "#form-template-processor").click(function(){ + $("input:checkbox", "#form-template-processor").click(function() { $('#threads').selectpicker(); $(".topology", "#form-template-processor").slideToggle(); $("#vcpus").attr("disabled", $(this).prop("checked")); $("#guest-edit-max-processor-textbox").attr("disabled", $(this).prop("checked")); setCPUValue(); }); - $('#threads').change(function(){ + $('#threads').change(function() { setCPUValue(); }); - kimchi.getCPUInfo(function(data){ + kimchi.getCPUInfo(function(data) { var options = ""; var topo = template.cpu_info.topology; - for(var i=0;Math.pow(2,i)<=data.threads_per_core;i++){ - var lastOne = Math.pow(2,i+1)>data.threads_per_core?" selected":""; - options += "<option"+lastOne+">"+Math.pow(2,i)+"</option>"; + for (var i = 0; Math.pow(2, i) <= data.threads_per_core; i++) { + var lastOne = Math.pow(2, i + 1) > data.threads_per_core ? " selected" : ""; + options += "<option" + lastOne + ">" + Math.pow(2, i) + "</option>"; } $('#threads').append(options); - if(template.cpu_info.vcpus){ + if (template.cpu_info.vcpus) { $("#vcpus").val(template.cpu_info.vcpus); } - if(template.cpu_info.maxvcpus){ + if (template.cpu_info.maxvcpus) { $("#guest-edit-max-processor-textbox").val(template.cpu_info.maxvcpus); } - if(topo&&topo.cores){ + if (topo && topo.cores) { $("#cores").val(topo.cores); } - if(topo&&topo.threads){ + if (topo && topo.threads) { $('#threads').val(topo.threads); $('#threads').selectpicker(); $("input:checkbox", "#form-template-processor").trigger('click'); @@ -326,14 +327,14 @@ kimchi.template_edit_main = function() { }); }; - var checkInvalids = function(){ + var checkInvalids = function() { $.each(template.invalid, function(key, value) { - if(key === 'cdrom' || key === 'vm-image'){ - $('.tab-content input[name="'+key+'"]').attr('disabled',false).parent().addClass('has-error has-feedback has-changes'); + if (key === 'cdrom' || key === 'vm-image') { + $('.tab-content input[name="' + key + '"]').attr('disabled', false).parent().addClass('has-error has-changes'); return true; - }else if(key === 'storagepools'){ + } else if (key === 'storagepools') { return true; - }else { + } else { return false; } }); @@ -348,32 +349,34 @@ kimchi.template_edit_main = function() { $('#tmpl-edit-button-save').on('click', function() { $button = $(this); - $button.html('<span class="wok-loading-icon" /> '+i18n['KCHAPI6010M']); + $button.html('<span class="wok-loading-icon" /> ' + i18n['KCHAPI6010M']); + $button.prop('disabled', true); + $('.modal .wok-mask').removeClass('hidden'); $('.modal input[type="text"]').prop('disabled', true); $('.modal input[type="checkbox"]').prop('disabled', true); $('.modal select').prop('disabled', true); $('.modal .selectpicker').addClass('disabled'); - var editableFields = [ 'name', 'memory', 'graphics', 'max-memory']; + var editableFields = ['name', 'memory', 'graphics', 'max-memory']; var data = {}; var disks = $('.template-tab-body .item', '#form-template-storage'); var disksForUpdate = new Array(); $.each(disks, function(index, diskEntity) { var newDisk = { - 'index' : index, - 'pool' : {'name': '/plugins/kimchi/storagepools/' + $(diskEntity).find('.template-storage-name').val()}, - 'size' : Number($(diskEntity).find('.template-storage-disk').val()), - 'format' : $(diskEntity).find('.template-storage-disk-format').val() + 'index': index, + 'pool': { 'name': '/plugins/kimchi/storagepools/' + $(diskEntity).find('.template-storage-name').val() }, + 'size': Number($(diskEntity).find('.template-storage-disk').val()), + 'format': $(diskEntity).find('.template-storage-disk-format').val() }; // image based template: add base to dictionary - if ((baseImageTemplate) && (index == 0)) { + if ((baseImageTemplate) && (index == 0)) { newDisk["base"] = $('#template-edit-vmimage-textbox').val(); } var storageType = $(diskEntity).find('.template-storage-type').val(); - if(storageType === 'iscsi' || storageType === 'scsi') { + if (storageType === 'iscsi' || storageType === 'scsi') { newDisk['volume'] = newDisk['pool']['name'].split('/').pop(); - newDisk['pool']['name'] = newDisk['pool']['name'].slice(0, newDisk['pool']['name'].lastIndexOf('/')); + newDisk['pool']['name'] = newDisk['pool']['name'].slice(0, newDisk['pool']['name'].lastIndexOf('/')); delete newDisk.size; } disksForUpdate.push(newDisk); @@ -382,37 +385,36 @@ kimchi.template_edit_main = function() { $.each(editableFields, function(i, field) { if (field == 'graphics') { - var type = $('#form-template-general [name="' + field + '"]').val(); - data[field] = {'type': type}; - } - else { - data[field] = $('#form-template-general [name="' + field + '"]').val(); + var type = $('#form-template-general [name="' + field + '"]').val(); + data[field] = { 'type': type }; + } else { + data[field] = $('#form-template-general [name="' + field + '"]').val(); } }); data['memory'] = Number(data['memory']); data['max-memory'] = Number(data['max-memory']); - memory = {'current': data['memory'], 'maxmemory': data['max-memory']}; + memory = { 'current': data['memory'], 'maxmemory': data['max-memory'] }; data['memory'] = memory; delete data['max-memory']; var cpu = parseInt($('#vcpus').val()); var maxCpu = parseInt($('#guest-edit-max-processor-textbox').val()); - var maxCpuFinal = cpu; //Initially set maxCpu to be the same as cpu + var maxCpuFinal = cpu; //Initially set maxCpu to be the same as cpu if (maxCpu >= cpu) { maxCpuFinal = maxCpu; } - if($('.tab-content .has-changes > input[name="cdrom"]').length){ + if ($('.tab-content .has-changes > input[name="cdrom"]').length) { data['cdrom'] = $('.tab-content input[name="cdrom"]').val(); } - if($('.tab-content .has-changes > input[name="vm-image"]').length){ + if ($('.tab-content .has-changes > input[name="vm-image"]').length) { data['vm-image'] = $('.tab-content input[name="vm-image"]').val(); } - if($("input:checkbox", "#form-template-processor").prop("checked")){ + if ($("input:checkbox", "#form-template-processor").prop("checked")) { //Check if maxCpu field has a value data['cpu_info'] = { vcpus: cpu, @@ -423,7 +425,7 @@ kimchi.template_edit_main = function() { threads: parseInt($("#threads").val()) } }; - }else{ + } else { data['cpu_info'] = { vcpus: cpu, maxvcpus: maxCpuFinal, @@ -444,26 +446,30 @@ kimchi.template_edit_main = function() { data.networks = []; } - if($('.has-error', '#form-template-storage').length){ + if ($('.has-error', '#form-template-storage').length) { // Workaround to check if invalid storage wasn't changed - $('a[href="#storage"]','#edit-template-tabs').tab('show'); + $('a[href="#storage"]', '#edit-template-tabs').tab('show'); + $('.modal .wok-mask').addClass('hidden'); $button.html(i18n['KCHAPI6007M']); + $button.prop('disabled', false); $('.modal input[type="text"]').prop('disabled', false); $('.modal input[type="checkbox"]').prop('disabled', false); $('.modal select').prop('disabled', false); $('.modal .selectpicker').removeClass('disabled'); - wok.message.error(i18n['KCHTMPL6007M'],'#alert-modal-container'); - }else { + wok.message.error(i18n['KCHTMPL6007M'], '#alert-modal-container'); + } else { kimchi.updateTemplate($('#template-name').val(), data, function() { kimchi.doListTemplates(); wok.window.close(); }, function(err) { + $('.modal .wok-mask').addClass('hidden'); $button.html(i18n['KCHAPI6007M']); + $button.prop('disabled', false); $('.modal input[type="text"]').prop('disabled', false); $('.modal input[type="checkbox"]').prop('disabled', false); $('.modal select').prop('disabled', false); $('.modal .selectpicker').removeClass('disabled'); - wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + wok.message.error(err.responseJSON.reason, '#alert-modal-container'); }); } }); diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index d4c7216..a5136f0 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -90,7 +90,7 @@ <dd>$_("Size")</dd> </dl> <span data-toggle="tooltip" title="$_('QEMU does not have enough permission to work with this file')" class="{volume_hidden} iso-image-alert"><i class="fa fa-exclamation-triangle fa-lg"></i></span> - <span class="iso-image-indicator"><i class="{icon}"></i></span> + <span class="iso-image-indicator"><i class="fa fa-file-{format}"></i><i class="{icon}"></i></span> </span> </span> </label> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index 2d7deed..6cac885 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -24,145 +24,153 @@ <html> <body> <div id="template-edit-window" class="window modal-content"> - <div class="modal-header"> - <h4 class="modal-title">$_("Edit Template")</h4> - </div> - <div class="modal-body"> - <span id="alert-modal-container"></span> - <div id="edit-template-tabs"> - <input type="hidden" id="template-name" name="templateName" /> - <ul class="nav nav-tabs" role="tablist"> - <li role="presentation" class="active"> - <a href="#general" aria-controls="general" role="tab" data-toggle="tab">$_("General")</a> - </li> - <li role="presentation"> - <a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">$_("Storage")</a> - </li> - <li role="presentation"> - <a href="#interface" aria-controls="interface" role="tab" data-toggle="tab">$_("Interface")</a> - </li> - <li role="presentation"> - <a href="#processor" aria-controls="processor" role="tab" data-toggle="tab">$_("Processor")</a> - </li> - </ul> - <div class="tab-content"> - <div role="tabpanel" class="tab-pane active" id="general"> - <form id="form-template-general"> - <div class="form-template-inline-wrapper"> - <div class="template-edit-wrapper-label"> - <label for="template-edit-id-textbox">$_("Name")</label> - </div> - <div class="template-edit-wrapper-label"> - <label for="template-edit-vendor-textbox">$_("Vendor")</label> - </div> - <div class="template-edit-wrapper-label"> - <label for="template-edit-version-textbox">$_("Version")</label> - </div> - <div class="template-edit-wrapper-label"> - <label for="template-edit-memory-textbox">$_("Memory (MB)")</label> - </div> - <div class="template-edit-wrapper-label max-memory-field" style="display: none;"> - <label for="template-edit-max-memory-textbox">$_("Max Memory (MB)")</label> - </div> - <div class="template-edit-wrapper-label templ-edit-cdrom"> - <label for="template-edit-cdrom-textbox">$_("CDROM")</label> - </div> - <div class="template-edit-wrapper-label templ-edit-vm-image hide"> - <label for="template-edit-vmimage-textbox">$_("Image File")</label> - </div> - <div class="template-edit-wrapper-label"> - <label>$_("Graphics")</label> - </div> - </div> - <div class="form-template-inline-wrapper"> - <div class="template-edit-wrapper-controls"> - <input id="template-edit-id-textbox" class="form-control" name="name" type="text" /> - </div> - <div class="template-edit-wrapper-controls"> - <input id="template-edit-vendor-textbox" class="form-control" name="os_distro" type="text" disabled="disabled" /> - </div> - <div class="template-edit-wrapper-controls"> - <input id="template-edit-version-textbox" class="form-control" name="os_version" type="text" disabled="disabled" /> - </div> - <div class="template-edit-wrapper-controls"> - <input id="template-edit-memory-textbox" class="form-control" name="memory" type="number" step="1024" min="1024" style="width: 75%; display: inline;"/> - <button id="template-show-max-memory" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button> - </div> - <div class="template-edit-wrapper-controls max-memory-field" style="display: none;"> - <input id="template-edit-max-memory-textbox" class="form-control" name="max-memory" type="number" min="1024" step="1024" /> - </div> - <div class="template-edit-wrapper-controls templ-edit-cdrom"> - <input id="template-edit-cdrom-textbox" class="form-control" name="cdrom" type="text" disabled="disabled" /> - <span class="form-control-feedback"> - <i class="fa fa-times"></i> - </span> - </div> - <div class="template-edit-wrapper-controls templ-edit-vm-image hide"> - <input id="template-edit-vmimage-textbox" class="form-control" name="vm-image" type="text" disabled="disabled" /> - <span class="fa fa-times form-control-feedback"></span> - </div> - <div class="template-edit-wrapper-controls"> - <select id="template-edit-graphics" name="graphics" class="form-control" /> - </div> - </div> - </form> + <div class="modal-header"> + <h4 class="modal-title">$_("Edit Template")</h4> + </div> + <div class="modal-body"> + <span id="alert-modal-container"></span> + <div id="edit-template-tabs"> + <input type="hidden" id="template-name" name="templateName" /> + <ul class="nav nav-tabs" role="tablist"> + <li role="presentation" class="active"> + <a href="#general" aria-controls="general" role="tab" data-toggle="tab">$_("General")</a> + </li> + <li role="presentation"> + <a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">$_("Storage")</a> + </li> + <li role="presentation"> + <a href="#interface" aria-controls="interface" role="tab" data-toggle="tab">$_("Interface")</a> + </li> + <li role="presentation"> + <a href="#processor" aria-controls="processor" role="tab" data-toggle="tab">$_("Processor")</a> + </li> + </ul> + <div class="tab-content"> + <div role="tabpanel" class="tab-pane active" id="general"> + <form id="form-template-general"> + <div class="form-template-inline-wrapper"> + <div class="template-edit-wrapper-label"> + <label for="template-edit-id-textbox">$_("Name")</label> + </div> + <div class="template-edit-wrapper-label"> + <label for="template-edit-vendor-textbox">$_("Vendor")</label> + </div> + <div class="template-edit-wrapper-label"> + <label for="template-edit-version-textbox">$_("Version")</label> + </div> + <div class="template-edit-wrapper-label"> + <label for="template-edit-memory-textbox">$_("Memory (MB)")</label> + </div> + <div class="template-edit-wrapper-label max-memory-field" style="display: none;"> + <label for="template-edit-max-memory-textbox">$_("Max Memory (MB)")</label> + </div> + <div class="template-edit-wrapper-label templ-edit-cdrom"> + <label for="template-edit-cdrom-textbox">$_("CDROM")</label> + </div> + <div class="template-edit-wrapper-label templ-edit-vm-image hide"> + <label for="template-edit-vmimage-textbox">$_("Image File")</label> + </div> + <div class="template-edit-wrapper-label"> + <label>$_("Graphics")</label> + </div> </div> - <div role="tabpanel" class="tab-pane" id="storage"> - <form id="form-template-storage"> - <div class="template-tab-header"> - <span class="template-storage-cell storage-pool">$_("Storage Pool")</span> - <span class="template-storage-cell type">$_("Type")</span> - <span class="template-storage-cell disk">$_("Disk(GB)")</span> - <span class="template-storage-cell format">$_("Disk Format")</span> - <button type="button" id="template-edit-storage-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Storage")</button> - </div> - <div class="template-tab-body"> - </div> - </form> + <div class="form-template-inline-wrapper"> + <div class="template-edit-wrapper-controls"> + <input id="template-edit-id-textbox" class="form-control" name="name" type="text" /> + </div> + <div class="template-edit-wrapper-controls"> + <input id="template-edit-vendor-textbox" class="form-control" name="os_distro" type="text" disabled="disabled" /> + </div> + <div class="template-edit-wrapper-controls"> + <input id="template-edit-version-textbox" class="form-control" name="os_version" type="text" disabled="disabled" /> + </div> + <div class="template-edit-wrapper-controls"> + <input id="template-edit-memory-textbox" class="form-control" name="memory" type="number" step="1024" min="1024" /> + <button id="template-show-max-memory" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button> + </div> + <div class="template-edit-wrapper-controls max-memory-field" style="display: none;"> + <input id="template-edit-max-memory-textbox" class="form-control" name="max-memory" type="number" min="1024" step="1024" /> + </div> + <div class="template-edit-wrapper-controls templ-edit-cdrom form-group has-feedback"> + <input id="template-edit-cdrom-textbox" class="form-control" name="cdrom" type="text" disabled="disabled" /> + <span class="form-control-feedback"> + <i class="fa fa-times"></i> + </span> + </div> + <div class="template-edit-wrapper-controls templ-edit-vm-image form-group has-feedback hide"> + <input id="template-edit-vmimage-textbox" class="form-control" name="vm-image" type="text" disabled="disabled" /> + <span class="fa fa-times form-control-feedback"></span> + </div> + <div class="template-edit-wrapper-controls"> + <select id="template-edit-graphics" name="graphics" class="form-control" /> + </div> </div> - <div role="tabpanel" class="tab-pane" id="interface"> - <form id="form-template-interface"> - <div class="template-tab-header"> - <span class="template-interface-cell network">$_("Network")</span> - <span class="template-interface-cell type">$_("Type")</span> - <button type="button" id="template-edit-interface-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Interface")</button> - </div> - <div class="template-tab-body"></div> - </form> + </form> + </div> + <div role="tabpanel" class="tab-pane" id="storage"> + <form id="form-template-storage"> + <div class="template-tab-header"> + <span class="template-storage-cell storage-pool">$_("Storage Pool")</span> + <span class="template-storage-cell type">$_("Type")</span> + <span class="template-storage-cell disk">$_("Disk(GB)")</span> + <span class="template-storage-cell format">$_("Disk Format")</span> + <button type="button" id="template-edit-storage-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Storage")</button> + </div> + <div class="template-tab-body"> </div> - <div role="tabpanel" class="tab-pane" id="processor"> - <form id="form-template-processor"> + </form> + </div> + <div role="tabpanel" class="tab-pane" id="interface"> + <form id="form-template-interface"> + <div class="template-tab-header"> + <span class="template-interface-cell network">$_("Network")</span> + <span class="template-interface-cell type">$_("Type")</span> + <button type="button" id="template-edit-interface-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Interface")</button> + </div> + <div class="template-tab-body"></div> + </form> + </div> + <div role="tabpanel" class="tab-pane" id="processor"> + <form id="form-template-processor"> + <div class="form-group"> + <div id="guest-processor"> + <label for="vcpus">$_("Current CPU Number")</label> + <input id="vcpus" class="form-control" name="processor" type="number" min="1" /> + <button id="guest-show-max-processor" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button> + </div> + <div id="guest-max-processor-panel" class="form-group"> + <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label> + <input id="guest-edit-max-processor-textbox" class="form-control" name="max-processor" type="number" min="1" /> + </div> + </div> + <div class="manual form-group"> + <input type="checkbox" class="wok-checkbox" id="cpus-check" /> + <label for="cpus-check">$_("Manually set CPU topology")</label> + </div> + <div class="topology"> + <div class="form-group"> + <label for="cores">$_("Cores")</label> + <input type="text" class="form-control" value="1" id="cores" /> + </div> + <div> <div class="form-group"> - <div id="guest-processor"> - <label for="vcpus">$_("Current CPU Number")</label> - <input id="vcpus" class="form-control" name="processor" type="number" min="1" /> - <button id="guest-show-max-processor" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button> - </div> - <div id="guest-max-processor-panel" class="form-group"> - <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label> - <input id="guest-edit-max-processor-textbox" class="form-control" name="max-processor" type="number" min="1" /> - </div> + <label for="threads">$_("Threads")</label> + <select id="threads" class="selectpicker col-md-12 col-lg-12"></select> </div> - <div class="manual form-group"> - <input type="checkbox" class="wok-checkbox" id="cpus-check" /> - <label for="cpus-check">$_("Manually set CPU topology")</label> - </div> - <div class="topology"> - <div class="form-group"> - <label for="cores">$_("Cores")</label> - <input type="text" class="form-control" value="1" id="cores" /> - </div> - <div> - <div class="form-group"> - <label for="threads">$_("Threads")</label> - <select id="threads" class="selectpicker col-md-12 col-lg-12"></select> - </div> - </div> - </div> - </form> + </div> </div> - </div> + </form> </div> + </div> + </div> + <div class="wok-mask hidden" role="presentation"> + <div class="wok-mask-loader-container"> + <div class="wok-mask-loading"> + <div class="wok-mask-loading-icon"></div> + <div class="wok-mask-loading-text">$_("Loading")...</div> + </div> + </div> + </div> </div> <div class="modal-footer"> <button id="tmpl-edit-button-save" class="btn btn-default">$_("Save")</button> -- 2.5.5