From 0279bd29cd6683d4f93f031ed1804c0ac5b8c337 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Fri, 26 Nov 2021 08:14:34 -0800
Subject: [PATCH] (ui): Add MetricsView

---
 ui/src/App.tsx               |  6 +++++-
 ui/src/paths.ts              |  3 ++-
 ui/src/views/MetricsView.tsx | 31 +++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/views/MetricsView.tsx

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index a610f27..2aea733 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -38,6 +38,7 @@ import TaskDetailsView from "./views/TaskDetailsView";
 import SettingsView from "./views/SettingsView";
 import ServersView from "./views/ServersView";
 import RedisInfoView from "./views/RedisInfoView";
+import MetricsView from "./views/MetricsView";
 import PageNotFoundView from "./views/PageNotFoundView";
 
 const drawerWidth = 220;
@@ -247,7 +248,7 @@ function App(props: ConnectedProps<typeof connector>) {
                     />
                     {window.PROMETHEUS_SERVER_ADDRESS && (
                       <ListItemLink
-                        to="/TODO"
+                        to={paths.METRICS}
                         primary="Metrics"
                         icon={<TimelineIcon />}
                       />
@@ -299,6 +300,9 @@ function App(props: ConnectedProps<typeof connector>) {
                   <Route exact path={paths.HOME}>
                     <DashboardView />
                   </Route>
+                  <Route exact path={paths.METRICS}>
+                    <MetricsView />
+                  </Route>
                   <Route path="*">
                     <PageNotFoundView />
                   </Route>
diff --git a/ui/src/paths.ts b/ui/src/paths.ts
index a8c110e..cfc5321 100644
--- a/ui/src/paths.ts
+++ b/ui/src/paths.ts
@@ -6,6 +6,7 @@ export const paths = {
   QUEUE_DETAILS: `${window.ROOT_PATH}/queues/:qname`,
   REDIS: `${window.ROOT_PATH}/redis`,
   TASK_DETAILS: `${window.ROOT_PATH}/queues/:qname/tasks/:taskId`,
+  METRICS: `${window.ROOT_PATH}/metrics`,
 };
 
 /**************************************************************
@@ -35,4 +36,4 @@ export interface QueueDetailsRouteParams {
 export interface TaskDetailsRouteParams {
   qname: string;
   taskId: string;
-}
\ No newline at end of file
+}
diff --git a/ui/src/views/MetricsView.tsx b/ui/src/views/MetricsView.tsx
new file mode 100644
index 0000000..98079ef
--- /dev/null
+++ b/ui/src/views/MetricsView.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+import Grid from "@material-ui/core/Grid";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+}));
+
+function MetricsView() {
+  const classes = useStyles();
+
+  useEffect(() => {
+    console.log("TODO: Get metrics data!");
+  }, []);
+
+  return (
+    <Container maxWidth="lg" className={classes.container}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          Hello Metrics
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default MetricsView;