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.
cockroachdb · Nov 21, 2022 · d77b7dd · d77b7dd
1 parent f0554bc
commit d77b7dd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 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
@@ -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
@@ -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
@@ -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(