From: Royce Lv <lvroyce(a)linux.vnet.ibm.com&gt; v1>v2, add loading icon before disk query finished and display mesg when no partition is available. Add storage pool extend dialog and choose proper disk for extension. Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; Signed-off-by: Royce Lv <lvroyce(a)linux.vnet.ibm.com&gt; --- ui/js/src/kimchi.api.js | 12 ++++++++ ui/js/src/kimchi.storage_main.js | 47 ++++++++++++++++++++++++++++++++ ui/js/src/kimchi.storagepool_add_main.js | 2 +- ui/pages/i18n.html.tmpl | 1 + ui/pages/tabs/storage.html.tmpl | 15 ++++++++++ 5 files changed, 76 insertions(+), 1 deletion(-) diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index 3c6765c..d30bf10 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -208,6 +208,18 @@ var kimchi = { }).done(suc).fail(err); }, + updateStoragePool : function(name, content, suc, err) { + $.ajax({ + url : kimchi.url + "storagepools/" + encodeURIComponent(name), + type : 'PUT', + contentType : 'application/json', + dataType : 'json', + data : JSON.stringify(content) + }).done(suc).fail(err ? err : function(data) { + kimchi.message.error(data.responseJSON.reason); + }); + }, + startVM : function(vm, suc, err) { kimchi.requestJSON({ url : kimchi.url + 'vms/' + encodeURIComponent(vm) + '/start', diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js index 6052510..64d5052 100644 --- a/ui/js/src/kimchi.storage_main.js +++ b/ui/js/src/kimchi.storage_main.js @@ -24,6 +24,7 @@ kimchi.doListStoragePools = function() { value.usage = parseInt(value.allocated / value.capacity * 100) || 0; value.capacity = kimchi.changetoProperUnit(value.capacity,1); value.allocated = kimchi.changetoProperUnit(value.allocated,1); + value.enableExt = value.type==="logical" ? "" : "hide-content"; if ('kimchi-iso' !== value.type) { listHtml += kimchi.template(storageHtml, value); } @@ -138,6 +139,11 @@ kimchi.storageBindClick = function() { } }); + $('.pool-extend').on('click', function() { + $("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name')); + $("#logicalPoolExtend").dialog("open"); + }); + $('#volume-doAdd').on('click', function() { kimchi.window.open('storagevolume-add.html'); }); @@ -187,11 +193,52 @@ kimchi.doListVolumes = function(poolObj) { }); } +kimchi.initLogicalPoolExtend = function() { + $("#logicalPoolExtend").dialog({ + autoOpen : false, + modal : true, + width : 600, + resizable : false, + closeText: "X", + open : function(){ + $('#loading-info', '#logicalPoolExtend').removeClass('hidden'); + $(".ui-dialog-titlebar-close", $("#logicalPoolExtend").parent()).removeAttr("title"); + kimchi.listHostPartitions(function(data) { + $('#loading-info', '#logicalPoolExtend').addClass('hidden'); + if (data.length > 0) { + for(var i=0;i<data.length;i++){ + if (data[i].type === 'part' || data[i].type === 'disk') { + $('.host-partition', '#logicalPoolExtend').append(kimchi.template($('#logicalPoolExtendTmpl').html(), data[i])); + } + } + } else { + $('.host-partition').html(i18n['KCHPOOL6011M']); + $('.host-partition').addClass('text-help'); + } + }); + }, + beforeClose : function() { $('.host-partition', '#logicalPoolExtend').empty(); }, + buttons : [{ + class: "ui-button-primary", + text: i18n.KCHAPI6007M, + click: function(){ + var devicePaths = []; + $("input[type='checkbox']:checked", "#logicalPoolExtend").each(function(){ + devicePaths.push($(this).prop('value')); + }) + kimchi.updateStoragePool($("#logicalPoolExtend").dialog("option", "poolName"),{disks: devicePaths}); + $(this).dialog("close"); + } + }] + }); +} + kimchi.storage_main = function() { $('#storage-pool-add').on('click', function() { kimchi.window.open('storagepool-add.html'); }); kimchi.doListStoragePools(); + kimchi.initLogicalPoolExtend(); } kimchi.changeArrow = function(obj) { diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js index 86dbe7f..bc57601 100644 --- a/ui/js/src/kimchi.storagepool_add_main.js +++ b/ui/js/src/kimchi.storagepool_add_main.js @@ -33,7 +33,7 @@ kimchi.initStorageAddPage = function() { listHtml += kimchi.template(deviceHtml, value); } }); - $('.host-partition').html(listHtml); + $('.host-partition', '#form-pool-add').html(listHtml); } else { $('.host-partition').html(i18n['KCHPOOL6011M']); $('.host-partition').addClass('text-help'); diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl index 98da828..f7977c8 100644 --- a/ui/pages/i18n.html.tmpl +++ b/ui/pages/i18n.html.tmpl @@ -58,6 +58,7 @@ var i18n = { 'KCHAPI6004M': "$_("Confirm")", 'KCHAPI6005M': "$_("Create")", 'KCHAPI6006M': "$_("Warning")", + 'KCHAPI6007M': "$_("Save")", 'KCHGRD6001M': "$_("Loading...")", 'KCHGRD6002M': "$_("An error occurs while checking for packages update.")", diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl index c3a992e..d4d54ea 100644 --- a/ui/pages/tabs/storage.html.tmpl +++ b/ui/pages/tabs/storage.html.tmpl @@ -41,6 +41,14 @@ </div> <ul id="storagepoolsList" class="list-storage empty-when-logged-off"></ul> </div> +<div id="logicalPoolExtend" title="$_("Device path")"> + <p id="loading-info" class="text-help"> + <img src = "../images/theme-default/loading.gif" /> + $_("Looking for available partitions ...") + </p> + <div class="host-partition"> + </div> +</div> <script id="storageTmpl" type="html/text"> <li id="{name}"> <div class="storage-li in" data-name="{name}" data-stat="{state}"> @@ -74,6 +82,7 @@ <div class="popover actionsheet right-side" style="width: 250px"> <button class="button-big pool-deactivate" data-stat="{state}" data-name="{name}" data-persistent="{persistent}"><span class="text">$_("Deactivate")</span></button> <button class="button-big pool-activate" data-stat="{state}" data-name="{name}"><span class="text">$_("Activate")</span></button> + <button class="button-big pool-extend {enableExt}" data-stat="{state}" data-name="{name}"><span class="text">$_("Extend")</span></button> <button class="button-big red pool-delete" data-stat="{state}" data-name="{name}"><span class="text">$_("Undefine")</span></button> </div> </div> @@ -107,6 +116,12 @@ </div> </div> </script> +<script id="logicalPoolExtendTmpl" type="html/text"> + <div> + <input type="checkbox" value="{path}" name="devices"> + <label for="{name}">{path}</label> + </div> +</script> <script> kimchi.storage_main(); </script>