<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
Hi Aline, <br>
<br>
When using iSCSI or SCSI, the disk size is read from the response
and the input is disabled:<br>
<br>
<img alt="" src="cid:part1.04040305.08080208@linux.vnet.ibm.com"
height="509" width="809"><br>
<br>
Above is my 1G iSCSI test from my machine. The function is realized
by the code below:<br>
<br>
+ $('select',
'#form-template-storage').change(function() {
<br>
+ var selectedItem = $(this).parent().parent();
<br>
+ var tempStorageName = $(this).val();
<br>
+ tempStorageName =tempStorageName.split('/')[0];
<br>
+ var scsiCap;
<br>
+ $.each(result, function(index, storageEntities)
{
<br>
+ if (tempStorageName ===
storageEntities.name) {
<br>
+
selectedItem.find('.template-storage-type').val(storageEntities.type);
<br>
+ scsiCap = storageEntities.capacity /
Math.pow(1024, 3);
<br>
}
<br>
+ })
<br>
+ if (tempStorageName === 'iscsi' ||
tempStorageName === 'scsi') {
<br>
+ $('.template-storage-disk',
selectedItem).attr('readonly', true).val(scsiCap);
<br>
+ } else {
<br>
+ $('.template-storage-disk',
selectedItem).attr('readonly', false).val('10');
<br>
}
<br>
});
<br>
<br>
Best Regards<br>
<br>
Wang Wen<br>
<br>
<div class="moz-cite-prefix">On 11/10/2014 11:54 PM, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:5460DF99.5030900@linux.vnet.ibm.com"
type="cite">
<br>
Just one comment;
<br>
<br>
When a SCSI/iSCSI pool/volume is selected the the "Disk size" must
be set with the volume size and the input box must be disabled.
<br>
<br>
It was done by the following code:
<br>
<br>
- $('#template-edit-storagePool').change(function() {
<br>
- storagepool = $(this).val();
<br>
- var storageArray = storagepool.split("/");
<br>
- if (storageArray.length > 3) {
<br>
- volumeName = storageArray.pop();
<br>
- poolName = storageArray.pop();
<br>
- kimchi.getStoragePoolVolume(poolName, volumeName,
function(result) {
<br>
- $('input[name="disks"]',
templateEditForm).val(result.capacity / Math.pow(1024,3));
<br>
- $('input[name="disks"]',
templateEditForm).attr('disabled','disabled');
<br>
- return false;
<br>
- }, function (err) {
<br>
- kimchi.message.error(err.responseJSON.reason);
<br>
<br>
<br>
<br>
On 11/05/2014 08:17 AM, Wen Wang wrote:
<br>
<blockquote type="cite">From: Wen Wang
<a class="moz-txt-link-rfc2396E" href="mailto:wenwang@linux.vnet.ibm.com"><wenwang@linux.vnet.ibm.com></a>
<br>
<br>
V1 -> V2:
<br>
<br>
1) Enable "iSCSI" and "SCSI" for storage.
<br>
2) Changed the storage tab from "storage" to "Storage".
<br>
3) Fix the defect that when editing/adding "Storage" or
"Interface" line
<br>
went down issue.
<br>
4) "Storage" and "Interface" content can display properly on
Remote and
<br>
Image created template.
<br>
5) Fix the defect that "Image" didn't show properly when using a
Image
<br>
created template.
<br>
<br>
This patch redesigned "Edit Template" diaguage in "Templates".
New "Edit
<br>
Template" will display all the related information into tabs of
<br>
"General", "Storage" and "Interface". Due to unfinished back-end
work,
<br>
functions are not fully supported, which will be finished in the
future
<br>
work.
<br>
<br>
Temporary disabled functions:
<br>
1) Multiple disk operation with multiple storage pools edit in
template
<br>
for which reason the add button in "Storage" tab is disabled.
<br>
2) iSCSI and SCSI storage pool add is removed since we are going
to
<br>
allow this kind of operation in the process of creating a VM.
<br>
<br>
Signed-off-by: Wen Wang <a class="moz-txt-link-rfc2396E" href="mailto:wenwang@linux.vnet.ibm.com"><wenwang@linux.vnet.ibm.com></a>
<br>
---
<br>
ui/css/theme-default/template-edit.css | 116 +++++++----
<br>
ui/js/src/kimchi.template_edit_main.js | 364
+++++++++++++++++++++++---------
<br>
ui/pages/template-edit.html.tmpl | 168 ++++++++-------
<br>
3 files changed, 432 insertions(+), 216 deletions(-)
<br>
<br>
diff --git a/ui/css/theme-default/template-edit.css
b/ui/css/theme-default/template-edit.css
<br>
index 4975f1b..094e909 100644
<br>
--- a/ui/css/theme-default/template-edit.css
<br>
+++ b/ui/css/theme-default/template-edit.css
<br>
@@ -17,24 +17,33 @@
<br>
*/
<br>
#template-edit-window {
<br>
font-size: 13px;
<br>
- height: 600px;
<br>
- width: 1000px;
<br>
+ height: 500px;
<br>
+ width: 800px;
<br>
}
<br>
<br>
-.template-edit-fieldset {
<br>
- float: left;
<br>
- padding: 1em;
<br>
+#edit-template-tabs {
<br>
+ background: none repeat scroll 0 0 transparent;
<br>
+ border: medium none;
<br>
+ height: 100%;
<br>
+ padding: 0;
<br>
}
<br>
<br>
-.template-edit-wrapper-label, .template-edit-wrapper-controls {
<br>
+#edit-template-tabs .form-template-inline-wrapper {
<br>
+ display: inline-block;
<br>
vertical-align: top;
<br>
- width: 470px;
<br>
}
<br>
<br>
.template-edit-wrapper-label {
<br>
- height: 18px;
<br>
- line-height: 18px;
<br>
- margin-top: 8px;
<br>
+ vertical-align: top;
<br>
+ min-width: 100px;
<br>
+ height: 35px;
<br>
+ line-height: 35px;
<br>
+ margin: 7px 0 8px;
<br>
+}
<br>
+
<br>
+.template-edit-wrapper-controls {
<br>
+ vertical-align: top;
<br>
+ width: 400px;
<br>
}
<br>
<br>
.template-edit-wrapper-controls input[type="text"] {
<br>
@@ -56,7 +65,7 @@
<br>
<br>
.template-edit-wrapper-controls > .dropdown {
<br>
margin: 5px 0 0 1px;
<br>
- width: 440px;
<br>
+ width: 372px;
<br>
}
<br>
<br>
.template-edit-wrapper-controls input[type="text"][disabled] {
<br>
@@ -65,41 +74,72 @@
<br>
cursor: not-allowed;
<br>
}
<br>
<br>
-.hidden-area {
<br>
- display: none;
<br>
+#edit-template-tabs .template-tab-header {
<br>
+ margin-bottom: 8px;
<br>
+ padding-bottom: 2px;
<br>
+ font-weight: bold;
<br>
+ border-bottom: 1px solid #999999;
<br>
+ overflow: hidden;
<br>
}
<br>
<br>
-.template-edit-wrapper-controls .select-list-box {
<br>
- width: 464px;
<br>
- max-height: 168px;
<br>
- overflow: auto;
<br>
- margin-top: 5px;
<br>
- border: 1px solid #ccc;
<br>
+#edit-template-tabs .template-tab-header .action-area {
<br>
+ float: right;
<br>
+ height: 20px;
<br>
+ width: 20px;
<br>
}
<br>
<br>
-.template-edit-wrapper-controls .select-list-box>li>label
{
<br>
- display: block;
<br>
+#edit-template-tabs .template-interface-cell {
<br>
+ display: inline-block;
<br>
+ width: 250px;
<br>
}
<br>
<br>
-.template-edit-wrapper-controls
.select-list-box>li>label>
<br>
-input[type="checkbox"] {
<br>
- display: none;
<br>
+#edit-template-tabs .template-storage-cell{
<br>
+ display: inline-block;
<br>
+ width: 230px;
<br>
+}
<br>
+
<br>
+#edit-template-tabs .template-storage-cell label {
<br>
+ height: 25px;
<br>
+ padding: 2px;
<br>
+ border: 1px;
<br>
}
<br>
<br>
-.template-edit-wrapper-controls
.select-list-box>li>label>.item {
<br>
- display: block;
<br>
- height: 41px;
<br>
- line-height: 41px;
<br>
- padding: 0 20px 0 40px;
<br>
- border-bottom: 1px solid #ccc;
<br>
- box-shadow: 0px 1px 1px #fff;
<br>
- text-shadow: -1px -1px 1px #ddd, 1px 1px 1px #fff;
<br>
- color: #222;
<br>
- font-size: 12px;
<br>
+#form-template-storage .template-tab-body select {
<br>
+ width: 140px;
<br>
}
<br>
<br>
-.template-edit-wrapper-controls
.select-list-box>li>label>
<br>
-input[type="checkbox"]:CHECKED+.item {
<br>
- background: #f8f8f8
url(../images/theme-default/check-green.png) no-repeat
<br>
- 10px center;
<br>
+#form-template-storage .template-tab-body input {
<br>
+ width: 56px;
<br>
+ height: 17px;
<br>
}
<br>
+
<br>
+#form-template-storage .template-tab-body
.template-storage-name {
<br>
+ width: 220px;
<br>
+}
<br>
+
<br>
+#edit-template-tabs .template-tab-body input[readonly] {
<br>
+ background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
<br>
+ border-color: transparent;
<br>
+ text-overflow: ellipsis;
<br>
+}
<br>
+
<br>
+#edit-template-tabs .template-tab-body .item {
<br>
+ height: 25px;
<br>
+}
<br>
+
<br>
+#form-template-interface .template-tab-body select {
<br>
+ width: 180px;
<br>
+}
<br>
+
<br>
+#edit-template-tabs .template-tab-body .action-area {
<br>
+ float: right;
<br>
+}
<br>
+
<br>
+#edit-template-tabs .template-tab-body .action-area button {
<br>
+ width: 20px;
<br>
+ height: 20px;
<br>
+}
<br>
+
<br>
+#edit-template-tabs .hide {
<br>
+ display: none;
<br>
+}
<br>
\ No newline at end of file
<br>
diff --git a/ui/js/src/kimchi.template_edit_main.js
b/ui/js/src/kimchi.template_edit_main.js
<br>
index 2f4cc9a..12a9f20 100644
<br>
--- a/ui/js/src/kimchi.template_edit_main.js
<br>
+++ b/ui/js/src/kimchi.template_edit_main.js
<br>
@@ -16,19 +16,23 @@
<br>
* limitations under the License.
<br>
*/
<br>
kimchi.template_edit_main = function() {
<br>
- var templateEditForm = $('#form-template-edit');
<br>
+ var templateEditMain = $('#edit-template-tabs');
<br>
var origDisks;
<br>
var origPool;
<br>
+ var origNetworks;
<br>
var templateDiskSize;
<br>
- $('#template-name',
templateEditForm).val(kimchi.selectedTemplate);
<br>
- kimchi.retrieveTemplate(kimchi.selectedTemplate,
function(template) {
<br>
+ $('#template-name',
templateEditMain).val(kimchi.selectedTemplate);
<br>
+ templateEditMain.tabs();
<br>
+
<br>
+ var initTemplate = function(template) {
<br>
origDisks = template.disks;
<br>
origPool = template.storagepool;
<br>
+ origNetworks = template.networks;
<br>
for(var i=0;i<template.disks.length;i++){
<br>
if(template.disks[i].base){
<br>
template["vm-image"] = template.disks[i].base;
<br>
-
$('#templ-edit-cdrom').addClass('hide-content');
<br>
-
$('#templ-edit-vm-image').removeClass('hide-content');
<br>
+ $('.templ-edit-cdrom').addClass('hide');
<br>
+ $('.templ-edit-vm-image').removeClass('hide');
<br>
break;
<br>
}
<br>
}
<br>
@@ -37,18 +41,12 @@ kimchi.template_edit_main = function() {
<br>
if (prop == 'graphics') {
<br>
value = value["type"];
<br>
}
<br>
- $('input[name="' + prop + '"]',
templateEditForm).val(value);
<br>
- }
<br>
- var disks = template.disks;
<br>
- $('input[name="disks"]').val(disks[0].size);
<br>
- templateDiskSize = $('input[name="disks"]').val();
<br>
- if (disks[0].volume) {
<br>
- var spool_value = $('#form-template-edit
[name="storagepool"]').val();
<br>
- $('input[name="storagepool"]',
templateEditForm).val(spool_value + '/' + disks[0].volume);
<br>
- $('input[name="disks"]',
templateEditForm).attr('disabled','disabled');
<br>
+ $('input[name="' + prop + '"]',
templateEditMain).val(value);
<br>
}
<br>
<br>
var vncOpt = [{label: 'VNC', value: 'vnc'}];
<br>
+ $('#template-edit-graphics').append('<option
selected>VNC</option>');
<br>
+
$('#template-edit-graphics').append('<option>Spice</option>');<br>
kimchi.select('template-edit-graphics-list', vncOpt);
<br>
var enableSpice = function() {
<br>
if (kimchi.capabilities == undefined) {
<br>
@@ -61,119 +59,281 @@ kimchi.template_edit_main = function() {
<br>
}
<br>
};
<br>
enableSpice();
<br>
-
<br>
- var scsipools = {};
<br>
- kimchi.listStoragePools(function(result) {
<br>
- var options = [];
<br>
- if (result && result.length) {
<br>
- $.each(result, function(index, storagePool) {
<br>
- if ((storagePool.state=="active")
&& (storagePool.type !== 'kimchi-iso')) {
<br>
- if ((storagePool.type == 'iscsi') ||
(storagePool.type == 'scsi')){
<br>
- scsipools[storagePool.name] = [];
<br>
-
kimchi.listStorageVolumes(storagePool.name, function(result) {
<br>
- if (result &&
result.length) {
<br>
- $.each(result,
function(index, storageVolume) {
<br>
- options.push({
<br>
- label:
storagePool.name + '/' + storageVolume.name,
<br>
- value:
'/storagepools/' + storagePool.name + '/' + storageVolume.name
<br>
- });
<br>
-
scsipools[storagePool.name].push(storageVolume)
<br>
- });
<br>
- }
<br>
-
kimchi.select('template-edit-storagePool-list', options);
<br>
- });
<br>
+ var initStorage = function(result) {
<br>
+ var scsipools = {};
<br>
+ var addStorageItem = function(storageData) {
<br>
+ var thisName;
<br>
+ var thisType;
<br>
+ var thisDisk;
<br>
+ var nodeStorage =
$.parseHTML(kimchi.substitute($('#template-storage-pool-tmpl').html(),
storageData));
<br>
+ $('.template-tab-body',
'#form-template-storage').append(nodeStorage);
<br>
+ $('.edit', '#form-template-storage').button({
<br>
+ icons : {primary : 'ui-icon-pencil'},
<br>
+ text : false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ var storageItem =
$(this).parent().parent();
<br>
+ thisName = $('.template-storage-name',
storageItem).val();
<br>
+ thisType = $('.template-storage-type',
storageItem).val();
<br>
+ thisDisk = $('.template-storage-disk',
storageItem).val();
<br>
+ $('.template-storage-name',
storageItem).hide();
<br>
+ $('.template-storage-disk',
storageItem).attr('readonly', false);
<br>
+ if (thisType === 'iscsi' || thisType ===
'scsi') {
<br>
+ $('.template-storage-disk',
storageItem).attr('readonly', true);
<br>
+ } else {
<br>
+ $('.template-storage-disk',
storageItem).attr('readonly', false);
<br>
+ }
<br>
+ $('.save', storageItem).parent().show();
<br>
+ $('.delete', storageItem).parent().hide();
<br>
+ var selectedStorage = $('select',
storageItem).val();
<br>
+ $('.template-storage-name',
storageItem).val(selectedStorage).hide();
<br>
+ $('select',
storageItem).val(thisName).show();
<br>
+ });
<br>
+ $('.delete', '#form-template-storage').button({
<br>
+ icons : {primary : 'ui-icon-trash'},
<br>
+ text : false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ $(this).parent().parent().remove();
<br>
+ });
<br>
+ $('.cancel', '#form-template-storage').button({
<br>
+ icons : {primary :
'ui-icon-arrowreturnthick-1-w'},
<br>
+ text : false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ var cancelEntity =
$(this).parent().parent();
<br>
+ if ($('.template-storage-name',
cancelEntity).val() === 'null') {
<br>
+ cancelEntity.remove();
<br>
+ } else {
<br>
+ $('select', cancelEntity).hide();
<br>
+ $('.template-storage-name',
cancelEntity).val(thisName).attr('readonly', true).show();
<br>
+ $('.template-storage-type',
cancelEntity).val(thisType).attr('readonly', true);
<br>
+ $('.template-storage-disk',
cancelEntity).val(thisDisk).attr('readonly', true);
<br>
+ $('.save',
cancelEntity).parent().hide();
<br>
+ $('.edit',
cancelEntity).parent().show();
<br>
+ }
<br>
+ });
<br>
+ $('.save', '#form-template-storage').button({
<br>
+ icons : {primary : 'ui-icon-disk'},
<br>
+ text : false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ var storageItem =
$(this).parent().parent();
<br>
+ $('.save', storageItem).parent().hide();
<br>
+ $('.delete', storageItem).parent().show();
<br>
+ var selectedStorage = $('select',
storageItem).val();
<br>
+ $('.template-storage-name',
storageItem).val(selectedStorage).attr('readonly', true).show();
<br>
+ $('.template-storage-disk',
storageItem).attr('readonly', true);
<br>
+ $('.template-storage-type',
storageItem).attr('readonly', true);
<br>
+ $('select', storageItem).hide();
<br>
+ });
<br>
+ var storageOptions = '';
<br>
+ var scsiOptions = '';
<br>
+ $('select',
'#form-template-storage').find('option').remove();
<br>
+ $.each(result, function(index, storageEntities)
{
<br>
+ if((storageEntities.state === 'active')
&& (storageEntities.type != 'kimchi-iso')) {
<br>
+ if(storageEntities.type === 'iscsi' ||
storageEntities.type === 'scsi') {
<br>
+
kimchi.listStorageVolumes(storageEntities.name,
function(currentVolume) {
<br>
+ $.each(currentVolume,
function(indexSCSI, scsiEntities) {
<br>
+ scsiOptions +=
'<option>' + storageEntities.name + '/' +
scsiEntities.name + '</option>';
<br>
+ });
<br>
+ $('select',
'#form-template-storage').append(scsiOptions);
<br>
+ }, function() {});
<br>
+ } else {
<br>
+ var isSlected =
storageEntities.name === 'default' ? ' selected' : '';
<br>
+ storageOptions += '<option' +
isSlected + '>' + storageEntities.name + '</option>';
<br>
}
<br>
- else {
<br>
- options.push({
<br>
- label: storagePool.name,
<br>
- value: '/storagepools/' +
storagePool.name
<br>
- });
<br>
+ }
<br>
+ });
<br>
+ $('select',
'#form-template-storage').append(storageOptions);
<br>
+ $('select',
'#form-template-storage').change(function() {
<br>
+ var selectedItem =
$(this).parent().parent();
<br>
+ var tempStorageName = $(this).val();
<br>
+ tempStorageName
=tempStorageName.split('/')[0];
<br>
+ var scsiCap;
<br>
+ $.each(result, function(index,
storageEntities) {
<br>
+ if (tempStorageName ===
storageEntities.name) {
<br>
+
selectedItem.find('.template-storage-type').val(storageEntities.type);
<br>
+ scsiCap = storageEntities.capacity
/ Math.pow(1024, 3);
<br>
}
<br>
+ })
<br>
+ if (tempStorageName === 'iscsi' ||
tempStorageName === 'scsi') {
<br>
+ $('.template-storage-disk',
selectedItem).attr('readonly', true).val(scsiCap);
<br>
+ } else {
<br>
+ $('.template-storage-disk',
selectedItem).attr('readonly', false).val('10');
<br>
}
<br>
});
<br>
- }
<br>
- if ($.isEmptyObject(scsipools)) {
<br>
- kimchi.select('template-edit-storagePool-list',
options);
<br>
- }
<br>
- });
<br>
- kimchi.listNetworks(function(result) {
<br>
- if(result && result.length > 0) {
<br>
- var html = '';
<br>
- var tmpl = $('#tmpl-network').html();
<br>
- $.each(result, function(index, network) {
<br>
- if (result[index].state === 'active')
<br>
- html += kimchi.substitute(tmpl,
network);
<br>
+ };
<br>
+
<br>
+ if ((origDisks && origDisks.length)
&& (origPool && origPool.length)) {
<br>
+ splitPool = origPool.split('/');
<br>
+ var defaultPool;
<br>
+ var defaultType;
<br>
+ $.each(result, function(index, poolEntities) {
<br>
+ if (poolEntities.name ===
splitPool[splitPool.length-1]) {
<br>
+ defaultType = poolEntities.type;
<br>
+ defaultPool =
splitPool[splitPool.length-1]
<br>
+ }
<br>
});
<br>
-
$('#template-edit-network-list').html(html).show();
<br>
- if(template.networks &&
template.networks.length > 0) {
<br>
- $('input[name="networks"]',
templateEditForm).each(function(index, element) {
<br>
- var value = $(element).val();
<br>
- if(template.networks.indexOf(value)
>= 0) {
<br>
- $(element).prop('checked', true);
<br>
- }
<br>
- });
<br>
+ if (origDisks[0]['volume']) {
<br>
+ defaultPool = defaultPool + '/' +
origDisks[0]['volume'];
<br>
}
<br>
- } else {
<br>
- $('#template-edit-network-list').hide();
<br>
+ $.each(origDisks, function(index, diskEntities)
{
<br>
+ var storageNodeData = {
<br>
+ viewMode : '',
<br>
+ editMode : 'hide',
<br>
+ storageName : defaultPool,
<br>
+ storageType : defaultType,
<br>
+ storageDisk : diskEntities.size
<br>
+ }
<br>
+ addStorageItem(storageNodeData);
<br>
+ });
<br>
+ $('.template-storage-disk').attr('readonly',
true);
<br>
}
<br>
- });
<br>
- });
<br>
<br>
- $('#template-edit-storagePool').change(function() {
<br>
- storagepool = $(this).val();
<br>
- var storageArray = storagepool.split("/");
<br>
- if (storageArray.length > 3) {
<br>
- volumeName = storageArray.pop();
<br>
- poolName = storageArray.pop();
<br>
- kimchi.getStoragePoolVolume(poolName, volumeName,
function(result) {
<br>
- $('input[name="disks"]',
templateEditForm).val(result.capacity / Math.pow(1024,3));
<br>
- $('input[name="disks"]',
templateEditForm).attr('disabled','disabled');
<br>
- return false;
<br>
- }, function (err) {
<br>
- kimchi.message.error(err.responseJSON.reason);
<br>
+ $('#template-edit-storage-add-button').button({
<br>
+ icons: {
<br>
+ primary: "ui-icon-plusthick"
<br>
+ },
<br>
+ text: false,
<br>
+ disabled: true
<br>
+ }).click(function(event) {
<br>
+ event.preventDefault();
<br>
+ var storageNodeData = {
<br>
+ viewMode : 'hide',
<br>
+ editMode : '',
<br>
+ storageName : 'null',
<br>
+ storageType : 'dir',
<br>
+ storageDisk : '10'
<br>
+ }
<br>
+ addStorageItem(storageNodeData);
<br>
});
<br>
- } else {
<br>
- $('input[name="disks"]',
templateEditForm).removeAttr('disabled');
<br>
- $('input[name="disks"]',
templateEditForm).val(templateDiskSize);
<br>
- }
<br>
- });
<br>
- $('input[name="disks"]', templateEditForm).keyup(function()
{
<br>
- templateDiskSize = $('input[name="disks"]',
templateEditForm).val();
<br>
- });
<br>
+ };
<br>
+ var initInterface = function(result) {
<br>
+ var addInterfaceItem = function(networkData) {
<br>
+ var nodeInterface =
$.parseHTML(kimchi.substitute($('#template-interface-tmpl').html(),
networkData));
<br>
+ $('.template-tab-body',
'#form-template-interface').append(nodeInterface);
<br>
+ $('.edit', '#form-template-interface').button({
<br>
+ icons : {primary : 'ui-icon-pencil'},
<br>
+ text : false,
<br>
+ disabled : true
<br>
+ });
<br>
+ $('.delete',
'#form-template-interface').button({
<br>
+ icons : {primary : 'ui-icon-trash'},
<br>
+ text : false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ $(this).parent().parent().remove();
<br>
+ });
<br>
+ $('.cancel',
'#form-template-interface').button({
<br>
+ icons : {primary :
'ui-icon-arrowreturnthick-1-w'},
<br>
+ text : false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ $(this).parent().parent().remove();
<br>
+ });
<br>
+ $('.save', '#form-template-interface').button({
<br>
+ icons : {primary : 'ui-icon-disk'},
<br>
+ text : false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ var interItem = $(this).parent().parent();
<br>
+ $('.save', interItem).parent().hide();
<br>
+ $('.delete', interItem).parent().show();
<br>
+ var selectedInterface = $('select',
interItem).val();
<br>
+ $('.template-interface-name',
interItem).val(selectedInterface).show();
<br>
+ $('select', interItem).hide();
<br>
+ });
<br>
+ var networkOptions = '';
<br>
+ for(var i=0;i<result.length;i++){
<br>
+ if(result[i].state === "active") {
<br>
+ var isSlected = i==0 ? ' selected' :
'';
<br>
+ networkOptions += '<option' +
isSlected + '>' + result[i].name + '</option>';
<br>
+ }
<br>
+ }
<br>
+ $('select',
'#form-template-interface').find('option').remove();
<br>
+ $('select',
'#form-template-interface').append(networkOptions);
<br>
+ };
<br>
+ if(result && result.length > 0) {
<br>
+ $.each(result, function(index, data) {
<br>
+ if($.inArray(data.name, origNetworks) >
-1) {
<br>
+ addInterfaceItem({
<br>
+ mac : '',
<br>
+ network : data.name,
<br>
+ type : 'network',
<br>
+ viewMode : '',
<br>
+ editMode : 'hide'
<br>
+ });
<br>
+ }
<br>
+ });
<br>
+ }
<br>
+ $('#template-edit-interface-add-button').button({
<br>
+ icons: {
<br>
+ primary: 'ui-icon-plusthick'
<br>
+ },
<br>
+ text: false
<br>
+ }).click(function(evt) {
<br>
+ evt.preventDefault();
<br>
+ addInterfaceItem({
<br>
+ mac : '',
<br>
+ network : '',
<br>
+ type : 'network',
<br>
+ viewMode : 'hide',
<br>
+ editMode : ''
<br>
+ });
<br>
+ });
<br>
+ };
<br>
+ kimchi.listNetworks(initInterface);
<br>
+ kimchi.listStoragePools(initStorage);
<br>
+ };
<br>
+ kimchi.retrieveTemplate(kimchi.selectedTemplate,
initTemplate);
<br>
+
<br>
<br>
$('#tmpl-edit-button-save').on('click', function() {
<br>
- var editableFields = [ 'name', 'cpus', 'memory',
'storagepool', 'disks', 'graphics'];
<br>
+ var editableFields = [ 'name', 'cpus', 'memory',
'disks', 'graphics'];
<br>
var data = {};
<br>
+ //Fix me: Only support one storage pool now
<br>
+ var storages = $('.template-tab-body .item',
'#form-template-storage');
<br>
+ var tempName = $('.template-storage-name',
storages).val();
<br>
+ tempName = tempName.split('/');
<br>
+ var tempNameHead =tempName[0];
<br>
+ var tempNameTail = tempNameHead;
<br>
+ if(tempNameHead === 'iscsi' || tempNameHead =='scsi') {
<br>
+ tempNameTail = tempName[tempName.length-1];
<br>
+ }
<br>
+ tempName = '/storagepools/' + tempNameHead;
<br>
+ data['storagepool'] = tempName;
<br>
$.each(editableFields, function(i, field) {
<br>
/* Support only 1 disk at this moment */
<br>
if (field == 'disks') {
<br>
- origDisks[0].size =
Number($('#form-template-edit [name="' + field + '"]').val());
<br>
+ var tmpItem = $('#form-template-storage
.item');
<br>
+ origDisks[0].size =
Number($('.template-storage-disk', tmpItem).val());
<br>
+ if($('.template-storage-type', tmpItem).val()
=== 'iscsi' || $('.template-storage-type', tmpItem).val()
=='scsi') {
<br>
+ origDisks[0]['volume'] = tempNameTail;
<br>
+ } else {
<br>
+ origDisks[0]['volume'] && delete
origDisks[0]['volume'];
<br>
+ }
<br>
data[field] = origDisks;
<br>
}
<br>
else if (field == 'graphics') {
<br>
- var type = $('#form-template-edit [name="' +
field + '"]').val();
<br>
+ var type = $('#form-template-general [name="' +
field + '"]').val();
<br>
data[field] = {'type': type};
<br>
}
<br>
else {
<br>
- data[field] = $('#form-template-edit [name="' +
field + '"]').val();
<br>
+ data[field] = $('#form-template-general [name="'
+ field + '"]').val();
<br>
}
<br>
});
<br>
data['memory'] = Number(data['memory']);
<br>
data['cpus'] = Number(data['cpus']);
<br>
- storagepool = data['storagepool'];
<br>
- storageArray = storagepool.split("/");
<br>
- if (storageArray.length > 3){
<br>
- /* Support only 1 disk at this moment */
<br>
- data["disks"][0].volume = storageArray.pop();
<br>
- data['storagepool'] = storageArray.join("/");
<br>
- } else if (data["disks"][0].volume) {
<br>
- delete data["disks"][0].volume;
<br>
- }
<br>
- var networks =
templateEditForm.serializeObject().networks;
<br>
- if (networks instanceof Array) {
<br>
- data.networks = networks;
<br>
- } else if (networks != null) {
<br>
- data.networks = [networks];
<br>
+ var networks = $('.template-tab-body .item',
'#form-template-interface');
<br>
+ var networkForUpdate = new Array();
<br>
+ $.each(networks, function(index, networkEntities) {
<br>
+ networkForUpdate.push($('.template-interface-name',
networkEntities).val());
<br>
+ });
<br>
+ if (networkForUpdate instanceof Array) {
<br>
+ data.networks = networkForUpdate;
<br>
+ } else if (networkForUpdate != null) {
<br>
+ data.networks = [networkForUpdate];
<br>
} else {
<br>
data.networks = [];
<br>
}
<br>
diff --git a/ui/pages/template-edit.html.tmpl
b/ui/pages/template-edit.html.tmpl
<br>
index 5a71d91..018ac10 100644
<br>
--- a/ui/pages/template-edit.html.tmpl
<br>
+++ b/ui/pages/template-edit.html.tmpl
<br>
@@ -28,74 +28,67 @@
<br>
<div class="close">X</div>
<br>
</header>
<br>
<div class="content">
<br>
- <form id="form-template-edit">
<br>
+ <div id="edit-template-tabs">
<br>
<input type="hidden" id="template-name"
name="templateName" />
<br>
- <fieldset class="template-edit-fieldset">
<br>
- <div>
<br>
+ <ul>
<br>
+ <li>
<br>
+ <a
href="#form-template-general">$_("General")</a>
<br>
+ </li>
<br>
+ <li>
<br>
+ <a
href="#form-template-storage">$_("Storage")</a>
<br>
+ </li>
<br>
+ <li>
<br>
+ <a
href="#form-template-interface">$_("Interface")</a>
<br>
+ </li>
<br>
+ </ul>
<br>
+ <form id="form-template-general">
<br>
+ <div
class="form-template-inline-wrapper">
<br>
<div
class="template-edit-wrapper-label">
<br>
<label
for="template-edit-id-textbox">$_("Name")</label>
<br>
</div>
<br>
- <div
class="template-edit-wrapper-controls">
<br>
- <input id="template-edit-id-textbox"
name="name" type="text" />
<br>
- </div>
<br>
- </div>
<br>
- <div>
<br>
<div
class="template-edit-wrapper-label">
<br>
<label
for="template-edit-vendor-textbox">$_("Vendor")</label>
<br>
</div>
<br>
- <div
class="template-edit-wrapper-controls">
<br>
- <input
id="template-edit-vendor-textbox" name="os_distro" type="text"
disabled="disabled" />
<br>
- </div>
<br>
- </div>
<br>
- <div>
<br>
<div
class="template-edit-wrapper-label">
<br>
<label
for="template-edit-version-textbox">$_("Version")</label>
<br>
</div>
<br>
- <div
class="template-edit-wrapper-controls">
<br>
- <input
id="template-edit-version-textbox" name="os_version" type="text"
disabled="disabled" />
<br>
- </div>
<br>
- </div>
<br>
- <div>
<br>
<div
class="template-edit-wrapper-label">
<br>
<label
for="template-edit-cpu-textbox">$_("CPU
Number")</label>
<br>
</div>
<br>
- <div
class="template-edit-wrapper-controls">
<br>
- <input
id="template-edit-cpu-textbox" name="cpus" type="text" />
<br>
- </div>
<br>
- </div>
<br>
- <div>
<br>
<div
class="template-edit-wrapper-label">
<br>
<label
for="template-edit-memory-textbox">$_("Memory
(MB)")</label>
<br>
</div>
<br>
- <div
class="template-edit-wrapper-controls">
<br>
- <input
id="template-edit-memory-textbox" name="memory" type="text"
/>
<br>
+ <div class="template-edit-wrapper-label
templ-edit-cdrom">
<br>
+ <label
for="template-edit-cdrom-textbox">$_("CDROM")</label>
<br>
+ </div>
<br>
+ <div class="template-edit-wrapper-label
templ-edit-vm-image hide">
<br>
+ <label
for="template-edit-vmimage-textbox">$_("Image
File")</label>
<br>
</div>
<br>
- </div>
<br>
- <div>
<br>
<div
class="template-edit-wrapper-label">
<br>
- <label
for="template-edit-disk-textbox">$_("Disk
(GB)")</label>
<br>
+
<label>$_("Graphics")</label>
<br>
</div>
<br>
+ </div>
<br>
+ <div
class="form-template-inline-wrapper">
<br>
<div
class="template-edit-wrapper-controls">
<br>
- <input
id="template-edit-disk-textbox" name="disks" type="text" />
<br>
+ <input id="template-edit-id-textbox"
name="name" type="text" />
<br>
</div>
<br>
- </div>
<br>
- </fieldset>
<br>
- <fieldset class="template-edit-fieldset">
<br>
- <div id="templ-edit-cdrom">
<br>
- <div
class="template-edit-wrapper-label">
<br>
- <label
for="template-edit-cdrom-textbox">$_("CDROM")</label>
<br>
+ <div
class="template-edit-wrapper-controls">
<br>
+ <input
id="template-edit-vendor-textbox" name="os_distro" type="text"
disabled="disabled" />
<br>
</div>
<br>
<div
class="template-edit-wrapper-controls">
<br>
- <input
id="template-edit-cdrom-textbox" name="cdrom" type="text"
disabled="disabled"/>
<br>
+ <input
id="template-edit-version-textbox" name="os_version" type="text"
disabled="disabled" />
<br>
</div>
<br>
- </div>
<br>
- <div id="templ-edit-vm-image"
class="hide-content">
<br>
- <div
class="template-edit-wrapper-label">$_("Image
File")</div>
<br>
- <div
class="template-edit-wrapper-controls"><input
name="vm-image" type="text" disabled/></div>
<br>
- </div>
<br>
- <div>
<br>
- <div
class="template-edit-wrapper-label">
<br>
-
<label>$_("Graphics")</label>
<br>
+ <div
class="template-edit-wrapper-controls">
<br>
+ <input
id="template-edit-cpu-textbox" name="cpus" type="text" />
<br>
+ </div>
<br>
+ <div
class="template-edit-wrapper-controls">
<br>
+ <input
id="template-edit-memory-textbox" name="memory" type="text"
/>
<br>
+ </div>
<br>
+ <div
class="template-edit-wrapper-controls templ-edit-cdrom">
<br>
+ <input
id="template-edit-cdrom-textbox" name="cdrom" type="text"
disabled="disabled" />
<br>
+ </div>
<br>
+ <div
class="template-edit-wrapper-controls templ-edit-vm-image
hide">
<br>
+ <input
id="template-edit-vmimage-textbox" name="vm-image" type="text"
disabled="disabled" />
<br>
</div>
<br>
<div
class="template-edit-wrapper-controls">
<br>
<div class="btn dropdown
popable">
<br>
@@ -108,40 +101,26 @@
<br>
</div>
<br>
</div>
<br>
</div>
<br>
- <div>
<br>
- <div
class="template-edit-wrapper-label">
<br>
- <label>$_("Storage
Pool")</label>
<br>
- </div>
<br>
- <div
class="template-edit-wrapper-controls">
<br>
- <div class="btn dropdown
popable">
<br>
- <input
id="template-edit-storagePool" name="storagepool" type="hidden"
/>
<br>
- <span class="text"
id="template-edit-storage-label"></span><span
class="arrow"></span>
<br>
- <div class="popover"
style="width: 100%">
<br>
- <ul class="select-list"
id="template-edit-storagePool-list"
data-target="template-edit-storagePool"
data-label="template-edit-storage-label">
<br>
- </ul>
<br>
- </div>
<br>
- </div>
<br>
- </div>
<br>
+ </form>
<br>
+ <form id="form-template-storage">
<br>
+ <div class="template-tab-header">
<br>
+ <span
class="template-storage-cell">$_("Storage Pool")</span>
<br>
+ <span
class="template-storage-cell">$_("Type")</span>
<br>
+ <span
class="template-storage-cell">$_("Disk(GB)")</span>
<br>
+ <button type="button"
id="template-edit-storage-add-button"
class="action-area"></button>
<br>
</div>
<br>
- <div>
<br>
- <div
class="template-edit-wrapper-label">
<br>
-
<label>$_("Network")</label>
<br>
- </div>
<br>
- <div
class="template-edit-wrapper-controls">
<br>
- <ul class="select-list-box"
id="template-edit-network-list">
<br>
- </ul>
<br>
- <script id="tmpl-network"
type="text/html">
<br>
- <li>
<br>
- <label>
<br>
- <input name="networks"
type="checkbox" value="{name}" />
<br>
- <span
class="item">{name}</span>
<br>
- </label>
<br>
- </li>
<br>
- </script>
<br>
- </div>
<br>
+ <div class="template-tab-body">
<br>
</div>
<br>
- </fieldset>
<br>
- </form>
<br>
+ </form>
<br>
+ <form id="form-template-interface">
<br>
+ <div class="template-tab-header">
<br>
+ <span
class="template-interface-cell">$_("Network")</span>
<br>
+ <span
class="template-interface-cell">$_("Type")</span>
<br>
+ <button type="button"
id="template-edit-interface-add-button"
class="action-area"></button>
<br>
+ </div>
<br>
+ <div
class="template-tab-body"></div>
<br>
+ </form>
<br>
+ </div>
<br>
</div>
<br>
<footer>
<br>
<div class="btn-group">
<br>
@@ -152,3 +131,40 @@
<br>
<script>
<br>
kimchi.template_edit_main();
<br>
</script>
<br>
+<script id="template-storage-pool-tmpl" type="text/html">
<br>
+ <div class='item'>
<br>
+ <span class="template-storage-cell">
<br>
+ <input class="template-storage-name {viewMode}"
value={storageName} readonly=true type="text"/>
<br>
+ <select class="{editMode}"></select>
<br>
+ </span>
<br>
+ <span class="template-storage-cell">
<br>
+ <input class="template-storage-type"
value={storageType} readonly=true type="text" />
<br>
+ </span>
<br>
+ <span class="template-storage-cell">
<br>
+ <input class="template-storage-disk"
value={storageDisk} type="text" />
<br>
+ </span>
<br>
+ <span class="action-area {editMode}">
<br>
+ <button
class="save"></button><button
class="cancel"></button>
<br>
+ </span>
<br>
+ <span class="action-area {viewMode}">
<br>
+ <button
class="edit"></button><button
class="delete"></button>
<br>
+ </span>
<br>
+ </div>
<br>
+</script>
<br>
+<script id="template-interface-tmpl" type="text/html">
<br>
+ <div class="item">
<br>
+ <span class="template-interface-cell">
<br>
+ <input class="template-interface-name
{viewMode}" readonly="true" type="text" value={network} />
<br>
+ <select class="{editMode}"></select>
<br>
+ </span>
<br>
+ <span class="template-interface-cell">
<br>
+ <input value={type} readonly=true type="text"
/>
<br>
+ </span>
<br>
+ <span class="action-area {editMode}">
<br>
+ <button
class="save"></button><button
class="cancel"></button>
<br>
+ </span>
<br>
+ <span class="action-area {viewMode}">
<br>
+ <button
class="edit"></button><button
class="delete"></button>
<br>
+ </span>
<br>
+ </div>
<br>
+</script>
<br>
\ No newline at end of file
<br>
</blockquote>
<br>
<br>
</blockquote>
<br>
</body>
</html>