Re: [Kimchi-devel] [PATCH 2/2] Implement the frontend to use existing VG as storage pool

Signed-off-by: Jose Ricardo Ziviani <joserz(a)linux.vnet.ibm.com&gt; --- 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>