From aceac82d7862d6e92f324c7257a44b4597efe6c8 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Sat, 19 Feb 2022 06:01:42 -0800
Subject: [PATCH] Show orphaned status in active task table

---
 conversion_helpers.go                  |  5 ++++-
 ui/src/api.ts                          |  1 +
 ui/src/components/ActiveTasksTable.tsx | 18 +++++++++++++++---
 ui/tsconfig.json                       |  2 +-
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/conversion_helpers.go b/conversion_helpers.go
index 4ba5ef3..e1fc96c 100644
--- a/conversion_helpers.go
+++ b/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 {
diff --git a/ui/src/api.ts b/ui/src/api.ts
index e3dfb08..9c7942d 100644
--- a/ui/src/api.ts
+++ b/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 {
diff --git a/ui/src/components/ActiveTasksTable.tsx b/ui/src/components/ActiveTasksTable.tsx
index 1c1c11b..83c852d 100644
--- a/ui/src/components/ActiveTasksTable.tsx
+++ b/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" />
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index fbce9be..e18c413 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noFallthroughCasesInSwitch": true
   },
   "include": [