[Kimchi-devel] [PATCH] [Kimchi 2/2] Issue #606: Change icon to distinguish image generated template and iso generated template
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Aug 30 19:23:12 UTC 2016
From: Samuel Guimarães <sguimaraes943 at gmail.com>
Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
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
More information about the Kimchi-devel
mailing list