Merge #103890

103890: ui: refactor selectors usage for IndexDetails page r=koorosh a=koorosh Before, we had single selector that included everything needed for IndexDetails page that is not effective as far as it'll be recomputed all props with any small change. Current change reuses almost the same logic as before but breaks it down to be a part of `mapStateToProps` props that are more independent from each other. Release note: None Resolves: #96277 Co-authored-by: Andrii Vorobiov <[email protected]>
cockroachdb · May 27, 2023 · 8d5a01c · 8d5a01c
2 parents dfadb62 + 26280db
commit 8d5a01c
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 143 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetails.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetails.selectors.ts
diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsConnected.ts b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsConnected.ts
@@ -10,19 +10,120 @@
 
 import { AppState, uiConfigActions } from "../store";
 import { RouteComponentProps, withRouter } from "react-router-dom";
-import { selectIndexDetails } from "./indexDetails.selectors";
 import { Dispatch } from "redux";
-import { IndexDetailPageActions, IndexDetailsPage } from "./indexDetailsPage";
+import {
+  IndexDetailPageActions,
+  IndexDetailsPage,
+  IndexDetailsPageData,
+  RecommendationType as RecType,
+} from "./indexDetailsPage";
 import { connect } from "react-redux";
 import { actions as indexStatsActions } from "src/store/indexStats/indexStats.reducer";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
-import { actions as nodesActions } from "../store/nodes";
+import {
+  actions as nodesActions,
+  nodeRegionsByIDSelector,
+} from "../store/nodes";
 import { TimeScale } from "../timeScaleDropdown";
 import { actions as sqlStatsActions } from "../store/sqlStats";
 import { actions as analyticsActions } from "../store/analytics";
+import {
+  databaseNameAttr,
+  generateTableID,
+  getMatchParamByName,
+  indexNameAttr,
+  longToInt,
+  schemaNameAttr,
+  tableNameAttr,
+  TimestampToMoment,
+} from "../util";
+import { BreadcrumbItem } from "../breadcrumbs";
+import {
+  selectHasAdminRole,
+  selectHasViewActivityRedactedRole,
+  selectIsTenant,
+} from "../store/uiConfig";
+import { selectTimeScale } from "../store/utils/selectors";
+import RecommendationType = cockroach.sql.IndexRecommendation.RecommendationType;
 
-const mapStateToProps = (state: AppState, props: RouteComponentProps) => {
-  return selectIndexDetails(state, props);
+// Note: if the managed-service routes to the index detail or the previous
+// database pages change, the breadcrumbs displayed here need to be updated.
+function createManagedServiceBreadcrumbs(
+  database: string,
+  schema: string,
+  table: string,
+  index: string,
+): BreadcrumbItem[] {
+  return [
+    { link: "/databases", name: "Databases" },
+    {
+      link: `/databases/${database}`,
+      name: "Tables",
+    },
+    {
+      link: `/databases/${database}/${schema}/${table}`,
+      name: `Table: ${table}`,
+    },
+    {
+      link: `/databases/${database}/${schema}/${table}/${index}`,
+      name: `Index: ${index}`,
+    },
+  ];
+}
+
+const mapStateToProps = (
+  state: AppState,
+  props: RouteComponentProps,
+): IndexDetailsPageData => {
+  const databaseName = getMatchParamByName(props.match, databaseNameAttr);
+  const schemaName = getMatchParamByName(props.match, schemaNameAttr);
+  const tableName = getMatchParamByName(props.match, tableNameAttr);
+  const indexName = getMatchParamByName(props.match, indexNameAttr);
+
+  const stats =
+    state.adminUI?.indexStats.cachedData[
+      generateTableID(databaseName, tableName)
+    ];
+  const details = stats?.data?.statistics.find(
+    stat => stat.index_name === indexName, // index names must be unique for a table
+  );
+  const filteredIndexRecommendations =
+    stats?.data?.index_recommendations.filter(
+      indexRec => indexRec.index_id === details?.statistics.key.index_id,
+    ) || [];
+  const indexRecommendations = filteredIndexRecommendations.map(indexRec => ({
+    type: (RecommendationType[indexRec.type]?.toString() ||
+      "Unknown") as RecType,
+    reason: indexRec.reason,
+  }));
+
+  return {
+    breadcrumbItems: createManagedServiceBreadcrumbs(
+      databaseName,
+      schemaName,
+      tableName,
+      indexName,
+    ),
+    databaseName,
+    hasAdminRole: selectHasAdminRole(state),
+    hasViewActivityRedactedRole: selectHasViewActivityRedactedRole(state),
+    indexName,
+    isTenant: selectIsTenant(state),
+    nodeRegions: nodeRegionsByIDSelector(state),
+    tableName,
+    timeScale: selectTimeScale(state),
+    details: {
+      loading: !!stats?.inFlight,
+      loaded: !!stats?.valid,
+      createStatement: details?.create_statement || "",
+      tableID: details?.statistics.key.table_id.toString(),
+      indexID: details?.statistics.key.index_id.toString(),
+      totalReads: longToInt(details?.statistics?.stats?.total_read_count) || 0,
+      lastRead: TimestampToMoment(details?.statistics?.stats?.last_read),
+      lastReset: TimestampToMoment(stats?.data?.last_reset),
+      indexRecommendations,
+    },
+  };
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): IndexDetailPageActions => ({