Merge cockroachdb#83443

83443: ui: combine read and written column into processed r=maryliag a=maryliag Previously, Statement and Transaction pages had one column for read and another for written rows, with the written not being displayed by default. This commit combine the two columns into one and display by default on both Statement and Transactions page. <img width="266" alt="Screen Shot 2022-06-27 at 2 20 09 PM" src="https://user-images.githubusercontent.com/1017486/176009305-8bbdf6d7-1b6f-477f-b648-59799ab1ba34.png"> https://www.loom.com/share/ee8c896b450445dcb449d8f1bce42adf Release note (ui change): Combine columns rows read and rows written on Statements and Transactions pages into a single column called Rows Processed, which is displayed by default. Co-authored-by: Marylia Gutierrez <[email protected]>
jasonmchan · Jun 28, 2022 · 615051e · 615051e
2 parents 443c4d5 + dfd1872
commit 615051e
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 168 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.stories.tsx
@@ -13,7 +13,6 @@ import { storiesOf, DecoratorFn } from "@storybook/react";
 
 import {
   countBarChart,
-  rowsReadBarChart,
   bytesReadBarChart,
   latencyBarChart,
   maxMemUsageBarChart,
@@ -56,10 +55,6 @@ storiesOf("BarCharts", module)
     const chartFactory = countBarChart(statements);
     return chartFactory(statements[0]);
   })
-  .add("rowsReadBarChart", () => {
-    const chartFactory = rowsReadBarChart(statements);
-    return chartFactory(statements[0]);
-  })
   .add("bytesReadBarChart", () => {
     const chartFactory = bytesReadBarChart(statements);
     return chartFactory(statements[0]);
@@ -87,10 +82,6 @@ storiesOf("BarCharts/within column (150px)", module)
     const chartFactory = countBarChart(statements);
     return chartFactory(statements[0]);
   })
-  .add("rowsReadBarChart", () => {
-    const chartFactory = rowsReadBarChart(statements);
-    return chartFactory(statements[0]);
-  })
   .add("bytesReadBarChart", () => {
     const chartFactory = bytesReadBarChart(statements);
     return chartFactory(statements[0]);

diff --git a/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.tsx b/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.tsx
@@ -13,7 +13,7 @@ import { stdDevLong, longToInt } from "src/util";
 import { Duration, Bytes, Percentage } from "src/util/format";
 import classNames from "classnames/bind";
 import styles from "./barCharts.module.scss";
-import { bar, formatTwoPlaces, approximify } from "./utils";
+import { bar, approximify } from "./utils";
 import { barChartFactory, BarChartOptions } from "./barChartFactory";
 import { AggregateStatistics } from "src/statementsTable/statementsTable";
 
@@ -27,18 +27,10 @@ const countBars = [
   ),
 ];
 
-const rowsReadBars = [
-  bar("rows-read", (d: StatementStatistics) => d.stats.rows_read.mean),
-];
-
 const bytesReadBars = [
   bar("bytes-read", (d: StatementStatistics) => d.stats.bytes_read.mean),
 ];
 
-const rowsWrittenBars = [
-  bar("rows-written", (d: StatementStatistics) => d.stats.rows_written?.mean),
-];
-
 const latencyBars = [
   bar("bar-chart__parse", (d: StatementStatistics) => d.stats.parse_lat.mean),
   bar("bar-chart__plan", (d: StatementStatistics) => d.stats.plan_lat.mean),
@@ -78,16 +70,9 @@ const retryBars = [
   ),
 ];
 
-const rowsReadStdDev = bar(cx("rows-read-dev"), (d: StatementStatistics) =>
-  stdDevLong(d.stats.rows_read, d.stats.count),
-);
 const bytesReadStdDev = bar(cx("bytes-read-dev"), (d: StatementStatistics) =>
   stdDevLong(d.stats.bytes_read, d.stats.count),
 );
-const rowsWrittenStdDev = bar(
-  cx("rows-written-dev"),
-  (d: StatementStatistics) => stdDevLong(d.stats.rows_written, d.stats.count),
-);
 const latencyStdDev = bar(
   cx("bar-chart__overall-dev"),
   (d: StatementStatistics) => stdDevLong(d.stats.service_lat, d.stats.count),
@@ -107,26 +92,12 @@ const networkBytesStdDev = bar(
 );
 
 export const countBarChart = barChartFactory("grey", countBars, approximify);
-export const rowsReadBarChart = barChartFactory(
-  "grey",
-  rowsReadBars,
-  approximify,
-  rowsReadStdDev,
-  formatTwoPlaces,
-);
 export const bytesReadBarChart = barChartFactory(
   "grey",
   bytesReadBars,
   Bytes,
   bytesReadStdDev,
 );
-export const rowsWrittenBarChart = barChartFactory(
-  "grey",
-  rowsWrittenBars,
-  approximify,
-  rowsWrittenStdDev,
-  formatTwoPlaces,
-);
 export const latencyBarChart = barChartFactory(
   "grey",
   latencyBars,

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx
@@ -19,9 +19,7 @@ import {
 } from "src/util";
 import {
   countBarChart,
-  rowsReadBarChart,
   bytesReadBarChart,
-  rowsWrittenBarChart,
   latencyBarChart,
   contentionBarChart,
   maxMemUsageBarChart,
@@ -71,12 +69,7 @@ function makeCommonColumns(
   };
 
   const countBar = countBarChart(statements, defaultBarChartOptions);
-  const rowsReadBar = rowsReadBarChart(statements, defaultBarChartOptions);
   const bytesReadBar = bytesReadBarChart(statements, defaultBarChartOptions);
-  const rowsWrittenBar = rowsWrittenBarChart(
-    statements,
-    defaultBarChartOptions,
-  );
   const latencyBar = latencyBarChart(statements, defaultBarChartOptions);
   const contentionBar = contentionBarChart(
     statements,
@@ -109,12 +102,18 @@ function makeCommonColumns(
       showByDefault: false,
     },
     {
-      name: "rowsRead",
-      title: statisticsTableTitles.rowsRead(statType),
+      name: "rowsProcessed",
+      title: statisticsTableTitles.rowsProcessed(statType),
       className: cx("statements-table__col-rows-read"),
-      cell: rowsReadBar,
+      cell: (stmt: AggregateStatistics) =>
+        `${FixLong(Number(stmt.stats.rows_read.mean))} Reads / ${FixLong(
+          Number(stmt.stats.rows_written?.mean),
+        )} Writes`,
       sort: (stmt: AggregateStatistics) =>
-        FixLong(Number(stmt.stats.rows_read.mean)),
+        FixLong(
+          Number(stmt.stats.rows_read.mean) +
+            Number(stmt.stats.rows_written?.mean),
+        ),
     },
     {
       name: "bytesRead",
@@ -123,14 +122,6 @@ function makeCommonColumns(
       sort: (stmt: AggregateStatistics) =>
         FixLong(Number(stmt.stats.bytes_read.mean)),
     },
-    {
-      name: "rowsWritten",
-      title: statisticsTableTitles.rowsWritten(statType),
-      cell: rowsWrittenBar,
-      sort: (stmt: AggregateStatistics) =>
-        FixLong(Number(stmt.stats.rows_written?.mean)),
-      showByDefault: false,
-    },
     {
       name: "time",
       title: statisticsTableTitles.time(statType),

diff --git a/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx b/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx
@@ -52,8 +52,7 @@ export const statisticsColumnLabels = {
   networkBytes: "Network",
   regionNodes: "Regions/Nodes",
   retries: "Retries",
-  rowsRead: "Rows Read",
-  rowsWritten: "Rows Written",
+  rowsProcessed: "Rows Processed",
   statements: "Statements",
   statementsCount: "Statements",
   time: "Time",
@@ -385,7 +384,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
       </Tooltip>
     );
   },
-  rowsRead: (statType: StatisticType) => {
+  rowsProcessed: (statType: StatisticType) => {
     let contentModifier = "";
     let fingerprintModifier = "";
     switch (statType) {
@@ -409,24 +408,20 @@ export const statisticsTableTitles: StatisticTableTitleType = {
         content={
           <>
             <p>
-              {"Aggregation of all rows "}
+              {"Average (mean) number of rows "}
               <Anchor href={readFromDisk} target="_blank">
-                read from disk
+                read
               </Anchor>
-              {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `}
-              <Anchor href={statementsTimeInterval} target="_blank">
-                time interval
+              {" and "}
+              <Anchor href={writtenToDisk} target="_blank">
+                written
               </Anchor>
-              .&nbsp;
-            </p>
-            <p>
-              The gray bar indicates the mean number of rows read from disk. The
-              blue bar indicates one standard deviation from the mean.
+              {` to disk across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}
             </p>
           </>
         }
       >
-        {getLabel("rowsRead")}
+        {getLabel("rowsProcessed")}
       </Tooltip>
     );
   },
@@ -475,51 +470,6 @@ export const statisticsTableTitles: StatisticTableTitleType = {
       </Tooltip>
     );
   },
-  rowsWritten: (statType: StatisticType) => {
-    let contentModifier = "";
-    let fingerprintModifier = "";
-    switch (statType) {
-      case "transaction":
-        contentModifier = contentModifiers.transaction;
-        break;
-      case "statement":
-        contentModifier = contentModifiers.statements;
-        break;
-      case "transactionDetails":
-        contentModifier = contentModifiers.statements;
-        fingerprintModifier =
-          " for this " + contentModifiers.transactionFingerprint;
-        break;
-    }
-
-    return (
-      <Tooltip
-        placement="bottom"
-        style="tableTitle"
-        content={
-          <>
-            <p>
-              {"Aggregation of all rows "}
-              <Anchor href={writtenToDisk} target="_blank">
-                written to disk
-              </Anchor>
-              {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `}
-              <Anchor href={statementsTimeInterval} target="_blank">
-                time interval
-              </Anchor>
-              .&nbsp;
-            </p>
-            <p>
-              The gray bar indicates the mean number of rows written to disk.
-              The blue bar indicates one standard deviation from the mean.
-            </p>
-          </>
-        }
-      >
-        {getLabel("rowsWritten")}
-      </Tooltip>
-    );
-  },
   time: (statType: StatisticType) => {
     let columnLabel = "";
     let contentModifier = "";

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsBarCharts.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsBarCharts.ts
@@ -24,14 +24,6 @@ const countBar = [
     longToInt(d.stats_data.stats.count),
   ),
 ];
-const rowsReadBar = [
-  bar("rows-read", (d: Transaction) =>
-    longToInt(d.stats_data.stats.rows_read.mean),
-  ),
-];
-const rowsReadStdDev = bar(cx("rows-read-dev"), (d: Transaction) =>
-  stdDevLong(d.stats_data.stats.rows_read, d.stats_data.stats.count),
-);
 const bytesReadBar = [
   bar("bytes-read", (d: Transaction) =>
     longToInt(d.stats_data.stats.bytes_read.mean),
@@ -40,14 +32,6 @@ const bytesReadBar = [
 const bytesReadStdDev = bar(cx("bytes-read-dev"), (d: Transaction) =>
   stdDevLong(d.stats_data.stats.bytes_read, d.stats_data.stats.count),
 );
-const rowsWrittenBar = [
-  bar("rows-written", (d: Transaction) =>
-    longToInt(d.stats_data.stats.rows_written?.mean),
-  ),
-];
-const rowsWrittenStdDev = bar(cx("rows-written-dev"), (d: Transaction) =>
-  stdDevLong(d.stats_data.stats.rows_written, d.stats_data.stats.count),
-);
 const latencyBar = [
   bar(
     "bar-chart__service-lat",
@@ -102,24 +86,12 @@ export const transactionsCountBarChart = barChartFactory(
   countBar,
   approximify,
 );
-export const transactionsRowsReadBarChart = barChartFactory(
-  "grey",
-  rowsReadBar,
-  approximify,
-  rowsReadStdDev,
-);
 export const transactionsBytesReadBarChart = barChartFactory(
   "grey",
   bytesReadBar,
   Bytes,
   bytesReadStdDev,
 );
-export const transactionsRowsWrittenBarChart = barChartFactory(
-  "grey",
-  rowsWrittenBar,
-  approximify,
-  rowsWrittenStdDev,
-);
 export const transactionsLatencyBarChart = barChartFactory(
   "grey",
   latencyBar,

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsTable.tsx
@@ -18,9 +18,7 @@ import {
 } from "../sortedtable";
 import {
   transactionsCountBarChart,
-  transactionsRowsReadBarChart,
   transactionsBytesReadBarChart,
-  transactionsRowsWrittenBarChart,
   transactionsLatencyBarChart,
   transactionsContentionBarChart,
   transactionsMaxMemUsageBarChart,
@@ -96,18 +94,10 @@ export function makeTransactionsColumns(
   };
 
   const countBar = transactionsCountBarChart(transactions);
-  const rowsReadBar = transactionsRowsReadBarChart(
-    transactions,
-    defaultBarChartOptions,
-  );
   const bytesReadBar = transactionsBytesReadBarChart(
     transactions,
     defaultBarChartOptions,
   );
-  const rowsWrittenBar = transactionsRowsWrittenBarChart(
-    transactions,
-    defaultBarChartOptions,
-  );
   const latencyBar = transactionsLatencyBarChart(
     transactions,
     latencyClasses.barChart,
@@ -163,12 +153,20 @@ export function makeTransactionsColumns(
         FixLong(Number(item.stats_data.stats.count)),
     },
     {
-      name: "rowsRead",
-      title: statisticsTableTitles.rowsRead(statType),
-      cell: rowsReadBar,
+      name: "rowsProcessed",
+      title: statisticsTableTitles.rowsProcessed(statType),
+      cell: (item: TransactionInfo) =>
+        `${FixLong(
+          Number(item.stats_data.stats.rows_read.mean),
+        )} Reads / ${FixLong(
+          Number(item.stats_data.stats.rows_written?.mean),
+        )} Writes`,
       className: cx("statements-table__col-rows-read"),
       sort: (item: TransactionInfo) =>
-        FixLong(Number(item.stats_data.stats.rows_read.mean)),
+        FixLong(
+          Number(item.stats_data.stats.rows_read.mean) +
+            Number(item.stats_data.stats.rows_written?.mean),
+        ),
     },
     {
       name: "bytesRead",
@@ -178,15 +176,6 @@ export function makeTransactionsColumns(
       sort: (item: TransactionInfo) =>
         FixLong(Number(item.stats_data.stats.bytes_read.mean)),
     },
-    {
-      name: "rowsWritten",
-      title: statisticsTableTitles.rowsWritten(statType),
-      cell: rowsWrittenBar,
-      className: cx("statements-table__col-rows-written"),
-      sort: (item: TransactionInfo) =>
-        FixLong(Number(item.stats_data.stats.rows_written?.mean)),
-      showByDefault: false,
-    },
     {
       name: "time",
       title: statisticsTableTitles.time(statType),