Add redux actions/reducer for metrics

ui/src/views/MetricsView.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect } from "react";
+import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
+import { getMetricsAsync } from "../actions/metricsActions";
+import { AppState } from "../store";
+import { usePolling } from "../hooks";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -10,12 +14,23 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function MetricsView() {
-  const classes = useStyles();
+function mapStateToProps(state: AppState) {
+  return {
+    loading: state.metrics.loading,
+    error: state.metrics.error,
+    data: state.metrics.data,
+    pollInterval: state.settings.pollInterval,
+  };
+}
 
-  useEffect(() => {
-    console.log("TODO: Get metrics data!");
-  }, []);
+const connector = connect(mapStateToProps, { getMetricsAsync });
+type Props = ConnectedProps<typeof connector>;
+
+function MetricsView(props: Props) {
+  const classes = useStyles();
+  const { pollInterval, getMetricsAsync } = props;
+
+  usePolling(getMetricsAsync, pollInterval);
 
   return (
     <Container maxWidth="lg" className={classes.container}>
@@ -28,4 +43,4 @@ function MetricsView() {
   );
 }
 
-export default MetricsView;
+export default connector(MetricsView);