Add Task details view

Allow users to find task by task ID
2025-10-26 16:26:12 +08:00 · 2021-07-30 05:53:14 -07:00
parent d63e4a3229
commit 3befee382d
17 changed files with 750 additions and 99 deletions
--- a/ui/src/components/ActiveTasksTable.tsx
+++ b/ui/src/components/ActiveTasksTable.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from "react";
+import { useHistory } from "react-router-dom";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -34,6 +35,7 @@ import { usePolling } from "../hooks";
 import { ActiveTaskExtended } from "../reducers/tasksReducer";
 import { durationBefore, timeAgo, uuidPrefix } from "../utils";
 import { TableColumn } from "../types/table";
+import { taskDetailsPath } from "../paths";

 const useStyles = makeStyles((theme) => ({
  table: {
@@ -189,14 +191,16 @@ function ActiveTasksTable(props: Props & ReduxProps) {
                padding="checkbox"
                classes={{ stickyHeader: classes.stickyHeaderCell }}
              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
+                <IconButton>
+                  <Checkbox
+                    indeterminate={numSelected > 0 && numSelected < rowCount}
+                    checked={rowCount > 0 && numSelected === rowCount}
+                    onChange={handleSelectAllClick}
+                    inputProps={{
+                      "aria-label": "select all tasks shown in the table",
+                    }}
+                  />
+                </IconButton>
              </TableCell>
              {columns.map((col) => (
                <TableCell
@@ -257,6 +261,18 @@ function ActiveTasksTable(props: Props & ReduxProps) {
  );
 }

+const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
+  },
+}));
+
 interface RowProps {
  task: ActiveTaskExtended;
  isSelected: boolean;
@@ -269,15 +285,24 @@ interface RowProps {

 function Row(props: RowProps) {
  const { task } = props;
+  const classes = useRowStyles();
+  const history = useHistory();
  return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+        <IconButton>
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </IconButton>
      </TableCell>
      <TableCell component="th" scope="row">
        {uuidPrefix(task.id)}
@@ -302,6 +327,7 @@ function Row(props: RowProps) {
        align="center"
        onMouseEnter={props.onActionCellEnter}
        onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
      >
        {props.showActions ? (
          <React.Fragment>
--- a/ui/src/components/ArchivedTasksTable.tsx
+++ b/ui/src/components/ArchivedTasksTable.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from "react";
+import { useHistory } from "react-router-dom";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -38,6 +39,7 @@ import { timeAgo, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
 import { ArchivedTaskExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
+import { taskDetailsPath } from "../paths";

 const useStyles = makeStyles((theme) => ({
  table: {
@@ -216,14 +218,16 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
                padding="checkbox"
                classes={{ stickyHeader: classes.stickyHeaderCell }}
              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
+                <IconButton>
+                  <Checkbox
+                    indeterminate={numSelected > 0 && numSelected < rowCount}
+                    checked={rowCount > 0 && numSelected === rowCount}
+                    onChange={handleSelectAllClick}
+                    inputProps={{
+                      "aria-label": "select all tasks shown in the table",
+                    }}
+                  />
+                </IconButton>
              </TableCell>
              {columns.map((col) => (
                <TableCell
@@ -288,6 +292,15 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 }

 const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
+  },
  actionCell: {
    width: "96px",
  },
@@ -312,15 +325,23 @@ interface RowProps {
 function Row(props: RowProps) {
  const { task } = props;
  const classes = useRowStyles();
+  const history = useHistory();
  return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+        <IconButton>
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </IconButton>
      </TableCell>
      <TableCell component="th" scope="row">
        {uuidPrefix(task.id)}
@@ -341,6 +362,7 @@ function Row(props: RowProps) {
        className={classes.actionCell}
        onMouseEnter={props.onActionCellEnter}
        onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
      >
        {props.showActions ? (
          <React.Fragment>
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/ui/src/components/PendingTasksTable.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from "react";
+import { useHistory } from "react-router-dom";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -38,6 +39,7 @@ import { usePolling } from "../hooks";
 import { uuidPrefix } from "../utils";
 import { TableColumn } from "../types/table";
 import { PendingTaskExtended } from "../reducers/tasksReducer";
+import { taskDetailsPath } from "../paths";

 const useStyles = makeStyles((theme) => ({
  table: {
@@ -216,14 +218,16 @@ function PendingTasksTable(props: Props & ReduxProps) {
                padding="checkbox"
                classes={{ stickyHeader: classes.stickyHeaderCell }}
              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
+                <IconButton>
+                  <Checkbox
+                    indeterminate={numSelected > 0 && numSelected < rowCount}
+                    checked={rowCount > 0 && numSelected === rowCount}
+                    onChange={handleSelectAllClick}
+                    inputProps={{
+                      "aria-label": "select all tasks shown in the table",
+                    }}
+                  />
+                </IconButton>
              </TableCell>
              {columns.map((col) => (
                <TableCell
@@ -289,7 +293,16 @@ function PendingTasksTable(props: Props & ReduxProps) {
  );
 }

-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
+  },
  actionCell: {
    width: "96px",
  },
@@ -297,7 +310,7 @@ const useRowStyles = makeStyles({
    marginLeft: 3,
    marginRight: 3,
  },
-});
+}));

 interface RowProps {
  task: PendingTaskExtended;
@@ -314,15 +327,23 @@ interface RowProps {
 function Row(props: RowProps) {
  const { task } = props;
  const classes = useRowStyles();
+  const history = useHistory();
  return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+        <IconButton>
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </IconButton>
      </TableCell>
      <TableCell component="th" scope="row">
        {uuidPrefix(task.id)}
@@ -343,6 +364,7 @@ function Row(props: RowProps) {
        className={classes.actionCell}
        onMouseEnter={props.onActionCellEnter}
        onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
      >
        {props.showActions ? (
          <React.Fragment>
--- a/ui/src/components/QueueBreadcrumb.tsx
+++ b/ui/src/components/QueueBreadcrumb.tsx
@@ -31,7 +31,9 @@ interface Props {
  // All queue names.
  queues: string[];
  // Name of the queue currently selected.
-  selectedQueue: string;
+  queueName: string;
+  // ID of the task currently selected (optional).
+  taskId?: string;
 }

 export default function QueueBreadcrumbs(props: Props) {
@@ -57,11 +59,12 @@ export default function QueueBreadcrumbs(props: Props) {
          onClick={() => history.push(paths.HOME)}
        />
        <StyledBreadcrumb
-          label={props.selectedQueue}
+          label={props.queueName}
          deleteIcon={<ExpandMoreIcon />}
          onClick={handleClick}
          onDelete={handleClick}
        />
+        {props.taskId && <StyledBreadcrumb label={`task:${props.taskId}`} />}
      </Breadcrumbs>
      <Menu
        id="queue-breadcrumb-menu"
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/ui/src/components/RetryTasksTable.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from "react";
+import { useHistory } from "react-router-dom";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -42,6 +43,7 @@ import { durationBefore, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
 import { RetryTaskExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
+import { taskDetailsPath } from "../paths";

 const useStyles = makeStyles((theme) => ({
  table: {
@@ -246,14 +248,16 @@ function RetryTasksTable(props: Props & ReduxProps) {
                padding="checkbox"
                classes={{ stickyHeader: classes.stickyHeaderCell }}
              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
+                <IconButton>
+                  <Checkbox
+                    indeterminate={numSelected > 0 && numSelected < rowCount}
+                    checked={rowCount > 0 && numSelected === rowCount}
+                    onChange={handleSelectAllClick}
+                    inputProps={{
+                      "aria-label": "select all tasks shown in the table",
+                    }}
+                  />
+                </IconButton>
              </TableCell>
              {columns.map((col) => (
                <TableCell
@@ -320,7 +324,16 @@ function RetryTasksTable(props: Props & ReduxProps) {
  );
 }

-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
+  },
  actionCell: {
    width: "140px",
  },
@@ -328,7 +341,7 @@ const useRowStyles = makeStyles({
    marginLeft: 3,
    marginRight: 3,
  },
-});
+}));

 interface RowProps {
  task: RetryTaskExtended;
@@ -346,15 +359,24 @@ interface RowProps {
 function Row(props: RowProps) {
  const { task } = props;
  const classes = useRowStyles();
+  const history = useHistory();
+
  return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+        <IconButton>
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </IconButton>
      </TableCell>
      <TableCell component="th" scope="row">
        {uuidPrefix(task.id)}
@@ -377,6 +399,7 @@ function Row(props: RowProps) {
        className={classes.actionCell}
        onMouseEnter={props.onActionCellEnter}
        onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
      >
        {props.showActions ? (
          <React.Fragment>
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/ui/src/components/ScheduledTasksTable.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from "react";
+import { useHistory } from "react-router-dom";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -42,6 +43,7 @@ import { durationBefore, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
 import { ScheduledTaskExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
+import { taskDetailsPath } from "../paths";

 const useStyles = makeStyles((theme) => ({
  table: {
@@ -243,14 +245,16 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
                padding="checkbox"
                classes={{ stickyHeader: classes.stickyHeaderCell }}
              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
+                <IconButton>
+                  <Checkbox
+                    indeterminate={numSelected > 0 && numSelected < rowCount}
+                    checked={rowCount > 0 && numSelected === rowCount}
+                    onChange={handleSelectAllClick}
+                    inputProps={{
+                      "aria-label": "select all tasks shown in the table",
+                    }}
+                  />
+                </IconButton>
              </TableCell>
              {columns.map((col) => (
                <TableCell
@@ -317,7 +321,16 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
  );
 }

-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
+  },
  actionCell: {
    width: "140px",
  },
@@ -325,7 +338,7 @@ const useRowStyles = makeStyles({
    marginLeft: 3,
    marginRight: 3,
  },
-});
+}));

 interface RowProps {
  task: ScheduledTaskExtended;
@@ -343,15 +356,23 @@ interface RowProps {
 function Row(props: RowProps) {
  const { task } = props;
  const classes = useRowStyles();
+  const history = useHistory();
  return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+        <IconButton>
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </IconButton>
      </TableCell>
      <TableCell component="th" scope="row">
        {uuidPrefix(task.id)}
@@ -371,6 +392,7 @@ function Row(props: RowProps) {
        className={classes.actionCell}
        onMouseEnter={props.onActionCellEnter}
        onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
      >
        {props.showActions ? (
          <React.Fragment>
--- a/ui/src/components/TasksTable.tsx
+++ b/ui/src/components/TasksTable.tsx
@@ -1,16 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Paper from "@material-ui/core/Paper";
 import Chip from "@material-ui/core/Chip";
+import InputBase from "@material-ui/core/InputBase";
+import SearchIcon from "@material-ui/icons/Search";
 import ActiveTasksTable from "./ActiveTasksTable";
 import PendingTasksTable from "./PendingTasksTable";
 import ScheduledTasksTable from "./ScheduledTasksTable";
 import RetryTasksTable from "./RetryTasksTable";
 import ArchivedTasksTable from "./ArchivedTasksTable";
 import { useHistory } from "react-router-dom";
-import { queueDetailsPath } from "../paths";
+import { queueDetailsPath, taskDetailsPath } from "../paths";
 import { QueueInfo } from "../reducers/queuesReducer";
 import { AppState } from "../store";
 import { isDarkTheme } from "../theme";
@@ -101,6 +103,38 @@ const useStyles = makeStyles((theme) => ({
    borderRadius: "10px",
    marginLeft: "2px",
  },
+  searchbar: {
+    marginLeft: theme.spacing(4),
+  },
+  search: {
+    position: "relative",
+    width: "312px",
+    borderRadius: "18px",
+    backgroundColor: isDarkTheme(theme) ? "#303030" : theme.palette.grey[100],
+    "&:hover, &:focus": {
+      backgroundColor: isDarkTheme(theme) ? "#303030" : theme.palette.grey[200],
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: "100%",
+    position: "absolute",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  inputRoot: {
+    color: "inherit",
+    width: "100%",
+  },
+  inputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    width: "100%",
+    fontSize: "0.85rem",
+  },
 }));

 function TasksTable(props: Props & ReduxProps) {
@@ -115,6 +149,8 @@ function TasksTable(props: Props & ReduxProps) {
    { key: "archived", label: "Archived", count: currentStats.archived },
  ];

+  const [searchQuery, setSearchQuery] = useState<string>("");
+
  return (
    <Paper variant="outlined" className={classes.container}>
      <div className={classes.header}>
@@ -137,6 +173,34 @@ function TasksTable(props: Props & ReduxProps) {
            />
          ))}
        </div>
+        <div className={classes.searchbar}>
+          <div className={classes.search}>
+            <div className={classes.searchIcon}>
+              <SearchIcon />
+            </div>
+            <InputBase
+              placeholder="Search by ID"
+              classes={{
+                root: classes.inputRoot,
+                input: classes.inputInput,
+              }}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+              }}
+              inputProps={{
+                "aria-label": "search",
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    history.push(
+                      taskDetailsPath(props.queue, searchQuery.trim())
+                    );
+                  }
+                },
+              }}
+            />
+          </div>
+        </div>
      </div>
      <TabPanel value="active" selected={props.selected}>
        <ActiveTasksTable queue={props.queue} />