quick links to routes sections

client/assets/scss/components/routes.scss

@@ -108,6 +108,52 @@
 .routes-loading.card {
     p {
         font-family: monospace;
+        font-size: 12px;
     }
 }
 
+.routes-header-container {
+    text-decoration: none;
+
+    a:hover {
+        text-decoration: none;
+    }
+}
+
+
+.routes-quick-links {
+    margin-bottom: 0.75em; 
+    margin-top: -0.5em;
+
+    text-align: right;
+    span {
+      color: #888;
+    }
+
+    ul {
+        padding: 0px;
+        margin: 0px;
+        display: inline-block;
+    }
+    li {
+        display: inline-block;
+        padding: 0px 4px;
+        margin: 0px 0px 0px 8px;
+        background: white;
+        border-radius: 3px;
+
+        &.filtered a {
+          color: orange;
+        }
+
+        &.received a {
+          color: green;
+        }
+
+        &.not-exported a {
+          color: red;
+        }
+    }
+
+}
+

client/components/routeservers/routes/page.jsx

@@ -20,6 +20,8 @@ import RoutesView  from './view'
 
 import SearchInput from 'components/search-input'
 
+import QuickLinks from './quick-links'
+
 import BgpAttributesModal
   from './bgp-attributes-modal'
 
@@ -143,6 +145,8 @@ class RoutesPage extends React.Component {
                 onChange={(e) => this.setFilter(e.target.value)}  />
             </div>
 
+            <QuickLinks routes={this.props.routes} />
+
             <RoutesViewEmpty routes={this.props.routes} 
                              loadNotExported={this.props.loadNotExported} />
 

client/components/routeservers/routes/quick-links.jsx

@@ -0,0 +1,56 @@
+
+import React from 'react'
+import {connect} from 'react-redux'
+
+
+/*
+ * Quick links:
+ * Jump to anchors for: not exported, filtered and received
+ */
+
+const QuickLinks = function(props) {
+
+  const isLoading = props.routes.received.loading ||
+                    props.routes.filtered.loading;
+  
+  // Do no display some dangleing "go to:" text
+  if (isLoading) {
+    return null;
+  }
+
+  // Handle special not exported: Default just works like
+  // filtered or received. When loaded on demand, we override
+  // this.
+  let showNotExported = (!props.routes.notExported.loading &&
+                          props.routes.notExported.totalResults > 0);
+  if (props.loadNotExportedOnDemand) {
+    // Show the link when nothing else is loading anymore
+    showNotExported = !isLoading;
+  }
+
+  return (
+    <div className="routes-quick-links">
+      <span>Go to:</span>
+      <ul>
+        {(!props.routes.filtered.loading && 
+           props.routes.filtered.totalResults > 0) &&
+          <li className="filtered">
+            <a href="#routes-filtered">Filtered</a></li>}
+        {(!props.routes.received.loading &&
+           props.routes.received.totalResults > 0) &&
+          <li className="received">
+            <a href="#routes-received">Accepted</a></li>}
+        {showNotExported &&
+          <li className="not-exported">
+            <a href="#routes-not-exported">Not Exported</a></li>}
+      </ul>
+    </div>
+  );
+}
+
+export default connect(
+  (state) => ({
+    "loadNotExportedOnDemand": state.config.noexport_load_on_demand, 
+  })
+)(QuickLinks);
+

client/components/routeservers/routes/view.jsx

@@ -32,7 +32,8 @@ const RoutesHeader = (props) => {
     [ROUTES_FILTERED]: "filtered",
     [ROUTES_NOT_EXPORTED]: "not exported"
   }[type];
-  return (<p style={{"color": color, "textTransform": "uppercase"}}>
+  return (<p className="routes-header"
+             style={{"color": color, "textTransform": "uppercase"}}>
             Routes {rtype}
           </p>);
 };
@@ -150,7 +151,7 @@ class RoutesView extends React.Component {
     return (
       <div className={`card routes-view ${name}`}>
         <div className="row">
-          <div className="col-md-6">
+          <div className="col-md-6 routes-header-container">
             <a name={name} id={name} ref="scrollAnchor">
               <RoutesHeader type={type} />
             </a>