Merge #71817

71817: sql/server/ui: Use summarized statement formats on Sessions and Transactions pages r=lindseyjin a=lindseyjin Resolves #71730 Previously, we implemented new statement summaries (for SELECT, INSERT/UPSERT, and UPDATE statement types) to be used on the Statements page to provide more detail and reduce ambiguity between short statements. For consistency's sake, we are also going to default to using these summarized formats on the Sessions and Transactions pages. For Sessions, this change involves adding a new field "sql_summary", to the active queries proto so that it can be passed to the front-end. For Transactions, instead of showing all the query text concatenated as the label, we now show all the query summary text concatenated. Sessions page ![image](https://user-images.githubusercontent.com/29153209/138318658-9605e82c-39ed-4fb0-bb56-5bb1d7009d5c.png) <img width="514" alt="Screen Shot 2021-10-21 at 2 07 26 PM" src="https://user-images.githubusercontent.com/29153209/138333416-9aa6a877-844c-4f89-9122-e40d0048915d.png"> Transactions page ![image](https://user-images.githubusercontent.com/29153209/138318623-172c23c2-509f-4880-85cc-bed7abbbb95e.png) Additionally, we now show "Mean Rows Written" as a metric on the Statement Details page for all statement types, including SELECT statements, since we realized there's an edge case where SELECT statements that embed INSERT statements may still modify rows. Release note (ui change): Use new summarized formats for SELECT, INSERT/UPSERT, and UPDATE statements on the Sessions and Transaction pages, to be consistent with the Statements page. Show "Mean rows written" as a metric for all statement types on the Statements page, instead of hiding this metric for SELECT statements. Co-authored-by: Lindsey Jin <[email protected]>
cockroachdb · Oct 25, 2021 · 322dd53 · 322dd53
2 parents 0e058e1 + 01d2097
commit 322dd53
Show file tree

Hide file tree

Showing 14 changed files with 537 additions and 317 deletions.
diff --git a/docs/generated/http/full.md b/docs/generated/http/full.md
@@ -1811,6 +1811,7 @@ ActiveQuery represents a query in flight on some Session.
 | phase | [ActiveQuery.Phase](#cockroach.server.serverpb.ListSessionsResponse-cockroach.server.serverpb.ActiveQuery.Phase) |  | phase stores the current phase of execution for this query. | [reserved](#support-status) |
 | progress | [float](#cockroach.server.serverpb.ListSessionsResponse-float) |  | progress is an estimate of the fraction of this query that has been processed. | [reserved](#support-status) |
 | sql_no_constants | [string](#cockroach.server.serverpb.ListSessionsResponse-string) |  | The SQL statement fingerprint, compatible with StatementStatisticsKey. | [reserved](#support-status) |
+| sql_summary | [string](#cockroach.server.serverpb.ListSessionsResponse-string) |  | A summarized version of the sql query. | [reserved](#support-status) |
 
 
 
@@ -1939,6 +1940,7 @@ ActiveQuery represents a query in flight on some Session.
 | phase | [ActiveQuery.Phase](#cockroach.server.serverpb.ListSessionsResponse-cockroach.server.serverpb.ActiveQuery.Phase) |  | phase stores the current phase of execution for this query. | [reserved](#support-status) |
 | progress | [float](#cockroach.server.serverpb.ListSessionsResponse-float) |  | progress is an estimate of the fraction of this query that has been processed. | [reserved](#support-status) |
 | sql_no_constants | [string](#cockroach.server.serverpb.ListSessionsResponse-string) |  | The SQL statement fingerprint, compatible with StatementStatisticsKey. | [reserved](#support-status) |
+| sql_summary | [string](#cockroach.server.serverpb.ListSessionsResponse-string) |  | A summarized version of the sql query. | [reserved](#support-status) |
 
 
 

diff --git a/docs/generated/swagger/spec.json b/docs/generated/swagger/spec.json
@@ -623,6 +623,11 @@
           "type": "string",
           "x-go-name": "SqlNoConstants"
         },
+        "sql_summary": {
+          "description": "A summarized version of the sql query.",
+          "type": "string",
+          "x-go-name": "SqlSummary"
+        },
         "start": {
           "description": "Start timestamp of this query.",
           "type": "string",

diff --git a/pkg/server/serverpb/status.pb.go b/pkg/server/serverpb/status.pb.go
diff --git a/pkg/server/serverpb/status.proto b/pkg/server/serverpb/status.proto
@@ -747,6 +747,9 @@ message ActiveQuery {
 
   // The SQL statement fingerprint, compatible with StatementStatisticsKey.
   string sql_no_constants = 8;
+
+  // A summarized version of the sql query.
+  string sql_summary = 9;
 }
 
 // Request object for ListSessions and ListLocalSessions.

diff --git a/pkg/sql/conn_executor.go b/pkg/sql/conn_executor.go
@@ -2842,6 +2842,7 @@ func (ex *connExecutor) serialize() serverpb.Session {
 			Start:          query.start.UTC(),
 			Sql:            sql,
 			SqlNoConstants: sqlNoConstants,
+			SqlSummary:     formatStatementSummary(ast),
 			IsDistributed:  query.isDistributed,
 			Phase:          (serverpb.ActiveQuery_Phase)(query.phase),
 			Progress:       float32(progress),

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx
@@ -33,8 +33,7 @@ import {
 } from "src/dropdown/dropdown";
 import { Button } from "src/button/button";
 import { Tooltip } from "@cockroachlabs/ui-components";
-import { summarize } from "../util";
-import { shortStatement } from "../statementsTable";
+import { computeOrUseStmtSummary } from "../util";
 
 const cx = classNames.bind(styles);
 
@@ -94,6 +93,24 @@ const AgeLabel = (props: { start: Moment; thingName: string }) => {
   );
 };
 
+const StatementTableCell = (props: { session: ISession }) => {
+  const { session } = props;
+
+  if (!(session.active_queries?.length > 0)) {
+    return "N/A";
+  }
+  const stmt = session.active_queries[0].sql;
+  const stmtSummary = session.active_queries[0].sql_summary;
+  const stmtCellText = computeOrUseStmtSummary(stmt, stmtSummary);
+  return (
+    <div>
+      <Tooltip placement="bottom" style="tableTitle" content={<>{stmt}</>}>
+        {stmtCellText}
+      </Tooltip>
+    </div>
+  );
+};
+
 export function makeSessionsColumns(
   terminateSessionRef?: React.RefObject<TerminateSessionModalRef>,
   terminateQueryRef?: React.RefObject<TerminateQueryModalRef>,
@@ -160,14 +177,7 @@ export function makeSessionsColumns(
       name: "statement",
       title: SessionTableTitle.statement,
       className: cx("cl-table__col-session", "code"),
-      cell: session => {
-        if (!(session.session.active_queries?.length > 0)) {
-          return "N/A";
-        }
-        const stmt = session.session.active_queries[0].sql;
-        const summary = summarize(stmt);
-        return shortStatement(summary, stmt);
-      },
+      cell: session => StatementTableCell({ session: session.session }),
     },
   ];
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -33,7 +33,6 @@ import {
   formatNumberForDisplay,
   calculateTotalWorkload,
   unique,
-  summarize,
   queryByName,
   aggregatedTsAttr,
   aggregationIntervalAttr,
@@ -530,9 +529,6 @@ export class StatementDetails extends React.Component<
         <span className={cx("tooltip-info")}>unavailable</span>
       </Tooltip>
     );
-    const summary = summarize(statement);
-    const showRowsWritten =
-      stats.sql_type === "TypeDML" && summary.statement !== "select";
 
     // If the aggregatedTs is unset, we are aggregating over the whole date range.
     const aggregatedTs = queryByName(this.props.location, aggregatedTsAttr);
@@ -616,19 +612,15 @@ export class StatementDetails extends React.Component<
                       )}
                       {unavailableTooltip}
                     </div>
-                    {showRowsWritten && (
-                      <div
-                        className={summaryCardStylesCx("summary--card__item")}
-                      >
-                        <Text>Mean rows written</Text>
-                        <Text>
-                          {formatNumberForDisplay(
-                            stats.rows_written?.mean,
-                            formatTwoPlaces,
-                          )}
-                        </Text>
-                      </div>
-                    )}
+                    <div className={summaryCardStylesCx("summary--card__item")}>
+                      <Text>Mean rows written</Text>
+                      <Text>
+                        {formatNumberForDisplay(
+                          stats.rows_written?.mean,
+                          formatTwoPlaces,
+                        )}
+                      </Text>
+                    </div>
                     <div className={summaryCardStylesCx("summary--card__item")}>
                       <Text>Max memory usage</Text>
                       {statementSampled && (
@@ -908,10 +900,9 @@ export class StatementDetails extends React.Component<
                 },
               ].filter(function(r) {
                 if (
-                  (r.name === "Network Bytes Sent" &&
-                    r.value &&
-                    r.value.mean === 0) ||
-                  (r.name === "Rows Written" && !showRowsWritten)
+                  r.name === "Network Bytes Sent" &&
+                  r.value &&
+                  r.value.mean === 0
                 ) {
                   // Omit if empty.
                   return false;

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx
@@ -27,11 +27,10 @@ import {
   databaseAttr,
   aggregatedTsAttr,
   propsToQueryString,
-  summarize,
   TimestampToMoment,
   aggregationIntervalAttr,
+  computeOrUseStmtSummary,
 } from "src/util";
-import { shortStatement } from "./statementsTable";
 import styles from "./statementsTableContent.module.scss";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { Download } from "@cockroachlabs/icons";
@@ -185,14 +184,6 @@ export const StatementLink = ({
   database,
   onClick,
 }: StatementLinkProps): React.ReactElement => {
-  const summary = summarize(statement);
-  // current statements that we support summaries for from the backend.
-  const summarizedStmts = new Set(["select", "insert", "upsert", "update"]);
-  const shortStmt =
-    statementSummary && summarizedStmts.has(summary.statement)
-      ? statementSummary
-      : shortStatement(summary, statement);
-
   const onStatementClick = React.useCallback(() => {
     if (onClick) {
       onClick(statement);
@@ -209,6 +200,8 @@ export const StatementLink = ({
     database,
   };
 
+  const summary = computeOrUseStmtSummary(statement, statementSummary);
+
   return (
     <Link to={StatementLinkTarget(linkProps)} onClick={onStatementClick}>
       <div>
@@ -221,7 +214,7 @@ export const StatementLink = ({
           }
         >
           <div className="cl-table-link__tooltip-hover-area">
-            {getHighlightedText(shortStmt, search, false, true)}
+            {getHighlightedText(summary, search, false, true)}
           </div>
         </Tooltip>
       </div>

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
@@ -29,7 +29,7 @@ import { SqlBox } from "../sql";
 import { aggregateStatements } from "../transactionsPage/utils";
 import { Loading } from "../loading";
 import { SummaryCard } from "../summaryCard";
-import { Bytes, Duration, formatNumberForDisplay } from "src/util";
+import { Bytes, Duration, formatNumberForDisplay, summarize } from "src/util";
 import { UIConfigState } from "../store";
 import SQLActivityError from "../sqlActivity/errorComponent";
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts
@@ -28,6 +28,7 @@ import {
   addStatementStats,
   flattenStatementStats,
   DurationToNumber,
+  computeOrUseStmtSummary,
 } from "../util";
 
 type Statement = protos.cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics;
@@ -80,6 +81,21 @@ export const statementFingerprintIdsToText = (
     .join("\n");
 };
 
+// Combine all statement summaries into a string.
+export const statementFingerprintIdsToSummarizedText = (
+  statementFingerprintIds: Long[],
+  statements: Statement[],
+): string => {
+  return statementFingerprintIds
+    .map(s => {
+      const query = statements.find(stmt => stmt.id.eq(s))?.key.key_data.query;
+      const querySummary = statements.find(stmt => stmt.id.eq(s))?.key.key_data
+        .query_summary;
+      return computeOrUseStmtSummary(query, querySummary);
+    })
+    .join("\n");
+};
+
 // Aggregate transaction statements from different nodes.
 export const aggregateStatements = (
   statements: Statement[],

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsCells/transactionsCells.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsCells/transactionsCells.tsx
@@ -8,58 +8,50 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import * as protos from "@cockroachlabs/crdb-protobuf-client";
 import React from "react";
 import { getHighlightedText } from "src/highlightedText";
-import { Anchor } from "src/anchor";
 import { Tooltip } from "@cockroachlabs/ui-components";
-import { summarize } from "src/util/sql/summarize";
-import { shortStatement } from "src/statementsTable/statementsTable";
-import { statementsSql } from "src/util";
 import { limitText } from "../utils";
 import classNames from "classnames/bind";
 import statementsStyles from "../../statementsTable/statementsTableContent.module.scss";
 import transactionsCellsStyles from "./transactionsCells.module.scss";
-import Long from "long";
 
 const statementsCx = classNames.bind(statementsStyles);
 const ownCellStyles = classNames.bind(transactionsCellsStyles);
 const descriptionClassName = statementsCx("cl-table-link__description");
 
 const textWrapper = ownCellStyles("text-wrapper");
 const hoverAreaClassName = ownCellStyles("hover-area");
-
-type TransactionStats = protos.cockroach.sql.ITransactionStatistics;
-
 interface TextCellProps {
   transactionText: string;
+  transactionSummary: string;
   onClick: () => void;
   search: string;
 }
 
 export const textCell = ({
   transactionText,
+  transactionSummary,
   onClick,
   search,
 }: TextCellProps): React.ReactElement => {
-  const summary = summarize(transactionText);
   return (
     <div>
       <Tooltip
         placement="bottom"
         content={
           <pre className={descriptionClassName}>
-            {getHighlightedText(transactionText, search, true)}
+            {getHighlightedText(transactionText, search, true /* hasDarkBkg */)}
           </pre>
         }
       >
         <div className={textWrapper}>
           <div onClick={onClick} className={hoverAreaClassName}>
             {getHighlightedText(
-              limitText(shortStatement(summary, transactionText), 200),
+              limitText(transactionSummary, 200),
               search,
-              false,
-              true,
+              false /* hasDarkBkg */,
+              true /* isOriginalText */,
             )}
           </div>
         </div>

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsTable.tsx
@@ -44,6 +44,7 @@ import {
   getStatementsByFingerprintIdAndTime,
   collectStatementsText,
   statementFingerprintIdsToText,
+  statementFingerprintIdsToSummarizedText,
 } from "../transactionsPage/utils";
 import classNames from "classnames/bind";
 import statsTablePageStyles from "src/statementsTable/statementsTableContent.module.scss";
@@ -130,6 +131,10 @@ export function makeTransactionsColumns(
             item.stats_data.statement_fingerprint_ids,
             statements,
           ),
+          transactionSummary: statementFingerprintIdsToSummarizedText(
+            item.stats_data.statement_fingerprint_ids,
+            statements,
+          ),
           onClick: () => handleDetails(item),
           search,
         }),