Add redux actions/reducers for groups

ui/src/actions/groupsActions.ts

@@ -0,0 +1,47 @@
+import { Dispatch } from "redux";
+import { listGroups, ListGroupsResponse } from "../api";
+import { toErrorString, toErrorStringWithHttpStatus } from "../utils";
+
+// List of groups related action types.
+export const LIST_GROUPS_BEGIN = "LIST_GROUPS_BEGIN";
+export const LIST_GROUPS_SUCCESS = "LIST_GROUPS_SUCCESS";
+export const LIST_GROUPS_ERROR = "LIST_GROUPS_ERROR";
+
+interface ListGroupsBeginAction {
+  type: typeof LIST_GROUPS_BEGIN;
+}
+
+interface ListGroupsSuccessAction {
+  type: typeof LIST_GROUPS_SUCCESS;
+  payload: ListGroupsResponse;
+}
+
+interface ListGroupsErrorAction {
+  type: typeof LIST_GROUPS_ERROR;
+  error: string;
+}
+
+// Union of all groups related action types.
+export type GroupsActionTypes =
+  | ListGroupsBeginAction
+  | ListGroupsSuccessAction
+  | ListGroupsErrorAction;
+
+export function listGroupsAsync(qname: string) {
+  return async (dispatch: Dispatch<GroupsActionTypes>) => {
+    dispatch({ type: LIST_GROUPS_BEGIN });
+    try {
+      const response = await listGroups(qname);
+      dispatch({
+        type: LIST_GROUPS_SUCCESS,
+        payload: response,
+      });
+    } catch (error) {
+      console.error(`listGroupsAsync: ${toErrorStringWithHttpStatus(error)}`);
+      dispatch({
+        type: LIST_GROUPS_ERROR,
+        error: toErrorString(error),
+      });
+    }
+  };
+}

ui/src/api.ts

@@ -58,6 +58,10 @@ export interface ListQueueStatsResponse {
   stats: { [qname: string]: DailyStat[] };
 }
 
+export interface ListGroupsResponse {
+  groups: GroupInfo[];
+}
+
 export interface RedisInfoResponse {
   address: string;
   info: RedisInfo;
@@ -250,6 +254,11 @@ export interface RedisInfo {
   used_memory_startup: string;
 }
 
+export interface GroupInfo {
+  group: string;
+  size: number;
+}
+
 export interface Queue {
   queue: string;
   paused: boolean;
@@ -376,6 +385,14 @@ export async function listQueueStats(): Promise<ListQueueStatsResponse> {
   return resp.data;
 }
 
+export async function listGroups(qname: string): Promise<ListGroupsResponse> {
+  const resp = await axios({
+    method: "get",
+    url: `${getBaseUrl()}/queues/${qname}`,
+  });
+  return resp.data;
+}
+
 export async function getTaskInfo(
   qname: string,
   id: string

ui/src/reducers/groupsReducer.ts

@@ -0,0 +1,45 @@
+import {
+  GroupsActionTypes,
+  LIST_GROUPS_BEGIN,
+  LIST_GROUPS_ERROR,
+  LIST_GROUPS_SUCCESS,
+} from "../actions/groupsActions";
+import { GroupInfo } from "../api";
+
+interface GroupsState {
+  loading: boolean;
+  data: GroupInfo[];
+  error: string;
+}
+
+const initialState: GroupsState = {
+  data: [],
+  loading: false,
+  error: "",
+};
+
+function groupsReducer(
+  state = initialState,
+  action: GroupsActionTypes
+): GroupsState {
+  switch (action.type) {
+    case LIST_GROUPS_BEGIN:
+      return { ...state, loading: true };
+
+    case LIST_GROUPS_ERROR:
+      return { ...state, loading: false, error: action.error };
+
+    case LIST_GROUPS_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        error: "",
+        data: action.payload.groups,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default groupsReducer;

ui/src/store.ts

@@ -2,6 +2,7 @@ import { combineReducers, configureStore } from "@reduxjs/toolkit";
 import settingsReducer from "./reducers/settingsReducer";
 import queuesReducer from "./reducers/queuesReducer";
 import tasksReducer from "./reducers/tasksReducer";
+import groupsReducer from "./reducers/groupsReducer";
 import serversReducer from "./reducers/serversReducer";
 import schedulerEntriesReducer from "./reducers/schedulerEntriesReducer";
 import snackbarReducer from "./reducers/snackbarReducer";
@@ -14,6 +15,7 @@ const rootReducer = combineReducers({
   settings: settingsReducer,
   queues: queuesReducer,
   tasks: tasksReducer,
+  groups: groupsReducer,
   servers: serversReducer,
   schedulerEntries: schedulerEntriesReducer,
   snackbar: snackbarReducer,