[Kimchi-devel] [PATCH V2] UI-Template Edit: Enable user to change disk format

Rodrigo Trujillo rodrigo.trujillo at linux.vnet.ibm.com
Fri Apr 17 03:05:11 UTC 2015


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 at 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();
                 $.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);
                             }, 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');
+                                });
+                                $('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');
+                            });
+                            $('select:last', selectedItem).prop('disabled', true).change();
                         } else {
                             $('.template-storage-disk', selectedItem).attr('readonly', false);
+                            if ($('select:last', selectedItem).prop('disabled') == true) {
+                                $('select:last option', selectedItem).each(function() {
+                                    this.selected = (this.text == 'qcow2');
+                                });
+                                $('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">
-- 
2.1.0




More information about the Kimchi-devel mailing list