ui: add connected components for insights

This commit adds connected components for the workload and schema insights pages, for use
in the CC Console.

Fixes #87693.

Release note: None

pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/index.ts

@@ -11,3 +11,4 @@
 export * from "./indexUsageStatsRec";
 export * from "./schemaInsightsView";
 export * from "./emptySchemaInsightsTablePlaceholder";
+export * from "./schemaInsightsPageConnected";

pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/schemaInsightsPageConnected.tsx

@@ -0,0 +1,67 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import {
+  actions,
+  selectSchemaInsights,
+  selectSchemaInsightsDatabases,
+  selectSchemaInsightsError,
+  selectSchemaInsightsTypes,
+  selectFilters,
+  selectSortSetting,
+} from "src/store/schemaInsights";
+import { AppState } from "src/store";
+import {
+  SchemaInsightsView,
+  SchemaInsightsViewDispatchProps,
+  SchemaInsightsViewStateProps,
+} from "./schemaInsightsView";
+import { SchemaInsightEventFilters } from "../types";
+import { SortSetting } from "src/sortedtable";
+import { actions as localStorageActions } from "../../store/localStorage";
+
+const mapStateToProps = (
+  state: AppState,
+  _props: RouteComponentProps,
+): SchemaInsightsViewStateProps => ({
+  schemaInsights: selectSchemaInsights(state),
+  schemaInsightsDatabases: selectSchemaInsightsDatabases(state),
+  schemaInsightsTypes: selectSchemaInsightsTypes(state),
+  schemaInsightsError: selectSchemaInsightsError(state),
+  filters: selectFilters(state),
+  sortSetting: selectSortSetting(state),
+});
+
+const mapDispatchToProps = {
+  onFiltersChange: (filters: SchemaInsightEventFilters) =>
+    localStorageActions.update({
+      key: "filters/SchemaInsightsPage",
+      value: filters,
+    }),
+  onSortChange: (ss: SortSetting) =>
+    localStorageActions.update({
+      key: "sortSetting/SchemaInsightsPage",
+      value: ss,
+    }),
+  refreshSchemaInsights: actions.refresh,
+};
+
+export const SchemaInsightsPageConnected = withRouter(
+  connect<
+    SchemaInsightsViewStateProps,
+    SchemaInsightsViewDispatchProps,
+    RouteComponentProps
+  >(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(SchemaInsightsView),
+);

pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/schemaInsightsView.tsx

@@ -202,7 +202,7 @@ export const SchemaInsightsView: React.FC<SchemaInsightsViewProps> = ({
       </PageConfig>
       <div className={cx("table-area")}>
         <Loading
-          loading={schemaInsights == null}
+          loading={schemaInsights === null}
           page="schema insights"
           error={schemaInsightsError}
           renderError={() => InsightsError()}
@@ -227,7 +227,7 @@ export const SchemaInsightsView: React.FC<SchemaInsightsViewProps> = ({
                 renderNoResult={
                   <EmptySchemaInsightsTablePlaceholder
                     isEmptySearchResults={
-                      search?.length > 0 && filteredSchemaInsights?.length == 0
+                      search?.length > 0 && filteredSchemaInsights?.length === 0
                     }
                   />
                 }

pkg/ui/workspaces/cluster-ui/src/insights/utils.ts

@@ -90,9 +90,9 @@ export function getTransactionInsightEventDetailsFromState(
     insightEventDetailsResponse,
   );
   if (insightsForEventDetails.length > 0) {
-    delete insightEventDetailsResponse.insightName;
+    const { insightName, ...resp } = insightEventDetailsResponse;
     insightEventDetails = {
-      ...insightEventDetailsResponse,
+      ...resp,
       insights: insightsForEventDetails,
     };
   }
@@ -305,32 +305,36 @@ export function getAppsFromStatementInsights(
 
 export function populateStatementInsightsFromProblemAndCauses(
   statements: StatementInsightEvent[],
-): void {
+): StatementInsightEvent[] {
   if (!statements || statements?.length === 0) {
     return;
   }
-  statements.map(x => {
+  const stmts: StatementInsightEvent[] = [];
+  statements.forEach(statement => {
+    const stmt = Object.assign({}, statement);
     // TODO(ericharmeling,todd): Replace these strings when using the insights protos.
-    if (x.problem === "SlowExecution") {
-      if (x.causes?.length === 0) {
-        x.insights = [
+    if (statement.problem === "SlowExecution") {
+      if (statement.causes?.length === 0) {
+        stmt.insights = [
           getInsightFromProblem(
             InsightNameEnum.slowExecution,
             InsightExecEnum.STATEMENT,
           ),
         ];
       } else {
-        x.insights = x.causes?.map(x =>
+        stmt.insights = statement.causes?.map(x =>
           getInsightFromProblem(x, InsightExecEnum.STATEMENT),
         );
       }
-    } else if (x.problem === "FailedExecution") {
-      x.insights = [
+    } else if (statement.problem === "FailedExecution") {
+      stmt.insights = [
         getInsightFromProblem(
           InsightNameEnum.failedExecution,
           InsightExecEnum.STATEMENT,
         ),
       ];
     }
+    stmts.push(stmt);
   });
+  return stmts;
 }

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/index.ts

@@ -9,4 +9,6 @@
 // licenses/APL.txt.
 
 export * from "./transactionInsightDetails";
+export * from "./transactionInsightDetailsConnected";
 export * from "./statementInsightDetails";
+export * from "./statementInsightDetailsConnected";

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx

@@ -55,11 +55,13 @@ export class StatementInsightDetails extends React.Component<StatementInsightDet
   constructor(props: StatementInsightDetailsProps) {
     super(props);
   }
+
   prevPage = (): void => this.props.history.goBack();
 
   renderContent = (): React.ReactElement => {
-    const insightDetailsArr = [this.props.insightEventDetails];
-    populateStatementInsightsFromProblemAndCauses(insightDetailsArr);
+    const insightDetailsArr = populateStatementInsightsFromProblemAndCauses([
+      this.props.insightEventDetails,
+    ]);
     const insightDetails = insightDetailsArr[0];
     const isCockroachCloud = useContext(CockroachCloudContext);
     const insightsColumns = makeInsightsColumns(isCockroachCloud);
@@ -71,7 +73,6 @@ export class StatementInsightDetails extends React.Component<StatementInsightDet
         fingerprintID: insightDetails.statementFingerprintID,
         retries: insightDetails.retries,
       };
-
       insightDetails.insights.forEach(insight => {
         switch (insight.name) {
           case InsightNameEnum.highContention:

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetailsConnected.tsx

@@ -0,0 +1,38 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import {
+  StatementInsightDetails,
+  StatementInsightDetailsStateProps,
+} from "./statementInsightDetails";
+import { AppState } from "src/store";
+import {
+  selectStatementInsightDetails,
+  selectStatementInsightsError,
+} from "src/store/insights/statementInsights";
+
+const mapStateToProps = (
+  state: AppState,
+  props: RouteComponentProps,
+): StatementInsightDetailsStateProps => {
+  const insightStatements = selectStatementInsightDetails(state, props);
+  const insightError = selectStatementInsightsError(state);
+  return {
+    insightEventDetails: insightStatements,
+    insightError: insightError,
+  };
+};
+
+export const StatementInsightDetailsConnected = withRouter(
+  connect<StatementInsightDetailsStateProps, RouteComponentProps>(
+    mapStateToProps,
+  )(StatementInsightDetails),
+);

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetailsConnected.tsx

@@ -0,0 +1,49 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+import {
+  TransactionInsightDetails,
+  TransactionInsightDetailsStateProps,
+  TransactionInsightDetailsDispatchProps,
+} from "./transactionInsightDetails";
+import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import { AppState } from "src/store";
+import {
+  selectTransactionInsightDetails,
+  selectTransactionInsightDetailsError,
+  actions,
+} from "src/store/insightDetails/transactionInsightDetails";
+
+const mapStateToProps = (
+  state: AppState,
+  _props: RouteComponentProps,
+): TransactionInsightDetailsStateProps => {
+  const insightDetails = selectTransactionInsightDetails(state);
+  const insightError = selectTransactionInsightDetailsError(state);
+  return {
+    insightEventDetails: insightDetails,
+    insightError: insightError,
+  };
+};
+
+const mapDispatchToProps = {
+  refreshTransactionInsightDetails: actions.refresh,
+};
+
+export const TransactionInsightDetailsConnected = withRouter(
+  connect<
+    TransactionInsightDetailsStateProps,
+    TransactionInsightDetailsDispatchProps,
+    RouteComponentProps
+  >(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(TransactionInsightDetails),
+);

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/index.ts

@@ -11,3 +11,4 @@
 export * from "./transactionInsights";
 export * from "./statementInsights";
 export * from "./workloadInsightRootControl";
+export * from "./workloadInsightsPageConnected";

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx

@@ -202,7 +202,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
 
   const clearFilters = () =>
     onSubmitFilters({
-      app: defaultFilters.app,
+      app: "",
     });
 
   const apps = getAppsFromStatementInsights(
@@ -217,7 +217,8 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
     search,
   );
 
-  populateStatementInsightsFromProblemAndCauses(filteredStatements);
+  const statementInsights =
+    populateStatementInsightsFromProblemAndCauses(filteredStatements);
   const tableColumns = defaultColumns
     .filter(c => !c.alwaysShow)
     .map(
@@ -266,21 +267,21 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
                 <TableStatistics
                   pagination={pagination}
                   search={search}
-                  totalCount={filteredStatements?.length}
+                  totalCount={statementInsights?.length}
                   arrayItemName="statement insights"
                   activeFilters={countActiveFilters}
                   onClearFilters={clearFilters}
                 />
               </div>
               <StatementInsightsTable
-                data={filteredStatements}
+                data={statementInsights}
                 sortSetting={sortSetting}
                 visibleColumns={visibleColumns}
                 onChangeSortSetting={onChangeSortSetting}
                 renderNoResult={
                   <EmptyInsightsTablePlaceholder
                     isEmptySearchResults={
-                      search?.length > 0 && filteredStatements?.length === 0
+                      search?.length > 0 && statementInsights?.length === 0
                     }
                   />
                 }
@@ -290,7 +291,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
             <Pagination
               pageSize={pagination.pageSize}
               current={pagination.current}
-              total={filteredStatements?.length}
+              total={statementInsights?.length}
               onChange={onChangePage}
             />
           </div>

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsView.tsx

@@ -172,7 +172,7 @@ export const TransactionInsightsView: React.FC<TransactionInsightsViewProps> = (
 
   const clearFilters = () =>
     onSubmitFilters({
-      app: defaultFilters.app,
+      app: "",
     });
 
   const transactionInsights = getInsightsFromState(transactions);