[Kimchi-devel] [PATCH] UI: List Kimchi Peers

[Aline Manera]

The "Peers" menu blinks until get the response from server.
Couldn't we always display the "Peers" menu and add a loading icon 
(Searching...) until get the response? And if any peer was found show a 
message "No peers found". ?
That way we avoid the menu blinks.

On 08/26/2014 06:14 AM, huoyuxin at linux.vnet.ibm.com wrote:
> From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
>
> Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/topbar.css |   37 ++++++++++++++++++++++++++++++++++++-
>   ui/js/src/kimchi.api.js         |   14 ++++++++++++++
>   ui/js/src/kimchi.main.js        |   13 +++++++++++++
>   ui/pages/kimchi-ui.html.tmpl    |    7 +++++++
>   4 files changed, 70 insertions(+), 1 deletions(-)
>
> diff --git a/ui/css/theme-default/topbar.css b/ui/css/theme-default/topbar.css
> index bed4e19..8f2f79a 100644
> --- a/ui/css/theme-default/topbar.css
> +++ b/ui/css/theme-default/topbar.css
> @@ -114,7 +114,7 @@
>       cursor: pointer;
>       display: block;
>       position: relative;
> -    height: 48px;
> +    height: 52px;
>       margin: 0 12px;
>   }
>
> @@ -174,3 +174,38 @@ a#btn-logout:hover {
>           display: none;
>       }
>   }
> +
> +.peers {
> +    color: white;
> +    cursor: pointer;
> +    height: 52px;
> +    margin: 0 12px;
> +    display: none;
> +}
> +
> +.peers span {
> +    margin-top: 25px;
> +}
> +
> +.peers .arrow {
> +    border: 6px solid transparent;
> +    border-bottom: none;
> +    border-top-color: white;
> +    display: inline-block;
> +    width: 0;
> +}
> +
> +.peers .drowdown {
> +    top: 45px;
> +    right: 110px;
> +    color: black;
> +    padding: 10px 15px;
> +    white-space: nowrap;
> +    line-height: 12px;
> +    width: inherit;
> +}
> +
> +.peers .drowdown a {
> +    display: block;
> +    padding: 10px;
> +}
> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
> index 4562992..8966cff 100644
> --- a/ui/js/src/kimchi.api.js
> +++ b/ui/js/src/kimchi.api.js
> @@ -1098,5 +1098,19 @@ var kimchi = {
>                   kimchi.message.error(data.responseJSON.reason);
>               }
>           });
> +    },
> +
> +    getPeers : function(suc, err) {
> +        kimchi.requestJSON({
> +            url : kimchi.url + 'peers',
> +            type : 'GET',
> +            contentType : 'application/json',
> +            dataType : 'json',
> +            resend : true,
> +            success : suc,
> +            error : err ? err : function(data) {
> +                kimchi.message.error(data.responseJSON.reason);
> +            }
> +        });
>       }
>   };
> diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js
> index ba54b26..ea9951b 100644
> --- a/ui/js/src/kimchi.main.js
> +++ b/ui/js/src/kimchi.main.js
> @@ -20,10 +20,23 @@ kimchi.tabMode = {};
>   kimchi.capabilities = undefined;
>   kimchi.getCapabilities(function(result) {
>       kimchi.capabilities = result;
> +    kimchi.setupPeers();
>   }, function() {
>       kimchi.capabilities = {};
>   });
>
> +kimchi.setupPeers = function(){
> +    if(kimchi.capabilities.federation=="enable"){
> +        kimchi.getPeers(function(data){
> +            if(data.length>0)
> +                $('#peers').css("display", "block");
> +            for(var i=0; i<data.length; i++){
> +                $('.drowdown', '#peers').append("<a href='"+data[i]+"' target='_blank'>"+data[i]+"</a>");
> +            }
> +        });
> +    }
> +};
> +
>   kimchi.main = function() {
>       kimchi.popable();
>
> diff --git a/ui/pages/kimchi-ui.html.tmpl b/ui/pages/kimchi-ui.html.tmpl
> index 7bdf441..4e7b3af 100644
> --- a/ui/pages/kimchi-ui.html.tmpl
> +++ b/ui/pages/kimchi-ui.html.tmpl
> @@ -71,6 +71,13 @@
>       <h1 id="logo"><img alt="Project Kimchi" src="images/theme-default/logo-white.png"></h1>
>       <ul class="nav-top">
>           <li>
> +            <div id="peers" class="peers popable">
> +                <span>$_("Peers")</span>
> +                <span class="arrow"></span>
> +                <div class="drowdown popover right-side"></div>
> +            </div>
> +        </li>
> +        <li>
>               <div id="user" class="popable">
>                   <span id="user-icon"></span>
>                   <span id="user-name" class="empty-when-logged-off"></span>