From 3efefdf739aca50e5938c7d6169a4960f2751a7f Mon Sep 17 00:00:00 2001
From: obradovichv <53901450+obradovichv@users.noreply.github.com>
Date: Wed, 18 Aug 2021 20:45:46 +0000
Subject: [PATCH] feat(charts): add a marker line between test runs on the
 client

Creates dummy placeholders in the stats history to space between the marker
and the line data.

Issue: #1852
---
 locust/static/locust.js          | 35 ++++++++++++++++++++++++++------
 locust/templates/stats_data.html |  1 +
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/locust/static/locust.js b/locust/static/locust.js
index efca2c6933..8279d0038e 100644
--- a/locust/static/locust.js
+++ b/locust/static/locust.js
@@ -79,6 +79,20 @@ $('#swarm_form').submit(function(event) {
         function(response) {
             if (response.success) {
                 setHostName(response.host);
+
+                // add run marker to close off the previous run if any
+                if(stats_history["time"].length < 1) {
+                    return;
+                }
+
+                let time = new Date().toLocaleTimeString();
+                stats_history["markers"].push({xAxis: time});
+                stats_history["time"].push(time);
+                stats_history["user_count"].push({"value": null});
+                stats_history["current_rps"].push({"value": null});
+                stats_history["current_fail_per_sec"].push({"value": null});
+                stats_history["response_time_percentile_50"].push({"value": null});
+                stats_history["response_time_percentile_95"].push({"value": null});
             }
         }
     );
@@ -174,12 +188,23 @@ $("#workers .stats_label").click(function(event) {
     renderWorkerTable(window.report);
 });
 
+function createMarkLine() {
+    return {
+        symbol: "none",
+        label: {
+            formatter: params => `Run #${params.dataIndex + 1}`
+        },
+        lineStyle: {color: "#5b6f66"},
+        data: stats_history["markers"],
+    }
+}
+
 function update_stats_charts(){
     if(stats_history["time"].length > 0){
         rpsChart.chart.setOption({
             xAxis: {data: stats_history["time"]},
             series: [
-                {data: stats_history["current_rps"]},
+                {data: stats_history["current_rps"], markLine: createMarkLine()},
                 {data: stats_history["current_fail_per_sec"]},
             ]
         });
@@ -187,17 +212,15 @@ function update_stats_charts(){
         responseTimeChart.chart.setOption({
             xAxis: {data: stats_history["time"]},
             series: [
-                {data: stats_history["response_time_percentile_50"]},
+                {data: stats_history["response_time_percentile_50"], markLine: createMarkLine()},
                 {data: stats_history["response_time_percentile_95"]},
             ]
         });
 
         usersChart.chart.setOption({
-            xAxis: {
-                data: stats_history["time"]
-            },
+            xAxis: {data: stats_history["time"]},
             series: [
-                {data: stats_history["user_count"]},
+                {data: stats_history["user_count"], markLine: createMarkLine()},
             ]
         });
     }
diff --git a/locust/templates/stats_data.html b/locust/templates/stats_data.html
index 8adc13b657..c542aa2d47 100644
--- a/locust/templates/stats_data.html
+++ b/locust/templates/stats_data.html
@@ -6,4 +6,5 @@
     "current_fail_per_sec": {{ current_fail_per_sec_data | tojson }},
     "response_time_percentile_50": {{ response_time_percentile_50_data | tojson }},
     "response_time_percentile_95": {{ response_time_percentile_95_data | tojson }},
+    "markers": [],
 };