From 2920d421affd9bdcc9731f021b6b260fa545f485 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Tue, 14 Dec 2021 16:34:02 -0800
Subject: [PATCH] (ui): Add Queue memory usage chart

---
 metrics_handler.go           |  5 ++++-
 ui/src/api.ts                |  1 +
 ui/src/views/MetricsView.tsx | 12 ++++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/metrics_handler.go b/metrics_handler.go
index ba57388..caaf113 100644
--- a/metrics_handler.go
+++ b/metrics_handler.go
@@ -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\"}":
diff --git a/ui/src/api.ts b/ui/src/api.ts
index fb1439e..9cd53e9 100644
--- a/ui/src/api.ts
+++ b/ui/src/api.ts
@@ -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;
diff --git a/ui/src/views/MetricsView.tsx b/ui/src/views/MetricsView.tsx
index 985ffa5..0d56502 100644
--- a/ui/src/views/MetricsView.tsx
+++ b/ui/src/views/MetricsView.tsx
@@ -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