Show orphaned status in active task table

conversion_helpers.go

@@ -247,6 +247,9 @@ type activeTask struct {
 	// Value is either time formatted in RFC3339 format, or "-" which indicates that
 	// the data is not available yet.
 	Deadline string `json:"deadline"`
+
+	// IsOrphaned indicates whether the task is left in active state with no worker processing it.
+	IsOrphaned bool `json:"is_orphaned"`
 }
 
 func toActiveTask(ti *asynq.TaskInfo, pf PayloadFormatter) *activeTask {
@@ -259,7 +262,7 @@ func toActiveTask(ti *asynq.TaskInfo, pf PayloadFormatter) *activeTask {
 		Retried:   ti.Retried,
 		LastError: ti.LastErr,
 	}
-	return &activeTask{baseTask: base}
+	return &activeTask{baseTask: base, IsOrphaned: ti.IsOrphaned}
 }
 
 func toActiveTasks(in []*asynq.TaskInfo, pf PayloadFormatter) []*activeTask {

ui/src/api.ts

@@ -290,6 +290,7 @@ export interface TaskInfo {
   completed_at: string;
   result: string;
   ttl_seconds: number;
+  is_orphaned: boolean; // Only applies to task.state == 'active'
 }
 
 export interface ServerInfo {

ui/src/components/ActiveTasksTable.tsx

@@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import CancelIcon from "@material-ui/icons/Cancel";
-import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
@@ -20,7 +20,12 @@ import React, { useCallback, useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { batchCancelActiveTasksAsync, cancelActiveTaskAsync, cancelAllActiveTasksAsync, listActiveTasksAsync } from "../actions/tasksActions";
+import {
+  batchCancelActiveTasksAsync,
+  cancelActiveTaskAsync,
+  cancelAllActiveTasksAsync,
+  listActiveTasksAsync,
+} from "../actions/tasksActions";
 import { usePolling } from "../hooks";
 import { taskDetailsPath } from "../paths";
 import { ActiveTaskExtended } from "../reducers/tasksReducer";
@@ -29,7 +34,9 @@ import { TableColumn } from "../types/table";
 import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import TableActions from "./TableActions";
-import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
+import TablePaginationActions, {
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -260,9 +267,9 @@ const useRowStyles = makeStyles((theme) => ({
     cursor: "pointer",
     "&:hover": {
       boxShadow: theme.shadows[2],
-    }, 
+    },
     "&:hover $copyButton": {
-      display: "inline-block"
+      display: "inline-block",
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -272,12 +279,12 @@ const useRowStyles = makeStyles((theme) => ({
     width: "200px",
   },
   copyButton: {
-    display: "none"
+    display: "none",
   },
   IdGroup: {
     display: "flex",
     alignItems: "center",
-  }
+  },
 }));
 
 interface RowProps {
@@ -313,19 +320,19 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell component="th" scope="row" className={classes.idCell}>
         <div className={classes.IdGroup}>
-        {uuidPrefix(task.id)}
-        <Tooltip title="Copy full ID to clipboard">
-          <IconButton
-            onClick={(e) => {
-              e.stopPropagation()
-              navigator.clipboard.writeText(task.id)
-            }}
-            size="small"
-            className={classes.copyButton}
-          >
-          <FileCopyOutlinedIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
         </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
@@ -337,9 +344,19 @@ function Row(props: RowProps) {
           {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
-      <TableCell>{task.canceling ? "Canceling" : "Running"}</TableCell>
       <TableCell>
-        {task.start_time === "-" ? "just now" : timeAgo(task.start_time)}
+        {task.canceling
+          ? "Canceling"
+          : task.is_orphaned
+          ? "Orphaned"
+          : "Running"}
+      </TableCell>
+      <TableCell>
+        {task.is_orphaned
+          ? "-"
+          : task.start_time === "-"
+          ? "just now"
+          : timeAgo(task.start_time)}
       </TableCell>
       <TableCell>
         {task.deadline === "-" ? "-" : durationBefore(task.deadline)}
@@ -355,7 +372,9 @@ function Row(props: RowProps) {
             <Tooltip title="Cancel">
               <IconButton
                 onClick={props.onCancelClick}
-                disabled={task.requestPending || task.canceling}
+                disabled={
+                  task.requestPending || task.canceling || task.is_orphaned
+                }
                 size="small"
               >
                 <CancelIcon fontSize="small" />

ui/tsconfig.json

@@ -17,7 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noFallthroughCasesInSwitch": true
   },
   "include": [