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

[huoyuxin at linux.vnet.ibm.com]

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 |   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>
-- 
1.7.1