mirror of
https://github.com/hibiken/asynqmon.git
synced 2025-01-19 03:05:53 +08:00
Redesign TableActions component to be more generic
This commit is contained in:
Ken Hibino
parent
e25a9747a8
commit
3ab1ed31a6
@ -13,6 +13,8 @@ import Paper from "@material-ui/core/Paper";
|
||||
import Box from "@material-ui/core/Box";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
@ -164,13 +166,33 @@ function DeadTasksTable(props: Props & ReduxProps) {
|
||||
return (
|
||||
<div>
|
||||
<TableActions
|
||||
allActionPending={props.allActionPending}
|
||||
batchActionPending={props.batchActionPending}
|
||||
showBatchActions={numSelected > 0}
|
||||
onRunAllClick={handleRunAllClick}
|
||||
onDeleteAllClick={handleDeleteAllClick}
|
||||
onBatchRunClick={handleBatchRunClick}
|
||||
onBatchDeleteClick={handleBatchDeleteClick}
|
||||
showIconButtons={numSelected > 0}
|
||||
iconButtonActions={[
|
||||
{
|
||||
tooltip: "Delete",
|
||||
icon: <DeleteIcon />,
|
||||
onClick: handleBatchDeleteClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
{
|
||||
tooltip: "Run",
|
||||
icon: <PlayArrowIcon />,
|
||||
onClick: handleBatchRunClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
]}
|
||||
menuItemActions={[
|
||||
{
|
||||
label: "Delete All",
|
||||
onClick: handleDeleteAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
{
|
||||
label: "Run All",
|
||||
onClick: handleRunAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
|
||||
@ -15,6 +15,9 @@ import Box from "@material-ui/core/Box";
|
||||
import Checkbox from "@material-ui/core/Checkbox";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import ArchiveIcon from "@material-ui/icons/Archive";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
@ -174,15 +177,44 @@ function RetryTasksTable(props: Props & ReduxProps) {
|
||||
return (
|
||||
<div>
|
||||
<TableActions
|
||||
allActionPending={props.allActionPending}
|
||||
batchActionPending={props.batchActionPending}
|
||||
showBatchActions={numSelected > 0}
|
||||
onRunAllClick={handleRunAllClick}
|
||||
onDeleteAllClick={handleDeleteAllClick}
|
||||
onKillAllClick={handleKillAllClick}
|
||||
onBatchRunClick={handleBatchRunClick}
|
||||
onBatchDeleteClick={handleBatchDeleteClick}
|
||||
onBatchKillClick={handleBatchKillClick}
|
||||
showIconButtons={numSelected > 0}
|
||||
iconButtonActions={[
|
||||
{
|
||||
tooltip: "Delete",
|
||||
icon: <DeleteIcon />,
|
||||
onClick: handleBatchDeleteClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
{
|
||||
tooltip: "Kill",
|
||||
icon: <ArchiveIcon />,
|
||||
onClick: handleBatchKillClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
{
|
||||
tooltip: "Run",
|
||||
icon: <PlayArrowIcon />,
|
||||
onClick: handleBatchRunClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
]}
|
||||
menuItemActions={[
|
||||
{
|
||||
label: "Delete All",
|
||||
onClick: handleDeleteAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
{
|
||||
label: "Kill All",
|
||||
onClick: handleKillAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
{
|
||||
label: "Run All",
|
||||
onClick: handleRunAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
|
||||
@ -15,6 +15,9 @@ import Box from "@material-ui/core/Box";
|
||||
import Checkbox from "@material-ui/core/Checkbox";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import ArchiveIcon from "@material-ui/icons/Archive";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
@ -171,15 +174,44 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
|
||||
return (
|
||||
<div>
|
||||
<TableActions
|
||||
allActionPending={props.allActionPending}
|
||||
batchActionPending={props.batchActionPending}
|
||||
showBatchActions={numSelected > 0}
|
||||
onRunAllClick={handleRunAllClick}
|
||||
onKillAllClick={handleKillAllClick}
|
||||
onDeleteAllClick={handleDeleteAllClick}
|
||||
onBatchRunClick={handleBatchRunClick}
|
||||
onBatchDeleteClick={handleBatchDeleteClick}
|
||||
onBatchKillClick={handleBatchKillClick}
|
||||
showIconButtons={numSelected > 0}
|
||||
iconButtonActions={[
|
||||
{
|
||||
tooltip: "Delete",
|
||||
icon: <DeleteIcon />,
|
||||
onClick: handleBatchDeleteClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
{
|
||||
tooltip: "Kill",
|
||||
icon: <ArchiveIcon />,
|
||||
onClick: handleBatchKillClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
{
|
||||
tooltip: "Run",
|
||||
icon: <PlayArrowIcon />,
|
||||
onClick: handleBatchRunClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
]}
|
||||
menuItemActions={[
|
||||
{
|
||||
label: "Delete All",
|
||||
onClick: handleDeleteAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
{
|
||||
label: "Kill All",
|
||||
onClick: handleKillAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
{
|
||||
label: "Run All",
|
||||
onClick: handleRunAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Tooltip from "@material-ui/core/Tooltip";
|
||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import ArchiveIcon from "@material-ui/icons/Archive";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import Menu from "@material-ui/core/Menu";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
@ -23,16 +20,23 @@ const useStyles = makeStyles((theme) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
interface MenuItemAction {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
interface IconButtonAction {
|
||||
icon: React.ReactElement;
|
||||
tooltip: string;
|
||||
onClick: () => void;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
allActionPending: boolean;
|
||||
onRunAllClick: () => void;
|
||||
onDeleteAllClick: () => void;
|
||||
onKillAllClick?: () => void;
|
||||
showBatchActions: boolean;
|
||||
batchActionPending: boolean;
|
||||
onBatchRunClick: () => void;
|
||||
onBatchDeleteClick: () => void;
|
||||
onBatchKillClick?: () => void;
|
||||
menuItemActions: MenuItemAction[];
|
||||
iconButtonActions: IconButtonAction[];
|
||||
showIconButtons: boolean;
|
||||
}
|
||||
|
||||
export default function TableActions(props: Props) {
|
||||
@ -63,68 +67,25 @@ export default function TableActions(props: Props) {
|
||||
open={Boolean(menuAnchor)}
|
||||
onClose={closeMenu}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
props.onRunAllClick();
|
||||
closeMenu();
|
||||
}}
|
||||
disabled={props.allActionPending}
|
||||
>
|
||||
Run All
|
||||
</MenuItem>
|
||||
{props.onKillAllClick && (
|
||||
{props.menuItemActions.map((action) => (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
if (!props.onKillAllClick) return;
|
||||
props.onKillAllClick();
|
||||
closeMenu();
|
||||
}}
|
||||
disabled={props.allActionPending}
|
||||
key={action.label}
|
||||
onClick={action.onClick}
|
||||
disabled={action.disabled}
|
||||
>
|
||||
Kill All
|
||||
{action.label}
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
props.onDeleteAllClick();
|
||||
closeMenu();
|
||||
}}
|
||||
disabled={props.allActionPending}
|
||||
>
|
||||
Delete All
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
{props.showBatchActions && (
|
||||
{props.showIconButtons && (
|
||||
<div className={classes.iconGroup}>
|
||||
{props.onBatchKillClick && (
|
||||
<Tooltip title="Kill">
|
||||
<IconButton
|
||||
disabled={props.batchActionPending}
|
||||
onClick={() => {
|
||||
if (!props.onBatchKillClick) return;
|
||||
props.onBatchKillClick();
|
||||
}}
|
||||
>
|
||||
<ArchiveIcon />
|
||||
{props.iconButtonActions.map((action) => (
|
||||
<Tooltip key={action.tooltip} title={action.tooltip}>
|
||||
<IconButton onClick={action.onClick} disabled={action.disabled}>
|
||||
{action.icon}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
disabled={props.batchActionPending}
|
||||
onClick={props.onBatchDeleteClick}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Run">
|
||||
<IconButton
|
||||
disabled={props.batchActionPending}
|
||||
onClick={props.onBatchRunClick}
|
||||
>
|
||||
<PlayArrowIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user