ui: fix txn insight query bug, align summary card, remove contended k…

…eys in details page This commit fixes a small bug on the transaction insight details page that was incorrectly mapping the waiting transaction statement fingerprints to the blocking transaction statements. The commit also aligns the summary cards in the details page. The commit also removes the contended key from the details page while we look for a more user- friendly format to display row contention. Release note: None Release justification: bug fix
cockroachdb · Sep 12, 2022 · f19e57d · f19e57d
1 parent 7bcbc70
commit f19e57d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/insightsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/insightsApi.ts
@@ -452,7 +452,7 @@ export function getTransactionInsightEventDetailsState(
                 contentionResults,
               ),
               txnStmtFingerprintsResultsToEventState(
-                blockingTxnStmtFingerprintIDs,
+                waitingTxnStmtFingerprintIDs,
               ),
               txnStmtFingerprintsResultsToEventState(
                 blockingTxnStmtFingerprintIDs,
@@ -484,7 +484,7 @@ export function combineTransactionInsightEventDetailsState(
   ) {
     res = {
       ...txnContentionDetailsState,
-      application: blockingTxnFingerprintState[0].application,
+      application: waitingTxnFingerprintState[0].application,
       queries: waitingTxnFingerprintState[0].queryIDs.map(
         id =>
           waitingFingerprintStmtState.find(

diff --git a/pkg/ui/workspaces/cluster-ui/src/detailsPanels/waitTimeInsightsPanel.tsx b/pkg/ui/workspaces/cluster-ui/src/detailsPanels/waitTimeInsightsPanel.tsx
@@ -52,7 +52,6 @@ type WaitTimeInsightsPanelProps = {
   schemaName?: string;
   tableName?: string;
   indexName?: string;
-  contendedKey?: string;
   waitTime?: moment.Duration;
   waitingExecutions: ContendedExecution[];
   blockingExecutions: ContendedExecution[];
@@ -65,7 +64,6 @@ export const WaitTimeInsightsPanel: React.FC<WaitTimeInsightsPanelProps> = ({
   schemaName,
   tableName,
   indexName,
-  contendedKey,
   waitTime,
   waitingExecutions,
   blockingExecutions,
@@ -119,12 +117,6 @@ export const WaitTimeInsightsPanel: React.FC<WaitTimeInsightsPanelProps> = ({
                         value={indexName}
                       />
                     )}
-                    {contendedKey && (
-                      <SummaryCardItem
-                        label={WaitTimeInsightsLabels.CONTENDED_KEY}
-                        value={contendedKey}
-                      />
-                    )}
                   </SummaryCard>
                 </Col>
               )}

diff --git a/...i/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx b/...i/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
@@ -156,7 +156,11 @@ export class TransactionInsightDetails extends React.Component<TransactionInsigh
             </Col>
           </Row>
           <Row gutter={24} className={tableCx("margin-bottom")}>
-            <InsightsSortedTable columns={insightsColumns} data={tableData} />
+            {/* TO DO (ericharmeling): We might want this table to span the entire page when other types of insights
+            are added*/}
+            <Col className="gutter-row" span={12}>
+              <InsightsSortedTable columns={insightsColumns} data={tableData} />
+            </Col>
           </Row>
         </section>
         <section className={tableCx("section")}>
@@ -167,27 +171,24 @@ export class TransactionInsightDetails extends React.Component<TransactionInsigh
             tableName={insightDetails.tableName}
             indexName={insightDetails.indexName}
             databaseName={insightDetails.databaseName}
-            contendedKey={String(insightDetails.contendedKey)}
             waitTime={moment.duration(insightDetails.elapsedTime)}
             waitingExecutions={[]}
             blockingExecutions={[]}
           />
           <Row gutter={24}>
-            <Col>
-              <Row>
-                <Heading type="h5">
-                  {WaitTimeInsightsLabels.BLOCKED_TXNS_TABLE_TITLE(
-                    insightDetails.executionID,
-                    insightDetails.execType,
-                  )}
-                </Heading>
-                <div className={tableCx("margin-bottom-large")}>
-                  <WaitTimeDetailsTable
-                    data={blockingExecutions}
-                    execType={insightDetails.execType}
-                  />
-                </div>
-              </Row>
+            <Col className="gutter-row">
+              <Heading type="h5">
+                {WaitTimeInsightsLabels.BLOCKED_TXNS_TABLE_TITLE(
+                  insightDetails.executionID,
+                  insightDetails.execType,
+                )}
+              </Heading>
+              <div className={tableCx("margin-bottom-large")}>
+                <WaitTimeDetailsTable
+                  data={blockingExecutions}
+                  execType={insightDetails.execType}
+                />
+              </div>
             </Col>
           </Row>
         </section>

diff --git a/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.tsx
@@ -88,8 +88,8 @@ function descriptionCell(
     </>
   );
   const summary = computeOrUseStmtSummary(
-    insightRec.execution.statement,
-    insightRec.execution.summary,
+    insightRec.execution?.statement,
+    insightRec.execution?.summary,
   );
   switch (insightRec.type) {
     case "CreateIndex":