Add redis info view

ui/src/App.tsx

@@ -22,6 +22,7 @@ import LayersIcon from "@material-ui/icons/Layers";
 import SettingsIcon from "@material-ui/icons/Settings";
 import ScheduleIcon from "@material-ui/icons/Schedule";
 import FeedbackIcon from "@material-ui/icons/Feedback";
+import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
 import CloseIcon from "@material-ui/icons/Close";
 import { AppState } from "./store";
 import { paths } from "./paths";
@@ -32,6 +33,7 @@ import DashboardView from "./views/DashboardView";
 import TasksView from "./views/TasksView";
 import SettingsView from "./views/SettingsView";
 import ServersView from "./views/ServersView";
+import RedisInfoView from "./views/RedisInfoView";
 
 const drawerWidth = 220;
 
@@ -218,13 +220,18 @@ function App(props: ConnectedProps<typeof connector>) {
                   <ListItemLink
                     to={paths.SERVERS}
                     primary="Servers"
-                    icon={<LayersIcon />}
+                    icon={<DoubleArrowIcon />}
                   />
                   <ListItemLink
                     to={paths.SCHEDULERS}
                     primary="Schedulers"
                     icon={<ScheduleIcon />}
                   />
+                  <ListItemLink
+                    to={paths.REDIS}
+                    primary="Redis"
+                    icon={<LayersIcon />}
+                  />
                 </div>
               </List>
               <List>
@@ -260,6 +267,9 @@ function App(props: ConnectedProps<typeof connector>) {
                 <Route exact path={paths.SERVERS}>
                   <ServersView />
                 </Route>
+                <Route exact path={paths.REDIS}>
+                  <RedisInfoView />
+                </Route>
                 <Route exact path={paths.SETTINGS}>
                   <SettingsView />
                 </Route>

ui/src/paths.ts

@@ -4,6 +4,7 @@ export const paths = {
   SERVERS: "/servers",
   SCHEDULERS: "/schedulers",
   QUEUE_DETAILS: "/queues/:qname",
+  REDIS: "/redis",
 };
 
 export function queueDetailsPath(qname: string, taskStatus?: string): string {

ui/src/views/RedisInfoView.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Container from "@material-ui/core/Container";
+import { makeStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+  },
+}));
+
+function RedisInfoView() {
+  const classes = useStyles();
+
+  return (
+    <Container maxWidth="lg" className={classes.container}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Typography variant="h5">Redis Info</Typography>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default RedisInfoView;

ui/src/views/SettingsView.tsx

@@ -4,7 +4,7 @@ import Container from "@material-ui/core/Container";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
-import { Typography } from "@material-ui/core";
+import Typography from "@material-ui/core/Typography";
 import Slider from "@material-ui/core/Slider/Slider";
 import { pollIntervalChange } from "../actions/settingsActions";
 import { AppState } from "../store";