ui: link to waiting, blocking txn details from waiting txn details

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} />
   );

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}

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,

pkg/ui/workspaces/db-console/src/views/insights/transactionInsightDetailsPageConnected.tsx

@@ -17,7 +17,10 @@ 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 +30,10 @@ const mapStateToProps = (
   const insight: api.TransactionInsightEventDetailsResponse =
     insightDetailsState?.data;
   const insightError = insightDetailsState?.lastError;
+  const waitingTxns = selectWaitingTransactionList(state);
   return {
     insightEventDetails: insight,
+    waitingTxns: waitingTxns,
     insightError: insightError,
   };
 };