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

This patch proper shows the extend logical pool dialog to collect user information and do the request. Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- 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">&times;</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>