From a0e80ca4da349f06ee7319bc21aba2b34ccc30bd Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Tue, 22 Mar 2022 06:50:10 -0700
Subject: [PATCH] Add group count and aggregating task count in TaskView

---
 conversion_helpers.go                 | 16 ++++++++++------
 go.mod                                |  2 ++
 ui/src/api.ts                         |  2 ++
 ui/src/components/QueueInfoBanner.tsx |  9 +++++++++
 ui/src/components/TasksTable.tsx      | 12 +++++++++++-
 ui/src/views/TasksView.tsx            |  1 +
 6 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/conversion_helpers.go b/conversion_helpers.go
index 764e57a..9fa78bd 100644
--- a/conversion_helpers.go
+++ b/conversion_helpers.go
@@ -82,18 +82,21 @@ type queueStateSnapshot struct {
 	MemoryUsage int64 `json:"memory_usage_bytes"`
 	// Total number of tasks in the queue.
 	Size int `json:"size"`
+	// Totoal number of groups in the queue.
+	Groups int `json:"groups"`
 	// 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"`
-	Scheduled int `json:"scheduled"`
-	Retry     int `json:"retry"`
-	Archived  int `json:"archived"`
-	Completed int `json:"completed"`
+	Active      int `json:"active"`
+	Pending     int `json:"pending"`
+	Aggregating int `json:"aggregating"`
+	Scheduled   int `json:"scheduled"`
+	Retry       int `json:"retry"`
+	Archived    int `json:"archived"`
+	Completed   int `json:"completed"`
 
 	// Total number of tasks processed during the given date.
 	// The number includes both succeeded and failed tasks.
@@ -117,6 +120,7 @@ func toQueueStateSnapshot(info *asynq.QueueInfo) *queueStateSnapshot {
 		DisplayLatency:  info.Latency.Round(10 * time.Millisecond).String(),
 		Active:          info.Active,
 		Pending:         info.Pending,
+		Aggregating:     info.Aggregating,
 		Scheduled:       info.Scheduled,
 		Retry:           info.Retry,
 		Archived:        info.Archived,
diff --git a/go.mod b/go.mod
index 9d0f1c8..f783bdd 100644
--- a/go.mod
+++ b/go.mod
@@ -15,3 +15,5 @@ require (
 	golang.org/x/time v0.0.0-20211116232009-f0f3c7e86c11 // indirect
 	google.golang.org/protobuf v1.27.1 // indirect
 )
+
+replace github.com/hibiken/asynq => ../../../database/Redis/go/asynq
diff --git a/ui/src/api.ts b/ui/src/api.ts
index 50f789a..03681fa 100644
--- a/ui/src/api.ts
+++ b/ui/src/api.ts
@@ -254,11 +254,13 @@ export interface Queue {
   queue: string;
   paused: boolean;
   size: number;
+  groups: number;
   latency_msec: number;
   display_latency: string;
   memory_usage_bytes: number;
   active: number;
   pending: number;
+  aggregating: number;
   scheduled: number;
   retry: number;
   archived: number;
diff --git a/ui/src/components/QueueInfoBanner.tsx b/ui/src/components/QueueInfoBanner.tsx
index 8c8f26c..826250b 100644
--- a/ui/src/components/QueueInfoBanner.tsx
+++ b/ui/src/components/QueueInfoBanner.tsx
@@ -65,6 +65,15 @@ function QueueInfoBanner(props: Props & ReduxProps) {
         </Typography>
       </div>
 
+      <div className={classes.bannerItem}>
+        <Typography variant="subtitle2" color="textPrimary" gutterBottom>
+          Task groups
+        </Typography>
+        <Typography color="textSecondary">
+          {queue ? queue.groups : "-"}
+        </Typography>
+      </div>
+
       <div className={classes.bannerItem}>
         <Typography variant="subtitle2" color="textPrimary" gutterBottom>
           Memory usage
diff --git a/ui/src/components/TasksTable.tsx b/ui/src/components/TasksTable.tsx
index 58db170..29bc0b9 100644
--- a/ui/src/components/TasksTable.tsx
+++ b/ui/src/components/TasksTable.tsx
@@ -52,8 +52,10 @@ function mapStatetoProps(state: AppState, ownProps: Props) {
         queue: ownProps.queue,
         paused: false,
         size: 0,
+        groups: 0,
         active: 0,
         pending: 0,
+        aggregating: 0,
         scheduled: 0,
         retry: 0,
         archived: 0,
@@ -111,7 +113,7 @@ const useStyles = makeStyles((theme) => ({
   },
   search: {
     position: "relative",
-    width: "312px",
+    width: "280px",
     borderRadius: "18px",
     backgroundColor: isDarkTheme(theme) ? "#303030" : theme.palette.grey[100],
     "&:hover, &:focus": {
@@ -147,6 +149,11 @@ function TasksTable(props: Props & ReduxProps) {
   const chips = [
     { key: "active", label: "Active", count: currentStats.active },
     { key: "pending", label: "Pending", count: currentStats.pending },
+    {
+      key: "aggregating",
+      label: "Aggregating",
+      count: currentStats.aggregating,
+    },
     { key: "scheduled", label: "Scheduled", count: currentStats.scheduled },
     { key: "retry", label: "Retry", count: currentStats.retry },
     { key: "archived", label: "Archived", count: currentStats.archived },
@@ -218,6 +225,9 @@ function TasksTable(props: Props & ReduxProps) {
           totalTaskCount={currentStats.pending}
         />
       </TabPanel>
+      <TabPanel value="aggregating" selected={props.selected}>
+        <h3>TODO: GroupTable here</h3>
+      </TabPanel>
       <TabPanel value="scheduled" selected={props.selected}>
         <ScheduledTasksTable
           queue={props.queue}
diff --git a/ui/src/views/TasksView.tsx b/ui/src/views/TasksView.tsx
index b39db74..7a9e761 100644
--- a/ui/src/views/TasksView.tsx
+++ b/ui/src/views/TasksView.tsx
@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
 const validStatus = [
   "active",
   "pending",
+  "aggregating",
   "scheduled",
   "retry",
   "archived",