ui: fix link for index from insights

Previously, the link to index details on the drop index insights was using the URL format used by DB Console only. This commit updates to use the correct format when loading from CC Console. Fix #92944 Release note (bug fix): Fix link to index details on drop index insights on CC Console.
cockroachdb · Dec 2, 2022 · 1045cee · 1045cee
1 parent f7f24fb
commit 1045cee
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts
@@ -35,6 +35,7 @@ export type ClusterIndexUsageStatistic = {
   database_id: number;
   database_name: string;
   unused_threshold: string;
+  schema_name: string;
 };
 
 type CreateIndexRecommendationsResponse = {
@@ -74,6 +75,7 @@ function clusterIndexUsageStatsToSchemaInsight(
             indexID: row.index_id,
             indexName: row.index_name,
             lastUsed: result.reason,
+            schema: row.schema_name,
           },
         };
       }
@@ -136,6 +138,7 @@ const dropUnusedIndexQuery: SchemaInsightQuery<ClusterIndexUsageStatistic> = {
             t.name as table_name,
             t.parent_id as database_id,
             t.database_name,
+            t.schema_name,
             (SELECT value FROM crdb_internal.cluster_settings WHERE variable = 'sql.index_recommendation.drop_unused_duration') AS unused_threshold
           FROM "".crdb_internal.index_usage_statistics AS us
                  JOIN "".crdb_internal.table_indexes as ti ON us.index_id = ti.index_id AND us.table_id = ti.descriptor_id

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/schemaInsights.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/schemaInsights.fixture.ts
@@ -19,6 +19,7 @@ export const SchemaInsightsPropsFixture: SchemaInsightsViewProps = {
         table: "table_name",
         indexID: 1,
         indexName: "index_name",
+        schema: "public",
         lastUsed:
           "This index has not been used and can be removed for better write performance.",
       },
@@ -30,6 +31,7 @@ export const SchemaInsightsPropsFixture: SchemaInsightsViewProps = {
         table: "table_name2",
         indexID: 2,
         indexName: "index_name2",
+        schema: "public",
         lastUsed:
           "This index has not been used in over 9 days, 5 hours, and 3 minutes and can be removed for better write performance.",
       },

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/types.ts b/pkg/ui/workspaces/cluster-ui/src/insights/types.ts
@@ -340,6 +340,7 @@ export interface InsightRecommendation {
 
 export interface indexDetails {
   table: string;
+  schema: string;
   indexID: number;
   indexName: string;
   lastUsed?: string;

diff --git a/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.tsx
@@ -110,6 +110,7 @@ function descriptionCell(
   insightRec: InsightRecommendation,
   showQuery: boolean,
   disableStmtLink: boolean,
+  isCockroachCloud: boolean,
 ): React.ReactElement {
   const stmtLink =
     showQuery || isIndexRec(insightRec) ? (
@@ -125,6 +126,11 @@ function descriptionCell(
       {"."}
     </>
   );
+
+  const indexLink = isCockroachCloud
+    ? `databases/${insightRec.database}/${insightRec.indexDetails?.schema}/${insightRec.indexDetails?.table}/${insightRec.indexDetails?.indexName}`
+    : `database/${insightRec.database}/table/${insightRec.indexDetails?.table}/index/${insightRec.indexDetails?.indexName}`;
+
   switch (insightRec.type) {
     case "CreateIndex":
     case "ReplaceIndex":
@@ -143,10 +149,7 @@ function descriptionCell(
         <>
           <div className={cx("description-item")}>
             <span className={cx("label-bold")}>Index: </span>{" "}
-            <Link
-              to={`database/${insightRec.database}/table/${insightRec.indexDetails.table}/index/${insightRec.indexDetails.indexName}`}
-              className={cx("table-link")}
-            >
+            <Link to={indexLink} className={cx("table-link")}>
               {insightRec.indexDetails.indexName}
             </Link>
           </div>
@@ -312,7 +315,7 @@ const isIndexRec = (rec: InsightRecommendation) => {
 };
 
 export function makeInsightsColumns(
-  hideAction: boolean,
+  isCockroachCloud: boolean,
   showQuery?: boolean,
   disableStmtLink?: boolean,
 ): ColumnDescriptor<InsightRecommendation>[] {
@@ -327,13 +330,13 @@ export function makeInsightsColumns(
       name: "details",
       title: insightsTableTitles.details(),
       cell: (item: InsightRecommendation) =>
-        descriptionCell(item, showQuery, disableStmtLink),
+        descriptionCell(item, showQuery, disableStmtLink, isCockroachCloud),
       sort: (item: InsightRecommendation) => item.type,
     },
     {
       name: "action",
       title: insightsTableTitles.actions(),
-      cell: (item: InsightRecommendation) => actionCell(item, hideAction),
+      cell: (item: InsightRecommendation) => actionCell(item, isCockroachCloud),
     },
   ];
 }