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(a)linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)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>