(ui): Update Queue state when new list of groups is fetched

ui/src/actions/groupsActions.ts

@@ -9,15 +9,18 @@ export const LIST_GROUPS_ERROR = "LIST_GROUPS_ERROR";
 
 interface ListGroupsBeginAction {
   type: typeof LIST_GROUPS_BEGIN;
+  queue: string;
 }
 
 interface ListGroupsSuccessAction {
   type: typeof LIST_GROUPS_SUCCESS;
   payload: ListGroupsResponse;
+  queue: string;
 }
 
 interface ListGroupsErrorAction {
   type: typeof LIST_GROUPS_ERROR;
+  queue: string;
   error: string;
 }
 
@@ -29,18 +32,20 @@ export type GroupsActionTypes =
 
 export function listGroupsAsync(qname: string) {
   return async (dispatch: Dispatch<GroupsActionTypes>) => {
-    dispatch({ type: LIST_GROUPS_BEGIN });
+    dispatch({ type: LIST_GROUPS_BEGIN, queue: qname });
     try {
       const response = await listGroups(qname);
       dispatch({
         type: LIST_GROUPS_SUCCESS,
         payload: response,
+        queue: qname,
       });
     } catch (error) {
       console.error(`listGroupsAsync: ${toErrorStringWithHttpStatus(error)}`);
       dispatch({
         type: LIST_GROUPS_ERROR,
         error: toErrorString(error),
+        queue: qname,
       });
     }
   };

ui/src/reducers/queuesReducer.ts

@@ -1,3 +1,7 @@
+import {
+  GroupsActionTypes,
+  LIST_GROUPS_SUCCESS,
+} from "../actions/groupsActions";
 import {
   LIST_QUEUES_SUCCESS,
   LIST_QUEUES_BEGIN,
@@ -81,7 +85,7 @@ const initialState: QueuesState = { data: [], loading: false, error: "" };
 
 function queuesReducer(
   state = initialState,
-  action: QueuesActionTypes | TasksActionTypes
+  action: QueuesActionTypes | TasksActionTypes | GroupsActionTypes
 ): QueuesState {
   switch (action.type) {
     case LIST_QUEUES_BEGIN:
@@ -955,6 +959,22 @@ function queuesReducer(
       return { ...state, data: newData };
     }
 
+    case LIST_GROUPS_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            groups: action.payload.groups.length,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
     default:
       return state;
   }