go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-08-24 14:48:42 +08:00
Code Issues Projects Releases Wiki Activity

Add SplitButton component

Browse Source
This commit is contained in:
Ken Hibino
2020-12-27 09:47:15 -08:00
parent 26ebeea582
commit 3587acaa33
2 changed files with 191 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
ui/src/views/DashboardView.tsx
View File

@@ -17,6 +17,7 @@ import QueueSizeChart from "../components/QueueSizeChart";
import ProcessedTasksChart from "../components/ProcessedTasksChart";
import QueuesOverviewTable from "../components/QueuesOverviewTable";
import Tooltip from "../components/Tooltip";
import SplitButton from "../components/SplitButton";
import { getCurrentUTCDate } from "../utils";
import { usePolling } from "../hooks";
@@ -34,8 +35,13 @@ const useStyles = makeStyles((theme) => ({
chartHeader: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: theme.spacing(2),
},
chartHeaderTitle: {
display: "flex",
alignItems: "center",
},
chartContainer: {
width: "100%",
height: "300px",
@@ -93,38 +99,40 @@ function DashboardView(props: Props) {
<Grid item xs={6}>
<Paper className={classes.paper} variant="outlined">
<div className={classes.chartHeader}>
<Typography variant="h6">Queue Size</Typography>
<Tooltip
title={
<div>
<div className={classes.tooltipSection}>
Total number of tasks in the queue
</div>
<div className={classes.tooltipSection}>
<strong>Active</strong>: number of tasks currently being
processed
</div>
<div className={classes.tooltipSection}>
<strong>Pending</strong>: number of tasks ready to be
processed
</div>
<div className={classes.tooltipSection}>
<strong>Scheduled</strong>: number of tasks scheduled to
be processed in the future
</div>
<div className={classes.tooltipSection}>
<strong>Retry</strong>: number of tasks scheduled to be
retried in the future
</div>
<div className={classes.chartHeaderTitle}>
<Typography variant="h6">Queue Size</Typography>
<Tooltip
title={
<div>
<strong>Dead</strong>: number of tasks exhausted their
retries
<div className={classes.tooltipSection}>
Total number of tasks in the queue
</div>
<div className={classes.tooltipSection}>
<strong>Active</strong>: number of tasks currently being
processed
</div>
<div className={classes.tooltipSection}>
<strong>Pending</strong>: number of tasks ready to be
processed
</div>
<div className={classes.tooltipSection}>
<strong>Scheduled</strong>: number of tasks scheduled to
be processed in the future
</div>
<div className={classes.tooltipSection}>
<strong>Retry</strong>: number of tasks scheduled to be
retried in the future
</div>
<div>
<strong>Dead</strong>: number of tasks exhausted their
retries
</div>
</div>
</div>
}
>
<InfoIcon fontSize="small" className={classes.infoIcon} />
</Tooltip>
}
>
<InfoIcon fontSize="small" className={classes.infoIcon} />
</Tooltip>
</div>
</div>
<div className={classes.chartContainer}>
<QueueSizeChart data={queues} />
@@ -135,27 +143,41 @@ function DashboardView(props: Props) {
<Grid item xs={6}>
<Paper className={classes.paper} variant="outlined">
<div className={classes.chartHeader}>
<Typography variant="h6">Tasks Processed</Typography>
<Tooltip
title={
<div>
<div className={classes.tooltipSection}>
Total number of tasks processed today (
{getCurrentUTCDate()} UTC)
</div>
<div className={classes.tooltipSection}>
<strong>Succeeded</strong>: number of tasks successfully
processed from the queue
</div>
<div className={classes.chartHeaderTitle}>
<Typography variant="h6">Tasks Processed</Typography>
<Tooltip
title={
<div>
<strong>Failed</strong>: number of tasks failed to be
processed from the queue
<div className={classes.tooltipSection}>
Total number of tasks processed today (
{getCurrentUTCDate()} UTC)
</div>
<div className={classes.tooltipSection}>
<strong>Succeeded</strong>: number of tasks successfully
processed from the queue
</div>
<div>
<strong>Failed</strong>: number of tasks failed to be
processed from the queue
</div>
</div>
</div>
}
>
<InfoIcon fontSize="small" className={classes.infoIcon} />
</Tooltip>
}
>
<InfoIcon fontSize="small" className={classes.infoIcon} />
</Tooltip>
</div>
<div>
<SplitButton
options={[
{ label: "Today", key: "today" },
{ label: "Last 7d", key: "last-7d" },
{ label: "Last 30d", key: "last-30d" },
{ label: "Last 90d", key: "last-90d" },
]}
initialSelectedKey="today"
onSelect={(key) => console.log("option selected:", key)}
/>
</div>
</div>
<div className={classes.chartContainer}>
<ProcessedTasksChart data={processedStats} />