show result summary

ui/src/app/components/search/SearchStatus.js

@@ -0,0 +1,78 @@
+import moment from 'moment';
+
+
+import { useApiStatus }
+  from 'app/context/api-status';
+import { useRoutesLoading }
+  from 'app/context/routes';
+import { useSearchStatus }
+  from 'app/context/search';
+
+import RelativeTime
+  from 'app/components/datetime/RelativeTime';
+
+
+
+
+const RefreshState = () => {
+  const status = useApiStatus();
+  if (!status.cachedAt || !status.ttlTime) {
+    return null;
+  }
+
+  const cachedAt = moment.utc(status.cachedAt);
+  const cacheTtl = moment.utc(status.ttlTime);
+
+  if (cacheTtl.isBefore(moment.utc())) {
+    // This means cache is currently being rebuilt
+    return (
+      <li>
+        Routes cache was built
+          <b><RelativeTime
+            fuzzyNow={5}
+            pastEvent={true}
+            value={cachedAt} /></b>
+        and is currently being refreshed. 
+      </li>
+    );
+  }
+
+  return (
+    <li>
+      Routes cache was built <b><RelativeTime fuzzyNow={5} value={cachedAt} /> </b>
+      and will be refreshed <b><RelativeTime value={cacheTtl} futureEvent={true} /></b>.
+    </li>
+  );
+}
+
+const SearchStatus = () => {
+  const isLoading = useRoutesLoading();
+  const { queryDurationMs
+        , totalReceived 
+        , totalFiltered
+        } = useSearchStatus();
+
+
+  if (isLoading) {
+    return null;
+  }
+
+  const queryDuration = queryDurationMs && queryDurationMs.toFixed(2);
+
+  return (
+    <div className="card">
+      <div className="lookup-result-summary">
+        <ul>
+          <li>
+            Found <b>{totalReceived}</b> received 
+            and <b>{totalFiltered}</b> filtered routes.
+          </li>
+          <li>Query took <b>{queryDuration} ms</b> to complete.</li>
+          <RefreshState />
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default SearchStatus;

ui/src/app/components/status/Status.js

@@ -35,7 +35,6 @@ import RelativeTime
  */
 export const CacheStatus = () => {
   const status = useApiStatus();
-  console.log(status);
   if (!status) {
     return null;
   }

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

@@ -17,8 +17,7 @@ export const useApiStatus = () => useContext(ApiStatusContext);
  * and version to downstream components
  */
 export const ApiStatusProvider = ({children, api}) => {
-  let ctx = null;
-
+  let ctx = {};
   const cachedAt = api?.cache_status?.cached_at;
   if (cachedAt) {
     const ttl = parseServerTime(api.ttl);

ui/src/app/context/search.js

@@ -4,6 +4,8 @@ import axios from 'axios';
 import { useState
        , useEffect
        , useMemo
+       , useContext
+       , createContext
        }
   from 'react';
 
@@ -13,6 +15,8 @@ import { RoutesReceivedContext
        , paginationState
        , filtersState
        , apiStatusState 
+       , useRoutesReceived
+       , useRoutesFiltered
        }
   from 'app/context/routes';
 import { ApiStatusProvider }
@@ -26,6 +30,7 @@ import { useQuery
 import { encodeFilters }
   from 'app/context/filters';
 
+
 const initialRoutesState = {
   requested: true,
   loading: false,
@@ -169,6 +174,30 @@ const useSearchResults = ({
 }
 
 
+const SearchStatusContext = createContext();
+
+export const useSearchStatus = () => useContext(SearchStatusContext);
+
+export const SearchStatusProvider = ({children, api}) => {
+  const received = useRoutesReceived();
+  const filtered = useRoutesFiltered();
+  
+  const context = {
+    totalReceived: received.totalResults,
+    totalFiltered: filtered.totalResults,
+    queryDurationMs: api.request_duration_ms,
+  };
+
+  return (
+    <SearchStatusContext.Provider value={context}>
+      <ApiStatusProvider api={api}>
+        {children}
+      </ApiStatusProvider>
+    </SearchStatusContext.Provider>
+  );
+}
+
+
 /**
  * RoutesSearchProvider provides routes received, filtered
  * and not exportet.
@@ -192,9 +221,9 @@ export const RoutesSearchProvider = ({
     <RoutesFilteredContext.Provider value={result.filtered}>
     <RoutesReceivedContext.Provider value={result.received}>
     <RoutesNotExportedContext.Provider value={initialRoutesState}>
-      <ApiStatusProvider api={result.apiStatus}>
+      <SearchStatusProvider api={result.apiStatus}>
         {children}
-      </ApiStatusProvider>
+      </SearchStatusProvider>
     </RoutesNotExportedContext.Provider>
     </RoutesReceivedContext.Provider>
     </RoutesFilteredContext.Provider>

ui/src/app/pages/SearchGlobalPage.js

@@ -21,25 +21,19 @@ import PageHeader
   from 'app/components/page/Header';
 import SearchGlobalInput
   from 'app/components/search/SearchGlobalInput';
+import SearchStatus
+  from 'app/components/search/SearchStatus';
 import WaitingCard
   from 'app/components/spinners/WaitingCard';
 import FiltersEditor
   from 'app/components/filters/FiltersEditor';
 import Routes 
   from 'app/components/routes/Routes';
-import { CacheStatus }
-  from 'app/components/status/Status';
 
-const SearchStatus = () => {
-  return (
-    <table className="routeserver-status">
-      <tbody>
-        <CacheStatus />
-      </tbody>
-    </table>
-  );  
-}
 
+/**
+ * Show global search input and results
+ */
 const SearchGlobalContent = () => {
   const isLoading = useRoutesLoading();
   const search = useSearchQuery();
@@ -58,9 +52,7 @@ const SearchGlobalContent = () => {
         </div>
         { hasQuery &&
           <div className="col-lg-3 col-md-12 col-aside-details">
-            <div className="card">
-              <SearchStatus />
-            </div>
+            <SearchStatus />
             <WaitingCard isLoading={isLoading} />
             <FiltersEditor />
           </div> }