Merge cockroachdb#98189

98189: ui: add check for adminUI r=maryliag a=maryliag If is the first time the user opens the console, the `adminUI` might not yet be created, so we need to add a check to all its usages so the page doesn't crash. Epic: None Release note: None Co-authored-by: maryliag <[email protected]>
jeffswenson · Mar 8, 2023 · 1b162d1 · 1b162d1
2 parents 0b02d6f + bb340bc
commit 1b162d1
Show file tree

Hide file tree

Showing 15 changed files with 28 additions and 28 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
@@ -43,7 +43,7 @@ export const selectIndexDetails = createSelector(
     getMatchParamByName(props.match, tableNameAttr),
   (_state: AppState, props: RouteComponentProps): string =>
     getMatchParamByName(props.match, indexNameAttr),
-  (state: AppState) => state.adminUI.indexStats.cachedData,
+  (state: AppState) => state.adminUI?.indexStats.cachedData,
   (state: AppState) => selectIsTenant(state),
   (state: AppState) => selectHasViewActivityRedactedRole(state),
   (state: AppState) => nodeRegionsByIDSelector(state),

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/workloadInsightsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/workloadInsightsPageConnected.tsx
@@ -72,8 +72,8 @@ const statementMapStateToProps = (
   state: AppState,
   _props: RouteComponentProps,
 ): StatementInsightsViewStateProps => ({
-  isDataValid: state.adminUI.stmtInsights?.valid,
-  lastUpdated: state.adminUI.stmtInsights.lastUpdated,
+  isDataValid: state.adminUI?.stmtInsights?.valid,
+  lastUpdated: state.adminUI?.stmtInsights.lastUpdated,
   statements: selectStmtInsights(state),
   statementsError: selectStmtInsightsError(state),
   insightTypes: selectInsightTypes(),

diff --git a/pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts
@@ -27,13 +27,13 @@ import {
 // pages that are specific to cluster-ui.
 // They should NOT be exported with the cluster-ui package.
 
-const selectSessions = (state: AppState) => state.adminUI.sessions?.data;
+const selectSessions = (state: AppState) => state.adminUI?.sessions?.data;
 
 const selectClusterLocks = (state: AppState) =>
-  state.adminUI.clusterLocks?.data?.results;
+  state.adminUI?.clusterLocks?.data?.results;
 
 export const selectClusterLocksMaxApiSizeReached = (state: AppState) =>
-  !!state.adminUI.clusterLocks?.data?.maxSizeReached;
+  !!state.adminUI?.clusterLocks?.data?.maxSizeReached;
 
 export const selectRecentExecutions = createSelector(
   selectSessions,
@@ -94,7 +94,7 @@ export const selectContentionDetailsForStatement = createSelector(
 );
 
 export const selectAppName = createSelector(
-  (state: AppState) => state.adminUI.sessions,
+  (state: AppState) => state.adminUI?.sessions,
   response => {
     if (!response.data) return null;
     return response.data.internal_app_name_prefix;

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetailsConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetailsConnected.tsx
@@ -33,7 +33,7 @@ export const SessionDetailsPageConnected = withRouter(
         ? {}
         : nodeDisplayNameByIDSelector(state),
       session: selectSession(state, props),
-      sessionError: state.adminUI.sessions.lastError,
+      sessionError: state.adminUI?.sessions.lastError,
       uiConfig: selectSessionDetailsUiConfig(state),
       isTenant: selectIsTenant(state),
     }),

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx
@@ -34,7 +34,7 @@ export const selectSessionsData = createSelector(
 );
 
 export const selectSessions = createSelector(
-  (state: AppState) => state.adminUI.sessions,
+  (state: AppState) => state.adminUI?.sessions,
   (state: SessionsState) => {
     if (!state.data) {
       return null;
@@ -46,7 +46,7 @@ export const selectSessions = createSelector(
 );
 
 export const selectAppName = createSelector(
-  (state: AppState) => state.adminUI.sessions,
+  (state: AppState) => state.adminUI?.sessions,
   (state: SessionsState) => {
     if (!state.data) {
       return null;
@@ -56,7 +56,7 @@ export const selectAppName = createSelector(
 );
 
 export const selectSortSetting = createSelector(
-  (state: AppState) => state.adminUI.localStorage,
+  (state: AppState) => state.adminUI?.localStorage,
   localStorage => localStorage["sortSetting/SessionsPage"],
 );
 
@@ -78,7 +78,7 @@ export const SessionsPageConnected = withRouter(
     (state: AppState, props: RouteComponentProps) => ({
       sessions: selectSessions(state),
       internalAppNamePrefix: selectAppName(state),
-      sessionsError: state.adminUI.sessions.lastError,
+      sessionsError: state.adminUI?.sessions.lastError,
       sortSetting: selectSortSetting(state),
       columns: selectColumns(state),
       filters: selectFilters(state),

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.selectors.ts
@@ -33,7 +33,7 @@ export const selectStatementDetails = createSelector(
   (_state: AppState, props: RouteComponentProps): string =>
     queryByName(props.location, appNamesAttr),
   (state: AppState): TimeScale => selectTimeScale(state),
-  (state: AppState) => state.adminUI.sqlDetailsStats.cachedData,
+  (state: AppState) => state.adminUI?.sqlDetailsStats.cachedData,
   (
     fingerprintID,
     appNames,
@@ -75,6 +75,6 @@ export const selectStatementDetails = createSelector(
 );
 
 export const selectStatementDetailsUiConfig = createSelector(
-  (state: AppState) => state.adminUI.uiConfig.pages.statementDetails,
+  (state: AppState) => state.adminUI?.uiConfig.pages.statementDetails,
   statementDetailsUiConfig => statementDetailsUiConfig,
 );
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/recentStatementsPage.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/statementsPage/recentStatementsPage.selectors.ts
@@ -52,7 +52,7 @@ export const mapStateToRecentStatementsPageProps = (
   state: AppState,
 ): RecentStatementsViewStateProps => ({
   statements: selectRecentStatements(state),
-  sessionsError: state.adminUI.sessions.lastError,
+  sessionsError: state.adminUI?.sessions.lastError,
   selectedColumns: selectColumns(state),
   sortSetting: selectSortSetting(state),
   filters: selectFilters(state),

diff --git a/...src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.selectors.ts b/...src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.selectors.ts
@@ -16,7 +16,7 @@ import { TxnInsightEvent } from "src/insights";
 import { selectStmtInsights } from "src/store/insights/statementInsights";
 
 const selectTxnContentionInsightsDetails = createSelector(
-  (state: AppState) => state.adminUI.txnInsightDetails.cachedData,
+  (state: AppState) => state.adminUI?.txnInsightDetails.cachedData,
   selectID,
   (cachedTxnInsightDetails, execId) => {
     return cachedTxnInsightDetails[execId];

diff --git a/...workspaces/cluster-ui/src/store/insights/statementInsights/statementInsights.selectors.ts b/...workspaces/cluster-ui/src/store/insights/statementInsights/statementInsights.selectors.ts
@@ -20,13 +20,13 @@ import { selectStatementFingerprintID, selectID } from "src/selectors/common";
 import { InsightEnumToLabel, StmtInsightEvent } from "src/insights";
 
 export const selectStmtInsights = (state: AppState): StmtInsightEvent[] =>
-  state.adminUI.stmtInsights?.data?.results;
+  state.adminUI?.stmtInsights?.data?.results;
 
 export const selectStmtInsightsError = (state: AppState): Error | null =>
-  state.adminUI.stmtInsights?.lastError;
+  state.adminUI?.stmtInsights?.lastError;
 
 export const selectStmtInsightsMaxApiReached = (state: AppState): boolean =>
-  !!state.adminUI.stmtInsights?.data?.maxSizeReached;
+  !!state.adminUI?.stmtInsights?.data?.maxSizeReached;
 
 export const selectStmtInsightDetails = createSelector(
   selectStmtInsights,
@@ -53,8 +53,8 @@ export const selectColumns = createSelector(
 // Show the data as 'Loading' when the request is in flight AND the
 // data is invalid or null.
 export const selectStmtInsightsLoading = (state: AppState): boolean =>
-  state.adminUI.stmtInsights?.inFlight &&
-  (!state.adminUI.stmtInsights?.valid || !state.adminUI.stmtInsights?.data);
+  state.adminUI?.stmtInsights?.inFlight &&
+  (!state.adminUI?.stmtInsights?.valid || !state.adminUI?.stmtInsights?.data);
 
 export const selectInsightsByFingerprint = createSelector(
   selectStmtInsights,

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/liveness/liveness.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/store/liveness/liveness.selectors.ts
@@ -11,7 +11,7 @@
 import { createSelector } from "@reduxjs/toolkit";
 import { AppState } from "../reducers";
 
-const livenessesSelector = (state: AppState) => state.adminUI.liveness.data;
+const livenessesSelector = (state: AppState) => state.adminUI?.liveness.data;
 
 export const livenessStatusByNodeIDSelector = createSelector(
   livenessesSelector,

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/nodes/nodes.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/store/nodes/nodes.selectors.ts
@@ -18,7 +18,7 @@ import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 type ILocality = cockroach.roachpb.ILocality;
 
 export const nodeStatusesSelector = (state: AppState) =>
-  state.adminUI.nodes.data || [];
+  state.adminUI?.nodes.data || [];
 
 export const nodesSelector = createSelector(
   nodeStatusesSelector,

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/sessions/sessions.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/store/sessions/sessions.selectors.ts
@@ -17,7 +17,7 @@ import { getMatchParamByName } from "src/util/query";
 import { byteArrayToUuid } from "src/sessions/sessionsTable";
 
 export const selectSession = createSelector(
-  (state: AppState) => state.adminUI.sessions,
+  (state: AppState) => state.adminUI?.sessions,
   (_state: AppState, props: RouteComponentProps) => props,
   (state: SessionsState, props: RouteComponentProps<any>) => {
     if (!state.data) {
@@ -33,6 +33,6 @@ export const selectSession = createSelector(
 );
 
 export const selectSessionDetailsUiConfig = createSelector(
-  (state: AppState) => state.adminUI.uiConfig.pages.sessionDetails,
+  (state: AppState) => state.adminUI?.uiConfig.pages.sessionDetails,
   statementDetailsUiConfig => statementDetailsUiConfig,
 );
diff --git a/pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.selector.ts b/pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.selector.ts
@@ -12,7 +12,7 @@ import { createSelector } from "reselect";
 import { AppState } from "../reducers";
 
 export const selectUIConfig = createSelector(
-  (state: AppState) => state.adminUI.uiConfig,
+  (state: AppState) => state.adminUI?.uiConfig,
   uiConfig => uiConfig,
 );
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/utils/selectors.ts b/pkg/ui/workspaces/cluster-ui/src/store/utils/selectors.ts
@@ -18,7 +18,7 @@ export const adminUISelector = createSelector(
 
 export const localStorageSelector = createSelector(
   adminUISelector,
-  adminUiState => adminUiState.localStorage,
+  adminUiState => adminUiState?.localStorage,
 );
 
 export const selectTimeScale = createSelector(

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/recentTransactionsPage.selectors.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/recentTransactionsPage.selectors.tsx
@@ -52,7 +52,7 @@ export const mapStateToRecentTransactionsPageProps = (
   state: AppState,
 ): RecentTransactionsViewStateProps => ({
   transactions: selectRecentTransactions(state),
-  sessionsError: state.adminUI.sessions.lastError,
+  sessionsError: state.adminUI?.sessions.lastError,
   selectedColumns: selectColumns(state),
   sortSetting: selectSortSetting(state),
   filters: selectFilters(state),