From 8a508c58eb787e74d578ac9886bc9154bcb3d8ec Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Wed, 23 Feb 2022 06:30:55 -0800
Subject: [PATCH] Display queue latency

---
 conversion_helpers.go                     | 37 ++++++++++++++---------
 ui/src/api.ts                             |  2 ++
 ui/src/components/QueueInfoBanner.tsx     |  9 ++++++
 ui/src/components/QueuesOverviewTable.tsx | 12 ++++++++
 4 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/conversion_helpers.go b/conversion_helpers.go
index e1fc96c..73d91df 100644
--- a/conversion_helpers.go
+++ b/conversion_helpers.go
@@ -82,6 +82,11 @@ type queueStateSnapshot struct {
 	MemoryUsage int64 `json:"memory_usage_bytes"`
 	// Total number of tasks in the queue.
 	Size int `json:"size"`
+	// Latency of the queue in milliseconds.
+	LatencyMillisec int64 `json:"latency_msec"`
+	// Latency duration string for display purpose.
+	DisplayLatency string `json:"display_latency"`
+
 	// Number of tasks in each state.
 	Active    int `json:"active"`
 	Pending   int `json:"pending"`
@@ -103,22 +108,24 @@ type queueStateSnapshot struct {
 	Timestamp time.Time `json:"timestamp"`
 }
 
-func toQueueStateSnapshot(s *asynq.QueueInfo) *queueStateSnapshot {
+func toQueueStateSnapshot(info *asynq.QueueInfo) *queueStateSnapshot {
 	return &queueStateSnapshot{
-		Queue:       s.Queue,
-		MemoryUsage: s.MemoryUsage,
-		Size:        s.Size,
-		Active:      s.Active,
-		Pending:     s.Pending,
-		Scheduled:   s.Scheduled,
-		Retry:       s.Retry,
-		Archived:    s.Archived,
-		Completed:   s.Completed,
-		Processed:   s.Processed,
-		Succeeded:   s.Processed - s.Failed,
-		Failed:      s.Failed,
-		Paused:      s.Paused,
-		Timestamp:   s.Timestamp,
+		Queue:           info.Queue,
+		MemoryUsage:     info.MemoryUsage,
+		Size:            info.Size,
+		LatencyMillisec: info.Latency.Milliseconds(),
+		DisplayLatency:  info.Latency.String(),
+		Active:          info.Active,
+		Pending:         info.Pending,
+		Scheduled:       info.Scheduled,
+		Retry:           info.Retry,
+		Archived:        info.Archived,
+		Completed:       info.Completed,
+		Processed:       info.Processed,
+		Succeeded:       info.Processed - info.Failed,
+		Failed:          info.Failed,
+		Paused:          info.Paused,
+		Timestamp:       info.Timestamp,
 	}
 }
 
diff --git a/ui/src/api.ts b/ui/src/api.ts
index 9c7942d..c3cf6d0 100644
--- a/ui/src/api.ts
+++ b/ui/src/api.ts
@@ -254,6 +254,8 @@ export interface Queue {
   queue: string;
   paused: boolean;
   size: number;
+  latency_msec: number;
+  display_latency: string;
   memory_usage_bytes: number;
   active: number;
   pending: number;
diff --git a/ui/src/components/QueueInfoBanner.tsx b/ui/src/components/QueueInfoBanner.tsx
index be9d164..8c8f26c 100644
--- a/ui/src/components/QueueInfoBanner.tsx
+++ b/ui/src/components/QueueInfoBanner.tsx
@@ -74,6 +74,15 @@ function QueueInfoBanner(props: Props & ReduxProps) {
         </Typography>
       </div>
 
+      <div className={classes.bannerItem}>
+        <Typography variant="subtitle2" color="textPrimary" gutterBottom>
+          Latency
+        </Typography>
+        <Typography color="textSecondary">
+          {queue ? queue.display_latency : "-"}
+        </Typography>
+      </div>
+
       <div className={classes.bannerItem}>
         <Typography variant="subtitle2" color="textPrimary" gutterBottom>
           Processed
diff --git a/ui/src/components/QueuesOverviewTable.tsx b/ui/src/components/QueuesOverviewTable.tsx
index 4a172a1..b725bf8 100644
--- a/ui/src/components/QueuesOverviewTable.tsx
+++ b/ui/src/components/QueuesOverviewTable.tsx
@@ -50,6 +50,7 @@ enum SortBy {
   State,
   Size,
   MemoryUsage,
+  Latency,
   Processed,
   Failed,
   ErrorRate,
@@ -72,6 +73,12 @@ const colConfigs: SortableTableColumn<SortBy>[] = [
     sortBy: SortBy.MemoryUsage,
     align: "right",
   },
+  {
+    label: "Latency",
+    key: "latency",
+    sortBy: SortBy.Latency,
+    align: "right",
+  },
   {
     label: "Processed",
     key: "processed",
@@ -137,6 +144,10 @@ export default function QueuesOverviewTable(props: Props) {
         if (q1.memory_usage_bytes === q2.memory_usage_bytes) return 0;
         isQ1Smaller = q1.memory_usage_bytes < q2.memory_usage_bytes;
         break;
+      case SortBy.Latency:
+        if (q1.latency_msec === q2.latency_msec) return 0;
+        isQ1Smaller = q1.latency_msec < q2.latency_msec;
+        break;
       case SortBy.Processed:
         if (q1.processed === q2.processed) return 0;
         isQ1Smaller = q1.processed < q2.processed;
@@ -283,6 +294,7 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell align="right">{q.size}</TableCell>
       <TableCell align="right">{prettyBytes(q.memory_usage_bytes)}</TableCell>
+      <TableCell align="right">{q.display_latency}</TableCell>
       <TableCell align="right">{q.processed}</TableCell>
       <TableCell align="right">{q.failed}</TableCell>
       <TableCell align="right">{percentage(q.failed, q.processed)}</TableCell>