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

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