added route age to modal (Issue #121)

ui/src/app/components/datetime/RelativeTimestamp.js

@@ -3,9 +3,13 @@ import moment from 'moment'
 /**
  * Render a relative timestamp
  */
-const RelativeTimestamp = ({value, suffix}) => {
+const RelativeTimestamp = ({value, suffix, now}) => {
+  if (!now) {
+    now = moment().utc();
+  } else {
+    now = moment(now);
+  }
   const tsMs = value / 1000.0 / 1000.0; // nano -> micro -> milli
-  const now = moment.utc()
   const rel = now.subtract(tsMs, 'ms');
   return (
     <>{rel.fromNow(suffix)}</>

ui/src/app/components/datetime/RelativeTimestampFormat.js

@@ -0,0 +1,24 @@
+
+import moment from 'moment'
+
+/**
+ * Render the formated 'absolute' time when given a
+ * relative timestamp (in nanoseconds).
+ *
+ * The timestamp is the duration from now to the absolute
+ * date time in the past.
+ */
+const RelativeTimestampFormat = ({value, format, now}) => {
+  if (!now) {
+    now = moment().utc();
+  } else {
+    now = moment(now);
+  }
+  const tsMs = value / 1000.0 / 1000.0; // nano -> micro -> milli
+  const abs = now.subtract(tsMs, 'ms');
+  return (
+    <>{abs.format(format)}</>
+  );
+}
+
+export default RelativeTimestampFormat;

ui/src/app/components/datetime/RelativeTimestampFormat.test.js

@@ -0,0 +1,18 @@
+import {render, screen} from '@testing-library/react';
+import moment from 'moment';
+
+import RelativeTimestampFormat from 'app/components/datetime/RelativeTimestampFormat';
+
+
+test("render a formatted relative timestamp", () => {
+  const now = moment.utc();
+  const time = now.clone().subtract(10, 'hours');
+  const t = (now - time) * 1000 * 1000;
+  render(<p data-testid="result"><RelativeTimestampFormat value={t} /></p>);
+  const result = screen.getByTestId("result");
+
+  const expected = time.format();
+  expect(result.innerHTML).toBe(expected);
+});
+
+

ui/src/app/components/routes/RouteDetailsModal.js

@@ -4,7 +4,8 @@ import { useCallback }
 
 import { useRouteDetails }
   from 'app/context/routes';
-
+import { useApiStatus }
+  from 'app/context/api-status';
 import { Modal
        , ModalHeader
        , ModalBody
@@ -13,10 +14,15 @@ import { Modal
   from 'app/components/modal/Modal';
 import BgpCommunitiyLabel
   from 'app/components/routes/BgpCommunityLabel';
+import RelativeTimestampFormat
+  from 'app/components/datetime/RelativeTimestampFormat';
+import RelativeTimestamp
+  from 'app/components/datetime/RelativeTimestamp';
 
 
 const RouteDetailsModal = () => {
   const [ route, setRoute ] = useRouteDetails();
+  const api = useApiStatus();
 
   const onDismiss = useCallback(() => setRoute(null), [setRoute]);
 
@@ -49,6 +55,19 @@ const RouteDetailsModal = () => {
         <ModalBody>
           <table className="table table-nolines">
            <tbody>
+            <tr>
+              <th>Age:</th><td>
+                <RelativeTimestampFormat
+                  value={route.age}
+                  now={api.receivedAt}
+                  format="YYYY-MM-DD HH:mm:ss"/> UTC
+                <b> (<RelativeTimestamp
+                        value={route.age}
+                        now={api.receivedAt}
+                        suffix={true} />)
+               </b>
+            </td>
+            </tr>
             <tr>
               <th>Origin:</th><td>{attrs.origin}</td>
             </tr>

ui/src/app/context/api-status.js

@@ -1,3 +1,4 @@
+import moment from 'moment';
 
 import { createContext
        , useContext
@@ -33,6 +34,7 @@ export const ApiStatusProvider = ({children, api}) => {
       cachedAt: api.cache_status?.cached_at,
       origTtl: api.cache_status?.orig_ttl,
       generatedAt: generatedAt,
+      receivedAt: moment.utc(),
       age: age,
       requestDurationMs: api.request_duration_ms,
       store: api.store_status,