ui: add rows written to statement and transaction tables

Resolves #67084 Previously, the Statements and Transactions tables did not have a "Rows Written" column. This was inadequate as we received feedback to surface information on Rows Affected for statements on the db console. Since we've already added "Rows Written" as a metric on the Statement Details pages, this commit also adds this metric as a column on the Statements Overview table. This commit also adds this metric as a field on the Transaction Statistics proto, in order to add this as a column on the Transactions table. These columns will not show up by default, although they are selectable from the column selector. Release note (ui change): A new column, "Rows Written" has been added onto the Statements and Transactions tables. This column will not show up by default, but can be selected from the column selector.
cockroachdb · Sep 23, 2021 · 48ac747 · 48ac747
1 parent 67f8629
commit 48ac747
Show file tree

Hide file tree

Showing 18 changed files with 292 additions and 107 deletions.
diff --git a/pkg/roachpb/app_stats.go b/pkg/roachpb/app_stats.go
@@ -127,6 +127,7 @@ func (t *TransactionStatistics) Add(other *TransactionStatistics) {
 	t.NumRows.Add(other.NumRows, t.Count, other.Count)
 	t.RowsRead.Add(other.RowsRead, t.Count, other.Count)
 	t.BytesRead.Add(other.BytesRead, t.Count, other.Count)
+	t.RowsWritten.Add(other.RowsWritten, t.Count, other.Count)
 
 	t.ExecStats.Add(other.ExecStats)
 

diff --git a/pkg/roachpb/app_stats.pb.go b/pkg/roachpb/app_stats.pb.go
diff --git a/pkg/roachpb/app_stats.proto b/pkg/roachpb/app_stats.proto
@@ -142,6 +142,9 @@ message TransactionStatistics {
   // aggregation of all its statements' execution statistics. These statistics
   // are sampled.
   optional ExecStats exec_stats = 9 [(gogoproto.nullable) = false];
+
+  // RowsWritten collects the number of rows written to disk.
+  optional NumericStat rows_written = 10 [(gogoproto.nullable) = false];
 }
 
 

diff --git a/pkg/sql/conn_executor_exec.go b/pkg/sql/conn_executor_exec.go
@@ -1954,6 +1954,7 @@ func (ex *connExecutor) recordTransaction(
 		CollectedExecStats:      ex.extraTxnState.shouldCollectTxnExecutionStats,
 		ExecStats:               ex.extraTxnState.accumulatedStats,
 		RowsRead:                ex.extraTxnState.rowsRead,
+		RowsWritten:             ex.extraTxnState.rowsWritten,
 		BytesRead:               ex.extraTxnState.bytesRead,
 	}
 

diff --git a/pkg/sql/sqlstats/persistedsqlstats/sqlstatsutil/json_encoding_test.go b/pkg/sql/sqlstats/persistedsqlstats/sqlstatsutil/json_encoding_test.go
@@ -193,6 +193,10 @@ func TestSQLStatsJsonEncoding(t *testing.T) {
     "rowsRead": {
       "mean": {{.Float}},
       "sqDiff": {{.Float}}
+    }
+		"rowsWritten": {
+      "mean": {{.Float}},
+      "sqDiff": {{.Float}}
     }
   },
   "execution_statistics": {

diff --git a/pkg/sql/sqlstats/persistedsqlstats/sqlstatsutil/json_impl.go b/pkg/sql/sqlstats/persistedsqlstats/sqlstatsutil/json_impl.go
@@ -206,6 +206,7 @@ func (t *innerTxnStats) jsonFields() jsonFields {
 		{"commitLat", (*numericStats)(&t.CommitLat)},
 		{"bytesRead", (*numericStats)(&t.BytesRead)},
 		{"rowsRead", (*numericStats)(&t.RowsRead)},
+		{"rowsWritten", (*numericStats)(&t.RowsWritten)},
 	}
 }
 

diff --git a/pkg/sql/sqlstats/ssmemstorage/ss_mem_writer.go b/pkg/sql/sqlstats/ssmemstorage/ss_mem_writer.go
@@ -219,6 +219,7 @@ func (s *Container) RecordTransaction(
 		stats.mu.data.MaxRetries = value.RetryCount
 	}
 	stats.mu.data.RowsRead.Record(stats.mu.data.Count, float64(value.RowsRead))
+	stats.mu.data.RowsWritten.Record(stats.mu.data.Count, float64(value.RowsWritten))
 	stats.mu.data.BytesRead.Record(stats.mu.data.Count, float64(value.BytesRead))
 
 	if value.CollectedExecStats {

diff --git a/pkg/sql/sqlstats/ssprovider.go b/pkg/sql/sqlstats/ssprovider.go
@@ -183,5 +183,6 @@ type RecordedTxnStats struct {
 	CollectedExecStats      bool
 	ExecStats               execstats.QueryLevelStats
 	RowsRead                int64
+	RowsWritten             int64
 	BytesRead               int64
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.module.scss b/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.module.scss
@@ -62,6 +62,7 @@
   .rows,
   .rows-read,
   .bytes-read,
+  .rows-written,
   .max-mem-usage,
   .network-bytes {
     background-color: $colors--neutral-4;
@@ -71,6 +72,7 @@
   .rows-dev,
   .rows-read-dev,
   .bytes-read-dev,
+  .rows-written-dev,
   .contention-dev,
   .max-mem-usage-dev,
   .network-bytes-dev {

diff --git a/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.tsx b/pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.tsx
@@ -34,6 +34,10 @@ 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),
@@ -76,9 +80,13 @@ const retryBars = [
 const rowsReadStdDev = bar(cx("rows-read-dev"), (d: StatementStatistics) =>
   stdDevLong(d.stats.rows_read, d.stats.count),
 );
-const bytesReadStdDev = bar(cx("rows-read-dev"), (d: StatementStatistics) =>
+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),
@@ -111,6 +119,13 @@ export const bytesReadBarChart = barChartFactory(
   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/statementDetails/statementDetails.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts
@@ -77,6 +77,10 @@ const statementStats: any = {
     mean: 7,
     squared_diffs: 1000000,
   },
+  rows_written: {
+    mean: 1,
+    squared_diffs: 10,
+  },
   last_exec_timestamp: {
     seconds: Long.fromInt(1599670292),
     nanos: 111613000,

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx
@@ -22,6 +22,7 @@ import {
   countBarChart,
   rowsReadBarChart,
   bytesReadBarChart,
+  rowsWrittenBarChart,
   latencyBarChart,
   contentionBarChart,
   maxMemUsageBarChart,
@@ -71,6 +72,10 @@ 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,
@@ -117,6 +122,14 @@ 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
@@ -18,6 +18,7 @@ import {
   statementsSql,
   statementsTimeInterval,
   readFromDisk,
+  writtenToDisk,
   planningExecutionTime,
   contentionTime,
   readsAndWrites,
@@ -37,6 +38,7 @@ export const statisticsColumnLabels = {
   regionNodes: "Regions/Nodes",
   retries: "Retries",
   rowsRead: "Rows Read",
+  rowsWritten: "Rows Written",
   statements: "Statements",
   statementsCount: "Statements",
   time: "Time",
@@ -290,6 +292,46 @@ export const statisticsTableTitles: StatisticTableTitleType = {
       </Tooltip>
     );
   },
+  rowsWritten: (statType: StatisticType) => {
+    let contentModifier = "";
+    const fingerprintModifier = "";
+    switch (statType) {
+      case "transaction":
+        contentModifier = contentModifiers.transaction;
+        break;
+      case "statement":
+        contentModifier = contentModifiers.statements;
+        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/transactionsPage/transactions.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactions.fixture.ts
@@ -120,6 +120,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
           squared_diffs: 47.74147217235174,
         },
         rows_read: { mean: 1, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.99 },
       },
       id: Long.fromInt(100),
     },
@@ -183,6 +184,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
           squared_diffs: 31.085714285714225,
         },
         rows_read: { mean: 1, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(101),
     },
@@ -238,6 +240,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
         },
         bytes_read: { mean: 40, squared_diffs: 0 },
         rows_read: { mean: 1, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(102),
     },
@@ -335,6 +338,10 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
           mean: 15.789285714285711,
           squared_diffs: 652.5678571428576,
         },
+        rows_written: {
+          mean: 1.4444499999,
+          squared_diffs: 0.99999999,
+        },
       },
       id: Long.fromInt(103),
     },
@@ -384,6 +391,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
         },
         bytes_read: { mean: 0, squared_diffs: 0 },
         rows_read: { mean: 0, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(104),
     },
@@ -422,6 +430,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
         },
         bytes_read: { mean: 0, squared_diffs: 0 },
         rows_read: { mean: 0, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(105),
     },
@@ -470,6 +479,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
         },
         bytes_read: { mean: 62, squared_diffs: 0 },
         rows_read: { mean: 1, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(106),
     },
@@ -557,6 +567,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
         },
         bytes_read: { mean: 0, squared_diffs: 0 },
         rows_read: { mean: 0, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(107),
     },
@@ -668,6 +679,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
         },
         bytes_read: { mean: 0, squared_diffs: 0 },
         rows_read: { mean: 0, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(108),
     },
@@ -727,6 +739,7 @@ export const data: cockroach.server.serverpb.IStatementsResponse = {
         },
         bytes_read: { mean: 0, squared_diffs: 0 },
         rows_read: { mean: 0, squared_diffs: 0 },
+        rows_written: { mean: 2, squared_diffs: 1.999 },
       },
       id: Long.fromInt(109),
     },

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts
@@ -265,6 +265,12 @@ function addTransactionStats(
       countB,
     ),
     rows_read: aggregateNumericStats(a.rows_read, b.rows_read, countA, countB),
+    rows_written: aggregateNumericStats(
+      a.rows_written,
+      b.rows_written,
+      countA,
+      countB,
+    ),
     bytes_read: aggregateNumericStats(
       a.bytes_read,
       b.bytes_read,

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsBarCharts.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsTable/transactionsBarCharts.ts
@@ -39,6 +39,14 @@ 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",
@@ -105,6 +113,12 @@ export const transactionsBytesReadBarChart = barChartFactory(
   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
@@ -20,6 +20,7 @@ import {
   transactionsCountBarChart,
   transactionsRowsReadBarChart,
   transactionsBytesReadBarChart,
+  transactionsRowsWrittenBarChart,
   transactionsLatencyBarChart,
   transactionsContentionBarChart,
   transactionsMaxMemUsageBarChart,
@@ -93,6 +94,10 @@ export function makeTransactionsColumns(
     transactions,
     defaultBarChartOptions,
   );
+  const rowsWrittenBar = transactionsRowsWrittenBarChart(
+    transactions,
+    defaultBarChartOptions,
+  );
   const latencyBar = transactionsLatencyBarChart(
     transactions,
     latencyClasses.barChart,
@@ -159,6 +164,15 @@ 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),

diff --git a/pkg/ui/workspaces/cluster-ui/src/util/docs.ts b/pkg/ui/workspaces/cluster-ui/src/util/docs.ts
@@ -61,6 +61,9 @@ export const statementsTimeInterval = docsURL(
 export const readFromDisk = docsURL(
   "architecture/life-of-a-distributed-transaction.html#reads-from-the-storage-layer",
 );
+export const writtenToDisk = docsURL(
+  "architecture/life-of-a-distributed-transaction.html#write-operations",
+);
 export const planningExecutionTime = docsURL(
   "architecture/sql-layer#sql-parser-planner-executor",
 );