Make task table rows clickable

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: {
@@ -257,6 +259,12 @@ function ActiveTasksTable(props: Props & ReduxProps) {
   );
 }
 
+const useRowStyles = makeStyles({
+  root: {
+    cursor: "pointer",
+  },
+});
+
 interface RowProps {
   task: ActiveTaskExtended;
   isSelected: boolean;
@@ -269,9 +277,16 @@ 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">
+    <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()}>
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
             props.onSelectChange(event.target.checked)
@@ -302,6 +317,7 @@ function Row(props: RowProps) {
         align="center"
         onMouseEnter={props.onActionCellEnter}
         onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
       >
         {props.showActions ? (
           <React.Fragment>

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: {
@@ -288,6 +290,9 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+  },
   actionCell: {
     width: "96px",
   },
@@ -312,9 +317,15 @@ 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">
+    <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()}>
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
             props.onSelectChange(event.target.checked)
@@ -341,6 +352,7 @@ function Row(props: RowProps) {
         className={classes.actionCell}
         onMouseEnter={props.onActionCellEnter}
         onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
       >
         {props.showActions ? (
           <React.Fragment>

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: {
@@ -290,6 +292,9 @@ function PendingTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
+  root: {
+    cursor: "pointer",
+  },
   actionCell: {
     width: "96px",
   },
@@ -314,9 +319,15 @@ 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">
+    <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()}>
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
             props.onSelectChange(event.target.checked)
@@ -343,6 +354,7 @@ function Row(props: RowProps) {
         className={classes.actionCell}
         onMouseEnter={props.onActionCellEnter}
         onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
       >
         {props.showActions ? (
           <React.Fragment>

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: {
@@ -321,6 +323,9 @@ function RetryTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
+  root: {
+    cursor: "pointer",
+  },
   actionCell: {
     width: "140px",
   },
@@ -346,9 +351,16 @@ 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">
+    <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()}>
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
             props.onSelectChange(event.target.checked)
@@ -377,6 +389,7 @@ function Row(props: RowProps) {
         className={classes.actionCell}
         onMouseEnter={props.onActionCellEnter}
         onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
       >
         {props.showActions ? (
           <React.Fragment>

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: {
@@ -318,6 +320,9 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
+  root: {
+    cursor: "pointer",
+  },
   actionCell: {
     width: "140px",
   },
@@ -343,9 +348,15 @@ 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">
+    <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()}>
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
             props.onSelectChange(event.target.checked)
@@ -371,6 +382,7 @@ function Row(props: RowProps) {
         className={classes.actionCell}
         onMouseEnter={props.onActionCellEnter}
         onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
       >
         {props.showActions ? (
           <React.Fragment>