Add TaskDetails view

ui/src/App.tsx

@@ -33,6 +33,7 @@ import ListItemLink from "./components/ListItemLink";
 import SchedulersView from "./views/SchedulersView";
 import DashboardView from "./views/DashboardView";
 import TasksView from "./views/TasksView";
+import TaskDetailsView from "./views/TaskDetailsView";
 import SettingsView from "./views/SettingsView";
 import ServersView from "./views/ServersView";
 import RedisInfoView from "./views/RedisInfoView";
@@ -269,6 +270,9 @@ function App(props: ConnectedProps<typeof connector>) {
             <main className={classes.content}>
               <div className={classes.contentWrapper}>
                 <Switch>
+                  <Route exact path={paths.TASK_DETAILS}>
+                    <TaskDetailsView />
+                  </Route>
                   <Route exact path={paths.QUEUE_DETAILS}>
                     <TasksView />
                   </Route>

ui/src/paths.ts

@@ -5,8 +5,13 @@ export const paths = {
   SCHEDULERS: "/schedulers",
   QUEUE_DETAILS: "/queues/:qname",
   REDIS: "/redis",
+  TASK_DETAILS: "/queues/:qname/tasks/:taskId",
 };
 
+/**************************************************************
+                        Path Helper functions
+ **************************************************************/
+
 export function queueDetailsPath(qname: string, taskStatus?: string): string {
   const path = paths.QUEUE_DETAILS.replace(":qname", qname);
   if (taskStatus) {
@@ -14,3 +19,20 @@ export function queueDetailsPath(qname: string, taskStatus?: string): string {
   }
   return path;
 }
+
+export function taskDetailsPath(qname: string, taskId: string): string {
+  return paths.TASK_DETAILS.replace(":qname", qname).replace(":taskId", taskId);
+}
+
+/**************************************************************
+                        URL Params
+ **************************************************************/
+
+export interface QueueDetailsRouteParams {
+  qname: string;
+}
+
+export interface TaskDetailsRouteParams {
+  qname: string;
+  taskId: string;
+}

ui/src/views/TaskDetailsView.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import { useParams } from "react-router-dom";
+import { TaskDetailsRouteParams } from "../paths";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    paddingTop: theme.spacing(2),
+  },
+}));
+
+interface Props {}
+
+function TaskDetailsView(props: Props) {
+  const classes = useStyles();
+  const { qname, taskId } = useParams<TaskDetailsRouteParams>();
+
+  return (
+    <Container maxWidth="lg" className={classes.container}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Typography>
+            Task Details View Queue: {qname} TaskID: {taskId}
+          </Typography>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default TaskDetailsView;

ui/src/views/TasksView.tsx

@@ -9,6 +9,7 @@ import QueueBreadCrumb from "../components/QueueBreadcrumb";
 import { useParams, useLocation } from "react-router-dom";
 import { listQueuesAsync } from "../actions/queuesActions";
 import { AppState } from "../store";
+import { QueueDetailsRouteParams } from "../paths";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -37,16 +38,12 @@ function useQuery(): URLSearchParams {
   return new URLSearchParams(useLocation().search);
 }
 
-interface RouteParams {
-  qname: string;
-}
-
 const validStatus = ["active", "pending", "scheduled", "retry", "archived"];
 const defaultStatus = "active";
 
 function TasksView(props: ConnectedProps<typeof connector>) {
   const classes = useStyles();
-  const { qname } = useParams<RouteParams>();
+  const { qname } = useParams<QueueDetailsRouteParams>();
   const query = useQuery();
   let selected = query.get("status");
   if (!selected || !validStatus.includes(selected)) {