[Kimchi-devel] [PATCH V2] Edit Template redefined
Wen Wang
wenwang at linux.vnet.ibm.com
Fri Nov 14 01:43:23 UTC 2014
I have sent a V3 patch that fix this. Please refer to :
[PATCH V3] Edit Template redefined
Best Regards
Wang Wen
On 11/12/2014 7:35 PM, Aline Manera wrote:
>
> 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/20141114/6663b9f1/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 6669 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20141114/6663b9f1/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/20141114/6663b9f1/attachment.png>
More information about the Kimchi-devel
mailing list