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): Add charts for inspecting state specific task count

Browse Source
This commit is contained in:
Ken Hibino
2021-12-08 05:56:07 -08:00
parent 4f64b760f8
commit b34b5dcc1a
3 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/api.ts
View File

@@ -78,6 +78,9 @@ export interface QueueLocation {
export interface MetricsResponse {
queue_size: PrometheusMetricsResponse;
pending_tasks_by_queue: PrometheusMetricsResponse;
retry_tasks_by_queue: PrometheusMetricsResponse;
archived_tasks_by_queue: PrometheusMetricsResponse;
}
export interface PrometheusMetricsResponse {

6
ui/src/components/QueueSizeMetricsChart.tsx → ui/src/components/QueueMetricsChart.tsx
View File

@@ -53,11 +53,11 @@ const lineColors = [
"#323232",
];
function QueueSizeMetricsChart(props: Props) {
function QueueMetricsChart(props: Props) {
const data = toChartData(props.data);
const keys = props.data.map((x) => x.metric.queue);
return (
<ResponsiveContainer maxHeight={260}>
<ResponsiveContainer height={260}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
@@ -91,4 +91,4 @@ function QueueSizeMetricsChart(props: Props) {
);
}
export default QueueSizeMetricsChart;
export default QueueMetricsChart;

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

@@ -8,7 +8,7 @@ import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import { getMetricsAsync } from "../actions/metricsActions";
import { AppState } from "../store";
import QueueSizeMetricsChart from "../components/QueueSizeMetricsChart";
import QueueMetricsChart from "../components/QueueMetricsChart";
import { currentUnixtime } from "../utils";
import MetricsFetchControls from "../components/MetricsFetchControls";
import { useQuery } from "../hooks";
@@ -99,7 +99,7 @@ function MetricsView(props: Props) {
<Grid item xs={12}>
<Typography>Queue Size</Typography>
{/* TODO: show error message if data.queue_size.status === "error" */}
<QueueSizeMetricsChart
<QueueMetricsChart
data={data?.queue_size.data?.result || []}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
@@ -110,6 +110,30 @@ function MetricsView(props: Props) {
<Typography>Queue Latency</Typography>
<div>TODO: Queue latency chart here</div>
</Grid>
<Grid item xs={12}>
<Typography>Pending Tasks</Typography>
<QueueMetricsChart
data={data?.pending_tasks_by_queue.data?.result || []}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
<Grid item xs={12}>
<Typography>Retry Tasks</Typography>
<QueueMetricsChart
data={data?.retry_tasks_by_queue.data?.result || []}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
<Grid item xs={12}>
<Typography>Archived Tasks</Typography>
<QueueMetricsChart
data={data?.archived_tasks_by_queue.data?.result || []}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
</Container>
);
}