show neighbors cache age

client/components/routeservers/page.jsx

@@ -61,7 +61,8 @@ class RouteserversPage extends React.Component {
           </div>
           <div className="col-lg-3 col-md-4 col-xs-12">
             <div className="card">
-              <Status routeserverId={this.props.params.routeserverId} />
+              <Status routeserverId={this.props.params.routeserverId}
+                      cacheStatus={this.props.cacheStatus} />
             </div>
           </div>
         </div>
@@ -77,7 +78,13 @@ export default connect(
 
       filterValue: state.neighbors.filterValue,
       sortColumn:  state.neighbors.sortColumn,
-      sortOrder:   state.neighbors.sortOrder
+      sortOrder:   state.neighbors.sortOrder,
+
+      cacheStatus: {
+        generatedAt: state.neighbors.cachedAt,
+        ttl: state.neighbors.cacheTtl,
+      }
+
     };
   }
 )(RouteserversPage);

client/components/routeservers/protocols/reducer.jsx

@@ -7,6 +7,11 @@
 
 import {SET_FILTER_VALUE} from './actions'
 
+import {LOAD_ROUTESERVER_PROTOCOL_REQUEST,
+        LOAD_ROUTESERVER_PROTOCOL_SUCCESS,
+        LOAD_ROUTESERVER_PROTOCOL_ERROR}
+  from '../actions'
+
 const LOCATION_CHANGE = '@@router/LOCATION_CHANGE';
 
 const DEFAULT_SORT_COLUMN = "asn";
@@ -16,6 +21,11 @@ const initialState = {
   sortColumn: DEFAULT_SORT_COLUMN,
   sortOrder: DEFAULT_SORT_ORDER,
 
+  isLoading: false,
+
+  cachedAt: null,
+  cacheTtl: null,
+
   filterQuery: "",
   filterValue: ""
 };
@@ -49,6 +59,24 @@ export default function(state=initialState, action) {
         filterValue: action.payload.value
       });
 
+    case LOAD_ROUTESERVER_PROTOCOL_REQUEST:
+      return Object.assign({}, state, {
+        isLoading: true,
+      });
+
+    case LOAD_ROUTESERVER_PROTOCOL_ERROR:
+      return Object.assign({}, state, {
+        isLoading: false,
+      });
+
+    // TODO: move neighbors list here
+    case LOAD_ROUTESERVER_PROTOCOL_SUCCESS:
+      return Object.assign({}, state, {
+        isLoading: false,
+        cachedAt: action.payload.api.cache_status.cached_at,
+        cacheTtl: action.payload.api.ttl,
+      });
+
     default:
   }
 

client/components/routeservers/status/index.jsx

@@ -27,22 +27,20 @@ class Details extends React.Component {
     }
 
     let cacheStatus = null;
-    if (this.props.cacheStatus) {
+    if (this.props.cacheStatus && 
+        this.props.cacheStatus.ttl &&
+        this.props.cacheStatus.generatedAt) {
       const s = this.props.cacheStatus;
+      const generatedAt = moment(s.generatedAt);
+      const ttl = moment(s.ttl);
+
       cacheStatus = [
          <tr key="cache-status-cached-at">
            <td><i className="fa fa-refresh"></i></td>
            <td>
-             Generated <b>{s.generatedAt.fromNow()}</b><br />
-             Next refresh <b>{s.ttl.fromNow()}</b>
+             Generated <b>{generatedAt.fromNow()}</b> &middot;  Next refresh <b>{ttl.fromNow()}</b>.
            </td>
          </tr>,
-
-         <tr key="cache-status-ttl">
-           <td></td>
-           <td>
-           </td>
-         </tr>
       ];
     };