[Kimchi-devel] [PATCH 2/2] Implement the frontend to use existing VG as storage pool
Jose Ricardo Ziviani
joserz at linux.vnet.ibm.com
Fri Oct 23 00:52:32 UTC 2015
Signed-off-by: Jose Ricardo Ziviani <joserz at linux.vnet.ibm.com>
---
src/wok/plugins/kimchi/API.json | 5 ++
.../kimchi/ui/css/theme-default/storage.css | 22 ++++++++
src/wok/plugins/kimchi/ui/js/src/kimchi.api.js | 11 ++++
.../ui/js/src/kimchi.storagepool_add_main.js | 58 ++++++++++++++++++++--
.../kimchi/ui/pages/storagepool-add.html.tmpl | 38 +++++++++++++-
5 files changed, 129 insertions(+), 5 deletions(-)
diff --git a/src/wok/plugins/kimchi/API.json b/src/wok/plugins/kimchi/API.json
index fc1d2dd..ce09039 100644
--- a/src/wok/plugins/kimchi/API.json
+++ b/src/wok/plugins/kimchi/API.json
@@ -165,6 +165,11 @@
"error": "KCHPOOL0025E"
}
}
+ },
+ "vgselect": {
+ "description": "Use an existing VG or create a new one",
+ "type": "string",
+ "error": "KCHPOOL0026E"
}
}
}
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/storage.css b/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
index 88447b5..a5952ae 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
@@ -422,6 +422,28 @@
white-space: nowrap;
}
+.existing-groups {
+ padding-left:13px;
+}
+
+.form-section .field {
+ font-size: 13px;
+ font-weight: lighter;
+}
+
+.existing-groups>table {
+ width: 300px;
+ padding: 13px;
+ margin-left: 20px;
+ font-size: 13px;
+ font-weight: lighter;
+}
+
+.existing-groups>table>thead {
+ text-align: left;
+ background-color: rgb(0, 138, 191);
+}
+
.storage-type-wrapper-controls {
width: 300px;
display: inline-block;
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
index a16c95e..bd60bbb 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
@@ -745,6 +745,17 @@ var kimchi = {
});
},
+ listExistingVGs : function(suc, err) {
+ wok.requestJSON({
+ url : 'plugins/kimchi/host/vgs',
+ type: 'GET',
+ contentType : 'aplication/json',
+ dataType : 'json',
+ success : suc,
+ error : err
+ });
+ },
+
getStorageServers: function(type, suc, err) {
var url = 'plugins/kimchi/storageservers?_target_type=' + type;
wok.requestJSON({
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
index 8c27539..9cfa446 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
@@ -141,6 +141,32 @@ kimchi.initStorageAddPage = function() {
$('.host-partition').addClass('text-help');
});
+ kimchi.listExistingVGs(function(data) {
+ if (data.length == 0) {
+ $('.existing-groups').html(i18n['KCHPOOL6011M']);
+ $('.existing-groups').addClass('text-help');
+ return;
+ }
+ var deviceHtml = $('#vgTmpl').html();
+ var listHtml = '';
+ $.each(data, function(index, value) {
+ value.size /= Math.pow(1024, 3);
+ value.size = value.size.toFixed() + " GiB";
+ value.free /= Math.pow(1024, 3);
+ value.free = value.free.toFixed() + " GiB";
+ listHtml += wok.substitute(deviceHtml, value);
+ });
+ $('#vgrows').html(listHtml);
+
+ $('input[type=radio][name=devices]').change(function() {
+ var vgdev=$('input[type=radio][name=devices]:checked').val();
+ $('#poolId').val(vgdev);
+ });
+ }, function(err) {
+ $('.existing-groups').html(i18n['KCHPOOL6013M'] + '<br/>(' + err.responseJSON.reason + ')');
+ $('.existing-groups').addClass('text-help');
+ });
+
kimchi.getHostFCDevices(function(data){
if(data.length>0){
for(var i=0;i<data.length;i++){
@@ -235,6 +261,22 @@ kimchi.initStorageAddPage = function() {
$(value).addClass('tmpl-html');
}
});
+
+ $("#poolId").removeAttr("disabled");
+ if (selectType == 'logical') {
+ $('input[type=radio][name=vgselect]').attr('checked', 'checked');
+ }
+ });
+ $('input[type=radio][name=vgselect]').change(function() {
+ if ($(this).val() == 'existingvg') {
+ $('.existing-groups').removeClass('tmpl-html');
+ $('.host-partition').addClass('tmpl-html');
+ $("#poolId").attr("disabled", "disabled");
+ } else {
+ $('.existing-groups').addClass('tmpl-html');
+ $('.host-partition').removeClass('tmpl-html');
+ $("#poolId").removeAttr("disabled");
+ }
});
$('#authId').click(function() {
if ($(this).prop("checked")) {
@@ -274,7 +316,11 @@ kimchi.inputsNotBlank = function() {
if (!$('#iscsiserverId').val()) return false;
if (!$('#iscsiTargetId').val()) return false;
} else if (poolType === "logical") {
- if ($("input[name=devices]:checked").length === 0)
+ var vgtype=$('input[type=radio][name=vgselect]:checked').val();
+ if (vgtype == 'newvg' && $('input[name=devices]:checked').length === 0)
+ return false;
+ else if (vgtype == 'existingvg' &&
+ $('input[type=radio][name=devices]:checked').length !== 1)
return false;
}
return true;
@@ -336,12 +382,16 @@ kimchi.validateServer = function(serverField) {
};
kimchi.validateLogicalForm = function () {
- if ($("input[name=devices]:checked").length === 0) {
+ var vgtype=$('input[type=radio][name=vgselect]:checked').val();
+ if (vgtype == 'newvg' && $("input[name=devices]:checked").length === 0) {
+ wok.message.error.code('KCHPOOL6006E');
+ return false;
+ } else if (vgtype == 'existingvg' &&
+ $('input[type=radio][name=devices]:checked').length !== 1) {
wok.message.error.code('KCHPOOL6006E');
return false;
- } else {
- return true;
}
+ return true;
};
kimchi.addPool = function(event) {
diff --git a/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
index a697af5..23e5877 100644
--- a/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
@@ -99,8 +99,15 @@
</section>
</div>
<div class="logical-section tmpl-html">
+ <section class="form-section">
+ <h2>3. Create a new volume group or use an existing one?</h2>
+ <div class="field">
+ <input type="radio" name="vgselect" value="newvg" checked="checked">New VG</input>
+ <input type="radio" name="vgselect" value="existingvg">Existing VG</input>
+ </div>
+ </section>
<section class="form-section storageType">
- <h2>3. $_("Device path")</h2>
+ <h2>4. $_("Device path")</h2>
<div class="host-partition">
<div class="icon-info-circled light-grey c1 help-inline"></div>
<p class="text-help help-inline">
@@ -108,6 +115,27 @@
<img src = "plugins/kimchi/images/theme-default/loading.gif" />
</p>
</div>
+ <div class="existing-groups tmpl-html">
+ <div class="icon-info-circled light-grey c1 help-inline"></div>
+ <table class="volume-groups">
+ <thead>
+ <tr>
+ <th></th>
+ <th>Volume Group</th>
+ <th>Size</th>
+ <th>Free space</th>
+ </tr>
+ </thead>
+ <tbody id="vgrows">
+ <tr class="text-help help-inline">
+ <td colspan="4">
+ $_("Looking for available partitions ...")
+ <img src = "plugins/kimchi/images/theme-default/loading.gif" />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</section>
</div>
<div class="iscsi-section tmpl-html">
@@ -182,5 +210,13 @@
<label for="{name}">{path}</label>
</div>
</script>
+ <script id="vgTmpl" type="html/text">
+ <tr>
+ <td><input type="radio" name="devices" value="{vgname}"/></td>
+ <td>{vgname}</td>
+ <td>{size}</td>
+ <td>{free}</td>
+ </tr>
+ </script>
</body>
</html>
--
1.9.1
More information about the Kimchi-devel
mailing list