[Kimchi-devel] [PATCH v2] Insert loading icon in Storage tab
From: Daniel Henrique Barboza <danielhb(a)linux.vnet.ibm.com>
Due to the timeout period to see if the NFS pool is
online, the Storage tab may look irresponsible and
the user might believe that the UI/kimchi is frozen.
Inserting the loading icon+text in this tab to show that
the UI is responsive, just waiting for an answer from the
server.
Signed-off-by: Daniel Henrique Barboza <danielhb(a)linux.vnet.ibm.com>
---
ui/js/src/kimchi.storage_main.js | 2 ++
ui/pages/tabs/storage.html.tmpl | 8 +++++++-
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 6052510..74e6892 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -17,6 +17,7 @@
*/
kimchi.doListStoragePools = function() {
kimchi.listStoragePools(function(result) {
+ $('#storagepoolsLoading').addClass('hidden');
var storageHtml = $('#storageTmpl').html();
if (result && result.length) {
var listHtml = '';
@@ -34,6 +35,7 @@ kimchi.doListStoragePools = function() {
$('#storagepoolsList').html('');
}
}, function(err) {
+ $('#storagepoolsLoading').addClass('hidden');
kimchi.message.error(err.responseJSON.reason);
});
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index c3a992e..e837599 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -40,7 +40,13 @@
<li class="title-actions">$_("Actions")</li>
</div>
<ul id="storagepoolsList" class="list-storage
empty-when-logged-off"></ul>
-</div>
+ <div id="storagepoolsLoading">
+ <div class="grid-loading">
+ <div class="grid-loading-icon"></div>
+ <div
class="grid-loading-text">$_("loading")</div>
+ </div>
+ </div>
+ </div>
<script id="storageTmpl" type="html/text">
<li id="{name}">
<div class="storage-li in" data-name="{name}"
data-stat="{state}">
--
1.8.3.1