ui: add execution insights to statement and transaction fingerprint d…

…etails

This commit adds execution insights to the Statement Fingerprint and Transaction
Fingerprint Details pages.

Part of cockroachdb#83780.

Release note (ui change): Added execution insights to the Statement Fingerprint
Details and Transaction Fingerprint Details Pages.

pkg/ui/workspaces/cluster-ui/src/api/stmtInsightsApi.ts

@@ -30,6 +30,7 @@ export type StmtInsightsReq = {
   start?: moment.Moment;
   end?: moment.Moment;
   stmtExecutionID?: string;
+  stmtFingerprintId?: string;
 };
 
 type InsightsContentionResponseEvent = {
@@ -118,17 +119,22 @@ WHERE stmt_id = '${filters.stmtExecutionID}'`;
     whereClause =
       whereClause + ` AND end_time <= '${filters.end.toISOString()}'`;
   }
+  if (filters?.stmtFingerprintId) {
+    whereClause =
+      whereClause +
+      ` AND encode(stmt_fingerprint_id, 'hex') = '${filters.stmtFingerprintId}'`;
+  }
 
   return `
-SELECT ${stmtColumns} FROM (
-SELECT
-  *,
-  row_number() OVER ( PARTITION BY stmt_fingerprint_id ORDER BY end_time DESC ) as rank
-FROM
-  crdb_internal.cluster_execution_insights
-  ${whereClause}
-) WHERE rank = 1
- `;
+SELECT ${stmtColumns} FROM
+   (
+     SELECT DISTINCT ON (stmt_fingerprint_id, problem, causes)
+       *
+     FROM
+       crdb_internal.cluster_execution_insights
+         ${whereClause}
+     ORDER BY stmt_fingerprint_id, problem, causes, end_time DESC
+   )`;
 };
 
 export const stmtInsightsByTxnExecutionQuery = (id: string): string => `

pkg/ui/workspaces/cluster-ui/src/api/txnInsightsApi.ts

@@ -128,11 +128,9 @@ function createStmtFingerprintToQueryMap(
   return idToQuery;
 }
 
-function getTxnContentionWhereClause(
-  clause: string,
-  filters?: TxnInsightDetailsRequest,
-): string {
-  let whereClause = clause;
+// txnContentionDetailsQuery selects information about a specific transaction contention event.
+function txnContentionDetailsQuery(filters: TxnContentionDetailsRequest) {
+  let whereClause = ` WHERE waiting_txn_id = '${filters.txnExecutionID}'`;
   if (filters?.start) {
     whereClause =
       whereClause + ` AND collection_ts >= '${filters.start.toISOString()}'`;
@@ -142,20 +140,6 @@ function getTxnContentionWhereClause(
       whereClause +
       ` AND (collection_ts + contention_duration) <= '${filters.end.toISOString()}'`;
   }
-  return whereClause;
-}
-
-export type TransactionContentionEventDetails = Omit<
-  TxnContentionInsightDetails,
-  "application" | "queries" | "blockingQueries"
->;
-
-// txnContentionDetailsQuery selects information about a specific transaction contention event.
-function txnContentionDetailsQuery(filters: TxnContentionDetailsRequest) {
-  const whereClause = getTxnContentionWhereClause(
-    ` WHERE waiting_txn_id = '${filters.txnExecutionID}'`,
-    filters,
-  );
   return `
 SELECT DISTINCT
   collection_ts,
@@ -262,7 +246,7 @@ function formatTxnContentionDetailsResponse(
 }
 
 export type TxnContentionDetailsRequest = {
-  txnExecutionID: string;
+  txnExecutionID?: string;
   start?: moment.Moment;
   end?: moment.Moment;
 };
@@ -415,6 +399,7 @@ type TxnInsightsResponseRow = {
 
 type TxnQueryFilters = {
   execID?: string;
+  fingerprintID?: string;
   start?: moment.Moment;
   end?: moment.Moment;
 };
@@ -466,15 +451,20 @@ AND txn_id != '00000000-0000-0000-0000-000000000000'`;
     whereClause += ` AND end_time <= '${filters.end.toISOString()}'`;
   }
 
+  if (filters?.fingerprintID) {
+    whereClause += ` AND encode(txn_fingerprint_id, 'hex') = '${filters.fingerprintID}'`;
+  }
+
   return `
-SELECT ${txnColumns} FROM (
-    SELECT
-      *,
-      row_number() OVER ( PARTITION BY txn_fingerprint_id ORDER BY end_time DESC ) as rank
-    FROM ${TXN_INSIGHTS_TABLE_NAME}
-    ${whereClause} 
-    
-) WHERE rank = 1;
+SELECT ${txnColumns} FROM
+  (
+    SELECT DISTINCT ON (txn_fingerprint_id, problems, causes)
+      *
+    FROM
+      ${TXN_INSIGHTS_TABLE_NAME}
+    ${whereClause}
+    ORDER BY txn_fingerprint_id, problems, causes, end_time DESC
+  )
 `;
 };
 
@@ -511,20 +501,21 @@ function formatTxnInsightsRow(row: TxnInsightsResponseRow): TxnInsightEvent {
 
 export type TxnInsightsRequest = {
   txnExecutionID?: string;
+  txnFingerprintID?: string;
   start?: moment.Moment;
   end?: moment.Moment;
 };
 
 export function getTxnInsightsApi(
   req?: TxnInsightsRequest,
 ): Promise<TxnInsightEvent[]> {
-  const request = makeInsightsSqlRequest([
-    createTxnInsightsQuery({
-      execID: req?.txnExecutionID,
-      start: req?.start,
-      end: req?.end,
-    }),
-  ]);
+  const filters: TxnQueryFilters = {
+    start: req?.start,
+    end: req?.end,
+    execID: req?.txnExecutionID ? req.txnExecutionID : null,
+    fingerprintID: req?.txnFingerprintID ? req.txnFingerprintID : null,
+  };
+  const request = makeInsightsSqlRequest([createTxnInsightsQuery(filters)]);
   return executeInternalSql<TxnInsightsResponseRow>(request).then(result => {
     if (result.error) {
       throw new Error(

pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/schemaInsightsView.tsx

@@ -38,8 +38,10 @@ import { InsightsError } from "../insightsErrorComponent";
 import { Pagination } from "../../pagination";
 import { EmptySchemaInsightsTablePlaceholder } from "./emptySchemaInsightsTablePlaceholder";
 import { CockroachCloudContext } from "../../contexts";
+import insightTableStyles from "../../insightsTable/insightsTable.module.scss";
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
+const insightTableCx = classNames.bind(insightTableStyles);
 
 export type SchemaInsightsViewStateProps = {
   schemaInsights: InsightRecommendation[];
@@ -248,6 +250,7 @@ export const SchemaInsightsView: React.FC<SchemaInsightsViewProps> = ({
                     }
                   />
                 }
+                tableWrapperClassName={insightTableCx("sorted-table")}
               />
             </section>
             <Pagination

pkg/ui/workspaces/cluster-ui/src/insights/types.ts

@@ -82,6 +82,7 @@ export type TxnInsightDetails = {
   txnDetails?: TxnInsightEvent;
   blockingContentionDetails?: BlockedContentionDetails[];
   statements?: StmtInsightEvent[];
+  execType?: InsightExecEnum;
 };
 
 export type BlockedStatementContentionDetails = {
@@ -102,6 +103,7 @@ export type StmtInsightEvent = InsightEventBase & {
   indexRecommendations: string[];
   planGist: string;
   databaseName: string;
+  execType?: InsightExecEnum;
 };
 
 export type Insight = {
@@ -324,6 +326,9 @@ export interface ExecutionDetails {
   retries?: number;
   statement?: string;
   summary?: string;
+  statementExecutionID?: string;
+  transactionExecutionID?: string;
+  execType?: InsightExecEnum;
 }
 
 export interface insightDetails {

pkg/ui/workspaces/cluster-ui/src/insights/utils.ts

@@ -11,14 +11,14 @@
 import { unset } from "src/util";
 import {
   ExecutionDetails,
-  StmtInsightEvent,
   getInsightFromCause,
   Insight,
   InsightExecEnum,
   InsightNameEnum,
   InsightRecommendation,
   InsightType,
   SchemaInsightEventFilters,
+  StmtInsightEvent,
   TxnInsightDetails,
   TxnInsightEvent,
   WorkloadInsightEventFilters,
@@ -389,6 +389,9 @@ export function getStmtInsightRecommendations(
     databaseName: insightDetails.databaseName,
     elapsedTimeMillis: insightDetails.elapsedTimeMillis,
     contentionTimeMs: insightDetails.contentionTime?.asMilliseconds(),
+    statementExecutionID: insightDetails.statementExecutionID,
+    transactionExecutionID: insightDetails.transactionExecutionID,
+    execType: InsightExecEnum.STATEMENT,
   };
 
   const recs: InsightRecommendation[] = insightDetails.insights?.map(insight =>
@@ -404,15 +407,16 @@ export function getTxnInsightRecommendations(
   if (!insightDetails) return [];
 
   const execDetails: ExecutionDetails = {
+    transactionExecutionID: insightDetails.transactionExecutionID,
     retries: insightDetails.retries,
     contentionTimeMs: insightDetails.contentionTime.asMilliseconds(),
     elapsedTimeMillis: insightDetails.elapsedTimeMillis,
+    execType: InsightExecEnum.TRANSACTION,
   };
   const recs: InsightRecommendation[] = [];
 
   insightDetails?.insights?.forEach(insight =>
     recs.push(getRecommendationForExecInsight(insight, execDetails)),
   );
-
   return recs;
 }

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/insightDetailsTables.tsx

@@ -54,8 +54,8 @@ export function makeInsightDetailsColumns(
     {
       name: "query",
       title: insightsTableTitles.query(execType),
-      cell: (item: ContentionEvent) => QueriesCell(item.queries, 50),
-      sort: (item: ContentionEvent) => item.queries.length,
+      cell: (item: ContentionEvent) => QueriesCell(item?.queries, 50),
+      sort: (item: ContentionEvent) => item.queries?.length,
     },
     {
       name: "contentionStartTime",

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx

@@ -144,7 +144,7 @@ export const StatementInsightDetails: React.FC<
         iconPosition="left"
         className={commonStyles("small-margin")}
       >
-        Insights
+        Previous page
       </Button>
       <h3 className={commonStyles("base-heading", "no-margin-bottom")}>
         Statement Execution ID: {executionID}

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetailsOverviewTab.tsx

@@ -56,7 +56,7 @@ export const StatementInsightDetailsOverviewTab: React.FC<
   const isCockroachCloud = useContext(CockroachCloudContext);
 
   const insightsColumns = useMemo(
-    () => makeInsightsColumns(isCockroachCloud, hasAdminRole),
+    () => makeInsightsColumns(isCockroachCloud, hasAdminRole, true),
     [isCockroachCloud, hasAdminRole],
   );
 
@@ -175,13 +175,14 @@ export const StatementInsightDetailsOverviewTab: React.FC<
           </SummaryCard>
         </Col>
       </Row>
-      <Row gutter={24} className={tableCx("margin-bottom")}>
-        <Col>
+      <Row gutter={24}>
+        <Col span={24}>
           <InsightsSortedTable
             sortSetting={insightsSortSetting}
             onChangeSortSetting={setInsightsSortSetting}
             columns={insightsColumns}
             data={tableData}
+            tableWrapperClassName={tableCx("sorted-table")}
           />
         </Col>
       </Row>

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx

@@ -75,7 +75,7 @@ export const TransactionInsightDetails: React.FC<
 
   useEffect(() => {
     const stmtsComplete =
-      stmts != null && stmts.length === txnDetails?.stmtExecutionIDs?.length;
+      stmts != null && stmts?.length === txnDetails?.stmtExecutionIDs?.length;
 
     const contentionComplete =
       contentionInfo != null ||
@@ -125,7 +125,7 @@ export const TransactionInsightDetails: React.FC<
           iconPosition="left"
           className={commonStyles("small-margin")}
         >
-          Insights
+          Previous page
         </Button>
         <h3
           className={commonStyles("base-heading", "no-margin-bottom")}

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetailsOverviewTab.tsx

@@ -188,13 +188,14 @@ export const TransactionInsightDetailsOverviewTab: React.FC<Props> = ({
                   </SummaryCard>
                 </Col>
               </Row>
-              <Row gutter={24} className={tableCx("margin-bottom")}>
+              <Row gutter={24}>
                 <Col span={24}>
                   <InsightsSortedTable
                     columns={insightsColumns}
                     data={insightRecs}
                     sortSetting={insightsSortSetting}
                     onChangeSortSetting={setInsightsSortSetting}
+                    tableWrapperClassName={tableCx("sorted-table")}
                   />
                 </Col>
               </Row>

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsTable.tsx

@@ -169,7 +169,7 @@ export function makeStatementInsightsColumns(
       showByDefault: false,
     },
     {
-      name: "transactionID",
+      name: "transactionExecutionID",
       title: insightsTableTitles.latestExecutionID(InsightExecEnum.TRANSACTION),
       cell: (item: StmtInsightEvent) => item.transactionExecutionID,
       sort: (item: StmtInsightEvent) => item.transactionExecutionID,

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/queriesCell.tsx

@@ -21,15 +21,15 @@ export function QueriesCell(
   textLimit: number,
 ): React.ReactElement {
   if (
-    !transactionQueries.length ||
-    (transactionQueries.length === 1 &&
-      transactionQueries[0].length < textLimit)
+    !transactionQueries?.length ||
+    (transactionQueries?.length === 1 &&
+      transactionQueries[0]?.length < textLimit)
   ) {
     const query = transactionQueries?.length ? transactionQueries[0] : "";
     return <div>{query}</div>;
   }
 
-  const combinedQuery = transactionQueries.map((query, idx, arr) => (
+  const combinedQuery = transactionQueries?.map((query, idx, arr) => (
     <div key={idx}>
       {idx != 0 && <br />}
       {query}

pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss

@@ -39,3 +39,9 @@
 .inline {
   display: inline-flex;
 }
+
+.sorted-table {
+  border-radius: 3px;
+  box-shadow: 0 0 1px 0 rgba(67, 90, 111, 0.41);
+  width: 100%;
+}