[PATCH] [Kimchi] Bug fix #521: Extend logical pool

27 Sep 2016

This patch proper shows the extend logical pool dialog to collect user
information and do the request.

Signed-off-by: Aline Manera <alinefm@linux.vnet.ibm.com>
---
 ui/css/kimchi.css                        |  3 +-
 ui/css/src/modules/_guests.scss          |  3 +-
 ui/js/src/kimchi.storage_main.js         | 81 ++++++++++++++++++++------------
 ui/js/src/kimchi.storagepool_add_main.js |  2 +-
 ui/pages/i18n.json.tmpl                  |  9 ++--
 ui/pages/tabs/storage.html.tmpl          | 45 +++++++++---------
 6 files changed, 83 insertions(+), 60 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 959508f..9a9ff25 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -294,7 +294,8 @@
   font-size: 32px;
 }
 
-#wok-confirm-modal .modal-body strong {
+#wok-confirm-modal .modal-body strong,
+.modal-dialog .modal-body strong {
   border-bottom: 1px dotted;
 }
 
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
index 237b395..4947123 100644
--- a/ui/css/src/modules/_guests.scss
+++ b/ui/css/src/modules/_guests.scss
@@ -46,7 +46,8 @@
     }
 }
 
-#wok-confirm-modal .modal-body strong {
+#wok-confirm-modal .modal-body strong,
+.modal-dialog .modal-body strong {
     border-bottom: 1px dotted;
 }
 
diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 0d7a6d7..741fd59 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -410,10 +410,8 @@ kimchi.storageBindClick = function() {
 
         $('.pool-extend').on('click', function(event) {
             event.preventDefault();
-            //$("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name'));
-            //$("#logicalPoolExtend").dialog("open");
-            partitions = $(this).data('name');
-            //$("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name'));
+            var poolName = $(this).data('name');
+            kimchi.selectedSP = poolName;
         });
     }
 
@@ -478,17 +476,23 @@ kimchi._generateVolumeHTML = function(volume) {
     return volumeHtml[0].outerHTML;
 };
 
+
+kimchi.getPoolUsageIcon = function(usage) {
+    if (usage <= 100 && usage >= 85)
+        return 'icon-high';
+
+    if (usage <= 85 && usage >= 75)
+        return 'icon-med';
+
+    return 'icon-low';
+};
+
+
 kimchi.doUpdateStoragePool = function(poolObj){
     var poolName = poolObj.data('name');
     kimchi.getStoragePool(poolName, function(result) {
         result.usage = Math.round(result.allocated / result.capacity * 100) || 0;
-        if (result.usage <= 100 && result.usage >= 85) {
-            result.icon = 'icon-high';
-        }else if (result.usage <= 85 && result.usage >= 75 ) {
-            result.icon = 'icon-med';
-        } else {
-            result.icon = 'icon-low';
-        }
+        result.icon = kimchi.getPoolUsageIcon(result.usage);
         result.allocated = wok.changetoProperUnit(result.allocated,1);
         $('> .column-usage > .usage-icon',poolObj).attr('class', 'usage-icon').addClass(result.icon).text(result.usage);
         $('> .column-allocated',poolObj).attr('val',result.allocated).text(result.allocated);
@@ -649,30 +653,45 @@ kimchi.doListVolumes = function(poolObj) {
     }, false);
 };
 
-    kimchi.initLogicalPoolExtend = function() {
-
+kimchi.initLogicalPoolExtend = function() {
     $('#logicalPoolExtend').on('hidden.bs.modal', function () {
         $('.host-partition', '#logicalPoolExtend').empty();
     });
 
     $('#logicalPoolExtend').on('show.bs.modal', function() {
-        //$('#logicalPoolExtend2').find('.modal-content').html();
-        kimchi.listHostPartitions(function(partitions) {
-            $('#loading-info', '#logicalPoolExtend').removeClass('hidden');
-            if (partitions.length > 0) {
-                for (var i = 0; i < partitions.length; i++) {
-                    if (partitions[i].type === 'part' || partitions[i].type === 'disk') {
-                        $('.host-partition', '#logicalPoolExtend').append(wok.substitute($('#logicalPoolExtendTmpl').html(), partitions[i]));
-                        $('#savePartitions', '#logicalPoolExtend').prop('disabled', false);
+        // Make any change in the form fields enables the
+        // 'savePartitions' button if all the visible form
+        // fields are filled, disables it otherwise.
+        $('#logicalPoolExtend').on('input change propertychange', function() {
+            if ($("input[name=devices]:checked").length === 0) {
+                $("#savePartitions").attr("disabled", true);
+            }
+            else {
+                $("#savePartitions").attr("disabled", false);
+            }
+        });
+
+        kimchi.listHostPartitions(function(data) {
+            if (data.length > 0) {
+                var deviceHtml = $('#partitionTmpl').html();
+                var listHtml = '<table class="table table-hover"><thead><tr><th></th><th>Device</th><th>Path</th><th>Size (GiB)</th></tr></thead><tbody>';
+                valid_types = ['part', 'disk', 'mpath'];
+                $.each(data, function(index, value) {
+                    if (valid_types.indexOf(value.type) !== -1) {
+                        value.size = (value.size / 1000000000).toFixed(2);
+                        listHtml += wok.substitute(deviceHtml, value);
                     }
-                }
+                });
+                listHtml += '</tbody></table>';
+                var infoHtml = '<h3>' + i18n['KCHPOOL6019M'].replace('%1', '<strong>' + kimchi.selectedSP + '</strong>') + '</h3>';
+                $('.host-partition', '#logicalPoolExtend').html(infoHtml + listHtml);
             } else {
-                $('#loading-info', '#logicalPoolExtend').addClass('hidden');
                 $('.host-partition').html(i18n['KCHPOOL6011M']);
+                $('.host-partition').addClass('text-help');
             }
         }, function(err) {
-            $('#loading-info', '#logicalPoolExtend').addClass('hidden');
             $('.host-partition').html(i18n['KCHPOOL6013M'] + '<br/>(' + err.responseJSON.reason + ')');
+            $('.host-partition').addClass('text-help');
         });
 
         $('#savePartitions', '#logicalPoolExtend').on('click', function(event) {
@@ -681,14 +700,16 @@ kimchi.doListVolumes = function(poolObj) {
             $("input[type='checkbox']:checked", "#logicalPoolExtend").each(function() {
                 devicePaths.push($(this).prop('value'));
             });
-            kimchi.updateStoragePool($("#logicalPoolExtend"), {
+            kimchi.updateStoragePool(kimchi.selectedSP, {
                 disks: devicePaths
-            }, function(partitions) {
-                var item = $("#" + $("#logicalPoolExtend").dialog("option", "poolName"));
+            }, function(pool) {
                 $('#logicalPoolExtend').modal('hide');
-                $(".usage", $(".storage-name", item)).text((Math.round(partitions.allocated / partitions.capacity * 100) || 0) + "%");
-                $(".storage-text", $(".storage-capacity", item)).text(wok.changetoProperUnit(partitions.capacity, 1));
-                $(".storage-text", $(".storage-allocate", item)).text(wok.changetoProperUnit(partitions.allocated, 1));
+                var item = '#' + pool.name;
+                var usage = Math.round(pool.allocated / pool.capacity * 100) || 0;
+                var usageIcon = kimchi.getPoolUsageIcon(usage);
+                $(".usage-icon", $(".column-usage", item)).attr('class', 'usage-icon').addClass(usageIcon).text(usage);
+                $(".column-capacity", item).text(wok.changetoProperUnit(pool.capacity, 1));
+                $(".column-allocated", item).text(wok.changetoProperUnit(pool.allocated, 1));
             }, function(err) {
                 $('#savePartitions', '#logicalPoolExtend').prop('disabled', true);
                 $('#logicalPoolExtend').modal('hide');
diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index 3fe2548..5a020ee 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -127,7 +127,7 @@ kimchi.initStorageAddPage = function() {
     kimchi.listHostPartitions(function(data) {
         if (data.length > 0) {
             var deviceHtml = $('#partitionTmpl').html();
-            var listHtml = '<table class="table table-hover"><thead><tr><th></th><th>device</th><th>path</th><th>size (GiB)</th></tr></thead><tbody>';
+            var listHtml = '<table class="table table-hover"><thead><tr><th></th><th>Device</th><th>Path</th><th>Size (GiB)</th></tr></thead><tbody>';
             valid_types = ['part', 'disk', 'mpath'];
             $.each(data, function(index, value) {
                 if (valid_types.indexOf(value.type) !== -1) {
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index 7beee19..c67e9e8 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -103,10 +103,6 @@
     "KCHPOOL6008M": "$_("Failed to load iSCSI targets.")",
     "KCHPOOL6009M": "$_("Would you like to continue?")",
     "KCHPOOL6010M": "$_("This will permanently delete the following storage volumes: %1")",
-
-    "KCHPOOL6005E": "$_("Invalid NFS mount path.")",
-    "KCHPOOL6006E": "$_("No logical device selected.")",
-    "KCHPOOL6009E": "$_("This is not a valid Server Name or IP. Please, modify it.")",
     "KCHPOOL6011M": "$_("No available partitions found.")",
     "KCHPOOL6012M": "$_("The %1 storage pool is not persistent. Instead of deactivate, this action will permanently delete it. Would you like to continue?")",
     "KCHPOOL6013M": "$_("Unable to retrieve partitions information.")",
@@ -115,6 +111,11 @@
     "KCHPOOL6016M": "$_("No LVM found in the system.")",
     "KCHPOOL6017M": "$_("This will permanently wipe the following storage volumes: %1")",
     "KCHPOOL6018M": "$_("Wipe Confirmation")",
+    "KCHPOOL6019M": "$_("Select one or more partitions to be added to the logical pool %1:")",
+
+    "KCHPOOL6005E": "$_("Invalid NFS mount path.")",
+    "KCHPOOL6006E": "$_("No logical device selected.")",
+    "KCHPOOL6009E": "$_("This is not a valid Server Name or IP. Please, modify it.")",
 
     "KCHVMSTOR0001E": "$_("CDROM path needs to be a valid local/remote path and cannot be blank.")",
     "KCHVMSTOR0002E": "$_("Disk pool or volume cannot be blank.")",
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index 92d9b75..4215d55 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -74,21 +74,21 @@
             <div id="logicalPoolExtend" class="modal fade logicalpool-modal" tabindex="-2" role="dialog" aria-labelledby="logicalPoolExtendLabel" aria-hidden="true">
                 <div class="modal-dialog modal-sm">
                     <div class="modal-content">
-                      <div class="modal-header">
+                        <div class="modal-header">
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-                            <h4 class="modal-title" id="logicalPoolExtendLabel">$_("Device path")</h4>
-                          </div>
-                          <div class="modal-body">
-                                <p  id="loading-info" class="hidden"><span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span></p>
-                                <div class="host-partition">
-                                </div>
-                          </div>
-                          <div class="modal-footer">
-                              <button type="button" id="savePartitions" class="btn btn-default" disabled="disabled">$_("Save")</button>
-                              <button type="button" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
-                          </div>
+                            <h4 class="modal-title" id="logicalPoolExtendLabel">$_("Extending logical pool")</h4>
+                        </div>
+                        <div class="modal-body">
+                            <div class="host-partition">
+                                <span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span>
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" id="savePartitions" class="btn btn-default" disabled="disabled">$_("Save")</button>
+                            <button type="button" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+                        </div>
                     </div>
-                  </div>
+                </div>
             </div>
         </div>
         <div class="wok-mask">
@@ -200,17 +200,16 @@
     </div>
 </li>
 </script>
-<script id="logicalPoolExtendTmpl" type="html/text">
-    <div>
-        <input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices">
-        <label for="{name}">
-            <div>
-                <span class="device-name">{name}</span>
-                <span class="device-path">{path}</span>
-            </div>
-        </label>
-    </div>
+
+<script id="partitionTmpl" type="html/text">
+    <tr>
+        <td><input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices"><label for="{name}"></label></td>
+        <td>{name}</td>
+        <td>{path}</td>
+        <td>{size}</td>
+    </tr>
 </script>
+
 <script>
     kimchi.storage_main();
 </script>
-- 
2.5.5

    

Aline Manera

Aline Manera

Paulo Ricardo Paz Vital

Paulo Ricardo Paz Vital

Aline Manera

tags

participants (2)