added best route indicator

client/assets/scss/components/routes.scss

@@ -1,15 +1,45 @@
 
+@-webkit-keyframes fadeSmooth {
+    from {
+        opacity: 0;
+        left: -60px;
+    }
+
+    to {
+        opacity: 1;
+        left: -87px;
+    }
+}
+@keyframes fadeSmooth {
+    from {
+        opacity: 0;
+        left: -60px;
+    }
+
+    to {
+        opacity: 1;
+        left: -87px;
+    }
+}
+                                   
+.fadeIn {
+}
+
+
 .table-routes {
   // Make pseudo links
   td {
-    cursor: pointer;
-
     color: #337ab7;
     text-decoration: none;
 
     span:hover {
       text-decoration: underline;
     }
+
+    span {
+        cursor: pointer;
+    }
+
   }
 
   .noexport-reason,
@@ -18,6 +48,48 @@
     color: #333;
     margin-bottom: 1px;
   }
+
+
+  .primary-route {
+    position: relative;
+    
+    color: #555;
+    width: 1.5ex;
+    display: inline-block;
+    text-decoration: none;
+    border: none;
+
+    div {
+        display: none;
+        top: -5px;
+        left: -87px;
+        background: rgba(0, 0, 0, 0.45);
+        color: white;
+        position: absolute;
+        padding: 5px;
+        border-radius: 3px;
+        font-weight: bold;
+
+        -webkit-animation-name: fadeSmooth;
+        animation-name: fadeSmooth;
+    }
+
+    &:hover {
+        div {
+            display: block;
+
+            -webkit-animation-duration: 0.5s;
+            animation-duration: 0.5s;
+            -webkit-animation-fill-mode: both;
+            animation-fill-mode: both;
+        }
+    }
+  }
+
+  .route-network {
+    display: inline-block;
+    white-space: nowrap;
+  }
 }
 
 

client/components/routeservers/routes/table.jsx

@@ -45,6 +45,30 @@ const _lookup = (r, path) => {
   return split;
 }
 
+
+
+/*
+ * Rendering Components
+ * ====================
+ */
+
+const PrimaryIndicator = function(props) {
+  if (props.route.details && props.route.details.primary) {
+    return(
+      <span className="primary-route is-primary-route">&gt;
+        <div>Best Route</div>
+      </span>  
+    );
+  }
+
+  // Default
+  return (
+    <span className="primary-route not-primary-route"></span>  
+  )
+}
+
+
+
 const ColDefault = function(props) {
   return (
     <td>
@@ -56,8 +80,11 @@ const ColDefault = function(props) {
 // Include filter and noexport reason in this column.
 const ColNetwork = function(props) {
   return (
-    <td>
-      <span onClick={props.onClick}>{props.route.network}</span>
+    <td className="col-route-network">
+      <span className="route-network" onClick={props.onClick}>
+        <PrimaryIndicator route={props.route} />
+        {props.route.network}
+      </span>
       {props.displayReasons == ROUTES_FILTERED && <FilterReason route={props.route} />}
       {props.displayReasons == ROUTES_NOT_EXPORTED && <NoexportReason route={props.route} />}
     </td>

client/components/routeservers/routes/view.jsx

@@ -144,6 +144,7 @@ class RoutesView extends React.Component {
                              queryParam={queryParam}
                              anchor={name} />
         </center>
+
       </div>
     );
   }