ui: add CPU column on Insights

Part Of cockroachdb#87213 Adds CPU Time column on Statement and Transaction Insights pages and their respective details pages. Release note (ui change): Add CPU Time to Statement and Transaction Insights.
maryliag · Feb 1, 2023 · 7276f26 · 7276f26
1 parent 0fbaa27
commit 7276f26
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 12 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/stmtInsightsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/stmtInsightsApi.ts
@@ -67,6 +67,7 @@ export type StmtInsightsResponseRow = {
   problem: string;
   index_recommendations: string[];
   plan_gist: string;
+  cpu_sql_nanos: number;
 };
 
 const stmtColumns = `
@@ -94,7 +95,8 @@ last_retry_reason,
 causes,
 problem,
 index_recommendations,
-plan_gist
+plan_gist,
+cpu_sql_nanos
 `;
 
 const stmtInsightsOverviewQuery = (filters?: StmtInsightsReq): string => {
@@ -206,6 +208,7 @@ export function formatStmtInsights(
         InsightExecEnum.STATEMENT,
       ),
       planGist: row.plan_gist,
+      cpuNanos: row.cpu_sql_nanos,
     } as StmtInsightEvent;
   });
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/txnInsightsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/txnInsightsApi.ts
@@ -410,6 +410,7 @@ type TxnInsightsResponseRow = {
   problems: string[];
   causes: string[];
   stmt_execution_ids: string[];
+  cpu_sql_nanos: number;
 };
 
 type TxnQueryFilters = {
@@ -441,7 +442,8 @@ contention,
 last_retry_reason,
 problems,
 causes,
-stmt_execution_ids`;
+stmt_execution_ids,
+cpu_sql_nanos`;
 
   if (filters?.execID) {
     return `
@@ -503,6 +505,7 @@ function formatTxnInsightsRow(row: TxnInsightsResponseRow): TxnInsightEvent {
     contentionTime: moment.duration(row.contention ?? 0),
     insights,
     stmtExecutionIDs: row.stmt_execution_ids,
+    cpuNanos: row.cpu_sql_nanos,
   };
 }
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/types.ts b/pkg/ui/workspaces/cluster-ui/src/insights/types.ts
@@ -28,23 +28,24 @@ export enum InsightExecEnum {
 
 // Common fields for both txn and stmt insights.
 export type InsightEventBase = {
-  transactionExecutionID: string;
-  transactionFingerprintID: string;
+  application: string;
+  contentionTime?: moment.Duration;
+  cpuNanos: number;
+  elapsedTimeMillis: number;
+  endTime: Moment;
   implicitTxn: boolean;
-  sessionID: string;
-  username: string;
+  insights: Insight[];
   lastRetryReason?: string;
   priority: string;
+  query: string;
   retries: number;
-  application: string;
   rowsRead: number;
   rowsWritten: number;
+  sessionID: string;
   startTime: Moment;
-  endTime: Moment;
-  elapsedTimeMillis: number;
-  query: string;
-  contentionTime?: moment.Duration;
-  insights: Insight[];
+  transactionExecutionID: string;
+  transactionFingerprintID: string;
+  username: string;
 };
 
 export type TxnInsightEvent = InsightEventBase & {

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/utils.spec.ts b/pkg/ui/workspaces/cluster-ui/src/insights/utils.spec.ts
@@ -71,6 +71,7 @@ const statementInsightMock: StmtInsightEvent = {
   insights: [failedExecutionInsight(InsightExecEnum.STATEMENT)],
   indexRecommendations: [],
   planGist: "gist",
+  cpuNanos: 50,
 };
 
 function mockStmtInsightEvent(
@@ -110,6 +111,7 @@ const txnInsightEventMock: TxnInsightEvent = {
   endTime: moment(),
   elapsedTimeMillis: 1,
   stmtExecutionIDs: [statementInsightMock.statementExecutionID],
+  cpuNanos: 50,
 };
 
 function mockTxnInsightEvent(

diff --git a/...ces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetailsOverviewTab.tsx b/...ces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetailsOverviewTab.tsx
@@ -117,6 +117,10 @@ export const StatementInsightDetailsOverviewTab: React.FC<
               label="Elapsed Time"
               value={Duration(insightDetails.elapsedTimeMillis * 1e6)}
             />
+            <SummaryCardItem
+              label={"CPU Time"}
+              value={Duration(insightDetails.cpuNanos)}
+            />
             <SummaryCardItem
               label="Rows Read"
               value={Count(insightDetails.rowsRead)}

diff --git a/...s/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetailsOverviewTab.tsx b/...s/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetailsOverviewTab.tsx
@@ -139,6 +139,10 @@ export const TransactionInsightDetailsOverviewTab: React.FC<Props> = ({
                       label="Elapsed Time"
                       value={Duration(txnDetails.elapsedTimeMillis * 1e6)}
                     />
+                    <SummaryCardItem
+                      label="CPU Time"
+                      value={Duration(txnDetails.cpuNanos)}
+                    />
                     <SummaryCardItem
                       label="Rows Read"
                       value={Count(txnDetails.rowsRead)}

diff --git a/...ces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsTable.tsx b/...ces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsTable.tsx
@@ -147,6 +147,13 @@ export function makeStatementInsightsColumns(
         item.contentionTime?.asMilliseconds() ?? -1,
       showByDefault: false,
     },
+    {
+      name: "cpu",
+      title: insightsTableTitles.cpu(execType),
+      cell: (item: StmtInsightEvent) => Duration(item.cpuNanos),
+      sort: (item: StmtInsightEvent) => item.cpuNanos,
+      showByDefault: false,
+    },
     {
       name: "isFullScan",
       title: insightsTableTitles.isFullScan(execType),

diff --git a/...cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsTable.tsx b/...cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsTable.tsx
@@ -91,6 +91,13 @@ export function makeTransactionInsightsColumns(
         Duration((item.contentionTime?.asMilliseconds() ?? 0) * 1e6),
       sort: item => item.contentionTime?.asMilliseconds() ?? 0,
     },
+    {
+      name: "cpu",
+      title: insightsTableTitles.cpu(execType),
+      cell: item => Duration(item.cpuNanos),
+      sort: item => item.cpuNanos,
+      showByDefault: false,
+    },
     {
       name: "applicationName",
       title: insightsTableTitles.applicationName(execType),

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/insightsColumns.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/insightsColumns.tsx
@@ -34,6 +34,7 @@ export const insightsColumnLabels = {
   databaseName: "Database Name",
   tableName: "Table Name",
   indexName: "Index Name",
+  cpu: "CPU Time",
 };
 
 export type InsightsTableColumnKeys = keyof typeof insightsColumnLabels;
@@ -206,4 +207,10 @@ export const insightsTableTitles: InsightsTableTitleType = {
       "rowsProcessed",
     );
   },
+  cpu: (_: InsightExecEnum) => {
+    return makeToolTip(
+      <p>{`CPU Time spent executing within the specified time interval.`}</p>,
+      "cpu",
+    );
+  },
 };