Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: tidy some SQL Activity code #92007

Merged
merged 5 commits into from
Nov 17, 2022
Merged

ui: tidy some SQL Activity code #92007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
051ddb7
ui: remove unused function
matthewtodd Nov 15, 2022
33ff50d
ui: inline makeCommonColumns
matthewtodd Nov 15, 2022
ef3578a
ui: inline makeStatementFingerprintColumn
matthewtodd Nov 15, 2022
8fbf453
ui: remove unused nodeRegions parameter
matthewtodd Nov 15, 2022
8a9068e
ui: fix lint warnings.
matthewtodd Nov 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -587,7 +587,6 @@ export class StatementsPage extends React.Component<
statements,
filters.app.split(","),
totalWorkload,
nodeRegions,
"statement",
isTenant,
hasViewActivityRedactedRole,
Expand Down
2 changes: 0 additions & 2 deletions pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
186 changes: 71 additions & 115 deletions pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
import { StatementTableCell } from "./statementsTableContent";
import {
statisticsTableTitles,
NodeNames,
StatisticType,
} from "../statsTableUtil/statsTableUtil";

Expand All @@ -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<AggregateStatistics> {}

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<ActivateDiagnosticsModalRef>,
onSelectDiagnosticsReportDropdownOption?: (
report: StatementDiagnosticsReport,
) => void,
onStatementClick?: (statement: string) => void,
): ColumnDescriptor<AggregateStatistics>[] {
const defaultBarChartOptions = {
classes: {
Expand Down Expand Up @@ -89,7 +144,19 @@ function makeCommonColumns(
);
const retryBar = retryBarChart(statements, defaultBarChartOptions);

return [
const columns: ColumnDescriptor<AggregateStatistics>[] = [
{
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),
Expand Down Expand Up @@ -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<AggregateStatistics> {}

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<AggregateStatistics> {
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<ActivateDiagnosticsModalRef>,
onSelectDiagnosticsReportDropdownOption?: (
report: StatementDiagnosticsReport,
) => void,
onStatementClick?: (statement: string) => void,
): ColumnDescriptor<AggregateStatistics>[] {
const columns: ColumnDescriptor<AggregateStatistics>[] = [
makeStatementFingerprintColumn(
statType,
selectedApps,
search,
onStatementClick,
),
];
columns.push(
...makeCommonColumns(statements, totalWorkload, nodeRegions, statType),
);

if (activateDiagnosticsRef && !isTenant && !hasViewActivityRedactedRole) {
const diagnosticsColumn: ColumnDescriptor<AggregateStatistics> = {
Expand All @@ -327,25 +302,6 @@ export function makeStatementsColumns(
return columns;
}

export function makeNodesColumns(
statements: AggregateStatistics[],
nodeNames: NodeNames,
totalWorkload: number,
nodeRegions: { [nodeId: string]: string },
): ColumnDescriptor<AggregateStatistics>[] {
const original: ColumnDescriptor<AggregateStatistics>[] = [
{
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
Expand Down
10 changes: 3 additions & 7 deletions pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
</Tooltip>
);
},
transactions: (statType: StatisticType) => {
transactions: () => {
return (
<Tooltip
placement="bottom"
Expand Down Expand Up @@ -549,20 +549,16 @@ export const statisticsTableTitles: StatisticTableTitleType = {
);
},
time: (statType: StatisticType) => {
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;
Expand Down Expand Up @@ -809,7 +805,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
</Tooltip>
);
},
diagnostics: (statType: StatisticType) => {
diagnostics: () => {
return (
<Tooltip
placement="bottom"
Expand All @@ -833,7 +829,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
</Tooltip>
);
},
statementsCount: (statType: StatisticType) => {
statementsCount: () => {
return (
<Tooltip
placement="bottom"
Expand Down
1 change: 0 additions & 1 deletion pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,6 @@ export class TransactionDetails extends React.Component<
aggregatedStatements,
[],
calculateTotalWorkload(aggregatedStatements),
nodeRegions,
"transactionDetails",
isTenant,
hasViewActivityRedactedRole,
Expand Down