Show query stats on the homepage

1 files changed, 14 insertions, 0 deletions

diff --git a/src/routes/Home.js b/src/routes/Home.js
index fff4323..9cebcc4 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,6 +1,14 @@
 import Button from "../uikit/Button";
+import { useState, useEffect } from "react";
 
 export default function Home() {
+    let [metrics, setMetrics] = useState();
+    useEffect(() => {
+        fetch("/api/v1/metrics")
+        .then((resp) => resp.json())
+        .then((resp) => setMetrics(resp))
+    } , []);
+
   return (
     <div>
       <h1>
@@ -9,6 +17,12 @@ export default function Home() {
       <Button primary onClick={() => (document.location = "/zones")}>
         Zones
       </Button>
+      <div>
+        {metrics != null && (
+            <p>Served {metrics.count} queries in the last 24 hours!
+            99% of those queries were served in under {(metrics.p99 / 1000).toPrecision(2)}ms</p>
+        )}
+      </div>
     </div>
   );
 }