Merge cockroachdb#86695 cockroachdb#87171

86695: sql: Update pgjdbc blocklist r=rafiss a=e-mbrown Closes cockroachdb#85882 Release justification: Non-production code changes Release note: None 87171: ui: add columns and column selector to statement insights r=j82w a=j82w Adds column selector to statement insights page and adds new contention, full scan, transaction id, transaction fingerprint id, and rows read/written. closes cockroachdb#87021 https://www.loom.com/share/d4d6f567cefe4928a62cfbe39e9d15e0 Release justification: Category 2: Bug fixes and low-risk updates to new functionality Release note (ui change): Adds column selector to statement insights page and adds new contention, full scan, transaction id, transaction fingerprint id, and rows read/written. Co-authored-by: e-mbrown <[email protected]> Co-authored-by: j82w <[email protected]>
adityamaru · Aug 31, 2022 · 121ead5 · 121ead5
3 parents 0602871 + 402a448 + c42be29
commit 121ead5
Show file tree

Hide file tree

Showing 9 changed files with 230 additions and 2,667 deletions.
diff --git a/pkg/cmd/roachtest/tests/blocklist_test.go b/pkg/cmd/roachtest/tests/blocklist_test.go
@@ -34,7 +34,7 @@ func TestBlocklists(t *testing.T) {
 
 	blocklists := map[string]blocklist{
 		"hibernate":    hibernateBlockList20_2,
-		"pgjdbc":       pgjdbcBlockList20_2,
+		"pgjdbc":       pgjdbcBlockList,
 		"psycopg":      psycopgBlockList20_2,
 		"django":       djangoBlocklist20_2,
 		"sqlAlchemy":   sqlAlchemyBlocklist20_2,

diff --git a/pkg/cmd/roachtest/tests/pgjdbc.go b/pkg/cmd/roachtest/tests/pgjdbc.go
@@ -148,15 +148,14 @@ func registerPgjdbc(r registry.Registry) {
 			t.Fatal(err)
 		}
 
-		blocklistName, expectedFailures, ignorelistName, ignorelist := pgjdbcBlocklists.getLists(version)
-		if expectedFailures == nil {
-			t.Fatalf("No pgjdbc blocklist defined for cockroach version %s", version)
-		}
-		status := fmt.Sprintf("Running cockroach version %s, using blocklist %s", version, blocklistName)
-		if ignorelist != nil {
-			status = fmt.Sprintf("Running cockroach version %s, using blocklist %s, using ignorelist %s",
-				version, blocklistName, ignorelistName)
-		}
+		const blocklistName = "pgjdbcBlocklist"
+		const ignorelistName = "pgjdbcIgnorelist"
+		expectedFailures := pgjdbcBlockList
+		ignorelist := pgjdbcIgnoreList
+
+		status := fmt.Sprintf("Running cockroach version %s, using blocklist %s, using ignorelist %s",
+			version, blocklistName, ignorelistName)
+
 		t.L().Printf("%s", status)
 
 		t.Status("running pgjdbc test suite")

diff --git a/pkg/cmd/roachtest/tests/pgjdbc_blocklist.go b/pkg/cmd/roachtest/tests/pgjdbc_blocklist.go
diff --git a/...s/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsights.fixture.ts b/...s/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsights.fixture.ts
@@ -12,6 +12,8 @@ import { StatementInsightsViewProps } from "./statementInsightsView";
 import moment from "moment";
 
 export const statementInsightsPropsFixture: StatementInsightsViewProps = {
+  onColumnsChange: x => {},
+  selectedColumnNames: [],
   statements: [
     {
       statementID: "f72f37ea-b3a0-451f-80b8-dfb27d0bc2a9",

diff --git a/...ces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsTable.tsx b/...ces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsTable.tsx
@@ -15,7 +15,7 @@ import {
   SortedTable,
   SortSetting,
 } from "src/sortedtable";
-import { DATE_FORMAT, Duration, limitText } from "src/util";
+import { Count, DATE_FORMAT, Duration, limitText } from "src/util";
 import { InsightExecEnum, StatementInsightEvent } from "src/insights";
 import { InsightCell, insightsTableTitles } from "../util";
 import { StatementInsights } from "../../../api";
@@ -32,6 +32,7 @@ interface StatementInsightsTable {
   onChangeSortSetting: (ss: SortSetting) => void;
   pagination: ISortedTablePagination;
   renderNoResult?: React.ReactNode;
+  visibleColumns: ColumnDescriptor<StatementInsightEvent>[];
 }
 
 export function makeStatementInsightsColumns(): ColumnDescriptor<StatementInsightEvent>[] {
@@ -46,12 +47,14 @@ export function makeStatementInsightsColumns(): ColumnDescriptor<StatementInsigh
         </Link>
       ),
       sort: (item: StatementInsightEvent) => item.statementID,
+      alwaysShow: true,
     },
     {
       name: "statementFingerprintID",
       title: insightsTableTitles.fingerprintID(execType),
       cell: (item: StatementInsightEvent) => item.statementFingerprintID,
       sort: (item: StatementInsightEvent) => item.statementFingerprintID,
+      showByDefault: true,
     },
     {
       name: "query",
@@ -62,6 +65,7 @@ export function makeStatementInsightsColumns(): ColumnDescriptor<StatementInsigh
         </Tooltip>
       ),
       sort: (item: StatementInsightEvent) => item.query,
+      showByDefault: true,
     },
     {
       name: "insights",
@@ -72,47 +76,97 @@ export function makeStatementInsightsColumns(): ColumnDescriptor<StatementInsigh
         item.insights
           ? item.insights.map(insight => insight.label).toString()
           : "",
+      showByDefault: true,
     },
     {
       name: "startTime",
       title: insightsTableTitles.startTime(execType),
       cell: (item: StatementInsightEvent) => item.startTime.format(DATE_FORMAT),
       sort: (item: StatementInsightEvent) => item.startTime.unix(),
+      showByDefault: true,
     },
     {
       name: "elapsedTime",
       title: insightsTableTitles.elapsedTime(execType),
       cell: (item: StatementInsightEvent) =>
         Duration(item.elapsedTimeMillis * 1e6),
       sort: (item: StatementInsightEvent) => item.elapsedTimeMillis,
+      showByDefault: true,
     },
     {
       name: "userName",
       title: insightsTableTitles.username(execType),
       cell: (item: StatementInsightEvent) => item.username,
       sort: (item: StatementInsightEvent) => item.username,
+      showByDefault: true,
     },
     {
       name: "applicationName",
       title: insightsTableTitles.applicationName(execType),
       cell: (item: StatementInsightEvent) => item.application,
       sort: (item: StatementInsightEvent) => item.application,
+      showByDefault: true,
+    },
+    {
+      name: "rowsProcessed",
+      title: insightsTableTitles.rowsProcessed(execType),
+      className: cx("statements-table__col-rows-read"),
+      cell: (item: StatementInsightEvent) =>
+        `${Count(item.rowsRead)} Reads / ${Count(item.rowsRead)} Writes`,
+      sort: (item: StatementInsightEvent) => item.rowsRead + item.rowsWritten,
+      showByDefault: true,
     },
     {
       name: "retries",
       title: insightsTableTitles.numRetries(execType),
       cell: (item: StatementInsightEvent) => item.retries,
       sort: (item: StatementInsightEvent) => item.retries,
+      showByDefault: false,
+    },
+    {
+      name: "contention",
+      title: insightsTableTitles.contention(execType),
+      cell: (item: StatementInsightEvent) =>
+        !item.timeSpentWaiting
+          ? "no samples"
+          : Duration(item.timeSpentWaiting.asMilliseconds() * 1e6),
+      sort: (item: StatementInsightEvent) =>
+        item.timeSpentWaiting?.asMilliseconds() ?? -1,
+      showByDefault: false,
+    },
+    {
+      name: "isFullScan",
+      title: insightsTableTitles.isFullScan(execType),
+      cell: (item: StatementInsightEvent) => String(item.isFullScan),
+      sort: (item: StatementInsightEvent) => String(item.isFullScan),
+      showByDefault: false,
+    },
+    {
+      name: "transactionID",
+      title: insightsTableTitles.executionID(InsightExecEnum.TRANSACTION),
+      cell: (item: StatementInsightEvent) => item.transactionID,
+      sort: (item: StatementInsightEvent) => item.transactionID,
+      showByDefault: false,
+    },
+    {
+      name: "transactionFingerprintID",
+      title: insightsTableTitles.fingerprintID(InsightExecEnum.TRANSACTION),
+      cell: (item: StatementInsightEvent) => item.transactionFingerprintID,
+      sort: (item: StatementInsightEvent) => item.transactionFingerprintID,
+      showByDefault: false,
     },
   ];
 }
 
 export const StatementInsightsTable: React.FC<
   StatementInsightsTable
 > = props => {
-  const columns = makeStatementInsightsColumns();
   return (
-    <SortedTable columns={columns} className="statements-table" {...props} />
+    <SortedTable
+      columns={props.visibleColumns}
+      className="statements-table"
+      {...props}
+    />
   );
 };
 

diff --git a/...aces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx b/...aces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx
@@ -12,6 +12,7 @@ import React, { useEffect, useState } from "react";
 import classNames from "classnames/bind";
 import { useHistory } from "react-router-dom";
 import {
+  ColumnDescriptor,
   ISortedTablePagination,
   SortSetting,
 } from "src/sortedtable/sortedtable";
@@ -34,15 +35,19 @@ import { StatementInsights } from "src/api/insightsApi";
 import {
   filterStatementInsights,
   getAppsFromStatementInsights,
+  makeStatementInsightsColumns,
   WorkloadInsightEventFilters,
   populateStatementInsightsFromProblems,
+  StatementInsightEvent,
 } from "src/insights";
 import { EmptyInsightsTablePlaceholder } from "../util";
 import { StatementInsightsTable } from "./statementInsightsTable";
 import { InsightsError } from "../../insightsErrorComponent";
 
 import styles from "src/statementsPage/statementsPage.module.scss";
 import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
+import ColumnsSelector from "../../../columnsSelector/columnsSelector";
+import { SelectOption } from "../../../multiSelectCheckbox/multiSelectCheckbox";
 
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
@@ -52,13 +57,15 @@ export type StatementInsightsViewStateProps = {
   statementsError: Error | null;
   filters: WorkloadInsightEventFilters;
   sortSetting: SortSetting;
+  selectedColumnNames: string[];
   dropDownSelect?: React.ReactElement;
 };
 
 export type StatementInsightsViewDispatchProps = {
   onFiltersChange: (filters: WorkloadInsightEventFilters) => void;
   onSortChange: (ss: SortSetting) => void;
   refreshStatementInsights: () => void;
+  onColumnsChange: (selectedColumns: string[]) => void;
 };
 
 export type StatementInsightsViewProps = StatementInsightsViewStateProps &
@@ -67,6 +74,21 @@ export type StatementInsightsViewProps = StatementInsightsViewStateProps &
 const INSIGHT_STMT_SEARCH_PARAM = "q";
 const INTERNAL_APP_NAME_PREFIX = "$ internal";
 
+function isSelected(
+  column: ColumnDescriptor<StatementInsightEvent>,
+  selectedColumns: string[],
+): boolean {
+  if (column.alwaysShow) {
+    return true;
+  }
+
+  if (selectedColumns === null || selectedColumns === undefined) {
+    return column.showByDefault;
+  }
+
+  return selectedColumns.includes(column.name);
+}
+
 export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
   props: StatementInsightsViewProps,
 ) => {
@@ -78,6 +100,8 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
     refreshStatementInsights,
     onFiltersChange,
     onSortChange,
+    onColumnsChange,
+    selectedColumnNames,
     dropDownSelect,
   } = props;
 
@@ -170,6 +194,12 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
     resetPagination();
   };
 
+  const defaultColumns = makeStatementInsightsColumns();
+
+  const visibleColumns = defaultColumns.filter(x =>
+    isSelected(x, selectedColumnNames),
+  );
+
   const clearFilters = () =>
     onSubmitFilters({
       app: defaultFilters.app,
@@ -188,6 +218,15 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
   );
 
   populateStatementInsightsFromProblems(filteredStatements);
+  const tableColumns = defaultColumns
+    .filter(c => !c.alwaysShow)
+    .map(
+      (c): SelectOption => ({
+        label: (c.title as React.ReactElement).props.children,
+        value: c.name,
+        isSelected: isSelected(c, selectedColumnNames),
+      }),
+    );
 
   return (
     <div className={cx("root")}>
@@ -220,6 +259,10 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
           <div>
             <section className={sortableTableCx("cl-table-container")}>
               <div>
+                <ColumnsSelector
+                  options={tableColumns}
+                  onSubmitColumns={onColumnsChange}
+                />
                 <TableStatistics
                   pagination={pagination}
                   search={search}
@@ -232,6 +275,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
               <StatementInsightsTable
                 data={filteredStatements}
                 sortSetting={sortSetting}
+                visibleColumns={visibleColumns}
                 onChangeSortSetting={onChangeSortSetting}
                 renderNoResult={
                   <EmptyInsightsTablePlaceholder