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

@@ -347,9 +347,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)}
@@ -365,7 +375,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": [