From 4ab09c8d70828d3ea911a833f9dddc649dea03e2 Mon Sep 17 00:00:00 2001
From: Eric Harmeling <eric.harmeling@cockroachlabs.com>
Date: Mon, 12 Sep 2022 14:39:13 -0400
Subject: [PATCH] ui: link to waiting, blocking txn details from waiting txn
 details

This commit adds a link to the transaction insight details page for
a blocking transaction, if that transaction is also waiting on another
transaction.

Fixes #87784.

Release note: None
Release justification: high-benefit change to existing functionality
---
 .../insightDetailsTables.tsx                    | 17 +++++++++++++++--
 .../transactionInsightDetails.tsx               |  4 +++-
 .../src/views/insights/insightsSelectors.ts     |  8 ++++++++
 .../transactionInsightDetailsPageConnected.tsx  |  6 +++++-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/insightDetailsTables.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/insightDetailsTables.tsx
index 901834f8261f..b67bb510873c 100644
--- a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/insightDetailsTables.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/insightDetailsTables.tsx
@@ -13,20 +13,33 @@ import { ColumnDescriptor, SortedTable } from "src/sortedtable";
 import { DATE_FORMAT, Duration } from "src/util";
 import { EventExecution, InsightExecEnum } from "../types";
 import { insightsTableTitles, QueriesCell } from "../workloadInsights/util";
+import {Link} from "react-router-dom";
 
 interface InsightDetailsTableProps {
   data: EventExecution[];
   execType: InsightExecEnum;
+  waitingList?: string[];
 }
 
 export function makeInsightDetailsColumns(
   execType: InsightExecEnum,
+  waitingList: string[]
 ): ColumnDescriptor<EventExecution>[] {
   return [
     {
       name: "executionID",
       title: insightsTableTitles.executionID(execType),
-      cell: (item: EventExecution) => String(item.executionID),
+      cell: (item: EventExecution) => {
+        if (waitingList && item.executionID in waitingList) {
+          return(
+          <Link to={`/insights/transaction/${item.executionID}`}>
+            {String(item.executionID)}
+          </Link>)
+        }
+        else {
+          return String(item.executionID)
+        }
+      },
       sort: (item: EventExecution) => item.executionID,
     },
     {
@@ -59,7 +72,7 @@ export function makeInsightDetailsColumns(
 export const WaitTimeDetailsTable: React.FC<
   InsightDetailsTableProps
 > = props => {
-  const columns = makeInsightDetailsColumns(props.execType);
+  const columns = makeInsightDetailsColumns(props.execType, props.waitingList);
   return (
     <SortedTable className="statements-table" columns={columns} {...props} />
   );
diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
index 6487ed54f322..0ffb66db7734 100644
--- a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
@@ -52,6 +52,7 @@ const tableCx = classNames.bind(insightTableStyles);
 
 export interface TransactionInsightDetailsStateProps {
   insightEventDetails: TransactionInsightEventDetailsResponse;
+  waitingTxns: string[] | null;
   insightError: Error | null;
 }
 
@@ -187,6 +188,7 @@ export class TransactionInsightDetails extends React.Component<TransactionInsigh
                 <WaitTimeDetailsTable
                   data={blockingExecutions}
                   execType={insightDetails.execType}
+                  waitingList={this.props.waitingTxns}
                 />
               </div>
             </Col>
@@ -219,7 +221,7 @@ export class TransactionInsightDetails extends React.Component<TransactionInsigh
         </div>
         <section>
           <Loading
-            loading={this.props.insightEventDetails == null}
+            loading={this.props.insightEventDetails === null}
             page={"Transaction Insight details"}
             error={this.props.insightError}
             render={this.renderContent}
diff --git a/pkg/ui/workspaces/db-console/src/views/insights/insightsSelectors.ts b/pkg/ui/workspaces/db-console/src/views/insights/insightsSelectors.ts
index 64cd53723c60..a525baa1ba33 100644
--- a/pkg/ui/workspaces/db-console/src/views/insights/insightsSelectors.ts
+++ b/pkg/ui/workspaces/db-console/src/views/insights/insightsSelectors.ts
@@ -47,6 +47,14 @@ export const selectTransactionInsights = createSelector(
   },
 );
 
+export const selectWaitingTransactionList = createSelector(
+  selectTransactionInsights,
+  (txnInsightState) : string[] => {
+    if (!txnInsightState) return [];
+    return txnInsightState.map(insight => insight.transactionID);
+  },
+);
+
 export const selectTransactionInsightDetails = createSelector(
   [
     (state: AdminUIState) => state.cachedData.transactionInsightDetails,
diff --git a/pkg/ui/workspaces/db-console/src/views/insights/transactionInsightDetailsPageConnected.tsx b/pkg/ui/workspaces/db-console/src/views/insights/transactionInsightDetailsPageConnected.tsx
index f197c43d3920..a1a29fb4f36e 100644
--- a/pkg/ui/workspaces/db-console/src/views/insights/transactionInsightDetailsPageConnected.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/insights/transactionInsightDetailsPageConnected.tsx
@@ -17,7 +17,9 @@ import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { refreshTransactionInsightDetails } from "src/redux/apiReducers";
 import { AdminUIState } from "src/redux/state";
-import { selectTransactionInsightDetails } from "src/views/insights/insightsSelectors";
+import {
+  selectTransactionInsightDetails, selectWaitingTransactionList
+} from "src/views/insights/insightsSelectors";
 
 const mapStateToProps = (
   state: AdminUIState,
@@ -27,8 +29,10 @@ const mapStateToProps = (
   const insight: api.TransactionInsightEventDetailsResponse =
     insightDetailsState?.data;
   const insightError = insightDetailsState?.lastError;
+  const waitingTxns = selectWaitingTransactionList(state);
   return {
     insightEventDetails: insight,
+    waitingTxns: waitingTxns,
     insightError: insightError,
   };
 };