go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 03:05:53 +08:00
Code Issues Projects Releases Wiki Activity

add copy id feature for task tables

Browse Source
This commit is contained in:
Peizhi Zheng 2022-01-09 17:12:02 -08:00 committed by Ken Hibino
parent 609b319a9e
commit 747d10df97
1 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
ui/src/components/PendingTasksTable.tsx
View File

@ -13,7 +13,7 @@ import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
import ArchiveIcon from "@material-ui/icons/Archive"; import ArchiveIcon from "@material-ui/icons/Archive";
import DeleteIcon from "@material-ui/icons/Delete"; 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 MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import Alert from "@material-ui/lab/Alert"; import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle"; import AlertTitle from "@material-ui/lab/AlertTitle";
@ -21,7 +21,15 @@ import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux"; import { connect, ConnectedProps } from "react-redux";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { taskRowsPerPageChange } from "../actions/settingsActions"; import { taskRowsPerPageChange } from "../actions/settingsActions";
import { archiveAllPendingTasksAsync, archivePendingTaskAsync, batchArchivePendingTasksAsync, batchDeletePendingTasksAsync, deleteAllPendingTasksAsync, deletePendingTaskAsync, listPendingTasksAsync } from "../actions/tasksActions"; import {
archiveAllPendingTasksAsync,
archivePendingTaskAsync,
batchArchivePendingTasksAsync,
batchDeletePendingTasksAsync,
deleteAllPendingTasksAsync,
deletePendingTaskAsync,
listPendingTasksAsync,
} from "../actions/tasksActions";
import { usePolling } from "../hooks"; import { usePolling } from "../hooks";
import { taskDetailsPath } from "../paths"; import { taskDetailsPath } from "../paths";
import { TaskInfoExtended } from "../reducers/tasksReducer"; import { TaskInfoExtended } from "../reducers/tasksReducer";
@ -30,7 +38,9 @@ import { TableColumn } from "../types/table";
import { prettifyPayload, uuidPrefix } from "../utils"; import { prettifyPayload, uuidPrefix } from "../utils";
import SyntaxHighlighter from "./SyntaxHighlighter"; import SyntaxHighlighter from "./SyntaxHighlighter";
import TableActions from "./TableActions"; import TableActions from "./TableActions";
import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
table: { table: {
@ -86,7 +96,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
const [selectedIds, setSelectedIds] = useState<string[]>([]); const [selectedIds, setSelectedIds] = useState<string[]>([]);
const [activeTaskId, setActiveTaskId] = useState<string>(""); const [activeTaskId, setActiveTaskId] = useState<string>("");
const handlePageChange = ( const handlePageChange = (
event: React.MouseEvent<HTMLButtonElement> | null, event: React.MouseEvent<HTMLButtonElement> | null,
newPage: number newPage: number
@ -287,17 +297,23 @@ function PendingTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"& #copy-button": {
display: "none",
},
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block",
},
}, },
"&:hover $copyButton":{ "&:hover $copyButton": {
display: "inline-block" display: "inline-block",
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
}, },
}, },
actionCell: { actionCell: {
width: "96px", width: "96px",
}, },
@ -305,16 +321,16 @@ const useRowStyles = makeStyles((theme) => ({
marginLeft: 3, marginLeft: 3,
marginRight: 3, marginRight: 3,
}, },
idCell:{ idCell: {
width: "200px", width: "200px",
}, },
copyButton: { copyButton: {
display: "none" display: "none",
},
IdGroup: {
display: "flex",
alignItems: "center",
}, },
IdGroup:{
display:"flex",
alignItems:"center",
}
})); }));
interface RowProps { interface RowProps {
@ -352,19 +368,19 @@ function Row(props: RowProps) {
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell}> <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}> <div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy full ID to clipboard"> <Tooltip title="Copy full ID to clipboard">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
navigator.clipboard.writeText(task.id) navigator.clipboard.writeText(task.id);
}} }}
size="small" size="small"
className={classes.copyButton} className={classes.copyButton}
> >
<FileCopyOutlinedIcon fontSize="small" /> <FileCopyOutlinedIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>