Add copy taskID to clipboard button

2025-01-18 18:55:54 +08:00 · 2022-01-14 22:46:49 -08:00 · 2022-01-14 22:46:49 -08:00 · 609b319a9e
commit 609b319a9e
parent 3ae79d85c3
7 changed files with 274 additions and 153 deletions
--- a/ui/src/components/ActiveTasksTable.tsx
+++ b/ui/src/components/ActiveTasksTable.tsx
@ -1,41 +1,35 @@
-import React, { useState, useCallback } from "react";
-import { useHistory } from "react-router-dom";
-import { connect, ConnectedProps } from "react-redux";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
+import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
+import CancelIcon from "@material-ui/icons/Cancel";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
-import CancelIcon from "@material-ui/icons/Cancel";
-import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import {
-  listActiveTasksAsync,
-  cancelActiveTaskAsync,
-  batchCancelActiveTasksAsync,
-  cancelAllActiveTasksAsync,
-} from "../actions/tasksActions";
+import React, { useCallback, useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { AppState } from "../store";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
+import { batchCancelActiveTasksAsync, cancelActiveTaskAsync, cancelAllActiveTasksAsync, listActiveTasksAsync } from "../actions/tasksActions";
 import { usePolling } from "../hooks";
-import { ActiveTaskExtended } from "../reducers/tasksReducer";
-import { durationBefore, timeAgo, uuidPrefix, prettifyPayload } from "../utils";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { ActiveTaskExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";

 const useStyles = makeStyles((theme) => ({
  table: {
@ -266,11 +260,24 @@ const useRowStyles = makeStyles((theme) => ({
    cursor: "pointer",
    "&:hover": {
      boxShadow: theme.shadows[2],
+    }, 
+    "&:hover $copyButton": {
+      display: "inline-block"
    },
    "&:hover .MuiTableCell-root": {
      borderBottomColor: theme.palette.background.paper,
    },
  },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));

 interface RowProps {
@ -304,8 +311,22 @@ function Row(props: RowProps) {
          />
        </IconButton>
      </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
        {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+          <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
      </TableCell>
      <TableCell>{task.type}</TableCell>
      <TableCell>
--- a/ui/src/components/ArchivedTasksTable.tsx
+++ b/ui/src/components/ArchivedTasksTable.tsx
@ -1,45 +1,36 @@
-import React, { useCallback, useState } from "react";
-import { useHistory } from "react-router-dom";
-import { connect, ConnectedProps } from "react-redux";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import Checkbox from "@material-ui/core/Checkbox";
 import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import { AppState } from "../store";
-import {
-  batchDeleteArchivedTasksAsync,
-  batchRunArchivedTasksAsync,
-  deleteArchivedTaskAsync,
-  deleteAllArchivedTasksAsync,
-  listArchivedTasksAsync,
-  runArchivedTaskAsync,
-  runAllArchivedTasksAsync,
-} from "../actions/tasksActions";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
+import React, { useCallback, useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import TableActions from "./TableActions";
-import { timeAgo, uuidPrefix, prettifyPayload } from "../utils";
+import { batchDeleteArchivedTasksAsync, batchRunArchivedTasksAsync, deleteAllArchivedTasksAsync, deleteArchivedTaskAsync, listArchivedTasksAsync, runAllArchivedTasksAsync, runArchivedTaskAsync } from "../actions/tasksActions";
 import { usePolling } from "../hooks";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { prettifyPayload, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";

 const useStyles = makeStyles((theme) => ({
  table: {
@ -55,6 +46,9 @@ const useStyles = makeStyles((theme) => ({
  pagination: {
    border: "none",
  },
+  idCell: {
+    width: "200px",
+  }
 }));

 function mapStateToProps(state: AppState) {
@ -296,6 +290,9 @@ const useRowStyles = makeStyles((theme) => ({
    cursor: "pointer",
    "&:hover": {
      boxShadow: theme.shadows[2],
+    }, 
+    "&:hover $copyButton": {
+      display: "inline-block"
    },
    "&:hover .MuiTableCell-root": {
      borderBottomColor: theme.palette.background.paper,
@ -308,6 +305,16 @@ const useRowStyles = makeStyles((theme) => ({
    marginLeft: 3,
    marginRight: 3,
  },
+  idCell: {
+    width:"200px"
+  },
+  copyButton: {
+    display: "none"
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));

 interface RowProps {
@ -343,8 +350,23 @@ function Row(props: RowProps) {
          />
        </IconButton>
      </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
        {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }
+            }
+            size="small"
+            className={classes.copyButton}
+          >
+          <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
      </TableCell>
      <TableCell>{task.type}</TableCell>
      <TableCell>
--- a/ui/src/components/CompletedTasksTable.tsx
+++ b/ui/src/components/CompletedTasksTable.tsx
@ -1,47 +1,35 @@
-import React, { useCallback, useState } from "react";
-import { useHistory } from "react-router-dom";
-import { connect, ConnectedProps } from "react-redux";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import Checkbox from "@material-ui/core/Checkbox";
 import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import { AppState } from "../store";
-import {
-  listCompletedTasksAsync,
-  deleteAllCompletedTasksAsync,
-  deleteCompletedTaskAsync,
-  batchDeleteCompletedTasksAsync,
-} from "../actions/tasksActions";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
+import React, { useCallback, useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import TableActions from "./TableActions";
-import {
-  durationFromSeconds,
-  stringifyDuration,
-  timeAgo,
-  uuidPrefix,
-  prettifyPayload
-} from "../utils";
+import { batchDeleteCompletedTasksAsync, deleteAllCompletedTasksAsync, deleteCompletedTaskAsync, listCompletedTasksAsync } from "../actions/tasksActions";
 import { usePolling } from "../hooks";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { durationFromSeconds, prettifyPayload, stringifyDuration, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";

 const useStyles = makeStyles((theme) => ({
  table: {
@ -273,6 +261,9 @@ const useRowStyles = makeStyles((theme) => ({
    "&:hover": {
      boxShadow: theme.shadows[2],
    },
+    "&:hover $copyButton": {
+      display: "inline-block"
+    },
    "&:hover .MuiTableCell-root": {
      borderBottomColor: theme.palette.background.paper,
    },
@ -284,6 +275,16 @@ const useRowStyles = makeStyles((theme) => ({
    marginLeft: 3,
    marginRight: 3,
  },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));

 interface RowProps {
@ -318,8 +319,23 @@ function Row(props: RowProps) {
          />
        </IconButton>
      </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
        {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }
+            }
+            size="small"
+            className={classes.copyButton}
+          >
+          <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
      </TableCell>
      <TableCell>{task.type}</TableCell>
      <TableCell>
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/ui/src/components/PendingTasksTable.tsx
@ -1,45 +1,36 @@
-import React, { useCallback, useState } from "react";
-import { useHistory } from "react-router-dom";
-import { connect, ConnectedProps } from "react-redux";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
 import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import DeleteIcon from "@material-ui/icons/Delete";
 import ArchiveIcon from "@material-ui/icons/Archive";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
-import {
-  listPendingTasksAsync,
-  deletePendingTaskAsync,
-  batchDeletePendingTasksAsync,
-  deleteAllPendingTasksAsync,
-  archivePendingTaskAsync,
-  batchArchivePendingTasksAsync,
-  archiveAllPendingTasksAsync,
-} from "../actions/tasksActions";
+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 { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { AppState } from "../store";
+import { archiveAllPendingTasksAsync, archivePendingTaskAsync, batchArchivePendingTasksAsync, batchDeletePendingTasksAsync, deleteAllPendingTasksAsync, deletePendingTaskAsync, listPendingTasksAsync } from "../actions/tasksActions";
 import { usePolling } from "../hooks";
-import { uuidPrefix, prettifyPayload } from "../utils";
-import { TableColumn } from "../types/table";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { prettifyPayload, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";

 const useStyles = makeStyles((theme) => ({
  table: {
@ -95,7 +86,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
  const [page, setPage] = useState(0);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
+  
  const handlePageChange = (
    event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number
@ -299,10 +290,14 @@ const useRowStyles = makeStyles((theme) => ({
    "&:hover": {
      boxShadow: theme.shadows[2],
    },
+    "&:hover $copyButton":{
+      display: "inline-block"
+    },
    "&:hover .MuiTableCell-root": {
      borderBottomColor: theme.palette.background.paper,
    },
  },
+   
  actionCell: {
    width: "96px",
  },
@ -310,6 +305,16 @@ const useRowStyles = makeStyles((theme) => ({
    marginLeft: 3,
    marginRight: 3,
  },
+  idCell:{
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
+  IdGroup:{
+    display:"flex",
+    alignItems:"center",
+  }
 }));

 interface RowProps {
@ -345,8 +350,22 @@ function Row(props: RowProps) {
          />
        </IconButton>
      </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
        {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => { 
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+            <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
      </TableCell>
      <TableCell>{task.type}</TableCell>
      <TableCell>
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/ui/src/components/RetryTasksTable.tsx
@ -1,49 +1,37 @@
-import React, { useCallback, useState } from "react";
-import { useHistory } from "react-router-dom";
-import { connect, ConnectedProps } from "react-redux";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
 import TableFooter from "@material-ui/core/TableFooter";
+import TableHead from "@material-ui/core/TableHead";
 import TablePagination from "@material-ui/core/TablePagination";
-import Paper from "@material-ui/core/Paper";
+import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
-import DeleteIcon from "@material-ui/icons/Delete";
 import ArchiveIcon from "@material-ui/icons/Archive";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import {
-  batchDeleteRetryTasksAsync,
-  batchRunRetryTasksAsync,
-  batchArchiveRetryTasksAsync,
-  deleteAllRetryTasksAsync,
-  runAllRetryTasksAsync,
-  archiveAllRetryTasksAsync,
-  listRetryTasksAsync,
-  deleteRetryTaskAsync,
-  runRetryTaskAsync,
-  archiveRetryTaskAsync,
-} from "../actions/tasksActions";
-import { AppState } from "../store";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
+import React, { useCallback, useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import TableActions from "./TableActions";
-import { durationBefore, uuidPrefix, prettifyPayload } from "../utils";
+import { archiveAllRetryTasksAsync, archiveRetryTaskAsync, batchArchiveRetryTasksAsync, batchDeleteRetryTasksAsync, batchRunRetryTasksAsync, deleteAllRetryTasksAsync, deleteRetryTaskAsync, listRetryTasksAsync, runAllRetryTasksAsync, runRetryTaskAsync } from "../actions/tasksActions";
 import { usePolling } from "../hooks";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";

 const useStyles = makeStyles((theme) => ({
  table: {
@ -330,6 +318,9 @@ const useRowStyles = makeStyles((theme) => ({
    "&:hover": {
      boxShadow: theme.shadows[2],
    },
+    "&:hover $copyButton": {
+      display: "inline-block"
+    },
    "&:hover .MuiTableCell-root": {
      borderBottomColor: theme.palette.background.paper,
    },
@ -341,6 +332,16 @@ const useRowStyles = makeStyles((theme) => ({
    marginLeft: 3,
    marginRight: 3,
  },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));

 interface RowProps {
@ -378,8 +379,22 @@ function Row(props: RowProps) {
          />
        </IconButton>
      </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
        {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+            <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
      </TableCell>
      <TableCell>{task.type}</TableCell>
      <TableCell>
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/ui/src/components/ScheduledTasksTable.tsx
@ -44,6 +44,7 @@ import { usePolling } from "../hooks";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';

 const useStyles = makeStyles((theme) => ({
  table: {
@ -327,6 +328,9 @@ const useRowStyles = makeStyles((theme) => ({
    "&:hover": {
      boxShadow: theme.shadows[2],
    },
+    "&:hover $copyButton": {
+      display: "inline-block"
+    },
    "&:hover .MuiTableCell-root": {
      borderBottomColor: theme.palette.background.paper,
    },
@ -338,6 +342,16 @@ const useRowStyles = makeStyles((theme) => ({
    marginLeft: 3,
    marginRight: 3,
  },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));

 interface RowProps {
@ -374,8 +388,22 @@ function Row(props: RowProps) {
          />
        </IconButton>
      </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
        {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+            <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
      </TableCell>
      <TableCell>{task.type}</TableCell>
      <TableCell>
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@ -17,7 +17,7 @@
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
    "noFallthroughCasesInSwitch": true
  },
  "include": [