From af13dde364e109f1485c0fc47d4e01ebd168fc85 Mon Sep 17 00:00:00 2001
From: Johno Crawford <johno@sulake.com>
Date: Thu, 3 Oct 2024 09:52:46 +0200
Subject: [PATCH] Correct graphite 'target' param serialization with
 traditional $.param

---
 nsqadmin/static/js/lib/handlebars_helpers.js | 40 ++++++++++----------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/nsqadmin/static/js/lib/handlebars_helpers.js b/nsqadmin/static/js/lib/handlebars_helpers.js
index de5284db4..377a82153 100644
--- a/nsqadmin/static/js/lib/handlebars_helpers.js
+++ b/nsqadmin/static/js/lib/handlebars_helpers.js
@@ -235,6 +235,9 @@ Handlebars.registerHelper('nanotohuman', function(n) {
 });
 
 Handlebars.registerHelper('sparkline', function(typ, node, ns1, ns2, key) {
+    var interval = AppState.get('STATSD_INTERVAL') + 'sec';
+    var graphInterval = AppState.get('graph_interval');
+
     var q = {
         'colorList': genColorList(typ, key),
         'height': '20',
@@ -248,19 +251,20 @@ Handlebars.registerHelper('sparkline', function(typ, node, ns1, ns2, key) {
         'yMin': '0',
         'lineMode': 'connected',
         'drawNullAsZero': 'false',
-        'from': '-' + AppState.get('graph_interval'),
-        'until': '-1min'
+        'from': '-' + graphInterval,
+        'until': '-1min',
+        'target': _.map(genTargets(typ, node, ns1, ns2, key), function(t) {
+            return 'summarize(' + t + ',"' + interval + '","avg")';
+        })
     };
 
-    var interval = AppState.get('STATSD_INTERVAL') + 'sec';
-    q['target'] = _.map(genTargets(typ, node, ns1, ns2, key), function(t) {
-        return 'summarize(' + t + ',"' + interval + '","avg")';
-    });
-
-    return AppState.get('GRAPHITE_URL') + '/render?' + $.param(q);
+    return AppState.get('GRAPHITE_URL') + '/render?' + $.param(q, true);
 });
 
 Handlebars.registerHelper('large_graph', function(typ, node, ns1, ns2, key) {
+    var statsdInterval = AppState.get('STATSD_INTERVAL');
+    var interval = statsdInterval + 'sec';
+
     var q = {
         'colorList': genColorList(typ, key),
         'height': '450',
@@ -271,19 +275,17 @@ Handlebars.registerHelper('large_graph', function(typ, node, ns1, ns2, key) {
         'lineMode': 'connected',
         'drawNullAsZero': 'false',
         'from': '-' + AppState.get('graph_interval'),
-        'until': '-1min'
+        'until': '-1min',
+        'target': _.map(genTargets(typ, node, ns1, ns2, key), function(t) {
+            if (metricType(key) === 'counter') {
+                var scale = 1 / statsdInterval;
+                t = 'scale(' + t + ',' + scale + ')';
+            }
+            return 'summarize(' + t + ',"' + interval + '","avg")';
+        })
     };
 
-    var interval = AppState.get('STATSD_INTERVAL') + 'sec';
-    q['target'] = _.map(genTargets(typ, node, ns1, ns2, key), function(t) {
-        if (metricType(key) === 'counter') {
-            var scale = 1 / AppState.get('STATSD_INTERVAL');
-            t = 'scale(' + t + ',' + scale + ')';
-        }
-        return 'summarize(' + t + ',"' + interval + '","avg")';
-    });
-
-    return AppState.get('GRAPHITE_URL') + '/render?' + $.param(q);
+    return AppState.get('GRAPHITE_URL') + '/render?' + $.param(q, true);
 });
 
 Handlebars.registerHelper('rate', function(typ, node, ns1, ns2) {