From c113dcbabe74b32005e197bec2ec257593f89bba Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Wed, 21 Jul 2021 06:30:52 -0700
Subject: [PATCH] Show task-info in TaskDetailsView

---
 ui/src/api.ts                    |   1 +
 ui/src/views/TaskDetailsView.tsx | 116 +++++++++++++++++++++++++++++--
 2 files changed, 112 insertions(+), 5 deletions(-)

diff --git a/ui/src/api.ts b/ui/src/api.ts
index dfdd975..8a54e77 100644
--- a/ui/src/api.ts
+++ b/ui/src/api.ts
@@ -249,6 +249,7 @@ export interface TaskInfo {
   id: string;
   queue: string;
   type: string;
+  state: string;
   max_retry: number;
   retried: number;
   last_failed_at: string;
diff --git a/ui/src/views/TaskDetailsView.tsx b/ui/src/views/TaskDetailsView.tsx
index 9cea5ab..655518d 100644
--- a/ui/src/views/TaskDetailsView.tsx
+++ b/ui/src/views/TaskDetailsView.tsx
@@ -3,6 +3,7 @@ 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 Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 import { useParams } from "react-router-dom";
 import QueueBreadCrumb from "../components/QueueBreadcrumb";
@@ -31,9 +32,24 @@ const useStyles = makeStyles((theme) => ({
   container: {
     paddingTop: theme.spacing(2),
   },
+  paper: {
+    padding: theme.spacing(2),
+    marginTop: theme.spacing(2),
+  },
   breadcrumbs: {
     marginBottom: theme.spacing(2),
   },
+  infoRow: {
+    display: "flex",
+    alignItems: "center",
+    paddingTop: theme.spacing(1),
+  },
+  infoKeyCell: {
+    width: "140px",
+  },
+  infoValueCell: {
+    width: "auto",
+  },
 }));
 
 type Props = ConnectedProps<typeof connector>;
@@ -41,7 +57,7 @@ type Props = ConnectedProps<typeof connector>;
 function TaskDetailsView(props: Props) {
   const classes = useStyles();
   const { qname, taskId } = useParams<TaskDetailsRouteParams>();
-  const { getTaskInfoAsync, pollInterval, listQueuesAsync } = props;
+  const { getTaskInfoAsync, pollInterval, listQueuesAsync, taskInfo } = props;
 
   const fetchTaskInfo = useMemo(() => {
     return () => {
@@ -66,10 +82,100 @@ function TaskDetailsView(props: Props) {
             taskId={taskId}
           />
         </Grid>
-        <Grid item xs={12}>
-          <Typography>
-            Task Details View Queue: {qname} TaskID: {taskId}
-          </Typography>
+        <Grid item xs={12} md={6}>
+          <Paper className={classes.paper} variant="outlined">
+            <Typography variant="h6">Task Info</Typography>
+            <div>
+              <div className={classes.infoRow}>
+                <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                  ID:{" "}
+                </Typography>
+                <Typography className={classes.infoValueCell}>
+                  {taskInfo?.id}
+                </Typography>
+              </div>
+              <div className={classes.infoRow}>
+                <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                  Type:{" "}
+                </Typography>
+                <Typography className={classes.infoValueCell}>
+                  {taskInfo?.type}
+                </Typography>
+              </div>
+              <div className={classes.infoRow}>
+                <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                  State:{" "}
+                </Typography>
+                <Typography className={classes.infoValueCell}>
+                  {taskInfo?.state}
+                </Typography>
+              </div>
+              <div className={classes.infoRow}>
+                <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                  Queue:{" "}
+                </Typography>
+                <Typography className={classes.infoValueCell}>
+                  {taskInfo?.queue}
+                </Typography>
+              </div>
+              <div className={classes.infoRow}>
+                <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                  Retry:{" "}
+                </Typography>
+                <Typography className={classes.infoValueCell}>
+                  {taskInfo?.retried}/{taskInfo?.max_retry}
+                </Typography>
+              </div>
+              <div className={classes.infoRow}>
+                <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                  Last Failure:{" "}
+                </Typography>
+                <Typography className={classes.infoValueCell}>
+                  {taskInfo?.last_failed_at ? (
+                    <Typography>
+                      {taskInfo?.error_message} ({taskInfo?.last_failed_at})
+                    </Typography>
+                  ) : (
+                    <Typography>n/a</Typography>
+                  )}
+                </Typography>
+              </div>
+              <div className={classes.infoRow}>
+                <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                  Next Process Time:{" "}
+                </Typography>
+                {taskInfo?.next_process_at ? (
+                  <Typography>{taskInfo?.next_process_at}</Typography>
+                ) : (
+                  <Typography>n/a</Typography>
+                )}
+              </div>
+            </div>
+            <div className={classes.infoRow}>
+              <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                Timeout:{" "}
+              </Typography>
+              <Typography className={classes.infoValueCell}>
+                {taskInfo?.timeout_seconds ? (
+                  <Typography>{taskInfo?.timeout_seconds} seconds</Typography>
+                ) : (
+                  <Typography>n/a</Typography>
+                )}
+              </Typography>
+            </div>
+            <div className={classes.infoRow}>
+              <Typography variant="subtitle2" className={classes.infoKeyCell}>
+                Deadline:{" "}
+              </Typography>
+              <Typography className={classes.infoValueCell}>
+                {taskInfo?.deadline ? (
+                  <Typography>{taskInfo?.deadline}</Typography>
+                ) : (
+                  <Typography>n/a</Typography>
+                )}
+              </Typography>
+            </div>
+          </Paper>
         </Grid>
       </Grid>
     </Container>