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

[Yu Xin Huo]

On 8/27/2014 3:56 AM, Aline Manera wrote:
>
> 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.
in v2, differentiated "peers disabled" from "no peers".
>
> 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>
>