On 17/04/2015 00:05, Rodrigo Trujillo wrote:
This patch adds a new field (Disk Format) in Storage tab in Template edit window. Users will then be allowed to select any disk format supported by Libvirt and Kimchi backend. The default disk format is qcow2 (first option), so, for compatibility, if the template register in objecstore does not contain the disk format information, the new field is going to set 'qcow2' automatically. For iscsi storagepools, the new field is going to be disabled and the format is going to be set automatically as 'raw', just like the backend behaves currently, avoiding errors.
Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo@linux.vnet.ibm.com> --- ui/css/theme-default/template-edit.css | 8 ++++-- ui/js/src/kimchi.template_edit_main.js | 52 ++++++++++++++++++++++++++++++---- ui/pages/template-edit.html.tmpl | 16 +++++++++++ 3 files changed, 68 insertions(+), 8 deletions(-)
diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css index 7abee7c..ed9f02c 100644 --- a/ui/css/theme-default/template-edit.css +++ b/ui/css/theme-default/template-edit.css @@ -95,7 +95,7 @@
#edit-template-tabs .template-storage-cell{ display: inline-block; - width: 230px; + width: 180px; }
#edit-template-tabs .template-storage-cell label { @@ -114,7 +114,11 @@ }
#form-template-storage .template-tab-body .template-storage-name { - width: 220px; + width: 170px; +} + +#form-template-storage .template-tab-body .template-storage-disk-format { + width: 160px; }
#edit-template-tabs .template-tab-body input[readonly] { diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index 85f76cd..6029a95 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -67,7 +67,7 @@ kimchi.template_edit_main = function() { $('.template-tab-body', '#form-template-storage').append(nodeStorage); var storageOptions = ''; var scsiOptions = ''; - $('select', '#form-template-storage').find('option').remove(); + $('select:first', '#form-template-storage').find('option').remove();
It is really dangerous to do that (assuming that will always be the first select element in the form) I suggest to add an id to the select elements in the form to distinguish them and then use the id to get the element.
$.each(result, function(index, storageEntities) { if((storageEntities.state === 'active') && (storageEntities.type != 'kimchi-iso')) { if(storageEntities.type === 'iscsi' || storageEntities.type === 'scsi') { @@ -77,7 +77,7 @@ kimchi.template_edit_main = function() { var isSlected = tmpPath === thisName ? ' selected' : ''; scsiOptions += '<option' + isSlected + '>' + tmpPath + '</option>'; }); - $('select', '#form-template-storage').append(scsiOptions); + $('select:first', '#form-template-storage').append(scsiOptions);
Same as commented above,
}, function() {}); } else { var isSlected = storageEntities.name === thisName ? ' selected' : ''; @@ -85,8 +85,20 @@ kimchi.template_edit_main = function() { } } }); - $('select', '#form-template-storage').append(storageOptions); - $('select', '#form-template-storage').change(function() { + $('select:first', '#form-template-storage').append(storageOptions); + + // Set disk format + $('select:last option', '#form-template-storage').each(function() { + if ($(this).text() == storageData.storageDiskFormat) { + $(this).prop('selected', true); + } + }); + + $('select:last', '#form-template-storage').change(function() { + $('.template-storage-disk-format').val($(this).val()); + }); + + $('select:first', '#form-template-storage').change(function() { var selectedItem = $(this).parent().parent(); var tempStorageNameFull = $(this).val(); var tempName = tempStorageNameFull.split('/'); @@ -99,9 +111,25 @@ kimchi.template_edit_main = function() { kimchi.getStoragePoolVolume(tempStorageName, tempName[tempName.length-1], function(info) { volSize = info.capacity / Math.pow(1024, 3); $('.template-storage-disk', selectedItem).attr('readonly', true).val(volSize);
+ $('select:last option', selectedItem).each(function() { + this.selected = (this.text == 'raw'); + });
Why do you need a loop to set the right value on select element?
+ $('select:last', selectedItem).prop('disabled', true).change(); }); + } else if (tempType === 'logical') { + $('.template-storage-disk', selectedItem).attr('readonly', false);
+ $('select:last option', selectedItem).each(function() { + this.selected = (this.text == 'raw'); + });
Same question as above
+ $('select:last', selectedItem).prop('disabled', true).change(); } else { $('.template-storage-disk', selectedItem).attr('readonly', false);
+ if ($('select:last', selectedItem).prop('disabled') == true) {
Does this 'if' statement is really needed? I mean, the last case if for any read-only pool which means the format drop box will be always enabled. Do you see an user case where it should be disabled?
+ $('select:last option', selectedItem).each(function() { + this.selected = (this.text == 'qcow2'); + });
Same question about the loop to set the right value on select element
+ $('select:last', selectedItem).prop('disabled', false).change(); + } } }); }); @@ -120,7 +148,8 @@ kimchi.template_edit_main = function() { editMode : 'hide', storageName : defaultPool, storageType : defaultType, - storageDisk : diskEntities.size + storageDisk : diskEntities.size, + storageDiskFormat : diskEntities.format ? diskEntities.format : 'qcow2' }
if (diskEntities.volume) { @@ -131,7 +160,17 @@ kimchi.template_edit_main = function() { nodeData.storageDisk = volSize; addStorageItem(nodeData); $('.template-storage-disk').attr('readonly', true); + $('select:last option', '#form-template-storage').each(function() { + this.selected = (this.text == 'raw'); + }); + $('select:last', '#form-template-storage').prop('disabled', true).change(); + }); + } else if (defaultType === 'logical') { + addStorageItem(storageNodeData); + $('select:last option', '#form-template-storage').each(function() { + this.selected = (this.text == 'raw'); }); + $('select:last', '#form-template-storage').prop('disabled', true).change(); } else { addStorageItem(storageNodeData); } @@ -271,7 +310,8 @@ kimchi.template_edit_main = function() { origDisks[0]['volume'] && delete origDisks[0]['volume']; origDisks[0].size = Number($('.template-storage-disk', tmpItem).val()); } - data[field] = origDisks; + origDisks[0].format = $('.template-storage-disk-format', tmpItem).val(); + data[field] = origDisks; } else if (field == 'graphics') { var type = $('#form-template-general [name="' + field + '"]').val(); diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index c7832c9..e64a30f 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -104,6 +104,7 @@ <span class="template-storage-cell">$_("Storage Pool")</span> <span class="template-storage-cell">$_("Type")</span> <span class="template-storage-cell">$_("Disk(GB)")</span> + <span class="template-storage-cell">$_("Disk Format")</span> <button type="button" id="template-edit-storage-add-button" class="action-area"></button> </div> <div class="template-tab-body"> @@ -160,6 +161,21 @@ <span class="template-storage-cell"> <input class="template-storage-disk" value={storageDisk} type="text" /> </span> + <span class="template-storage-cell"> + <input class="template-storage-disk-format" value={storageDiskFormat} type="text" style="display:none" /> + <select> + <option>qcow2</option> + <option>raw</option> + <option>bochs</option> + <option>cloop</option> + <option>cow</option> + <option>dmg</option> + <option>qcow</option> + <option>qed</option> + <option>vmdk</option> + <option>vpc</option> + </select> + </span> </div> </script> <script id="template-interface-tmpl" type="text/html">