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

29 Apr 2014

From: Royce Lv <lvroyce@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@linux.vnet.ibm.com>
---
 ui/css/theme-default/guest-storage-add.css |  16 ++++
 ui/js/src/kimchi.guest_storage_add.main.js | 137 ++++++++++++++++++++++++-----
 ui/pages/guest-storage-add.html.tmpl       |  62 +++++++++++--
 3 files changed, 188 insertions(+), 27 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..6af00cc 100644
--- a/ui/js/src/kimchi.guest_storage_add.main.js
+++ b/ui/js/src/kimchi.guest_storage_add.main.js
@@ -18,43 +18,136 @@
 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="pool"]', storageAddForm);
+    var volTextbox = $('input[name="vol"]', storageAddForm);
 
-    var submitForm = function(event) {
-        if(submitButton.prop('disabled')) {
-            return false;
+    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
+                        });
+                    }
+                });
+                $(poolTextbox).val('default');
+                $(poolTextbox).change();
+                kimchi.select('guest-add-storage-pool-list', options);
         }
+    });
 
-        var dev = nameTextbox.val();
-        var type = typeTextbox.val();
-        var path = pathTextbox.val();
-        if(!path || path === '') {
+    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.name
+                          });
+                    }
+                });
+                if (options.length) {
+                    $(volTextbox).val(options[0].value);
+                    $(volTextbox).change();
+                }
+            }
+            $('#guest-disk').selectMenu("setData", options);
+        });
+    });
+
+
+    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')) {
             return false;
         }
 
         var formData = storageAddForm.serializeObject();
-        $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
-            $(c).prop('disabled', true);
-        });
-        $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']);
-
         var settings = {
             vm: kimchi.selectedGuest,
-            type: type,
-            path: path
+            type: typeTextbox.val(),
+            bus: busTextbox.val()
         };
 
-        if(dev && dev !== '') {
-            settings['dev'] = dev;
-        }
+        $(submitButton).prop('disabled', true);
+        $.each([nameTextbox, pathTextbox, poolTextbox, volTextbox], function(i, c) {
+            $(c).prop('disabled', true);
+            val = $(c).val()
+            if (val && val != '') {
+                settings[$(c).attr('name')] = $(c).val();
+            }
+        });
+        $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']);
 
         kimchi.addVMStorage(settings, function(result) {
             kimchi.window.close();
@@ -66,7 +159,7 @@ kimchi.guest_storage_add_main = function() {
                 result['responseJSON']['reason'];
             kimchi.message.error(errText);
 
-            $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
+            $.each([submitButton, nameTextbox, pathTextbox, poolTextbox, volTextbox], function(i, c) {
                 $(c).prop('disabled', false);
             });
             $(submitButton).removeClass('loading').text(i18n['KCHVMCD6002M']);
@@ -77,7 +170,11 @@ 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() === '');
     });
+    volTextbox.on('change 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..6574dcf 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,20 +54,68 @@
                 </div>
             </section>
             <section class="form-section">
-                <h2>3. $_("File Path")</h2>
+                <h2>3. $_("Device Bus")</h2>
                 <div class="field">
-                    <p class="text-help">
-                        $_("The ISO file path in the server for CDROM.")
-                    </p>
-                    <input type="text" class="text" name="path" />
+                    <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"></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="default" id="guest-disk-pool" name="pool" type="hidden"/>
+                            <span class="text" id="guest-disk-pool-label">default</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="vol" 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.")
+                        </p>
+                        <input type="text" class="text" name="path" />
+                    </div>
+                </section>
+            </div>
+            </fieldset>
         </form>
     </div>
     <footer>
         <div class="btn-group">
             <button id="guest-storage-button-add" class="btn-normal" disabled="disabled">
-                <span class="text">$_("Attach")</span>
+            <span class="text">$_("Attach")</span>
             </button>
         </div>
     </footer>
-- 
1.8.3.2

    

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

lvroyce＠linux.vnet.ibm.com