mirror of
https://github.com/hibiken/asynqmon.git
synced 2025-10-03 02:32:00 +08:00
Initial commit
This commit is contained in:
Ken Hibino
332
ui/src/components/TasksTable.tsx
Normal file
332
ui/src/components/TasksTable.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
import React from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import styled from "styled-components";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Tabs from "@material-ui/core/Tabs";
|
||||
import Tab from "@material-ui/core/Tab";
|
||||
import ActiveTasksTable from "./ActiveTasksTable";
|
||||
import PendingTasksTable from "./PendingTasksTable";
|
||||
import ScheduledTasksTable from "./ScheduledTasksTable";
|
||||
import RetryTasksTable from "./RetryTasksTable";
|
||||
import DeadTasksTable from "./DeadTasksTable";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { queueDetailsPath } from "../paths";
|
||||
import { Typography } from "@material-ui/core";
|
||||
import Paper from "@material-ui/core/Paper/Paper";
|
||||
import { QueueInfo } from "../reducers/queuesReducer";
|
||||
import { AppState } from "../store";
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
selected: string; // currently selected value
|
||||
value: string; // tab panel will be shown if selected value equals to the value
|
||||
}
|
||||
|
||||
const TabPanelRoot = styled.div`
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
`;
|
||||
|
||||
function TabPanel(props: TabPanelProps) {
|
||||
const { children, value, selected, ...other } = props;
|
||||
|
||||
return (
|
||||
<TabPanelRoot
|
||||
role="tabpanel"
|
||||
hidden={value !== selected}
|
||||
id={`scrollable-auto-tabpanel-${selected}`}
|
||||
aria-labelledby={`scrollable-auto-tab-${selected}`}
|
||||
{...other}
|
||||
>
|
||||
{value === selected && children}
|
||||
</TabPanelRoot>
|
||||
);
|
||||
}
|
||||
|
||||
function a11yProps(value: string) {
|
||||
return {
|
||||
id: `scrollable-auto-tab-${value}`,
|
||||
"aria-controls": `scrollable-auto-tabpanel-${value}`,
|
||||
};
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const TaskCount = styled.div`
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const Heading = styled.div`
|
||||
opacity: 0.7;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 500;
|
||||
background: #f5f7f9;
|
||||
padding-left: 28px;
|
||||
padding-top: 28px;
|
||||
padding-bottom: 28px;
|
||||
`;
|
||||
|
||||
const PanelContainer = styled.div`
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
`;
|
||||
|
||||
const TabsContainer = styled.div`
|
||||
background: #f5f7f9;
|
||||
`;
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
marginBottom: theme.spacing(2),
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
heading: {
|
||||
padingLeft: theme.spacing(2),
|
||||
},
|
||||
tabsRoot: {
|
||||
paddingLeft: theme.spacing(2),
|
||||
background: theme.palette.background.default,
|
||||
},
|
||||
tabsIndicator: {
|
||||
right: "auto",
|
||||
left: "0",
|
||||
},
|
||||
tabroot: {
|
||||
width: "204px",
|
||||
textAlign: "left",
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
tabwrapper: {
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
tabSelected: {
|
||||
background: theme.palette.common.white,
|
||||
boxShadow: theme.shadows[1],
|
||||
},
|
||||
}));
|
||||
|
||||
function PanelHeading(props: {
|
||||
queue: string;
|
||||
processed: number;
|
||||
failed: number;
|
||||
paused: boolean;
|
||||
}) {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Paper className={classes.paper}>
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Queue Name
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.queue}</Typography>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Processed Today (UTC)
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.processed}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Failed Today (UTC)
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.failed}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Paused
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.paused ? "YES" : "No"}</Typography>
|
||||
</div>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
function mapStatetoProps(state: AppState, ownProps: Props) {
|
||||
// TODO: Add loading state for each queue.
|
||||
const queueInfo = state.queues.data.find(
|
||||
(q: QueueInfo) => q.name === ownProps.queue
|
||||
);
|
||||
const currentStats = queueInfo
|
||||
? queueInfo.currentStats
|
||||
: {
|
||||
queue: ownProps.queue,
|
||||
paused: false,
|
||||
size: 0,
|
||||
active: 0,
|
||||
pending: 0,
|
||||
scheduled: 0,
|
||||
retry: 0,
|
||||
dead: 0,
|
||||
processed: 0,
|
||||
failed: 0,
|
||||
timestamp: "n/a",
|
||||
};
|
||||
return { currentStats };
|
||||
}
|
||||
|
||||
const connector = connect(mapStatetoProps);
|
||||
|
||||
type ReduxProps = ConnectedProps<typeof connector>;
|
||||
|
||||
interface Props {
|
||||
queue: string;
|
||||
selected: string;
|
||||
}
|
||||
|
||||
function TasksTable(props: Props & ReduxProps) {
|
||||
const { currentStats } = props;
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<TabsContainer>
|
||||
<Heading>Tasks</Heading>
|
||||
<Tabs
|
||||
value={props.selected}
|
||||
onChange={(_, value: string) =>
|
||||
history.push(queueDetailsPath(props.queue, value))
|
||||
}
|
||||
aria-label="tasks table"
|
||||
orientation="vertical"
|
||||
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
|
||||
>
|
||||
<Tab
|
||||
value="active"
|
||||
label="Active"
|
||||
icon={<TaskCount>{currentStats.active}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("active")}
|
||||
/>
|
||||
<Tab
|
||||
value="pending"
|
||||
label="Pending"
|
||||
icon={<TaskCount>{currentStats.pending}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("pending")}
|
||||
/>
|
||||
<Tab
|
||||
value="scheduled"
|
||||
label="Scheduled"
|
||||
icon={<TaskCount>{currentStats.scheduled}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("scheduled")}
|
||||
/>
|
||||
<Tab
|
||||
value="retry"
|
||||
label="Retry"
|
||||
icon={<TaskCount>{currentStats.retry}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("retry")}
|
||||
/>
|
||||
<Tab
|
||||
value="dead"
|
||||
label="Dead"
|
||||
icon={<TaskCount>{currentStats.dead}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("dead")}
|
||||
/>
|
||||
</Tabs>
|
||||
</TabsContainer>
|
||||
<TabPanel value="active" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<ActiveTasksTable queue={props.queue} />
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="pending" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<PendingTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.pending}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="scheduled" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<ScheduledTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.scheduled}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="retry" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<RetryTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.retry}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="dead" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<DeadTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.dead}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(TasksTable);
|
||||
Reference in New Issue
Block a user