[Kimchi-devel] [PATCH] [Kimchi] Bug fix #521: Extend logical pool
Aline Manera
alinefm at linux.vnet.ibm.com
Tue Sep 27 03:18:41 UTC 2016
This patch proper shows the extend logical pool dialog to collect user
information and do the request.
Signed-off-by: Aline Manera <alinefm at 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
More information about the Kimchi-devel
mailing list