<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix"><img
src="cid:part1.09030608.09000605@linux.vnet.ibm.com" alt=""><br>
<br>
On 5/28/2014 3:12 AM, Daniel Barboza wrote:<br>
</div>
<blockquote
cite="mid:1401217967-18418-1-git-send-email-danielhb@linux.vnet.ibm.com"
type="cite">
<pre wrap="">From: Daniel Henrique Barboza <a class="moz-txt-link-rfc2396E" href="mailto:danielhb@linux.vnet.ibm.com"><danielhb@linux.vnet.ibm.com></a>
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 <a class="moz-txt-link-rfc2396E" href="mailto:danielhb@linux.vnet.ibm.com"><danielhb@linux.vnet.ibm.com></a>
---
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..84372c1 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}">
</pre>
</blockquote>
<br>
</body>
</html>