From 86008a813f0d74cd8836e695e623039640a334cb Mon Sep 17 00:00:00 2001
From: David Hartunian <davidh@cockroachlabs.com>
Date: Wed, 9 Feb 2022 18:45:10 -0500
Subject: [PATCH] ui: downsample SQL transaction metrics using MAX

Previously, we were using the default downsampling behavior of the
timeseries query engine for "Open SQL Transactions" and "Active SQL
Statements"  on the metrics page in DB console. This led to confusion
when zooming in on transaction spikes since the spike would get larger
as the zoom got tighter.

This PR changes the aggregation function to use MAX to prevent this
confusion.

Resolves: #71827

Release note (ui change): Open SQL Transactions and Active SQL
Transactions are downsampled using MAX instead of AVG and will more
accurately reflect narrow spikes in transaction counts when looking and
downsampled data.
---
 .../views/cluster/containers/nodeGraphs/dashboards/sql.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/sql.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/sql.tsx
index a765d2e6e330..e84968df338a 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/sql.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/sql.tsx
@@ -52,7 +52,11 @@ export default function(props: GraphDashboardProps) {
       tooltip={`The total number of open SQL transactions  ${tooltipSelection}.`}
     >
       <Axis label="transactions">
-        <Metric name="cr.node.sql.txns.open" title="Open Transactions" />
+        <Metric
+          name="cr.node.sql.txns.open"
+          title="Open Transactions"
+          downsampleMax
+        />
       </Axis>
     </LineGraph>,
 
@@ -65,6 +69,7 @@ export default function(props: GraphDashboardProps) {
         <Metric
           name="cr.node.sql.statements.active"
           title="Active Statements"
+          downsampleMax
         />
       </Axis>
     </LineGraph>,