[PATCHv2 1/2] StoragePool Edit: Add Disk to Logical Pool

22 May 2014

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

v1>v2, add loading icon before disk query finished
and display mesg when no partition is available.

Add storage pool extend dialog and choose proper disk for extension.
Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
Signed-off-by: Royce Lv <lvroyce@linux.vnet.ibm.com>
---
 ui/js/src/kimchi.api.js                  | 12 +++++++++
 ui/js/src/kimchi.storage_main.js         | 46 ++++++++++++++++++++++++++++++++
 ui/js/src/kimchi.storagepool_add_main.js |  2 +-
 ui/pages/i18n.html.tmpl                  |  1 +
 ui/pages/tabs/storage.html.tmpl          | 15 +++++++++++
 5 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 3c6765c..d30bf10 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -208,6 +208,18 @@ var kimchi = {
         }).done(suc).fail(err);
     },
 
+    updateStoragePool : function(name, content, suc, err) {
+        $.ajax({
+            url : kimchi.url + "storagepools/" + encodeURIComponent(name),
+            type : 'PUT',
+            contentType : 'application/json',
+            dataType : 'json',
+            data : JSON.stringify(content)
+        }).done(suc).fail(err ? err : function(data) {
+            kimchi.message.error(data.responseJSON.reason);
+        });
+    },
+
     startVM : function(vm, suc, err) {
         kimchi.requestJSON({
             url : kimchi.url + 'vms/' + encodeURIComponent(vm) + '/start',
diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 6052510..ef3d8f5 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -24,6 +24,7 @@ kimchi.doListStoragePools = function() {
                 value.usage = parseInt(value.allocated / value.capacity * 100) || 0;
                 value.capacity = kimchi.changetoProperUnit(value.capacity,1);
                 value.allocated = kimchi.changetoProperUnit(value.allocated,1);
+                value.enableExt = value.type==="logical" ? "" : "hide-content";
                 if ('kimchi-iso' !== value.type) {
                     listHtml += kimchi.template(storageHtml, value);
                 }
@@ -138,6 +139,11 @@ kimchi.storageBindClick = function() {
         }
     });
 
+    $('.pool-extend').on('click', function() {
+        $("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name'));
+        $("#logicalPoolExtend").dialog("open");
+    });
+
     $('#volume-doAdd').on('click', function() {
         kimchi.window.open('storagevolume-add.html');
     });
@@ -187,11 +193,51 @@ kimchi.doListVolumes = function(poolObj) {
     });
 }
 
+kimchi.initLogicalPoolExtend = function() {
+    $("#logicalPoolExtend").dialog({
+        autoOpen : false,
+        modal : true,
+        width : 600,
+        resizable : false,
+        closeText: "X",
+        open : function(){
+            $(".ui-dialog-titlebar-close", $("#logicalPoolExtend").parent()).removeAttr("title");
+            kimchi.listHostPartitions(function(data) {
+                if (data.length > 0) {
+                    $('.host-partition', '#logicalPoolExtend').html('');
+                    for(var i=0;i<data.length;i++){
+                        if (data[i].type === 'part' || data[i].type === 'disk') {
+                            $('.host-partition', '#logicalPoolExtend').append(kimchi.template($('#logicalPoolExtendTmpl').html(), data[i]));
+                        }
+                    }
+                } else {
+                    $('.host-partition').html(i18n['KCHPOOL6011M']);
+                    $('.host-partition').addClass('text-help');
+                }
+            });
+        },
+        beforeClose : function() { $('.host-partition', '#logicalPoolExtend').empty(); },
+        buttons : [{
+            class: "ui-button-primary",
+            text: i18n.KCHAPI6007M,
+            click: function(){
+                var devicePaths = [];
+                $("input[type='checkbox']:checked", "#logicalPoolExtend").each(function(){
+                    devicePaths.push($(this).prop('value'));
+                })
+                kimchi.updateStoragePool($("#logicalPoolExtend").dialog("option", "poolName"),{disks: devicePaths});
+                $(this).dialog("close");
+            }
+        }]
+    });
+}
+
 kimchi.storage_main = function() {
     $('#storage-pool-add').on('click', function() {
         kimchi.window.open('storagepool-add.html');
     });
     kimchi.doListStoragePools();
+    kimchi.initLogicalPoolExtend();
 }
 
 kimchi.changeArrow = function(obj) {
diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index 86dbe7f..bc57601 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -33,7 +33,7 @@ kimchi.initStorageAddPage = function() {
                     listHtml += kimchi.template(deviceHtml, value);
                 }
             });
-            $('.host-partition').html(listHtml);
+            $('.host-partition', '#form-pool-add').html(listHtml);
         } else {
             $('.host-partition').html(i18n['KCHPOOL6011M']);
             $('.host-partition').addClass('text-help');
diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
index 98da828..f7977c8 100644
--- a/ui/pages/i18n.html.tmpl
+++ b/ui/pages/i18n.html.tmpl
@@ -58,6 +58,7 @@ var i18n = {
     'KCHAPI6004M': "$_("Confirm")",
     'KCHAPI6005M': "$_("Create")",
     'KCHAPI6006M': "$_("Warning")",
+    'KCHAPI6007M': "$_("Save")",
 
     'KCHGRD6001M': "$_("Loading...")",
     'KCHGRD6002M': "$_("An error occurs while checking for packages update.")",
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index c3a992e..76d2e07 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -41,6 +41,14 @@
     </div>
     <ul id="storagepoolsList" class="list-storage empty-when-logged-off"></ul>
 </div>
+<div id="logicalPoolExtend" title="$_("Device path")">
+    <div class="host-partition">
+        <p class="text-help">
+            $_("Looking for available partitions ...")
+            <img src = "../images/theme-default/loading.gif" />
+        </p>
+    </div>
+</div>
 <script id="storageTmpl" type="html/text">
     <li id="{name}">
         <div class="storage-li in" data-name="{name}" data-stat="{state}">
@@ -74,6 +82,7 @@
                     <div class="popover actionsheet right-side" style="width: 250px">
                         <button class="button-big pool-deactivate" data-stat="{state}" data-name="{name}" data-persistent="{persistent}"><span class="text">$_("Deactivate")</span></button>
                         <button class="button-big pool-activate" data-stat="{state}" data-name="{name}"><span class="text">$_("Activate")</span></button>
+                        <button class="button-big pool-extend {enableExt}" data-stat="{state}" data-name="{name}"><span class="text">$_("Extend")</span></button>
                         <button class="button-big red pool-delete" data-stat="{state}" data-name="{name}"><span class="text">$_("Undefine")</span></button>
                     </div>
                 </div>
@@ -107,6 +116,12 @@
             </div>
       </div>
 </script>
+<script id="logicalPoolExtendTmpl" type="html/text">
+    <div>
+        <input type="checkbox" value="{path}" name="devices">
+        <label for="{name}">{path}</label>
+    </div>
+</script>
 <script>
     kimchi.storage_main();
 </script>
-- 
1.8.3.2

    

lvroyce＠linux.vnet.ibm.com

Royce Lv

Yu Xin Huo

Wang Wen

tags

participants (4)