Re: [Kimchi-devel] [V2] UI: List Kimchi Peers

From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/topbar.css | 36 +++++++++++++++++++++++++++++++++++- ui/js/src/kimchi.api.js | 14 ++++++++++++++ ui/js/src/kimchi.main.js | 14 ++++++++++++++ ui/pages/kimchi-ui.html.tmpl | 10 ++++++++++ 4 files changed, 73 insertions(+), 1 deletions(-) diff --git a/ui/css/theme-default/topbar.css b/ui/css/theme-default/topbar.css index bed4e19..127c56a 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,37 @@ a#btn-logout:hover { display: none; } } + +.peers { + color: white; + cursor: pointer; + height: 52px; + margin: 0 12px; +} + +.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..21ffca7 100644 --- a/ui/js/src/kimchi.main.js +++ b/ui/js/src/kimchi.main.js @@ -20,10 +20,24 @@ kimchi.tabMode = {}; kimchi.capabilities = undefined; kimchi.getCapabilities(function(result) { kimchi.capabilities = result; + kimchi.setupPeers(); }, function() { kimchi.capabilities = {}; }); +kimchi.setupPeers = function(){ + if(kimchi.capabilities.federation=="on"){ + $('#peers').removeClass('hide-content'); + kimchi.getPeers(function(data){ + var hints = $('p', $('.drowdown', '#peers')); + data.length==0 ? hints.toggleClass('hide-content'): hints.addClass('hide-content'); + 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..867ee36 100644 --- a/ui/pages/kimchi-ui.html.tmpl +++ b/ui/pages/kimchi-ui.html.tmpl @@ -71,6 +71,16 @@ <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 hide-content popable"> + <span>$_("Peers")</span> + <span class="arrow"></span> + <div class="drowdown popover right-side"> + <p>$_("Searching")...</p> + <p class="hide-content">$_("No peers found.")</p> + </div> + </div> + </li> + <li> <div id="user" class="popable"> <span id="user-icon"></span> <span id="user-name" class="empty-when-logged-off"></span>