From 3cd2cbe6f27a37c007abecac6356e7e40d85462b Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Fri, 25 Mar 2022 06:06:13 -0700
Subject: [PATCH] Add GroupSelect component

---
 ui/src/api.ts                         |  2 +-
 ui/src/components/GroupSelect.tsx     | 51 +++++++++++++++++++++++++
 ui/src/components/TaskGroupsTable.tsx | 55 +++++++++++++++++++++++++++
 ui/src/components/TasksTable.tsx      |  2 +-
 4 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/GroupSelect.tsx
 create mode 100644 ui/src/components/TaskGroupsTable.tsx

diff --git a/ui/src/api.ts b/ui/src/api.ts
index 6c9f8a1..988599b 100644
--- a/ui/src/api.ts
+++ b/ui/src/api.ts
@@ -388,7 +388,7 @@ export async function listQueueStats(): Promise<ListQueueStatsResponse> {
 export async function listGroups(qname: string): Promise<ListGroupsResponse> {
   const resp = await axios({
     method: "get",
-    url: `${getBaseUrl()}/queues/${qname}`,
+    url: `${getBaseUrl()}/queues/${qname}/groups`,
   });
   return resp.data;
 }
diff --git a/ui/src/components/GroupSelect.tsx b/ui/src/components/GroupSelect.tsx
new file mode 100644
index 0000000..35ad5ca
--- /dev/null
+++ b/ui/src/components/GroupSelect.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import { GroupInfo } from "../api";
+import { isDarkTheme } from "../theme";
+
+const useStyles = makeStyles((theme) => ({
+  groupSelectOption: {
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  groupSize: {
+    fontSize: "12px",
+    color: theme.palette.text.secondary,
+    background: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
+    textAlign: "center",
+    padding: "3px 6px",
+    borderRadius: "10px",
+    marginRight: "2px",
+  },
+}));
+
+interface Props {
+  groups: GroupInfo[];
+  error: string;
+}
+
+export default function GroupSelect(props: Props) {
+  const classes = useStyles();
+  return (
+    <Autocomplete
+      id="task-group-selector"
+      options={props.groups}
+      getOptionLabel={(option: GroupInfo) => option.group}
+      style={{ width: 300 }}
+      renderOption={(option: GroupInfo) => (
+        <div className={classes.groupSelectOption}>
+          <span>{option.group}</span>
+          <span className={classes.groupSize}>{option.size}</span>
+        </div>
+      )}
+      renderInput={(params) => (
+        <TextField {...params} label="Select group" variant="outlined" />
+      )}
+    />
+  );
+}
diff --git a/ui/src/components/TaskGroupsTable.tsx b/ui/src/components/TaskGroupsTable.tsx
new file mode 100644
index 0000000..316651c
--- /dev/null
+++ b/ui/src/components/TaskGroupsTable.tsx
@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { makeStyles } from "@material-ui/core/styles";
+import { listGroupsAsync } from "../actions/groupsActions";
+import GroupSelect from "./GroupSelect";
+import { usePolling } from "../hooks";
+import { AppState } from "../store";
+
+const useStyles = makeStyles((theme) => ({
+  groupSelector: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+}));
+
+function mapStateToProps(state: AppState) {
+  return {
+    groups: state.groups.data,
+    groupsError: state.groups.error,
+    pollInterval: state.settings.pollInterval,
+  };
+}
+
+const mapDispatchToProps = {
+  listGroupsAsync,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+interface Props {
+  queue: string;
+}
+
+function TaskGroupsTable(props: Props & ConnectedProps<typeof connector>) {
+  const { pollInterval, listGroupsAsync, queue } = props;
+  const classes = useStyles();
+
+  const fetchGroups = useCallback(() => {
+    listGroupsAsync(queue);
+  }, [listGroupsAsync, queue]);
+
+  usePolling(fetchGroups, pollInterval);
+
+  return (
+    <div>
+      <div className={classes.groupSelector}>
+        <GroupSelect groups={props.groups} error={props.groupsError} />
+      </div>
+    </div>
+  );
+}
+
+export default connector(TaskGroupsTable);
diff --git a/ui/src/components/TasksTable.tsx b/ui/src/components/TasksTable.tsx
index b0d5d93..f22c1c2 100644
--- a/ui/src/components/TasksTable.tsx
+++ b/ui/src/components/TasksTable.tsx
@@ -229,7 +229,7 @@ function TasksTable(props: Props & ReduxProps) {
         />
       </TabPanel>
       <TabPanel value="aggregating" selected={props.selected}>
-        <TaskGroupsTable />
+        <TaskGroupsTable queue={props.queue} />
       </TabPanel>
       <TabPanel value="scheduled" selected={props.selected}>
         <ScheduledTasksTable