From d77b7dde8daf240d6d436390d7f0dbb10c11862b Mon Sep 17 00:00:00 2001
From: Matthew Todd <todd@cockroachlabs.com>
Date: Mon, 21 Nov 2022 14:37:34 -0500
Subject: [PATCH] ui: show stmt idle time in execution/planning chart

Part of #86667.

Release note (ui change): The "Statement Execution and Planning Time"
chart on the statement fingerprint page now includes a third value,
"Idle," representing the time spent by the application waiting to
execute this statement while holding a transaction open.
---
 .../statementDetails.fixture.ts               | 29 +++++++++++++++++++
 .../src/statementDetails/statementDetails.tsx |  7 ++++-
 .../src/statementDetails/timeseriesUtils.ts   |  4 ++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts
index 4c5f80bcbe98..94bfda564442 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts
@@ -37,6 +37,7 @@ const statementDetailsNoData: StatementDetailsResponse = {
       max_retries: new Long(0),
       legacy_last_err: "",
       num_rows: { mean: 0, squared_diffs: 0 },
+      idle_lat: { mean: 0, squared_diffs: 0 },
       parse_lat: { mean: 0, squared_diffs: 0 },
       plan_lat: { mean: 0, squared_diffs: 0 },
       run_lat: { mean: 0, squared_diffs: 0 },
@@ -96,6 +97,10 @@ const statementDetailsData: StatementDetailsResponse = {
         mean: 6,
         squared_diffs: 0,
       },
+      idle_lat: {
+        mean: 0.0000876,
+        squared_diffs: 2.35792e-8,
+      },
       parse_lat: {
         mean: 0.0000876,
         squared_diffs: 2.35792e-8,
@@ -189,6 +194,10 @@ const statementDetailsData: StatementDetailsResponse = {
           mean: 6,
           squared_diffs: 0,
         },
+        idle_lat: {
+          mean: 0.00004,
+          squared_diffs: 0,
+        },
         parse_lat: {
           mean: 0.00004,
           squared_diffs: 0,
@@ -285,6 +294,10 @@ const statementDetailsData: StatementDetailsResponse = {
           mean: 6,
           squared_diffs: 0,
         },
+        idle_lat: {
+          mean: 0.000071,
+          squared_diffs: 4.050000000000001e-9,
+        },
         parse_lat: {
           mean: 0.000071,
           squared_diffs: 4.050000000000001e-9,
@@ -381,6 +394,10 @@ const statementDetailsData: StatementDetailsResponse = {
           mean: 6,
           squared_diffs: 0,
         },
+        idle_lat: {
+          mean: 0.000046,
+          squared_diffs: 0,
+        },
         parse_lat: {
           mean: 0.000046,
           squared_diffs: 0,
@@ -477,6 +494,10 @@ const statementDetailsData: StatementDetailsResponse = {
           mean: 6,
           squared_diffs: 0,
         },
+        idle_lat: {
+          mean: 0.00021,
+          squared_diffs: 0,
+        },
         parse_lat: {
           mean: 0.00021,
           squared_diffs: 0,
@@ -575,6 +596,10 @@ const statementDetailsData: StatementDetailsResponse = {
           mean: 6,
           squared_diffs: 0,
         },
+        idle_lat: {
+          mean: 0.0000876,
+          squared_diffs: 2.35792e-8,
+        },
         parse_lat: {
           mean: 0.0000876,
           squared_diffs: 2.35792e-8,
@@ -669,6 +694,10 @@ const statementDetailsData: StatementDetailsResponse = {
           mean: 6,
           squared_diffs: 0,
         },
+        idle_lat: {
+          mean: 0.0000876,
+          squared_diffs: 2.35792e-8,
+        },
         parse_lat: {
           mean: 0.0000876,
           squared_diffs: 2.35792e-8,
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
index 081a61ada4d2..549c981e44fe 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -563,7 +563,12 @@ export class StatementDetails extends React.Component<
       generateExecuteAndPlanningTimeseries(statsPerAggregatedTs);
     const executionAndPlanningOps: Partial<Options> = {
       axes: [{}, { label: "Time Spent" }],
-      series: [{}, { label: "Execution" }, { label: "Planning" }],
+      series: [
+        {},
+        { label: "Execution" },
+        { label: "Planning" },
+        { label: "Idle" },
+      ],
       width: cardWidth,
     };
 
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts b/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts
index 70b522a890e9..b61a8740273f 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts
@@ -21,14 +21,16 @@ export function generateExecuteAndPlanningTimeseries(
   const ts: Array<number> = [];
   const execution: Array<number> = [];
   const planning: Array<number> = [];
+  const idle: Array<number> = [];
 
   stats.forEach(function (stat: statementStatisticsPerAggregatedTs) {
     ts.push(TimestampToNumber(stat.aggregated_ts) * 1e3);
     execution.push(stat.stats.run_lat.mean * 1e9);
     planning.push(stat.stats.plan_lat.mean * 1e9);
+    idle.push(stat.stats.idle_lat.mean * 1e9);
   });
 
-  return [ts, execution, planning];
+  return [ts, execution, planning, idle];
 }
 
 export function generateRowsProcessedTimeseries(