Add group count and aggregating task count in TaskView

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",