[Kimchi-devel] [PATCHv2 2/3] UI: Support add guest disk

lvroyce at linux.vnet.ibm.com lvroyce at linux.vnet.ibm.com
Tue Apr 22 09:05:41 UTC 2014


From: Royce Lv <lvroyce at linux.vnet.ibm.com>

Extend current cdrom disk add to cdrom disk attachment.
Also add 'bus' for user to choose from.

Signed-off-by: Royce Lv <lvroyce at linux.vnet.ibm.com>
---
 ui/css/theme-default/guest-storage-add.css |  16 +++++
 ui/js/src/kimchi.guest_storage_add.main.js | 110 +++++++++++++++++++++++++++--
 ui/pages/guest-storage-add.html.tmpl       |  50 ++++++++++++-
 3 files changed, 168 insertions(+), 8 deletions(-)

diff --git a/ui/css/theme-default/guest-storage-add.css b/ui/css/theme-default/guest-storage-add.css
index 4da8389..e0be9c0 100644
--- a/ui/css/theme-default/guest-storage-add.css
+++ b/ui/css/theme-default/guest-storage-add.css
@@ -52,6 +52,22 @@
     cursor: not-allowed;
 }
 
+.guest-storage-add-wrapper-label, .guest-storage-add-wrapper-controls {
+    display: inline-block;
+}
+
+.guest-storage-add-wrapper-label {
+    height: 38px;
+    line-height: 38px;
+    margin-top: 5px;
+    vertical-align: top;
+    width: 80px;
+}
+
+.guest-storage-add-wrapper-controls {
+    width: 470px;
+}
+
 #vm-storage-button-add[disabled] {
     background: #c0c0c0;
     color: #ddd;
diff --git a/ui/js/src/kimchi.guest_storage_add.main.js b/ui/js/src/kimchi.guest_storage_add.main.js
index 9e232d7..1f04e55 100644
--- a/ui/js/src/kimchi.guest_storage_add.main.js
+++ b/ui/js/src/kimchi.guest_storage_add.main.js
@@ -18,25 +18,123 @@
 kimchi.guest_storage_add_main = function() {
     var types = [{
         label: 'cdrom',
-        value: 'cdrom'
+        value: 'cdrom',
+        bus: ['ide']
+    },
+    {
+        label: 'disk',
+        value: 'disk',
+        bus: ['virtio', 'ide']
     }];
     kimchi.select('guest-storage-type-list', types);
+    kimchi.select('guest-storage-bus-list', [{label: 'ide', value: 'ide'}]);
 
     var storageAddForm = $('#form-guest-storage-add');
     var submitButton = $('#guest-storage-button-add');
     var nameTextbox = $('input[name="dev"]', storageAddForm);
     var typeTextbox = $('input[name="type"]', storageAddForm);
+    var busTextbox = $('input[name="bus"]', storageAddForm);
     var pathTextbox = $('input[name="path"]', storageAddForm);
+    var poolTextbox = $('input[name="storagepool"]', storageAddForm);
+    var volTextbox = $('input[name="storagevol"]', storageAddForm);
+
+    typeTextbox.change(function() {
+        $('#guest-storage-bus').selectMenu();
+        var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'}
+        var selectType = $(this).val();
+        $.each(pathObject, function(type, value) {
+            if(selectType == type){
+                $(value).removeClass('hidden');
+            } else {
+                $(value).addClass('hidden');
+            }
+        });
+
+        $.each(types, function(index, elem){
+            if (selectType == elem.value) {
+                var buses = new Array();
+                $.each(elem.bus, function (index, elem) {
+                    buses[index] = {label: elem, value: elem};
+                });
+                $('#guest-storage-bus').selectMenu("setData", buses);
+                $('#guest-storage-bus-label').text(buses[0].value);
+                $('#guest-storage-bus-type').val(buses[0].value);
+            }
+        });
+    });
+
+    kimchi.listStoragePools(function(result) {
+        var options = [];
+        if (result && result.length) {
+            $.each(result, function(index, storagePool) {
+                if ((storagePool.state=="active") && (storagePool.type !== 'kimchi-iso')) {
+                    options.push({
+                        label: storagePool.name,
+                        value: storagePool.name
+                        });
+                    }
+                });
+                kimchi.select('guest-add-storage-pool-list', options);
+        }
+    });
+
+    poolTextbox.change(function() {
+        var options = [];
+        kimchi.listStorageVolumes($(this).val(), function(result) {
+            $('#guest-disk').selectMenu();
+            if (result.length) {
+                $.each(result, function(index, value) {
+                    // Only unused volume can be attached
+                    if (value.ref_cnt == 0) {
+                        options.push({
+                            label: value.name,
+                            value: value.path
+                          });
+                    }
+                });
+            }
+            $('#guest-disk').selectMenu("setData", options);
+        });
+    });
+
+    volTextbox.change(function () {
+        pathTextbox.val(volTextbox.val());
+        pathTextbox.change();
+    });
+
+    typeTextbox.change(function() {
+        var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'}
+        var selectType = $(this).val();
+        $.each(pathObject, function(type, value) {
+            if(selectType == type){
+                $(value).removeClass('hidden');
+            } else {
+                $(value).addClass('hidden');
+            }
+        });
+
+        $.each(types, function(index, elem){
+            if (selectType == elem.value) {
+                var buses = new Array();
+                $.each(elem.bus, function (index, elem) {
+                    buses[index] = {label: elem, value: elem};
+                });
+                $('#guest-storage-bus').selectMenu("setData", buses);
+                $('#guest-storage-bus-label').text(buses[0].value);
+            }
+        });
+    });
 
     var submitForm = function(event) {
-        if(submitButton.prop('disabled')) {
+        if (submitButton.prop('disabled')) {
             return false;
         }
 
         var dev = nameTextbox.val();
         var type = typeTextbox.val();
         var path = pathTextbox.val();
-        if(!path || path === '') {
+        var bus = busTextbox.val();
+        if (!path || path === '') {
             return false;
         }
 
@@ -49,13 +147,13 @@ kimchi.guest_storage_add_main = function() {
         var settings = {
             vm: kimchi.selectedGuest,
             type: type,
-            path: path
+            path: path,
+            bus: bus
         };
 
         if(dev && dev !== '') {
             settings['dev'] = dev;
         }
-
         kimchi.addVMStorage(settings, function(result) {
             kimchi.window.close();
             kimchi.topic('kimchi/vmCDROMAttached').publish({
@@ -77,7 +175,7 @@ kimchi.guest_storage_add_main = function() {
 
     storageAddForm.on('submit', submitForm);
     submitButton.on('click', submitForm);
-    pathTextbox.on('input propertychange', function(event) {
+    pathTextbox.on('change input propertychange', function(event) {
         $(submitButton).prop('disabled', $(this).val() === '');
     });
 };
diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl
index 71e0610..3f92c83 100644
--- a/ui/pages/guest-storage-add.html.tmpl
+++ b/ui/pages/guest-storage-add.html.tmpl
@@ -41,7 +41,7 @@
                 <h2>2. $_("Device Type")</h2>
                 <div class="field">
                     <p class="text-help">
-                        $_("The device type. Currently, only \"cdrom\" is supported.")
+                        $_("The device type. Currently,  \"cdrom\" and \"disk\" are supported.")
                     </p>
                     <div class="btn dropdown popable">
                         <input id="guest-storage-type" name="type" value="cdrom" type="hidden" />
@@ -54,7 +54,51 @@
                 </div>
             </section>
             <section class="form-section">
-                <h2>3. $_("File Path")</h2>
+                <h2>3. $_("Device Bus")</h2>
+                <div class="field">
+                    <div class="btn dropdown popable" id="guest-storage-bus">
+                        <input id="guest-storage-bus-type" name="bus" value='ide' type="hidden" />
+                        <span class="text" id="guest-storage-bus-label">ide</span>
+                        <span class="arrow"></span>
+                        <div class="popover">
+                            <ul class="select-list" id="guest-storage-bus-list" data-target="guest-storage-bus-type" data-label="guest-storage-bus-label"></ul>
+                        </div>
+                    </div>
+                </div>
+            </section>
+                <div class="volume-section hidden">
+                    <section class="form-section">
+                        <h2>4. $_("Storage Pool")</h2>
+                        <div class="field storage-field">
+                            <p class="text-help">
+                                $_("Storage pool which volume located in")</p>
+                                <div class="btn dropdown popable">
+                                    <input value="/storagepools/vg" id="guest-disk-pool" name="storagepool" type="hidden">
+                                        <span class="text" id="guest-disk-pool-label"></span><span class="arrow"></span>
+                                            <div class="popover" style="width: 100%">
+                                                <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-pool" data-label="guest-disk-pool-label"></ul>
+                                             </div>
+                                </div>
+                        </div>
+                    </section>
+                    <section class="form-section">
+                        <h2>5. $_("Storage Volume")</h2>
+                        <div class="field storage-field">
+                            <p class="text-help">
+                                $_("Storage volume to be attached")</p>
+                                <div class="btn dropdown popable" id="guest-disk">
+                                    <input id="guest-disk-vol" name="storagevol" type="hidden">
+                                        <span class="text" id="guest-disk-vol-label"></span><span class="arrow"></span>
+                                            <div class="popover" style="width: 100%">
+                                                <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-vol" data-label="guest-disk-vol-label"></ul>
+                                             </div>
+                                </div>
+                        </div>
+                    </section>
+                </div>
+                <div class="path-section">
+                <section class="form-section">
+                <h2>4. $_("File Path")</h2>
                 <div class="field">
                     <p class="text-help">
                         $_("The ISO file path in the server for CDROM.")
@@ -62,6 +106,8 @@
                     <input type="text" class="text" name="path" />
                 </div>
             </section>
+            </div>
+                </fieldset>
         </form>
     </div>
     <footer>
-- 
1.8.3.2




More information about the Kimchi-devel mailing list