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

Add Queue Latency chart

Browse Source
This commit is contained in:
Ken Hibino
2021-12-12 07:08:31 -08:00
parent 110ab4167c
commit fcd9708f0a
7 changed files with 64 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/api.ts
View File

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

9
ui/src/components/QueueMetricsChart.tsx
View File

@@ -17,6 +17,9 @@ interface Props {
// both startTime and endTime are in unix time (seconds)
startTime: number;
endTime: number;
// (optional): Tick formatter function for YAxis
yAxisTickFormatter?: (val: number) => string;
}
// interface that rechart understands.
@@ -70,7 +73,7 @@ function QueueMetricsChart(props: Props) {
type="number"
scale="time"
/>
<YAxis />
<YAxis tickFormatter={props.yAxisTickFormatter} />
<Tooltip
labelFormatter={(timestamp: number) => {
return new Date(timestamp * 1000).toLocaleTimeString();
@@ -91,4 +94,8 @@ function QueueMetricsChart(props: Props) {
);
}
QueueMetricsChart.defaultProps = {
yAxisTickFormatter: (val: number) => val.toString(),
};
export default QueueMetricsChart;

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

@@ -121,41 +121,48 @@ function MetricsView(props: Props) {
/>
</Grid>
)}
{data?.queue_latency_seconds && (
<Grid item xs={12}>
<ChartRow
title="Queue Latency"
metrics={data.queue_latency_seconds}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
yAxisTickFormatter={(val: number) => val + "s"}
/>
</Grid>
)}
{data?.pending_tasks_by_queue && (
<Grid item xs={12}>
<ChartRow
title="Pending Tasks"
metrics={data.pending_tasks_by_queue}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
)}
{data?.retry_tasks_by_queue && (
<Grid item xs={12}>
<ChartRow
title="Retry Tasks"
metrics={data.retry_tasks_by_queue}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
)}
{data?.archived_tasks_by_queue && (
<Grid item xs={12}>
<ChartRow
title="Archived Tasks"
metrics={data.archived_tasks_by_queue}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
)}
</Grid>
<Grid item xs={12}>
<Typography>Queue Latency</Typography>
<div>TODO: Queue latency chart here</div>
</Grid>
{data?.pending_tasks_by_queue && (
<Grid item xs={12}>
<ChartRow
title="Pending Tasks"
metrics={data.pending_tasks_by_queue}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
)}
{data?.retry_tasks_by_queue && (
<Grid item xs={12}>
<ChartRow
title="Retry Tasks"
metrics={data.retry_tasks_by_queue}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
)}
{data?.archived_tasks_by_queue && (
<Grid item xs={12}>
<ChartRow
title="Archived Tasks"
metrics={data.archived_tasks_by_queue}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
/>
</Grid>
)}
</Container>
);
}
@@ -169,6 +176,7 @@ interface ChartRowProps {
metrics: PrometheusMetricsResponse;
endTime: number;
startTime: number;
yAxisTickFormatter?: (val: number) => string;
}
function ChartRow(props: ChartRowProps) {
@@ -194,6 +202,7 @@ function ChartRow(props: ChartRowProps) {
}
endTime={props.endTime}
startTime={props.startTime}
yAxisTickFormatter={props.yAxisTickFormatter}
/>
</>
);