From dfd1872638d9f5ca8d77d3cb2d78705830fd74fd Mon Sep 17 00:00:00 2001 From: Marylia Gutierrez Date: Mon, 27 Jun 2022 14:13:41 -0400 Subject: [PATCH] ui: combine read and written column into processed Previously, Statement and Transaction pages had one columnd 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. 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. --- .../src/barCharts/barCharts.stories.tsx | 9 --- .../cluster-ui/src/barCharts/barCharts.tsx | 31 +-------- .../src/statementsTable/statementsTable.tsx | 29 +++----- .../src/statsTableUtil/statsTableUtil.tsx | 68 +++---------------- .../transactionsBarCharts.ts | 28 -------- .../transactionsTable/transactionsTable.tsx | 35 ++++------ 6 files changed, 32 insertions(+), 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 index addc66c15ca2..bd91b7b1ed51 100644 --- 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 index 1fd544e1b2d0..4d73cdac519e 100644 --- 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 index cd5171f072ad..90ccb3f23b95 100644 --- 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 index 192d700c541e..a756925756c7 100644 --- 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 = { ); }, - rowsRead: (statType: StatisticType) => { + rowsProcessed: (statType: StatisticType) => { let contentModifier = ""; let fingerprintModifier = ""; switch (statType) { @@ -409,24 +408,20 @@ export const statisticsTableTitles: StatisticTableTitleType = { content={ <>

- {"Aggregation of all rows "} + {"Average (mean) number of rows "} - read from disk + read - {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `} - - time interval + {" and "} + + written - .  -

-

- 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.`}

} > - {getLabel("rowsRead")} + {getLabel("rowsProcessed")} ); }, @@ -475,51 +470,6 @@ export const statisticsTableTitles: StatisticTableTitleType = { ); }, - 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 ( - -

- {"Aggregation of all rows "} - - written to disk - - {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `} - - time interval - - .  -

-

- The gray bar indicates the mean number of rows written to disk. - The blue bar indicates one standard deviation from the mean. -

- - } - > - {getLabel("rowsWritten")} - - ); - }, 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 index 0b153fb0943a..6dbf701f2370 100644 --- 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 index 629220c73276..d60a743ee208 100644 --- 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),