(ui): Add QueueSizeMetricsChart component

ui/src/views/MetricsView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
@@ -6,6 +6,8 @@ import Grid from "@material-ui/core/Grid";
 import { getMetricsAsync } from "../actions/metricsActions";
 import { AppState } from "../store";
 import { usePolling } from "../hooks";
+import Typography from "@material-ui/core/Typography";
+import QueueSizeMetricsChart from "../components/QueueSizeMetricsChart";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -28,7 +30,7 @@ type Props = ConnectedProps<typeof connector>;
 
 function MetricsView(props: Props) {
   const classes = useStyles();
-  const { pollInterval, getMetricsAsync } = props;
+  const { pollInterval, getMetricsAsync, data } = props;
 
   usePolling(getMetricsAsync, pollInterval);
 
@@ -36,9 +38,14 @@ function MetricsView(props: Props) {
     <Container maxWidth="lg" className={classes.container}>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          Hello Metrics
+          <Typography>Queue Size</Typography>
+          <QueueSizeMetricsChart data={data?.data.result || []} />
         </Grid>
       </Grid>
+      <Grid item xs={12}>
+        <Typography>Queue Latency</Typography>
+        <div>TODO: Queue latency chart here</div>
+      </Grid>
     </Container>
   );
 }