refactored datetime rendering

client/components/bgp-communities/label.jsx

@@ -2,26 +2,8 @@
 import React from 'react'
 import {connect} from 'react-redux'
 
+import {lookupCommunity} from './utils'
 
-function _lookupCommunity(communities, community) {
-  let lookup = communities;
-  for (let c of community) {
-    if (typeof(lookup) !== "object") {
-      return null;
-    }
-    let res = lookup[c];
-    if (!res) {
-      // Try the wildcard
-      if (lookup["*"]) {
-        res = lookup["*"]
-      } else {
-        return null; // We did everything we could
-      }
-    }
-    lookup = res;
-  }
-  return lookup;
-}
 
 
 /*
@@ -58,7 +40,7 @@ class Label extends React.Component {
   render() {
 
     // Lookup communities
-    const readableCommunityLabel = _lookupCommunity(this.props.communities, this.props.community);
+    const readableCommunityLabel = lookupCommunity(this.props.communities, this.props.community);
     const readableCommunity = _expandVars(readableCommunityLabel, this.props.community);
     const key = this.props.community.join(":");
 

client/components/bgp-communities/utils.jsx

@@ -0,0 +1,53 @@
+
+/*
+ * Communities helper
+ */
+
+/* 
+ * Check if a community exists in a given set of communities.
+ * Communities are represented as a nested object:
+ *     {
+ *         1234: {
+ *            23: "community-leaf",
+ *            42: { 
+ *              1: "large-community-leaf"
+ *            }
+ *     }
+ */
+
+export function lookupCommunity(communities, community) {
+  let lookup = communities;
+  for (let c of community) {
+    if (typeof(lookup) !== "object") {
+      return null;
+    }
+    let res = lookup[c];
+    if (!res) {
+      // Try the wildcard
+      if (lookup["*"]) {
+        res = lookup["*"]
+      } else {
+        return null; // We did everything we could
+      }
+    }
+    lookup = res;
+  }
+  return lookup;
+}
+
+
+/*
+ * Reject candidate helpers:
+ * 
+ *  - check if prefix is a reject candidate
+ *  - make css classes
+ */
+
+export function isRejectCandidate(route, rejectCommunities) {
+  // Check if any reject candidate community is set
+  const communities = props.route.bgp.communities;
+  const largeCommunities = props.route.bgp.large_communities;
+
+}
+
+

client/components/datetime/relative-timestamp.jsx

@@ -2,9 +2,6 @@
 import React from 'react'
 import moment from 'moment'
 
-
-window.momnet = moment;
-
 export default class RelativeTimestamp extends React.Component {
   render() {
     const tsMs = this.props.value / 1000.0 / 1000.0; // nano -> micro -> milli
@@ -17,4 +14,3 @@ export default class RelativeTimestamp extends React.Component {
   }
 }
 
-

client/components/datetime/relative.jsx

@@ -1,10 +1,8 @@
 
-
 import moment from 'moment'
 
 import React from 'react'
 
-
 export default class RelativeTime extends React.Component {
 
   render() {
@@ -19,11 +17,21 @@ export default class RelativeTime extends React.Component {
       time = moment.utc(this.props.value);
     }
 
+    // A few seconds ago / in a few seconds can be replaced 
+    // with 'just now'.
+    // fuzzyNow can be set as a threshold of seconds
+    if (this.props.fuzzyNow) {
+      const now = moment.utc();
+      if (Math.abs(now - time) / 1000.0 < this.props.fuzzyNow) {
+        return (
+          <span>just now</span>
+        );
+      }
+    }
+
     return (
       <span>{time.fromNow(this.props.suffix)}</span>
     );
   }
 }
 
-
-

client/components/lookup/results-summary.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import {connect} from 'react-redux'
 import moment from 'moment'
 
-import RelativeTime from 'components/relativetime'
+import RelativeTime from 'components/datetime/relative'
 
 
 
@@ -28,7 +28,7 @@ const RefreshState = function(props) {
 
   return (
     <li>
-      Routes cache was built <b><RelativeTime value={cachedAt} /> </b>
+      Routes cache was built <b><RelativeTime fuzzyNow={5} value={cachedAt} /> </b>
       and will be refreshed <b><RelativeTime value={cacheTtl} /></b>.
     </li>
   );

client/components/routeservers/protocols/index.jsx

@@ -12,7 +12,7 @@ import {loadRouteserverProtocol}
   from 'components/routeservers/actions'
 
 import RelativeTimestamp
-	from 'components/relativetime/timestamp'
+	from 'components/datetime/relative-timestamp'
 
 import LoadingIndicator
 	from 'components/loading-indicator/small'

client/components/routeservers/status/index.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import {connect} from 'react-redux'
 
 import Datetime from 'components/datetime'
-import moment from 'moment'
+import RelativeTime from 'components/datetime/relative'
 
 
 class Details extends React.Component {
@@ -30,16 +30,14 @@ class Details extends React.Component {
     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);
-
+      const cs = this.props.cacheStatus;
       cacheStatus = [
          <tr key="cache-status-cached-at">
            <td><i className="fa fa-refresh"></i></td>
            <td>
-             Generated <b>{generatedAt.fromNow()}</b>.<br />
-             Next refresh <b>{ttl.fromNow()}</b>.
+             Generated <b><RelativeTime value={cs.generatedAt}
+                                        fuzzyNow={5} /></b>.<br />
+             Next refresh <b><RelativeTime value={cs.ttl} /></b>.
            </td>
          </tr>,
       ];