show related peers

client/assets/scss/components/routes.scss

@@ -157,3 +157,58 @@
 
 }
 
+
+/*
+ * Related Peers
+ */
+.related-peers {
+    $tabHeight: 23px;
+    $shadowOffset: 3px;
+
+    display: block;
+    position: absolute; 
+    overflow: hidden;
+
+    padding: $shadowOffset $shadowOffset 0px $shadowOffset;
+    margin: 0px;
+    
+    list-style: none;
+
+    top: -$tabHeight - $shadowOffset;
+
+    li {
+        height: $tabHeight;
+        line-height: $tabHeight;
+
+        display: inline-block;
+
+        padding: 0px 5px;
+        margin: 0px 10px 0px 0px;
+        
+        border-bottom: 1px solid #ffffff;
+        background: #ffffff;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+
+        box-shadow: 0px 1px 3px #aaa;
+
+        &.active {
+            font-weight: bold;
+            a {
+                color: #222;
+            }
+        }
+
+        a, a:hover {
+            text-decoration: none;     
+        }
+    }
+}
+
+.has-related-peers {
+    .details-main {
+        padding-top: 21px;
+    }
+}
+
+

client/components/routeservers/routes/page.jsx

@@ -204,7 +204,8 @@ export default connect(
     // Find related peers. Peers belonging to the same AS.
     let relatedPeers = [];
     if (neighbor) {
-      relatedPeers = _.where(neighbors, {asn: neighbor.asn});
+      relatedPeers = _.where(neighbors, {asn: neighbor.asn,
+                                         state: "up"});
     }
 
     let received = {

client/components/routeservers/routes/related-peers.jsx

@@ -9,6 +9,9 @@ import {makePeerLinkProps} from './urls'
  * Render related peers as tabs
  */
 export default function RelatedPeers(props) {
+  if (props.peers.length < 2) {
+    return null; // Nothing to do here.
+  }
 
   const peers = props.peers.map((p) => (
     <li key={p.id}