Merge pull request #92921 from maryliag/backport22.2-90070

release-22.2: ui: add apply recommendations to table details

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React from "react";
+import React, { useContext } from "react";
 import { Col, Row, Tabs, Tooltip } from "antd";
 import "antd/lib/col/style";
 import "antd/lib/row/style";
@@ -50,6 +50,9 @@ import { CircleFilled } from "../icon";
 import { performanceTuningRecipes } from "src/util/docs";
 import LoadingError from "../sqlActivity/errorComponent";
 import { Loading } from "../loading";
+import { CockroachCloudContext } from "../contexts";
+import IdxRecAction from "../insights/indexActionBtn";
+import { RecommendationType } from "../indexDetailsPage";
 
 const cx = classNames.bind(styles);
 const booleanSettingCx = classnames.bind(booleanSettingStyles);
@@ -138,7 +141,7 @@ interface IndexStat {
 }
 
 interface IndexRecommendation {
-  type: string;
+  type: RecommendationType;
   reason: string;
 }
 
@@ -344,18 +347,15 @@ export class DatabaseTablePage extends React.Component<
         </div>
       );
     }
-    return indexStat.indexRecommendations.map(recommendation => {
+    return indexStat.indexRecommendations.map((recommendation, key) => {
       let text: string;
       switch (recommendation.type) {
         case "DROP_UNUSED":
           text = "Drop unused index";
       }
-      // TODO(thomas): using recommendation.type as the key seems not good.
-      //  - if it is possible for an index to have multiple recommendations of the same type
-      //  this could cause issues.
       return (
         <Tooltip
-          key={recommendation.type}
+          key={key}
           placement="bottom"
           title={
             <div className={cx("index-recommendations-text__tooltip-anchor")}>
@@ -375,6 +375,31 @@ export class DatabaseTablePage extends React.Component<
     });
   };
 
+  private renderActionCell = (indexStat: IndexStat): React.ReactNode => {
+    const isCockroachCloud = useContext(CockroachCloudContext);
+    if (isCockroachCloud || indexStat.indexRecommendations.length === 0) {
+      return <></>;
+    }
+
+    const query = indexStat.indexRecommendations.map(recommendation => {
+      switch (recommendation.type) {
+        case "DROP_UNUSED":
+          return `DROP INDEX ${this.props.name}@${indexStat.indexName};`;
+      }
+    });
+    if (query.length === 0) {
+      return <></>;
+    }
+
+    return (
+      <IdxRecAction
+        actionQuery={query.join(" ")}
+        actionType={"DropIndex"}
+        database={this.props.databaseName}
+      />
+    );
+  };
+
   private indexStatsColumns: ColumnDescriptor<IndexStat>[] = [
     {
       name: "indexes",
@@ -420,6 +445,11 @@ export class DatabaseTablePage extends React.Component<
       cell: this.renderIndexRecommendations,
       sort: indexStat => indexStat.indexRecommendations.length,
     },
+    {
+      name: "action",
+      title: "",
+      cell: this.renderActionCell,
+    },
   ];
 
   private grantsColumns: ColumnDescriptor<Grant>[] = [

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetails.selectors.ts

@@ -25,6 +25,7 @@ import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { IndexDetailsPageData } from "./indexDetailsPage";
 import { selectIsTenant } from "../store/uiConfig";
 import { BreadcrumbItem } from "../breadcrumbs";
+import { RecommendationType as RecType } from "./indexDetailsPage";
 const { RecommendationType } = cockroach.sql.IndexRecommendation;
 
 export const selectIndexDetails = createSelector(
@@ -48,8 +49,13 @@ export const selectIndexDetails = createSelector(
         indexRec => indexRec.index_id === details.statistics.key.index_id,
       ) || [];
     const indexRecommendations = filteredIndexRecommendations.map(indexRec => {
+      let type: RecType = "Unknown";
+      switch (RecommendationType[indexRec.type].toString()) {
+        case "DROP_UNUSED":
+          type = "DROP_UNUSED";
+      }
       return {
-        type: RecommendationType[indexRec.type].toString(),
+        type: type,
         reason: indexRec.reason,
       };
     });

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx

@@ -70,8 +70,10 @@ interface IndexDetails {
   indexRecommendations: IndexRecommendation[];
 }
 
+export type RecommendationType = "DROP_UNUSED" | "Unknown";
+
 interface IndexRecommendation {
-  type: string;
+  type: RecommendationType;
   reason: string;
 }
 
@@ -141,20 +143,14 @@ export class IndexDetailsPage extends React.Component<
         </tr>
       );
     }
-    return indexRecommendations.map(recommendation => {
+    return indexRecommendations.map((recommendation, key) => {
       let recommendationType: string;
       switch (recommendation.type) {
         case "DROP_UNUSED":
           recommendationType = "Drop unused index";
       }
-      // TODO(thomas): using recommendation.type as the key seems not good.
-      //  - if it is possible for an index to have multiple recommendations of the same type
-      //  this could cause issues.
       return (
-        <tr
-          key={recommendationType}
-          className={cx("index-recommendations-rows")}
-        >
+        <tr key={key} className={cx("index-recommendations-rows")}>
           <td
             className={cx(
               "index-recommendations-rows__header",

pkg/ui/workspaces/db-console/src/views/databases/databaseTablePage/redux.ts

@@ -11,7 +11,11 @@
 import { RouteComponentProps } from "react-router";
 import { createSelector } from "reselect";
 import _ from "lodash";
-import { DatabaseTablePageData, util } from "@cockroachlabs/cluster-ui";
+import {
+  DatabaseTablePageData,
+  util,
+  RecommendationType as RecType,
+} from "@cockroachlabs/cluster-ui";
 
 import { cockroach } from "src/js/protos";
 import {
@@ -95,8 +99,13 @@ export const mapStateToProps = createSelector(
           ) || [];
         const indexRecommendations = filteredIndexRecommendations.map(
           indexRec => {
+            let type: RecType = "Unknown";
+            switch (RecommendationType[indexRec.type].toString()) {
+              case "DROP_UNUSED":
+                type = "DROP_UNUSED";
+            }
             return {
-              type: RecommendationType[indexRec.type].toString(),
+              type: type,
               reason: indexRec.reason,
             };
           },

pkg/ui/workspaces/db-console/src/views/databases/indexDetailsPage/redux.ts

@@ -9,7 +9,11 @@
 // licenses/APL.txt.
 
 import { createSelector } from "reselect";
-import { IndexDetailsPageData, util } from "@cockroachlabs/cluster-ui";
+import {
+  IndexDetailsPageData,
+  util,
+  RecommendationType as RecType,
+} from "@cockroachlabs/cluster-ui";
 import { AdminUIState } from "src/redux/state";
 import { RouteComponentProps } from "react-router";
 import { getMatchParamByName } from "src/util/query";
@@ -47,8 +51,14 @@ export const mapStateToProps = createSelector(
         indexRec => indexRec.index_id === details.statistics.key.index_id,
       ) || [];
     const indexRecommendations = filteredIndexRecommendations.map(indexRec => {
+      let type: RecType = "Unknown";
+      switch (RecommendationType[indexRec.type].toString()) {
+        case "DROP_UNUSED":
+          type = "DROP_UNUSED";
+      }
+
       return {
-        type: RecommendationType[indexRec.type].toString(),
+        type: type,
         reason: indexRec.reason,
       };
     });