go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-10-07 20:52:02 +08:00
Code Issues Projects Releases Wiki Activity

(ui): code cleanup

Browse Source
This commit is contained in:
Ken Hibino
2021-12-08 08:31:21 -08:00
parent 53e213fba4
commit 110ab4167c
1 changed files with 78 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
ui/src/views/MetricsView.tsx
View File

@@ -13,6 +13,7 @@ import QueueMetricsChart from "../components/QueueMetricsChart";
import { currentUnixtime } from "../utils"; import { currentUnixtime } from "../utils";
import MetricsFetchControls from "../components/MetricsFetchControls"; import MetricsFetchControls from "../components/MetricsFetchControls";
import { useQuery } from "../hooks"; import { useQuery } from "../hooks";
import { PrometheusMetricsResponse } from "../api";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
container: { container: {
@@ -110,104 +111,90 @@ function MetricsView(props: Props) {
/> />
</div> </div>
</Grid> </Grid>
<Grid item xs={12}> {data?.queue_size && (
<div className={classes.chartInfo}> <Grid item xs={12}>
<Typography>Queue Size</Typography> <ChartRow
{data?.queue_size.status === "error" && ( title="Queue Size"
<div className={classes.errorMessage}> metrics={data.queue_size}
<WarningIcon fontSize="small" className={classes.warningIcon} /> endTime={endTimeSec}
<Typography color="textSecondary"> startTime={endTimeSec - durationSec}
Failed to get metrics data: {data?.queue_size.error || ""} />
</Typography> </Grid>
</div> )}
)}
</div>
<QueueMetricsChart
data={
data?.queue_size.status === "error"
? []
: data?.queue_size.data?.result || []
}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Typography>Queue Latency</Typography> <Typography>Queue Latency</Typography>
<div>TODO: Queue latency chart here</div> <div>TODO: Queue latency chart here</div>
</Grid> </Grid>
<Grid item xs={12}> {data?.pending_tasks_by_queue && (
<div className={classes.chartInfo}> <Grid item xs={12}>
<Typography>Pending Tasks</Typography> <ChartRow
{data?.pending_tasks_by_queue.status === "error" && ( title="Pending Tasks"
<div className={classes.errorMessage}> metrics={data.pending_tasks_by_queue}
<WarningIcon fontSize="small" className={classes.warningIcon} /> endTime={endTimeSec}
<Typography color="textSecondary"> startTime={endTimeSec - durationSec}
Failed to get metrics data:{" "} />
{data?.pending_tasks_by_queue.error || ""} </Grid>
</Typography> )}
</div> {data?.retry_tasks_by_queue && (
)} <Grid item xs={12}>
</div> <ChartRow
<QueueMetricsChart title="Retry Tasks"
data={ metrics={data.retry_tasks_by_queue}
data?.pending_tasks_by_queue.status === "error" endTime={endTimeSec}
? [] startTime={endTimeSec - durationSec}
: data?.pending_tasks_by_queue.data?.result || [] />
} </Grid>
endTime={endTimeSec} )}
startTime={endTimeSec - durationSec} {data?.archived_tasks_by_queue && (
/> <Grid item xs={12}>
</Grid> <ChartRow
<Grid item xs={12}> title="Archived Tasks"
<div className={classes.chartInfo}> metrics={data.archived_tasks_by_queue}
<Typography>Retry Tasks</Typography> endTime={endTimeSec}
{data?.retry_tasks_by_queue.status === "error" && ( startTime={endTimeSec - durationSec}
<div className={classes.errorMessage}> />
<WarningIcon fontSize="small" className={classes.warningIcon} /> </Grid>
<Typography color="textSecondary"> )}
Failed to get metrics data:{" "}
{data?.retry_tasks_by_queue.error || ""}
</Typography>
</div>
)}
</div>
<QueueMetricsChart
data={
data?.retry_tasks_by_queue.status === "error"
? []
: data?.retry_tasks_by_queue.data?.result || []
}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
<Grid item xs={12}>
<div className={classes.chartInfo}>
<Typography>Archived Tasks</Typography>
{data?.archived_tasks_by_queue.status === "error" && (
<div className={classes.errorMessage}>
<WarningIcon fontSize="small" className={classes.warningIcon} />
<Typography color="textSecondary">
Failed to get metrics data:{" "}
{data?.archived_tasks_by_queue.error || ""}
</Typography>
</div>
)}
</div>
<QueueMetricsChart
data={
data?.archived_tasks_by_queue.status === "error"
? []
: data?.archived_tasks_by_queue.data?.result || []
}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
</Container> </Container>
); );
} }
export default connector(MetricsView); export default connector(MetricsView);
/******** Helper components ********/
interface ChartRowProps {
title: string;
metrics: PrometheusMetricsResponse;
endTime: number;
startTime: number;
}
function ChartRow(props: ChartRowProps) {
const classes = useStyles();
return (
<>
<div className={classes.chartInfo}>
<Typography>{props.title}</Typography>
{props.metrics.status === "error" && (
<div className={classes.errorMessage}>
<WarningIcon fontSize="small" className={classes.warningIcon} />
<Typography color="textSecondary">
Failed to get metrics data: {props.metrics.error}
</Typography>
</div>
)}
</div>
<QueueMetricsChart
data={
props.metrics.status === "error"
? []
: props.metrics.data?.result || []
}
endTime={props.endTime}
startTime={props.startTime}
/>
</>
);
}