(ui): Fix inconsistent data shown in AggregatingTasks view

group_handlers.go

@@ -9,7 +9,8 @@ import (
 )
 
 type listGroupsResponse struct {
-	Groups []*groupInfo `json:"groups"`
+	Queue  *queueStateSnapshot `json:"stats"`
+	Groups []*groupInfo        `json:"groups"`
 }
 
 func newListGroupsHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
@@ -21,8 +22,14 @@ func newListGroupsHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
+		qinfo, err := inspector.GetQueueInfo(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
 
 		resp := listGroupsResponse{
+			Queue:  toQueueStateSnapshot(qinfo),
 			Groups: toGroupInfos(groups),
 		}
 		if err := json.NewEncoder(w).Encode(resp); err != nil {

task_handlers.go

@@ -306,6 +306,11 @@ func newListAggregatingTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFo
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
+		groups, err := inspector.Groups(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
 		payload := make(map[string]interface{})
 		if len(tasks) == 0 {
 			// avoid nil for the tasks field in json output.
@@ -314,6 +319,7 @@ func newListAggregatingTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFo
 			payload["tasks"] = toAggregatingTasks(tasks, pf)
 		}
 		payload["stats"] = toQueueStateSnapshot(qinfo)
+		payload["groups"] = toGroupInfos(groups)
 		writeResponseJSON(w, payload)
 	}
 }

ui/src/actions/tasksActions.ts

@@ -59,6 +59,7 @@ import {
   deleteAggregatingTask,
   runAggregatingTask,
   archiveAggregatingTask,
+  ListAggregatingTasksResponse,
 } from "../api";
 import { Dispatch } from "redux";
 import { toErrorString, toErrorStringWithHttpStatus } from "../utils";
@@ -418,7 +419,7 @@ interface ListAggregatingTasksSuccessAction {
   type: typeof LIST_AGGREGATING_TASKS_SUCCESS;
   queue: string;
   group: string;
-  payload: ListTasksResponse;
+  payload: ListAggregatingTasksResponse;
 }
 
 interface ListAggregatingTasksErrorAction {

ui/src/api.ts

@@ -18,6 +18,12 @@ export interface ListTasksResponse {
   stats: Queue;
 }
 
+export interface ListAggregatingTasksResponse {
+  tasks: TaskInfo[];
+  stats: Queue;
+  groups: GroupInfo[];
+}
+
 export interface ListServersResponse {
   servers: ServerInfo[];
 }
@@ -67,6 +73,7 @@ export interface ListQueueStatsResponse {
 }
 
 export interface ListGroupsResponse {
+  stats: Queue;
   groups: GroupInfo[];
 }
 
@@ -539,7 +546,7 @@ export async function listAggregatingTasks(
   qname: string,
   gname: string,
   pageOpts?: PaginationOptions
-): Promise<ListTasksResponse> {
+): Promise<ListAggregatingTasksResponse> {
   let url = `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks`;
   if (pageOpts) {
     url += `?${queryString.stringify(pageOpts)}`;

ui/src/reducers/groupsReducer.ts

@@ -4,6 +4,10 @@ import {
   LIST_GROUPS_ERROR,
   LIST_GROUPS_SUCCESS,
 } from "../actions/groupsActions";
+import {
+  LIST_AGGREGATING_TASKS_SUCCESS,
+  TasksActionTypes,
+} from "../actions/tasksActions";
 import { GroupInfo } from "../api";
 
 interface GroupsState {
@@ -20,7 +24,7 @@ const initialState: GroupsState = {
 
 function groupsReducer(
   state = initialState,
-  action: GroupsActionTypes
+  action: GroupsActionTypes | TasksActionTypes
 ): GroupsState {
   switch (action.type) {
     case LIST_GROUPS_BEGIN:
@@ -37,6 +41,12 @@ function groupsReducer(
         data: action.payload.groups,
       };
 
+    case LIST_AGGREGATING_TASKS_SUCCESS:
+      return {
+        ...state,
+        data: action.payload.groups,
+      };
+
     default:
       return state;
   }

ui/src/reducers/queuesReducer.ts

@@ -968,10 +968,7 @@ function queuesReducer(
         }
         return {
           ...queueInfo,
-          currentStats: {
+          currentStats: action.payload.stats,
-            ...queueInfo.currentStats,
-            groups: action.payload.groups.length,
-          },
         };
       });
       return { ...state, data: newData };