Re: [Kimchi-devel] [PATCH V2] Edit Template redefined

Hi Aline, When using iSCSI or SCSI, the disk size is read from the response and the input is disabled:

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(a)linux.vnet.ibm.com&gt; >> >> 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(a)linux.vnet.ibm.com&gt; >> --- >> 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 > >