[Kimchi-devel] [PATCH V4] Edit Template redefined

Tuesday, 18 November 2014

From: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt;

V3 -> V4:
1) Deleted "save" icon for storage & interface tab.
2) Fix the bug when submitting multiple network error. Filter the
duplicated submission.

V2 -> V3:
Fix the bug that iscsi and scsi disk size won't change automatically

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 |  286 ++++++++++++++++++++-----------
 ui/pages/template-edit.html.tmpl       |  158 +++++++++---------
 3 files changed, 344 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..070ba20 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,203 @@ 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);
-                            });
-                        }
-                        else {
-                            options.push({
-                                label: storagePool.name,
-                                value: '/storagepools/' + storagePool.name
-                            });
+        var initStorage = function(result) {
+            var scsipools = {};
+            var addStorageItem = function(storageData) {
+                var thisName = storageData.storageName;
+                var nodeStorage =
$.parseHTML(kimchi.substitute($('#template-storage-pool-tmpl').html(),
storageData));
+                $('.template-tab-body',
'#form-template-storage').append(nodeStorage);
+                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)
{
+                                    var tmpPath = storageEntities.name + '/' +
scsiEntities.name;
+                                    var isSlected = tmpPath === thisName ? '
selected' : '';
+                                    scsiOptions += '<option' + isSlected +
'>' + tmpPath + '</option>';
+                                });
+                                $('select',
'#form-template-storage').append(scsiOptions);
+                            }, function() {});
+                        } else {
+                            var isSlected = storageEntities.name === thisName ? '
selected' : '';
+                            storageOptions += '<option' + isSlected +
'>' + storageEntities.name + '</option>';
                         }
                     }
                 });
-            }
-            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);
-                });
-                $('#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);
+                $('select',
'#form-template-storage').append(storageOptions);
+                $('select', '#form-template-storage').change(function()
{
+                    var selectedItem = $(this).parent().parent();
+                    var tempStorageNameFull = $(this).val();
+                    var tempType;
+                    var tempStorageName =tempStorageNameFull.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);
+                            tempType = storageEntities.type;
                         }
                     });
+                    if (tempType === 'iscsi' || tempType === 'scsi') {
+                        $('.template-storage-disk',
selectedItem).attr('readonly', true).val(scsiCap);
+                    } else {
+                        $('.template-storage-disk',
selectedItem).attr('readonly', false).val('10');
+                    }
+                    $('.template-storage-name').val(tempStorageNameFull);
+                });
+            };
+
+            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]
+                    }
+                });
+                if (origDisks[0]['volume']) {
+                    defaultPool = defaultPool + '/' +
origDisks[0]['volume'];
+                }
+                $.each(origDisks, function(index, diskEntities) {
+                    var storageNodeData = {
+                        viewMode : '',
+                        editMode : 'hide',
+                        storageName : defaultPool,
+                        storageType : defaultType,
+                        storageDisk : diskEntities.size
+                    }
+                    addStorageItem(storageNodeData);
+                });
+                if(defaultType === 'iscsi' || defaultType === 'scsi') {
+                    $('.template-storage-disk').attr('readonly', true);
                 }
-            } else {
-                $('#template-edit-network-list').hide();
             }
-        });
-    });
 
-    $('#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 networkItemNum = 0;
+            var addInterfaceItem = function(networkData) {
+                var networkName = networkData.networkV;
+                var nodeInterface =
$.parseHTML(kimchi.substitute($('#template-interface-tmpl').html(),
networkData));
+                $('.template-tab-body',
'#form-template-interface').append(nodeInterface);
+                $('.delete', '#form-template-interface').button({
+                    icons : {primary : 'ui-icon-trash'},
+                    text : false
+                }).click(function(evt) {
+                    evt.preventDefault();
+                    $(this).parent().parent().remove();
+                });
+                var networkOptions = '';
+                for(var i=0;i<result.length;i++){
+                    if(result[i].state === "active") {
+                        var isSlected = networkName===result[i].name ? '
selected' : '';
+                        networkOptions += '<option' + isSlected +
'>' + result[i].name + '</option>';
+                    }
+                }
+                $('select', '#form-template-interface #networkID' +
networkItemNum).append(networkOptions);
+                networkItemNum += 1;
+            };
+            if(result && result.length > 0) {
+                $.each(result, function(index, data) {
+                    if($.inArray(data.name, origNetworks) > -1) {
+                        addInterfaceItem({
+                            networkID : 'networkID' + networkItemNum,
+                            networkV : data.name,
+                            type : 'network'
+                        });
+                    }
+                });
+            }
+            $('#template-edit-interface-add-button').button({
+                icons: {
+                    primary: 'ui-icon-plusthick'
+                },
+                text: false
+            }).click(function(evt) {
+                evt.preventDefault();
+                addInterfaceItem({
+                    networkID : 'networkID' + networkItemNum,
+                    networkV : 'default',
+                    type : 'network'
+                });
+            });
+        };
+        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) {
+            var thisValue = $('select', networkEntities).val();
+            if($.inArray(thisValue, networkForUpdate) === -1) {
+                networkForUpdate.push(thisValue);
+            }
+        });
+        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..3515546 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,30 @@
 <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" value={storageName}
type="text" style="display:none" />
+            <select></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>
+    </div>
+</script>
+<script id="template-interface-tmpl" type="text/html">
+    <div class="item" id={networkID}>
+        <span class="template-interface-cell">
+            <select></select>
+        </span>
+        <span class="template-interface-cell">
+            <input value={type} readonly=true type="text" />
+        </span>
+        <span class="action-area">
+            <button class="delete"></button>
+        </span>
+    </div>
+</script>
\ No newline at end of file
-- 
1.7.1


    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

[Kimchi-devel] [PATCH V4] Edit Template redefined