(ui): Add Queue memory usage chart

This commit is contained in:
Ken Hibino
2021-12-14 16:34:02 -08:00
parent b3622c40da
commit 2920d421af
3 changed files with 17 additions and 1 deletions

View File

@@ -14,6 +14,7 @@ import (
type getMetricsResponse struct {
QueueSize *json.RawMessage `json:"queue_size"`
QueueLatency *json.RawMessage `json:"queue_latency_seconds"`
QueueMemUsgApprox *json.RawMessage `json:"queue_memory_usage_approx_bytes"`
PendingTasksByQueue *json.RawMessage `json:"pending_tasks_by_queue"`
RetryTasksByQueue *json.RawMessage `json:"retry_tasks_by_queue"`
ArchivedTasksByQueue *json.RawMessage `json:"archived_tasks_by_queue"`
@@ -48,6 +49,7 @@ func newGetMetricsHandlerFunc(client *http.Client, prometheusAddr string) http.H
queries := []string{
"asynq_queue_size",
"asynq_queue_latency_seconds",
"asynq_queue_memory_usage_approx_bytes",
"asynq_tasks_enqueued_total{state=\"pending\"}",
"asynq_tasks_enqueued_total{state=\"retry\"}",
"asynq_tasks_enqueued_total{state=\"archived\"}",
@@ -59,7 +61,6 @@ func newGetMetricsHandlerFunc(client *http.Client, prometheusAddr string) http.H
for _, q := range queries {
go func(q string) {
url := buildPrometheusURL(prometheusAddr, q, opts)
fmt.Printf("DEBUG: url: %s\n", url) // TODO: Delete this once debugging is done
msg, err := fetchPrometheusMetrics(client, url)
ch <- res{q, msg, err}
}(q)
@@ -75,6 +76,8 @@ func newGetMetricsHandlerFunc(client *http.Client, prometheusAddr string) http.H
resp.QueueSize = r.msg
case "asynq_queue_latency_seconds":
resp.QueueLatency = r.msg
case "asynq_queue_memory_usage_approx_bytes":
resp.QueueMemUsgApprox = r.msg
case "asynq_tasks_enqueued_total{state=\"pending\"}":
resp.PendingTasksByQueue = r.msg
case "asynq_tasks_enqueued_total{state=\"retry\"}":

View File

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

View File

@@ -7,6 +7,7 @@ import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import WarningIcon from "@material-ui/icons/Warning";
import prettyBytes from "pretty-bytes";
import { getMetricsAsync } from "../actions/metricsActions";
import { AppState } from "../store";
import QueueMetricsChart from "../components/QueueMetricsChart";
@@ -140,6 +141,17 @@ function MetricsView(props: Props) {
/>
</Grid>
)}
{data?.queue_size && (
<Grid item xs={12}>
<ChartRow
title="Queue Memory Usage (approx)"
metrics={data.queue_memory_usage_approx_bytes}
endTime={endTimeSec}
startTime={endTimeSec - durationSec}
yAxisTickFormatter={(val: number) => prettyBytes(val)}
/>
</Grid>
)}
{data?.pending_tasks_by_queue && (
<Grid item xs={12}>
<ChartRow