diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx index 66025d122043..106dfaab1f48 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx @@ -57,7 +57,7 @@ import { import { ISortedTablePagination } from "../sortedtable"; import styles from "./statementsPage.module.scss"; import { EmptyStatementsPlaceholder } from "./emptyStatementsPlaceholder"; -import { cockroach, google } from "@cockroachlabs/crdb-protobuf-client"; +import { cockroach } from "@cockroachlabs/crdb-protobuf-client"; import { InlineAlert } from "@cockroachlabs/ui-components"; import sortableTableStyles from "src/sortedtable/sortedtable.module.scss"; import ColumnsSelector from "../columnsSelector/columnsSelector"; @@ -587,7 +587,6 @@ export class StatementsPage extends React.Component< statements, filters.app.split(","), totalWorkload, - nodeRegions, "statement", isTenant, hasViewActivityRedactedRole, diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.stories.tsx index 49bbed4ee494..602bed6f39d8 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.stories.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.stories.tsx @@ -30,7 +30,6 @@ storiesOf("StatementsSortedTable", module) statements, ["$ internal"], calculateTotalWorkload(statements), - { "1": "gcp-europe-west1", "2": "gcp-us-east1", "3": "gcp-us-west1" }, "statement", false, false, @@ -55,7 +54,6 @@ storiesOf("StatementsSortedTable", module) statements, ["$ internal"], calculateTotalWorkload(statements), - { "1": "gcp-europe-west1", "2": "gcp-us-east1", "3": "gcp-us-west1" }, "statement", false, true, diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx index 40a2b9a31fc2..df1d33fb07f3 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx @@ -43,7 +43,6 @@ import { cockroach } from "@cockroachlabs/crdb-protobuf-client"; import { StatementTableCell } from "./statementsTableContent"; import { statisticsTableTitles, - NodeNames, StatisticType, } from "../statsTableUtil/statsTableUtil"; @@ -53,11 +52,67 @@ import styles from "./statementsTable.module.scss"; import { StatementDiagnosticsReport } from "../api"; const cx = classNames.bind(styles); -function makeCommonColumns( +export interface AggregateStatistics { + aggregatedFingerprintID: string; + aggregatedFingerprintHexID: string; + // label is either shortStatement (StatementsPage) or nodeId (StatementDetails). + label: string; + // summary exists only for SELECT/INSERT/UPSERT/UPDATE statements, and is + // replaced with shortStatement otherwise. + summary: string; + aggregatedTs: number; + aggregationInterval: number; + implicitTxn: boolean; + fullScan: boolean; + database: string; + applicationName: string; + stats: StatementStatistics; + drawer?: boolean; + firstCellBordered?: boolean; + diagnosticsReports?: StatementDiagnosticsReport[]; + // totalWorkload is the sum of service latency of all statements listed on the table. + totalWorkload?: Long; + regionNodes?: string[]; +} + +export class StatementsSortedTable extends SortedTable {} + +export function shortStatement( + summary: StatementSummary, + original: string, +): string { + switch (summary.statement) { + case "update": + return "UPDATE " + summary.table; + case "insert": + return "INSERT INTO " + summary.table; + case "select": + return "SELECT FROM " + summary.table; + case "delete": + return "DELETE FROM " + summary.table; + case "create": + return "CREATE TABLE " + summary.table; + case "set": + return "SET " + summary.table; + default: + return original; + } +} + +export function makeStatementsColumns( statements: AggregateStatistics[], + selectedApps: string[], + // totalWorkload is the sum of service latency of all statements listed on the table. totalWorkload: number, - nodeRegions: { [nodeId: string]: string }, statType: StatisticType, + isTenant: boolean, + hasViewActivityRedactedRole: boolean, + search?: string, + activateDiagnosticsRef?: React.RefObject, + onSelectDiagnosticsReportDropdownOption?: ( + report: StatementDiagnosticsReport, + ) => void, + onStatementClick?: (statement: string) => void, ): ColumnDescriptor[] { const defaultBarChartOptions = { classes: { @@ -89,7 +144,19 @@ function makeCommonColumns( ); const retryBar = retryBarChart(statements, defaultBarChartOptions); - return [ + const columns: ColumnDescriptor[] = [ + { + name: "statements", + title: statisticsTableTitles.statements(statType), + className: cx("cl-table__col-query-text"), + cell: StatementTableCell.statements( + search, + selectedApps, + onStatementClick, + ), + sort: stmt => stmt.label, + alwaysShow: true, + }, { name: "executionCount", title: statisticsTableTitles.executionCount(statType), @@ -210,98 +277,6 @@ function makeCommonColumns( showByDefault: false, }, ]; -} - -export interface AggregateStatistics { - aggregatedFingerprintID: string; - aggregatedFingerprintHexID: string; - // label is either shortStatement (StatementsPage) or nodeId (StatementDetails). - label: string; - // summary exists only for SELECT/INSERT/UPSERT/UPDATE statements, and is - // replaced with shortStatement otherwise. - summary: string; - aggregatedTs: number; - aggregationInterval: number; - implicitTxn: boolean; - fullScan: boolean; - database: string; - applicationName: string; - stats: StatementStatistics; - drawer?: boolean; - firstCellBordered?: boolean; - diagnosticsReports?: StatementDiagnosticsReport[]; - // totalWorkload is the sum of service latency of all statements listed on the table. - totalWorkload?: Long; - regionNodes?: string[]; -} - -export class StatementsSortedTable extends SortedTable {} - -export function shortStatement( - summary: StatementSummary, - original: string, -): string { - switch (summary.statement) { - case "update": - return "UPDATE " + summary.table; - case "insert": - return "INSERT INTO " + summary.table; - case "select": - return "SELECT FROM " + summary.table; - case "delete": - return "DELETE FROM " + summary.table; - case "create": - return "CREATE TABLE " + summary.table; - case "set": - return "SET " + summary.table; - default: - return original; - } -} - -export function makeStatementFingerprintColumn( - statType: StatisticType, - selectedApps: string[], - search?: string, - onStatementClick?: (statement: string) => void, -): ColumnDescriptor { - return { - name: "statements", - title: statisticsTableTitles.statements(statType), - className: cx("cl-table__col-query-text"), - cell: StatementTableCell.statements(search, selectedApps, onStatementClick), - sort: stmt => stmt.label, - alwaysShow: true, - }; -} - -export function makeStatementsColumns( - statements: AggregateStatistics[], - selectedApps: string[], - // totalWorkload is the sum of service latency of all statements listed on the table. - totalWorkload: number, - nodeRegions: { [nodeId: string]: string }, - statType: StatisticType, - isTenant: boolean, - hasViewActivityRedactedRole: boolean, - search?: string, - activateDiagnosticsRef?: React.RefObject, - onSelectDiagnosticsReportDropdownOption?: ( - report: StatementDiagnosticsReport, - ) => void, - onStatementClick?: (statement: string) => void, -): ColumnDescriptor[] { - const columns: ColumnDescriptor[] = [ - makeStatementFingerprintColumn( - statType, - selectedApps, - search, - onStatementClick, - ), - ]; - columns.push( - ...makeCommonColumns(statements, totalWorkload, nodeRegions, statType), - ); if (activateDiagnosticsRef && !isTenant && !hasViewActivityRedactedRole) { const diagnosticsColumn: ColumnDescriptor = { @@ -327,25 +302,6 @@ export function makeStatementsColumns( return columns; } -export function makeNodesColumns( - statements: AggregateStatistics[], - nodeNames: NodeNames, - totalWorkload: number, - nodeRegions: { [nodeId: string]: string }, -): ColumnDescriptor[] { - const original: ColumnDescriptor[] = [ - { - name: "nodes", - title: null, - cell: StatementTableCell.nodeLink(nodeNames), - }, - ]; - - return original.concat( - makeCommonColumns(statements, totalWorkload, nodeRegions, "statement"), - ); -} - /** * For each statement, generate the list of regions and nodes it was * executed on. Each node is assigned to only one region and a region can diff --git a/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx b/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx index 7506166aab4f..a6f162dd529f 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx @@ -363,7 +363,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { ); }, - transactions: (statType: StatisticType) => { + transactions: () => { return ( { - let columnLabel = ""; let contentModifier = ""; let fingerprintModifier = ""; switch (statType) { case "transaction": contentModifier = contentModifiers.transactions; - columnLabel = contentModifiers.transactionCapital; break; case "statement": contentModifier = contentModifiers.statements; - columnLabel = contentModifiers.statementCapital; break; case "transactionDetails": - columnLabel = contentModifiers.statementCapital; contentModifier = contentModifiers.statements; fingerprintModifier = " for this " + contentModifiers.transactionFingerprint; @@ -809,7 +805,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { ); }, - diagnostics: (statType: StatisticType) => { + diagnostics: () => { return ( ); }, - statementsCount: (statType: StatisticType) => { + statementsCount: () => { return (