From 3d31c942581c670273f70dc7209f13a3b486fe8c Mon Sep 17 00:00:00 2001 From: Peizhi Zheng Date: Wed, 12 Jan 2022 22:51:16 -0800 Subject: [PATCH] add copy id for the rest of tables --- ui/src/components/ActiveTasksTable.tsx | 50 ++++++++++-------- ui/src/components/ArchivedTasksTable.tsx | 60 +++++++++++++--------- ui/src/components/CompletedTasksTable.tsx | 62 +++++++++++++++-------- ui/src/components/RetryTasksTable.tsx | 59 +++++++++++++-------- ui/src/components/ScheduledTasksTable.tsx | 40 ++++++++------- ui/tsconfig.json | 2 +- 6 files changed, 169 insertions(+), 104 deletions(-) diff --git a/ui/src/components/ActiveTasksTable.tsx b/ui/src/components/ActiveTasksTable.tsx index 0559962..1c1c11b 100644 --- a/ui/src/components/ActiveTasksTable.tsx +++ b/ui/src/components/ActiveTasksTable.tsx @@ -12,7 +12,7 @@ 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 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"; @@ -20,7 +20,12 @@ import React, { useCallback, useState } from "react"; import { connect, ConnectedProps } from "react-redux"; import { useHistory } from "react-router-dom"; import { taskRowsPerPageChange } from "../actions/settingsActions"; -import { batchCancelActiveTasksAsync, cancelActiveTaskAsync, cancelAllActiveTasksAsync, listActiveTasksAsync } from "../actions/tasksActions"; +import { + batchCancelActiveTasksAsync, + cancelActiveTaskAsync, + cancelAllActiveTasksAsync, + listActiveTasksAsync, +} from "../actions/tasksActions"; import { usePolling } from "../hooks"; import { taskDetailsPath } from "../paths"; import { ActiveTaskExtended } from "../reducers/tasksReducer"; @@ -29,7 +34,9 @@ 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"; +import TablePaginationActions, { + rowsPerPageOptions, +} from "./TablePaginationActions"; const useStyles = makeStyles((theme) => ({ table: { @@ -258,11 +265,14 @@ function ActiveTasksTable(props: Props & ReduxProps) { const useRowStyles = makeStyles((theme) => ({ root: { cursor: "pointer", + "& #copy-button": { + display: "none", + }, "&:hover": { boxShadow: theme.shadows[2], - }, + }, "&:hover $copyButton": { - display: "inline-block" + display: "inline-block", }, "&:hover .MuiTableCell-root": { borderBottomColor: theme.palette.background.paper, @@ -272,12 +282,12 @@ const useRowStyles = makeStyles((theme) => ({ width: "200px", }, copyButton: { - display: "none" + display: "none", }, IdGroup: { display: "flex", alignItems: "center", - } + }, })); interface RowProps { @@ -313,19 +323,19 @@ function Row(props: RowProps) {
- {uuidPrefix(task.id)} - - { - e.stopPropagation() - navigator.clipboard.writeText(task.id) - }} - size="small" - className={classes.copyButton} - > - - - + {uuidPrefix(task.id)} + + { + e.stopPropagation(); + navigator.clipboard.writeText(task.id); + }} + size="small" + className={classes.copyButton} + > + + +
{task.type} diff --git a/ui/src/components/ArchivedTasksTable.tsx b/ui/src/components/ArchivedTasksTable.tsx index 1fc81f6..9fcf546 100644 --- a/ui/src/components/ArchivedTasksTable.tsx +++ b/ui/src/components/ArchivedTasksTable.tsx @@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination"; import TableRow from "@material-ui/core/TableRow"; import Tooltip from "@material-ui/core/Tooltip"; import DeleteIcon from "@material-ui/icons/Delete"; -import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; +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"; @@ -21,7 +21,15 @@ import React, { useCallback, useState } from "react"; import { connect, ConnectedProps } from "react-redux"; import { useHistory } from "react-router-dom"; import { taskRowsPerPageChange } from "../actions/settingsActions"; -import { batchDeleteArchivedTasksAsync, batchRunArchivedTasksAsync, deleteAllArchivedTasksAsync, deleteArchivedTaskAsync, listArchivedTasksAsync, runAllArchivedTasksAsync, runArchivedTaskAsync } from "../actions/tasksActions"; +import { + batchDeleteArchivedTasksAsync, + batchRunArchivedTasksAsync, + deleteAllArchivedTasksAsync, + deleteArchivedTaskAsync, + listArchivedTasksAsync, + runAllArchivedTasksAsync, + runArchivedTaskAsync, +} from "../actions/tasksActions"; import { usePolling } from "../hooks"; import { taskDetailsPath } from "../paths"; import { TaskInfoExtended } from "../reducers/tasksReducer"; @@ -30,7 +38,9 @@ import { TableColumn } from "../types/table"; import { prettifyPayload, timeAgo, uuidPrefix } from "../utils"; import SyntaxHighlighter from "./SyntaxHighlighter"; import TableActions from "./TableActions"; -import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; +import TablePaginationActions, { + rowsPerPageOptions, +} from "./TablePaginationActions"; const useStyles = makeStyles((theme) => ({ table: { @@ -48,7 +58,7 @@ const useStyles = makeStyles((theme) => ({ }, idCell: { width: "200px", - } + }, })); function mapStateToProps(state: AppState) { @@ -288,11 +298,14 @@ function ArchivedTasksTable(props: Props & ReduxProps) { const useRowStyles = makeStyles((theme) => ({ root: { cursor: "pointer", + "& #copy-button": { + display: "none", + }, "&:hover": { boxShadow: theme.shadows[2], - }, + }, "&:hover $copyButton": { - display: "inline-block" + display: "inline-block", }, "&:hover .MuiTableCell-root": { borderBottomColor: theme.palette.background.paper, @@ -306,15 +319,15 @@ const useRowStyles = makeStyles((theme) => ({ marginRight: 3, }, idCell: { - width:"200px" + width: "200px", }, copyButton: { - display: "none" - }, + display: "none", + }, IdGroup: { display: "flex", alignItems: "center", - } + }, })); interface RowProps { @@ -352,20 +365,19 @@ function Row(props: RowProps) {
- {uuidPrefix(task.id)} - - { - e.stopPropagation() - navigator.clipboard.writeText(task.id) - } - } - size="small" - className={classes.copyButton} - > - - - + {uuidPrefix(task.id)} + + { + e.stopPropagation(); + navigator.clipboard.writeText(task.id); + }} + size="small" + className={classes.copyButton} + > + + +
{task.type} diff --git a/ui/src/components/CompletedTasksTable.tsx b/ui/src/components/CompletedTasksTable.tsx index a4d9473..c69f40a 100644 --- a/ui/src/components/CompletedTasksTable.tsx +++ b/ui/src/components/CompletedTasksTable.tsx @@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination"; import TableRow from "@material-ui/core/TableRow"; import Tooltip from "@material-ui/core/Tooltip"; import DeleteIcon from "@material-ui/icons/Delete"; -import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; +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"; @@ -20,16 +20,29 @@ import React, { useCallback, useState } from "react"; import { connect, ConnectedProps } from "react-redux"; import { useHistory } from "react-router-dom"; import { taskRowsPerPageChange } from "../actions/settingsActions"; -import { batchDeleteCompletedTasksAsync, deleteAllCompletedTasksAsync, deleteCompletedTaskAsync, listCompletedTasksAsync } from "../actions/tasksActions"; +import { + batchDeleteCompletedTasksAsync, + deleteAllCompletedTasksAsync, + deleteCompletedTaskAsync, + listCompletedTasksAsync, +} from "../actions/tasksActions"; import { usePolling } from "../hooks"; 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 { + durationFromSeconds, + prettifyPayload, + stringifyDuration, + timeAgo, + uuidPrefix, +} from "../utils"; import SyntaxHighlighter from "./SyntaxHighlighter"; import TableActions from "./TableActions"; -import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; +import TablePaginationActions, { + rowsPerPageOptions, +} from "./TablePaginationActions"; const useStyles = makeStyles((theme) => ({ table: { @@ -258,11 +271,17 @@ 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 $copyButton": { - display: "inline-block" + display: "inline-block", }, "&:hover .MuiTableCell-root": { borderBottomColor: theme.palette.background.paper, @@ -279,12 +298,12 @@ const useRowStyles = makeStyles((theme) => ({ width: "200px", }, copyButton: { - display: "none" - }, + display: "none", + }, IdGroup: { display: "flex", alignItems: "center", - } + }, })); interface RowProps { @@ -321,20 +340,19 @@ function Row(props: RowProps) {
- {uuidPrefix(task.id)} - - { - e.stopPropagation() - navigator.clipboard.writeText(task.id) - } - } - size="small" - className={classes.copyButton} - > - - - + {uuidPrefix(task.id)} + + { + e.stopPropagation(); + navigator.clipboard.writeText(task.id); + }} + size="small" + className={classes.copyButton} + > + + +
{task.type} diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx index c16256e..f14ae1e 100644 --- a/ui/src/components/RetryTasksTable.tsx +++ b/ui/src/components/RetryTasksTable.tsx @@ -13,7 +13,7 @@ import TableRow from "@material-ui/core/TableRow"; import Tooltip from "@material-ui/core/Tooltip"; import ArchiveIcon from "@material-ui/icons/Archive"; import DeleteIcon from "@material-ui/icons/Delete"; -import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; +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"; @@ -22,7 +22,18 @@ import React, { useCallback, useState } from "react"; import { connect, ConnectedProps } from "react-redux"; import { useHistory } from "react-router-dom"; import { taskRowsPerPageChange } from "../actions/settingsActions"; -import { archiveAllRetryTasksAsync, archiveRetryTaskAsync, batchArchiveRetryTasksAsync, batchDeleteRetryTasksAsync, batchRunRetryTasksAsync, deleteAllRetryTasksAsync, deleteRetryTaskAsync, listRetryTasksAsync, runAllRetryTasksAsync, runRetryTaskAsync } from "../actions/tasksActions"; +import { + archiveAllRetryTasksAsync, + archiveRetryTaskAsync, + batchArchiveRetryTasksAsync, + batchDeleteRetryTasksAsync, + batchRunRetryTasksAsync, + deleteAllRetryTasksAsync, + deleteRetryTaskAsync, + listRetryTasksAsync, + runAllRetryTasksAsync, + runRetryTaskAsync, +} from "../actions/tasksActions"; import { usePolling } from "../hooks"; import { taskDetailsPath } from "../paths"; import { TaskInfoExtended } from "../reducers/tasksReducer"; @@ -31,7 +42,9 @@ import { TableColumn } from "../types/table"; import { durationBefore, prettifyPayload, uuidPrefix } from "../utils"; import SyntaxHighlighter from "./SyntaxHighlighter"; import TableActions from "./TableActions"; -import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; +import TablePaginationActions, { + rowsPerPageOptions, +} from "./TablePaginationActions"; const useStyles = makeStyles((theme) => ({ table: { @@ -315,11 +328,17 @@ 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 $copyButton": { - display: "inline-block" + display: "inline-block", }, "&:hover .MuiTableCell-root": { borderBottomColor: theme.palette.background.paper, @@ -336,12 +355,12 @@ const useRowStyles = makeStyles((theme) => ({ width: "200px", }, copyButton: { - display: "none" - }, + display: "none", + }, IdGroup: { display: "flex", alignItems: "center", - } + }, })); interface RowProps { @@ -381,19 +400,19 @@ function Row(props: RowProps) {
- {uuidPrefix(task.id)} - - { - e.stopPropagation() - navigator.clipboard.writeText(task.id) - }} - size="small" - className={classes.copyButton} - > - - - + {uuidPrefix(task.id)} + + { + e.stopPropagation(); + navigator.clipboard.writeText(task.id); + }} + size="small" + className={classes.copyButton} + > + + +
{task.type} diff --git a/ui/src/components/ScheduledTasksTable.tsx b/ui/src/components/ScheduledTasksTable.tsx index 37f8b22..1585035 100644 --- a/ui/src/components/ScheduledTasksTable.tsx +++ b/ui/src/components/ScheduledTasksTable.tsx @@ -44,7 +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'; +import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; const useStyles = makeStyles((theme) => ({ table: { @@ -325,11 +325,17 @@ 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 $copyButton": { - display: "inline-block" + display: "inline-block", }, "&:hover .MuiTableCell-root": { borderBottomColor: theme.palette.background.paper, @@ -346,12 +352,12 @@ const useRowStyles = makeStyles((theme) => ({ width: "200px", }, copyButton: { - display: "none" + display: "none", }, IdGroup: { display: "flex", alignItems: "center", - } + }, })); interface RowProps { @@ -390,19 +396,19 @@ function Row(props: RowProps) {
- {uuidPrefix(task.id)} - - { - e.stopPropagation() - navigator.clipboard.writeText(task.id) - }} - size="small" - className={classes.copyButton} - > - - - + {uuidPrefix(task.id)} + + { + e.stopPropagation(); + navigator.clipboard.writeText(task.id); + }} + size="small" + className={classes.copyButton} + > + + +
{task.type} diff --git a/ui/tsconfig.json b/ui/tsconfig.json index fbce9be..e18c413 100644 --- a/ui/tsconfig.json +++ b/ui/tsconfig.json @@ -17,7 +17,7 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react", + "jsx": "react-jsx", "noFallthroughCasesInSwitch": true }, "include": [