Add group count and aggregating task count in TaskView

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"`
+	Active      int `json:"active"`
-	Pending   int `json:"pending"`
+	Pending     int `json:"pending"`
-	Scheduled int `json:"scheduled"`
+	Aggregating int `json:"aggregating"`
-	Retry     int `json:"retry"`
+	Scheduled   int `json:"scheduled"`
-	Archived  int `json:"archived"`
+	Retry       int `json:"retry"`
-	Completed int `json:"completed"`
+	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,

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

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;

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

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}

ui/src/views/TasksView.tsx

@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
 const validStatus = [
   "active",
   "pending",
+  "aggregating",
   "scheduled",
   "retry",
   "archived",