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 for the rest of tables

Browse Source
This commit is contained in:
Peizhi Zheng 2022-01-12 22:51:16 -08:00 committed by Ken Hibino
parent 747d10df97
commit 3d31c94258
6 changed files with 169 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ui/src/components/ActiveTasksTable.tsx
View File

@ -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) {
</TableCell>
<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>
{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>

56
ui/src/components/ArchivedTasksTable.tsx
View File

@ -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) {
</TableCell>
<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>
{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>

60
ui/src/components/CompletedTasksTable.tsx
View File

@ -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) {
</TableCell>
<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>
{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>

57
ui/src/components/RetryTasksTable.tsx
View File

@ -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) {
</TableCell>
<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>
{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>

40
ui/src/components/ScheduledTasksTable.tsx
View File

@ -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) {
</TableCell>
<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>
{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>

2
ui/tsconfig.json
View File

@ -17,7 +17,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": [