(ui): Use TasksTable component for aggregating tasks

ui/src/components/AggregatingTasksTableContainer.tsx

@@ -0,0 +1,100 @@
+import { makeStyles } from "@material-ui/core/styles";
+import Alert from "@material-ui/lab/Alert";
+import AlertTitle from "@material-ui/lab/AlertTitle";
+import React, { useCallback, useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { listGroupsAsync } from "../actions/groupsActions";
+import { GroupInfo } from "../api";
+import { usePolling } from "../hooks";
+import { AppState } from "../store";
+import AggregatingTasksTable from "./AggregatingTasksTable";
+import GroupSelect from "./GroupSelect";
+
+const useStyles = makeStyles((theme) => ({
+  groupSelector: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+}));
+
+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 AggregatingTasksTableContainer(
+  props: Props & ConnectedProps<typeof connector>
+) {
+  const [selectedGroup, setSelectedGroup] = useState<GroupInfo | null>(null);
+  const { pollInterval, listGroupsAsync, queue } = props;
+  const classes = useStyles();
+
+  const fetchGroups = useCallback(() => {
+    listGroupsAsync(queue);
+  }, [listGroupsAsync, queue]);
+
+  usePolling(fetchGroups, pollInterval);
+
+  if (props.groupsError.length > 0) {
+    return (
+      <Alert severity="error" className={classes.alert}>
+        <AlertTitle>Error</AlertTitle>
+        {props.groupsError}
+      </Alert>
+    );
+  }
+  if (props.groups.length === 0) {
+    return (
+      <Alert severity="info" className={classes.alert}>
+        <AlertTitle>Info</AlertTitle>
+        No aggregating tasks at this time.
+      </Alert>
+    );
+  }
+
+  return (
+    <div>
+      <div className={classes.groupSelector}>
+        <GroupSelect
+          selected={selectedGroup}
+          onSelect={setSelectedGroup}
+          groups={props.groups}
+          error={props.groupsError}
+        />
+      </div>
+      {selectedGroup !== null ? (
+        <AggregatingTasksTable
+          queue={props.queue}
+          totalTaskCount={selectedGroup.size}
+          selectedGroup={selectedGroup.group}
+        />
+      ) : (
+        <Alert severity="info" className={classes.alert}>
+          <AlertTitle>Info</AlertTitle>
+          <div>Please select group</div>
+        </Alert>
+      )}
+    </div>
+  );
+}
+
+export default connector(AggregatingTasksTableContainer);