(ui): Add MetricsView

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>

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;
-}
+}

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;