display cache stats and routes results

client/components/lookup/reducer.jsx

@@ -30,6 +30,9 @@ const initialState = {
   pageImported: 0,
   pageFiltered: 0,
 
+  totalPagesImported: 0,
+  totalPagesFiltered: 0,
+
   totalRoutesImported: 0,
   totalRoutesFiltered: 0,
 
@@ -69,12 +72,15 @@ const _loadQueryResult = function(state, payload) {
     // Pagination
     pageImported:        imported.pagination.page,
     pageFiltered:        filtered.pagination.page,
+    totalPagesImported:  imported.pagination.total_pages, 
+    totalPagesFiltered:  filtered.pagination.total_pages,
     totalRoutesImported: imported.pagination.total_results,
     totalRoutesFiltered: filtered.pagination.total_results,
-    totalRoutes: imported.pagination.total_results + filtered.pagination.total_results,
+
 
     // Statistics
-    queryDurationMs: results.request_duration_ms
+    queryDurationMs: results.request_duration_ms,
+    totalRoutes:     imported.pagination.total_results + filtered.pagination.total_results
   });
 }
 

client/components/lookup/results-summary.jsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import {connect} from 'react-redux'
-
+import RelativeTime from 'components/relativetime'
 
 class ResultsBox extends React.Component {
 
@@ -11,15 +11,21 @@ class ResultsBox extends React.Component {
     }
 
     const queryDuration = this.props.queryDuration.toFixed(2);
+    const cachedAt = this.props.cachedAt;
+    const cacheTtl = this.props.cacheTtl;
 
     return (
       <div className="card">
         <div className="lookup-result-summary">
           <ul>
             <li>
-            Displaying <b>{this.props.resultsCount}</b> of <b>{this.props.total}</b> routes
+              Found <b>{this.props.totalImported}</b> accepted 
+              and <b>{this.props.totalFiltered}</b> filtered routes.
+            </li>
+            <li>Query took <b>{queryDuration} ms</b> to complete.</li>
+            <li>Routes cache was built <b><RelativeTime value={cachedAt} /> </b>
+                and will be refreshed <b><RelativeTime value={cacheTtl} /></b>.
             </li>
-            <li>Query took <b>{queryDuration} ms</b> to complete</li>
           </ul>
         </div>
       </div>
@@ -31,11 +37,12 @@ class ResultsBox extends React.Component {
 export default connect(
   (state) => {
     return {
-      query: state.lookup.query,
-      resultsCount: state.lookup.results.length,
-      start: state.lookup.offset,
-      end: state.lookup.limit + state.lookup.offset,
-      total: state.lookup.totalRoutes,
+      totalImported: state.lookup.totalRoutesImported,
+      totalFiltered: state.lookup.totalRoutesFiltered, 
+
+      cachedAt: state.lookup.cachedAt,
+      cacheTtl: state.lookup.cacheTtl,
+
       queryDuration: state.lookup.queryDurationMs
     }
   }

client/components/lookup/results.jsx

@@ -50,7 +50,7 @@ class NoResultsView extends React.Component {
   }
 }
 
-const NoResults = connect(
+const NoResultsFallback = connect(
   (state) => {
     let total = state.lookup.results;
     let query = state.lookup.query;
@@ -111,17 +111,15 @@ class LookupResults extends React.Component {
 
     const filtdHeader = mkHeader("orange", "filtered");
     const recvdHeader = mkHeader("green",  "accepted");
-    const noexHeader  = mkHeader("red",    "not exported");
 
     const filteredRoutes = this.props.routes.filtered;
     const importedRoutes = this.props.routes.imported;
 
     return (
       <div className="lookup-results">
-
         <BgpAttributesModal />
 
-        <NoResults />
+        <NoResultsFallback />
 
         <ResultsView header={filtdHeader}
                      routes={filteredRoutes}
@@ -135,20 +133,26 @@ class LookupResults extends React.Component {
 
 }
 
-function selectRoutes(routes, state) {
-  return _.where(routes, {state: state});
-}
-
 export default connect(
   (state) => {
-    const routes = state.lookup.results;
-    const filteredRoutes = selectRoutes(routes, 'filtered');
-    const importedRoutes = selectRoutes(routes, 'imported');
+    const filteredRoutes = state.lookup.routesFiltered;
+    const importedRoutes = state.lookup.routesImported; 
+
     return {
       routes: {
         filtered: filteredRoutes,
         imported: importedRoutes
       },
+      pagination: {
+        filtered: {
+          page: state.lookup.pageFiltered,
+          totalPages: state.lookup.totalPagesFiltered,
+        },
+        imported: {
+          page: state.lookup.pageImported,
+          totalPages: state.lookup.totalPagesImported,
+        }
+      },
       isLoading: state.lookup.isLoading,
       query: state.lookup.query,
     }