[Kimchi-devel] [PATCH v2] Insert loading icon in Storage tab

[Daniel H Barboza]

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 at 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 at 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}">