ui: add link on txn insight details fingerprint

Previously, the fingerprint id showing on the
contention table inside the transaction insights details
didn't have a link to the fingerprint details page.
This commit adds the link, including the proper setTimeScale
to use the start time of the selected transaction.

Fixes cockroachdb#91291

Release note (ui change): Add link on fingerprint ID
on high contention table inside Transaction Insights
Details page.

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

@@ -12,15 +12,22 @@ import React, { useState } from "react";
 import { ColumnDescriptor, SortedTable, SortSetting } from "src/sortedtable";
 import { DATE_FORMAT, Duration } from "src/util";
 import { EventExecution, InsightExecEnum } from "../types";
-import { insightsTableTitles, QueriesCell } from "../workloadInsights/util";
+import {
+  insightsTableTitles,
+  QueriesCell,
+  TransactionDetailsLink,
+} from "../workloadInsights/util";
+import { TimeScale } from "../../timeScaleDropdown";
 
 interface InsightDetailsTableProps {
   data: EventExecution[];
   execType: InsightExecEnum;
+  setTimeScale?: (tw: TimeScale) => void;
 }
 
 export function makeInsightDetailsColumns(
   execType: InsightExecEnum,
+  setTimeScale: (tw: TimeScale) => void,
 ): ColumnDescriptor<EventExecution>[] {
   return [
     {
@@ -32,7 +39,12 @@ export function makeInsightDetailsColumns(
     {
       name: "fingerprintID",
       title: insightsTableTitles.fingerprintID(execType),
-      cell: (item: EventExecution) => String(item.fingerprintID),
+      cell: (item: EventExecution) =>
+        TransactionDetailsLink(
+          item.fingerprintID,
+          item.startTime,
+          setTimeScale,
+        ),
       sort: (item: EventExecution) => item.fingerprintID,
     },
     {
@@ -83,7 +95,7 @@ export function makeInsightDetailsColumns(
 export const WaitTimeDetailsTable: React.FC<
   InsightDetailsTableProps
 > = props => {
-  const columns = makeInsightDetailsColumns(props.execType);
+  const columns = makeInsightDetailsColumns(props.execType, props.setTimeScale);
   const [sortSetting, setSortSetting] = useState<SortSetting>({
     ascending: false,
     columnTitle: "contention",

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

@@ -227,6 +227,7 @@ export const TransactionInsightDetails: React.FC<
                     <WaitTimeDetailsTable
                       data={blockingExecutions}
                       execType={insightDetails.execType}
+                      setTimeScale={setTimeScale}
                     />
                   </div>
                 </Col>