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