ui: style update on active execution

Previously we were not limiting the size of the
query column, making it hard to read with large values.
This commits limits the size and all a tooltip to
allow the user to see the full queyr if they want to.
This commit also adds a space at the end of the details
page.

Release justification: low risk styling changes
Release note: None

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx

@@ -19,6 +19,8 @@ import {
   getLabel,
 } from "../execTableCommon";
 import { ActiveStatement } from "../types";
+import { Tooltip } from "@cockroachlabs/ui-components";
+import { limitText } from "../../util";
 
 export function makeActiveStatementsColumns(
   isCockroachCloud: boolean,
@@ -29,9 +31,11 @@ export function makeActiveStatementsColumns(
       name: "execution",
       title: executionsTableTitles.execution("statement"),
       cell: (item: ActiveStatement) => (
-        <Link to={`/execution/statement/${item.statementID}`}>
-          {item.query}
-        </Link>
+        <Tooltip placement="bottom" content={item.query}>
+          <Link to={`/execution/statement/${item.statementID}`}>
+            {limitText(item.query, 70)}
+          </Link>
+        </Tooltip>
       ),
       sort: (item: ActiveStatement) => item.query,
     },

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx

@@ -19,6 +19,8 @@ import {
   getLabel,
 } from "../execTableCommon";
 import { ActiveTransaction, ExecutionType } from "../types";
+import { Tooltip } from "@cockroachlabs/ui-components";
+import { limitText } from "../../util";
 
 export function makeActiveTransactionsColumns(
   isCockroachCloud: boolean,
@@ -30,9 +32,11 @@ export function makeActiveTransactionsColumns(
       name: "mostRecentStatement",
       title: executionsTableTitles.mostRecentStatement(execType),
       cell: (item: ActiveTransaction) => (
-        <Link to={`/execution/statement/${item.statementID}`}>
-          {item.query}
-        </Link>
+        <Tooltip placement="bottom" content={item.query}>
+          <Link to={`/execution/statement/${item.statementID}`}>
+            {limitText(item.query || "", 70)}
+          </Link>
+        </Tooltip>
       ),
       sort: (item: ActiveTransaction) => item.query,
     },

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/execContentionTable.tsx

@@ -9,12 +9,13 @@
 // licenses/APL.txt.
 
 import React from "react";
-import { SortedTable, ColumnDescriptor } from "../../sortedtable";
+import { ColumnDescriptor, SortedTable } from "../../sortedtable";
 import { ContendedExecution, ExecutionType } from "../types";
 import { Link } from "react-router-dom";
 import { StatusIcon } from "../statusIcon";
 import { executionsTableTitles } from "../execTableCommon";
-import { DATE_FORMAT, Duration } from "../../util";
+import { DATE_FORMAT, Duration, limitText } from "../../util";
+import { Tooltip } from "@cockroachlabs/ui-components";
 
 const getID = (item: ContendedExecution, execType: ExecutionType) =>
   execType === "transaction"
@@ -24,7 +25,7 @@ const getID = (item: ContendedExecution, execType: ExecutionType) =>
 export function makeContentionColumns(
   execType: ExecutionType,
 ): ColumnDescriptor<ContendedExecution>[] {
-  const columns: ColumnDescriptor<ContendedExecution>[] = [
+  return [
     {
       name: "executionID",
       title: executionsTableTitles.executionID(execType),
@@ -42,9 +43,11 @@ export function makeContentionColumns(
       name: "mostRecentStatement",
       title: executionsTableTitles.mostRecentStatement(execType),
       cell: item => (
-        <Link to={`/execution/statement/${item.statementExecutionID}`}>
-          {item.query}
-        </Link>
+        <Tooltip placement="bottom" content={item.query}>
+          <Link to={`/execution/statement/${item.statementExecutionID}`}>
+            {limitText(item.query, 50)}
+          </Link>
+        </Tooltip>
       ),
       sort: item => item.query,
     },
@@ -72,7 +75,6 @@ export function makeContentionColumns(
       sort: item => item.contentionTime.asSeconds(),
     },
   ];
-  return columns;
 }
 
 interface ContentionTableProps {

pkg/ui/workspaces/cluster-ui/src/detailsPanels/waitTimeInsightsPanel.tsx

@@ -67,7 +67,9 @@ export const WaitTimeInsightsPanel: React.FC<WaitTimeInsightsPanelProps> = ({
   const showWaitTimeInsightsDetails = waitTime != null;
 
   return (
-    <section className={cx("section", "section--container")}>
+    <section
+      className={cx("section", "section--container", "margin-bottom-large")}
+    >
       <Row gutter={24}>
         <Col>
           <Heading type="h5">{WaitTimeInsightsLabels.SECTION_HEADING}</Heading>
@@ -122,12 +124,12 @@ export const WaitTimeInsightsPanel: React.FC<WaitTimeInsightsPanelProps> = ({
           )}
           {blockingExecutions.length > 0 && (
             <Row>
-              <Text>
+              <Heading type="h5">
                 {WaitTimeInsightsLabels.BLOCKING_TXNS_TABLE_TITLE(
                   executionID,
                   execType,
                 )}
-              </Text>
+              </Heading>
               <div>
                 <ExecutionContentionTable
                   execType={execType}
@@ -138,12 +140,12 @@ export const WaitTimeInsightsPanel: React.FC<WaitTimeInsightsPanelProps> = ({
           )}
           {waitingExecutions.length > 0 && (
             <Row>
-              <Text>
+              <Heading type="h5">
                 {WaitTimeInsightsLabels.WAITING_TXNS_TABLE_TITLE(
                   executionID,
                   execType,
                 )}
-              </Text>
+              </Heading>
               <div>
                 <ExecutionContentionTable
                   execType={execType}

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.module.scss

@@ -140,3 +140,7 @@
 .margin-bottom {
   margin-bottom: 20px;
 }
+
+.margin-bottom-large {
+  margin-bottom: 40px;
+}