[PATCH v2] Insert loading icon in Storage tab
From: Daniel Henrique Barboza <danielhb@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@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
Hi, I just realized that this patch I've sent is similar to a Royce's contribution: "[PATCH] Issue#348: Add loading icon when nfs mount is in progress" After reviewing her work my judgement is that Royce's solution is more polished than mine. I would like to ask you to ignore this patch and follow up with Royce's. Thanks! On 05/28/2014 09:34 AM, Daniel Barboza wrote:
From: Daniel Henrique Barboza <danielhb@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@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}">
Maybe I'm missing something, but Royce's patch is just for adding a new pool. Yours is for listing all the existing ones, correct? I think your patch could still be useful. On Thu, 2014-05-29 at 17:34 -0300, Daniel H Barboza wrote:
Hi,
I just realized that this patch I've sent is similar to a Royce's contribution:
"[PATCH] Issue#348: Add loading icon when nfs mount is in progress"
After reviewing her work my judgement is that Royce's solution is more polished than mine. I would like to ask you to ignore this patch and follow up with Royce's.
Thanks!
On 05/28/2014 09:34 AM, Daniel Barboza wrote:
From: Daniel Henrique Barboza <danielhb@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@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}">
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
Maybe I'm missing something, but Royce's patch is just for adding a new pool. Yours is for listing all the existing ones, correct? I think your patch could still be useful. This patch adds a loading icon in the Storage tab to avoid keeping the UI "frozen" while waiting for the timeout of the NFS server. Royce's
On 06/05/2014 03:06 PM, Christy Perez wrote: path "Issue#348: Add loading icon when nfs mount is in progress" does the same thing, but IMO better.
On Thu, 2014-05-29 at 17:34 -0300, Daniel H Barboza wrote:
Hi,
I just realized that this patch I've sent is similar to a Royce's contribution:
"[PATCH] Issue#348: Add loading icon when nfs mount is in progress"
After reviewing her work my judgement is that Royce's solution is more polished than mine. I would like to ask you to ignore this patch and follow up with Royce's.
Thanks!
On 05/28/2014 09:34 AM, Daniel Barboza wrote:
From: Daniel Henrique Barboza <danielhb@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@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}">
Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (3)
-
Christy Perez -
Daniel Barboza -
Daniel H Barboza