add copy id for the rest of tables

This commit is contained in:
Peizhi Zheng
2022-01-12 22:51:16 -08:00
parent 307e7d29fe
commit d07e08b4d6
6 changed files with 101 additions and 3 deletions

View File

@@ -36,6 +36,7 @@ import { ActiveTaskExtended } from "../reducers/tasksReducer";
import { durationBefore, timeAgo, uuidPrefix, prettifyPayload } from "../utils";
import { TableColumn } from "../types/table";
import { taskDetailsPath } from "../paths";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
const useStyles = makeStyles((theme) => ({
table: {
@@ -264,8 +265,14 @@ function ActiveTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({
root: {
cursor: "pointer",
"& #copy-button": {
display: "none"
},
"&:hover": {
boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block"
}
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
@@ -306,6 +313,19 @@ function Row(props: RowProps) {
</TableCell>
<TableCell component="th" scope="row">
{uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard">
<IconButton
onClick={(e) => {
e.stopPropagation()
navigator.clipboard.writeText(task.id)
}
}
size="small"
id="copy-button"
>
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton>
</Tooltip>
</TableCell>
<TableCell>{task.type}</TableCell>
<TableCell>

View File

@@ -21,6 +21,7 @@ import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "./SyntaxHighlighter";
import { AppState } from "../store";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
import {
batchDeleteArchivedTasksAsync,
batchRunArchivedTasksAsync,
@@ -294,8 +295,14 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({
root: {
cursor: "pointer",
"& #copy-button": {
display: "none"
},
"&:hover": {
boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block"
}
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
@@ -345,6 +352,19 @@ function Row(props: RowProps) {
</TableCell>
<TableCell component="th" scope="row">
{uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard">
<IconButton
onClick={(e) => {
e.stopPropagation()
navigator.clipboard.writeText(task.id)
}
}
size="small"
id="copy-button"
>
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton>
</Tooltip>
</TableCell>
<TableCell>{task.type}</TableCell>
<TableCell>

View File

@@ -20,6 +20,7 @@ import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "./SyntaxHighlighter";
import { AppState } from "../store";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
import {
listCompletedTasksAsync,
deleteAllCompletedTasksAsync,
@@ -270,8 +271,14 @@ function CompletedTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({
root: {
cursor: "pointer",
"& #copy-button": {
display: "none"
},
"&:hover": {
boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block"
}
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
@@ -320,6 +327,19 @@ function Row(props: RowProps) {
</TableCell>
<TableCell component="th" scope="row">
{uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard">
<IconButton
onClick={(e) => {
e.stopPropagation()
navigator.clipboard.writeText(task.id)
}
}
size="small"
id="copy-button"
>
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton>
</Tooltip>
</TableCell>
<TableCell>{task.type}</TableCell>
<TableCell>

View File

@@ -346,14 +346,12 @@ function Row(props: RowProps) {
{uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard">
<IconButton
onClick={(e) =>
{
onClick={(e) =>{
e.stopPropagation()
navigator.clipboard.writeText(task.id) }
}
size="small"
id="copy-button"
className={classes.actionButton}
>
<FileCopyOutlinedIcon fontSize="small" style={{height:"12px", width:"12px"}} />
</IconButton>

View File

@@ -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,8 +328,14 @@ function RetryTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({
root: {
cursor: "pointer",
"& #copy-button": {
display: "none"
},
"&:hover": {
boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block"
}
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
@@ -380,6 +387,19 @@ function Row(props: RowProps) {
</TableCell>
<TableCell component="th" scope="row">
{uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard">
<IconButton
onClick={(e) => {
e.stopPropagation()
navigator.clipboard.writeText(task.id)
}
}
size="small"
id="copy-button"
>
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton>
</Tooltip>
</TableCell>
<TableCell>{task.type}</TableCell>
<TableCell>

View File

@@ -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: {
@@ -324,8 +325,14 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({
root: {
cursor: "pointer",
"& #copy-button": {
display: "none"
},
"&:hover": {
boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block"
}
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
@@ -376,6 +383,19 @@ function Row(props: RowProps) {
</TableCell>
<TableCell component="th" scope="row">
{uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard">
<IconButton
onClick={(e) => {
e.stopPropagation()
navigator.clipboard.writeText(task.id)
}
}
size="small"
id="copy-button"
>
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton>
</Tooltip>
</TableCell>
<TableCell>{task.type}</TableCell>
<TableCell>