From e1cada31f17a6cf4d9a19b626685112da1bd03c3 Mon Sep 17 00:00:00 2001
From: Marylia Gutierrez <marylia@cockroachlabs.com>
Date: Fri, 19 Aug 2022 08:47:19 -0400
Subject: [PATCH] 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
---
 .../activeStatementsTable.tsx                    | 10 +++++++---
 .../activeTransactionsTable.tsx                  | 10 +++++++---
 .../execContentionTable.tsx                      | 16 +++++++++-------
 .../src/detailsPanels/waitTimeInsightsPanel.tsx  | 12 +++++++-----
 .../statementDetails.module.scss                 |  4 ++++
 5 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx
index 38890dd32ade..6f3411717c87 100644
--- a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx
+++ b/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,
     },
diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx
index 454478efaae3..419a86deaee2 100644
--- a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx
+++ b/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,
     },
diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/execContentionTable.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/execContentionTable.tsx
index 5d14f24496a3..0045f5114fad 100644
--- a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/execContentionTable.tsx
+++ b/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 {
diff --git a/pkg/ui/workspaces/cluster-ui/src/detailsPanels/waitTimeInsightsPanel.tsx b/pkg/ui/workspaces/cluster-ui/src/detailsPanels/waitTimeInsightsPanel.tsx
index 3ddc24d036f3..5e8e92db4c85 100644
--- a/pkg/ui/workspaces/cluster-ui/src/detailsPanels/waitTimeInsightsPanel.tsx
+++ b/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}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.module.scss
index 3d589ae43728..c381a4236a2c 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.module.scss
+++ b/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;
+}