address Ken's comments

This commit is contained in:
Peizhi Zheng
2022-01-14 20:20:41 -08:00
parent d1cf35b638
commit d44b8e2f32
6 changed files with 138 additions and 156 deletions

View File

@@ -1,42 +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 FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
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: {
@@ -265,12 +258,10 @@ function ActiveTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({
root: {
cursor: "pointer",
"& #copy-button": {
display: "none"
},
"&:hover": {
boxShadow: theme.shadows[2],
"& #copy-button": {
copyButton: {
display: "inline-block"
},
},
@@ -278,6 +269,12 @@ const useRowStyles = makeStyles((theme) => ({
borderBottomColor: theme.palette.background.paper,
},
},
idCell: {
width: "200px",
},
copyButton: {
display: "none"
},
}));
interface RowProps {
@@ -311,7 +308,7 @@ function Row(props: RowProps) {
/>
</IconButton>
</TableCell>
<TableCell component="th" scope="row">
<TableCell component="th" scope="row" className={classes.idCell} >
{uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard">
<IconButton
@@ -321,7 +318,7 @@ function Row(props: RowProps) {
}
}
size="small"
id="copy-button"
className={classes.copyButton}
>
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton>