mirror of
https://github.com/hibiken/asynqmon.git
synced 2025-08-24 14:48:42 +08:00
Initial commit
This commit is contained in:
Ken Hibino
11
ui/src/views/CronView.tsx
Normal file
11
ui/src/views/CronView.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
function CronView() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Cron</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CronView;
|
||||
179
ui/src/views/DashboardView.tsx
Normal file
179
ui/src/views/DashboardView.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import Container from "@material-ui/core/Container";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import InfoIcon from "@material-ui/icons/Info";
|
||||
import {
|
||||
listQueuesAsync,
|
||||
pauseQueueAsync,
|
||||
resumeQueueAsync,
|
||||
} from "../actions/queuesActions";
|
||||
import { AppState } from "../store";
|
||||
import QueueSizeChart from "../components/QueueSizeChart";
|
||||
import ProcessedTasksChart from "../components/ProcessedTasksChart";
|
||||
import QueuesOverviewTable from "../components/QueuesOverviewTable";
|
||||
import Tooltip from "../components/Tooltip";
|
||||
import { getCurrentUTCDate } from "../timeutil";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
container: {
|
||||
paddingTop: theme.spacing(4),
|
||||
paddingBottom: theme.spacing(4),
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
chartHeader: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
chartContainer: {
|
||||
width: "100%",
|
||||
height: "300px",
|
||||
},
|
||||
infoIcon: {
|
||||
marginLeft: theme.spacing(1),
|
||||
color: theme.palette.grey[500],
|
||||
cursor: "pointer",
|
||||
},
|
||||
tooltipSection: {
|
||||
marginBottom: "4px",
|
||||
},
|
||||
}));
|
||||
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.queues.loading,
|
||||
queues: state.queues.data.map((q) => ({
|
||||
...q.currentStats,
|
||||
pauseRequestPending: q.pauseRequestPending,
|
||||
})),
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
listQueuesAsync,
|
||||
pauseQueueAsync,
|
||||
resumeQueueAsync,
|
||||
};
|
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
type Props = ConnectedProps<typeof connector>;
|
||||
|
||||
function DashboardView(props: Props) {
|
||||
const { pollInterval, listQueuesAsync, queues } = props;
|
||||
const classes = useStyles();
|
||||
|
||||
useEffect(() => {
|
||||
listQueuesAsync();
|
||||
const interval = setInterval(listQueuesAsync, pollInterval * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [pollInterval, listQueuesAsync]);
|
||||
|
||||
const processedStats = queues.map((q) => ({
|
||||
queue: q.queue,
|
||||
succeeded: q.processed - q.failed,
|
||||
failed: q.failed,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
<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>
|
||||
<strong>Dead</strong>: number of tasks exhausted their
|
||||
retries
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<InfoIcon fontSize="small" className={classes.infoIcon} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className={classes.chartContainer}>
|
||||
<QueueSizeChart data={queues} />
|
||||
</div>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<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>
|
||||
<strong>Failed</strong>: number of tasks failed to be
|
||||
processed from the queue
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<InfoIcon fontSize="small" className={classes.infoIcon} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className={classes.chartContainer}>
|
||||
<ProcessedTasksChart data={processedStats} />
|
||||
</div>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.paper} variant="outlined">
|
||||
{/* TODO: Add loading indicator */}
|
||||
<QueuesOverviewTable
|
||||
queues={queues}
|
||||
onPauseClick={props.pauseQueueAsync}
|
||||
onResumeClick={props.resumeQueueAsync}
|
||||
/>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(DashboardView);
|
||||
78
ui/src/views/SettingsView.tsx
Normal file
78
ui/src/views/SettingsView.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import React, { useState } from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import Container from "@material-ui/core/Container";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import { Typography } from "@material-ui/core";
|
||||
import Slider from "@material-ui/core/Slider/Slider";
|
||||
import { pollIntervalChange } from "../actions/settingsActions";
|
||||
import { AppState } from "../store";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
container: {
|
||||
paddingTop: theme.spacing(4),
|
||||
paddingBottom: theme.spacing(4),
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
}));
|
||||
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = { pollIntervalChange };
|
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
type PropsFromRedux = ConnectedProps<typeof connector>;
|
||||
|
||||
function SettingsView(props: PropsFromRedux) {
|
||||
const classes = useStyles();
|
||||
|
||||
const [sliderValue, setSliderValue] = useState(props.pollInterval);
|
||||
const handleSliderValueChange = (event: any, val: number | number[]) => {
|
||||
setSliderValue(val as number);
|
||||
};
|
||||
|
||||
const handleSliderValueCommited = (event: any, val: number | number[]) => {
|
||||
props.pollIntervalChange(val as number);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h5">Settings</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.paper} variant="outlined">
|
||||
<Typography gutterBottom color="primary">
|
||||
Polling Interval (Every {sliderValue} seconds)
|
||||
</Typography>
|
||||
<Slider
|
||||
value={sliderValue}
|
||||
onChange={handleSliderValueChange}
|
||||
onChangeCommitted={handleSliderValueCommited}
|
||||
aria-labelledby="continuous-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={1}
|
||||
marks={true}
|
||||
min={2}
|
||||
max={20}
|
||||
/>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(SettingsView);
|
||||
55
ui/src/views/TasksView.tsx
Normal file
55
ui/src/views/TasksView.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Container from "@material-ui/core/Container";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import TasksTable from "../components/TasksTable";
|
||||
import { useParams, useLocation } from "react-router-dom";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
container: {
|
||||
paddingLeft: 0,
|
||||
marginLeft: 0,
|
||||
height: "100%",
|
||||
},
|
||||
gridContainer: {
|
||||
height: "100%",
|
||||
paddingBottom: 0,
|
||||
},
|
||||
gridItem: {
|
||||
height: "100%",
|
||||
paddingBottom: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
function useQuery(): URLSearchParams {
|
||||
return new URLSearchParams(useLocation().search);
|
||||
}
|
||||
|
||||
interface RouteParams {
|
||||
qname: string;
|
||||
}
|
||||
|
||||
const validStatus = ["active", "pending", "scheduled", "retry", "dead"];
|
||||
const defaultStatus = "active";
|
||||
|
||||
function TasksView() {
|
||||
const classes = useStyles();
|
||||
const { qname } = useParams<RouteParams>();
|
||||
const query = useQuery();
|
||||
let selected = query.get("status");
|
||||
if (!selected || !validStatus.includes(selected)) {
|
||||
selected = defaultStatus;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={0} className={classes.gridContainer}>
|
||||
<Grid item xs={12} className={classes.gridItem}>
|
||||
<TasksTable queue={qname} selected={selected} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default TasksView;
|
||||
Reference in New Issue
Block a user