Skip to content

Commit

Permalink
ui: link to waiting, blocking txn details from waiting txn details
Browse files Browse the repository at this point in the history
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
  • Loading branch information
ericharmeling committed Sep 12, 2022
1 parent f19e57d commit 4ab09c8
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
{
Expand Down Expand Up @@ -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} />
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const tableCx = classNames.bind(insightTableStyles);

export interface TransactionInsightDetailsStateProps {
insightEventDetails: TransactionInsightEventDetailsResponse;
waitingTxns: string[] | null;
insightError: Error | null;
}

Expand Down Expand Up @@ -187,6 +188,7 @@ export class TransactionInsightDetails extends React.Component<TransactionInsigh
<WaitTimeDetailsTable
data={blockingExecutions}
execType={insightDetails.execType}
waitingList={this.props.waitingTxns}
/>
</div>
</Col>
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
};
};
Expand Down

0 comments on commit 4ab09c8

Please sign in to comment.