ui: add checks for values

Fixes #99655
Fixes #99538
Fixes #99539

Add checks to usages that could cause
`Cannot read properties of undefined`.

Release note: None

pkg/ui/workspaces/cluster-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cockroachlabs/cluster-ui",
-  "version": "22.2.9",
+  "version": "22.2.10",
   "description": "Cluster UI is a library of large features shared between CockroachDB and CockroachCloud",
   "repository": {
     "type": "git",

pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts

@@ -95,6 +95,9 @@ function createIndexRecommendationsToSchemaInsight(
 
   txn_result.rows.forEach(row => {
     row.index_recommendations.forEach(rec => {
+      if (!rec.includes(" : ")) {
+        return;
+      }
       const recSplit = rec.split(" : ");
       const recType = recSplit[0];
       const recQuery = recSplit[1];

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

@@ -97,7 +97,7 @@ export function getHighlightedText(
     })
     .join("|");
   const parts = isOriginalText
-    ? text.split(new RegExp(`(${search})`, "gi"))
+    ? text?.split(new RegExp(`(${search})`, "gi"))
     : rebaseText(text, highlight).split(new RegExp(`(${search})`, "gi"));
   const highlightClass = hasDarkBkg ? "_text-bold-light" : "_text-bold";
   return parts.map((part, i) => {

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

@@ -102,11 +102,12 @@ export const MultiSelectCheckbox = (props: MultiSelectCheckboxProps) => {
     field: string,
     parent: any,
   ) => {
-    const selected = selectedOptions
-      .map(function (option: SelectOption) {
-        return option.label;
-      })
-      .toString();
+    const selected =
+      selectedOptions
+        ?.map(function (option: SelectOption) {
+          return option.label;
+        })
+        .toString() || "";
     parent.setState({
       filters: {
         ...parent.state.filters,

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx

@@ -36,7 +36,7 @@ export const selectSessionsData = createSelector(
 export const selectSessions = createSelector(
   (state: AppState) => state.adminUI?.sessions,
   (state: SessionsState) => {
-    if (!state.data) {
+    if (!state?.data) {
       return null;
     }
     return state.data.sessions.map(session => {
@@ -48,7 +48,7 @@ export const selectSessions = createSelector(
 export const selectAppName = createSelector(
   (state: AppState) => state.adminUI?.sessions,
   (state: SessionsState) => {
-    if (!state.data) {
+    if (!state?.data) {
       return null;
     }
     return state.data.internal_app_name_prefix;
@@ -64,7 +64,7 @@ export const selectColumns = createSelector(
   localStorageSelector,
   localStorage =>
     localStorage["showColumns/SessionsPage"]
-      ? localStorage["showColumns/SessionsPage"].split(",")
+      ? localStorage["showColumns/SessionsPage"]?.split(",")
       : null,
 );
 

pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/planDetails.tsx

@@ -167,6 +167,9 @@ function formatIdxRecommendations(
   for (let i = 0; i < idxRecs.length; i++) {
     const rec = idxRecs[i];
     let idxType: InsightType;
+    if (!rec?.includes(" : ")) {
+      continue;
+    }
     const t = rec.split(" : ")[0];
     switch (t) {
       case "creation":

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts

@@ -56,7 +56,7 @@ export const selectStatementsLastUpdated = createSelector(
 // selectApps returns the array of all apps with statement statistics present
 // in the data.
 export const selectApps = createSelector(sqlStatsSelector, sqlStatsState => {
-  if (!sqlStatsState.data || !sqlStatsState.valid) {
+  if (!sqlStatsState?.data || !sqlStatsState?.valid) {
     return [];
   }
 
@@ -90,7 +90,7 @@ export const selectApps = createSelector(sqlStatsSelector, sqlStatsState => {
 export const selectDatabases = createSelector(
   sqlStatsSelector,
   sqlStatsState => {
-    if (!sqlStatsState.data) {
+    if (!sqlStatsState?.data) {
       return [];
     }
 
@@ -111,7 +111,7 @@ export const selectDatabases = createSelector(
 export const selectTotalFingerprints = createSelector(
   sqlStatsSelector,
   state => {
-    if (!state.data) {
+    if (!state?.data) {
       return 0;
     }
     const aggregated = aggregateStatementStats(state.data.statements);
@@ -122,7 +122,7 @@ export const selectTotalFingerprints = createSelector(
 // selectLastReset returns a string displaying the last time the statement
 // statistics were reset.
 export const selectLastReset = createSelector(sqlStatsSelector, state => {
-  if (!state.data) {
+  if (!state?.data) {
     return "";
   }
 
@@ -153,7 +153,7 @@ export const selectStatements = createSelector(
     diagnosticsReportsPerStatement,
   ): AggregateStatistics[] => {
     // State is valid if we successfully fetched data, and the data has not yet been invalidated.
-    if (!state.data || !state.valid) {
+    if (!state?.data || !state?.valid) {
       return null;
     }
     let statements = flattenStatementStats(state.data.statements);
@@ -238,7 +238,7 @@ export const selectColumns = createSelector(
   // return array of columns if user have customized it or `null` otherwise
   localStorage =>
     localStorage["showColumns/StatementsPage"]
-      ? localStorage["showColumns/StatementsPage"].split(",")
+      ? localStorage["showColumns/StatementsPage"]?.split(",")
       : null,
 );
 

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

@@ -546,7 +546,7 @@ export class StatementsPage extends React.Component<
     // hiding columns that won't be displayed for tenants.
     const columns = makeStatementsColumns(
       statements,
-      filters.app.split(","),
+      filters.app?.split(","),
       totalWorkload,
       nodeRegions,
       "statement",

pkg/ui/workspaces/cluster-ui/src/store/insights/statementInsights/statementInsights.selectors.ts

@@ -38,6 +38,6 @@ export const selectColumns = createSelector(
   localStorageSelector,
   localStorage =>
     localStorage["showColumns/StatementInsightsPage"]
-      ? localStorage["showColumns/StatementInsightsPage"].split(",")
+      ? localStorage["showColumns/StatementInsightsPage"]?.split(",")
       : null,
 );

pkg/ui/workspaces/cluster-ui/src/store/jobs/jobs.selectors.ts

@@ -42,6 +42,6 @@ export const selectColumns = createSelector(
   // return array of columns if user have customized it or `null` otherwise
   localStorage =>
     localStorage["showColumns/JobsPage"]
-      ? localStorage["showColumns/JobsPage"].split(",")
+      ? localStorage["showColumns/JobsPage"]?.split(",")
       : null,
 );

pkg/ui/workspaces/cluster-ui/src/store/sessions/sessions.selectors.ts

@@ -20,7 +20,7 @@ export const selectSession = createSelector(
   (state: AppState) => state.adminUI?.sessions,
   (_state: AppState, props: RouteComponentProps) => props,
   (state: SessionsState, props: RouteComponentProps<any>) => {
-    if (!state.data) {
+    if (!state?.data) {
       return null;
     }
     const sessionID = getMatchParamByName(props.match, sessionAttr);

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.selectors.ts

@@ -30,7 +30,7 @@ export const selectTxnColumns = createSelector(
   // return array of columns if user have customized it or `null` otherwise
   localStorage =>
     localStorage["showColumns/TransactionPage"]
-      ? localStorage["showColumns/TransactionPage"].split(",")
+      ? localStorage["showColumns/TransactionPage"]?.split(",")
       : null,
 );
 

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

@@ -170,8 +170,8 @@ export const filterTransactions = (
       activeFilters: 0,
     };
   const timeValue = getTimeValueInSeconds(filters);
-  const regions = filters.regions.length > 0 ? filters.regions.split(",") : [];
-  const nodes = filters.nodes.length > 0 ? filters.nodes.split(",") : [];
+  const regions = filters.regions?.length > 0 ? filters.regions.split(",") : [];
+  const nodes = filters.nodes?.length > 0 ? filters.nodes.split(",") : [];
 
   const activeFilters = calculateActiveFilters(filters);
 

pkg/ui/workspaces/cluster-ui/src/util/format.ts

@@ -259,7 +259,7 @@ function add(a: string, b: string): string {
 // to an int64 (in string form).
 export function HexStringToInt64String(s: string): string {
   let dec = "0";
-  s.split("").forEach(function (chr: string) {
+  s?.split("").forEach(function (chr: string) {
     const n = parseInt(chr, 16);
     for (let t = 8; t; t >>= 1) {
       dec = add(dec, dec);

pkg/ui/workspaces/cluster-ui/src/util/formatNumber.ts

@@ -11,7 +11,7 @@
 import { isNumber } from "lodash";
 
 function numberToString(n: number) {
-  return n.toString();
+  return n?.toString() || "";
 }
 
 export function formatNumberForDisplay(

pkg/ui/workspaces/db-console/src/redux/indexUsageStats/indexUsageStatsSagas.ts

@@ -36,6 +36,9 @@ export const selectIndexStatsKeys = createSelector(
 );
 
 export const KeyToTableRequest = (key: string): TableIndexStatsRequest => {
+  if (!key?.includes("/")) {
+    return new TableIndexStatsRequest({ database: "", table: "" });
+  }
   const s = key.split("/");
   const database = s[0];
   const table = s[1];

pkg/ui/workspaces/db-console/src/selectors/activeExecutionsSelectors.ts

@@ -46,7 +46,7 @@ export const selectActiveStatement = createSelector(
 export const selectAppName = createSelector(
   (state: AdminUIState) => state.cachedData.sessions,
   (state?: CachedDataReducerState<SessionsResponseMessage>) => {
-    if (!state.data) {
+    if (!state?.data) {
       return null;
     }
     return state.data.internal_app_name_prefix;

pkg/ui/workspaces/db-console/src/util/highlightedText.tsx

@@ -37,7 +37,7 @@ export default function getHighlightedText(
     })
     .join("|");
   const parts = isOriginalText
-    ? text.split(new RegExp(`(${search})`, "gi"))
+    ? text?.split(new RegExp(`(${search})`, "gi"))
     : rebaseText(text, highlight).split(new RegExp(`(${search})`, "gi"));
   const highlightClass = hasDarkBkg ? "_text-bold-light" : "_text-bold";
   return parts.map((part, i) => {

pkg/ui/workspaces/db-console/src/views/sessions/sessionDetails.tsx

@@ -39,7 +39,7 @@ export const selectSession = createSelector(
     state: CachedDataReducerState<SessionsResponseMessage>,
     props: RouteComponentProps<any>,
   ) => {
-    if (!state.data) {
+    if (!state?.data) {
       return null;
     }
     const sessionID = getMatchParamByName(props.match, sessionAttr);

pkg/ui/workspaces/db-console/src/views/sessions/sessionsPage.tsx

@@ -48,7 +48,7 @@ export const selectSessions = createSelector(
     state: CachedDataReducerState<SessionsResponseMessage>,
     _: RouteComponentProps<any>,
   ) => {
-    if (!state.data) {
+    if (!state?.data) {
       return null;
     }
     return state.data.sessions.map(session => {
@@ -64,7 +64,7 @@ export const selectAppName = createSelector(
     state: CachedDataReducerState<SessionsResponseMessage>,
     _: RouteComponentProps<any>,
   ) => {
-    if (!state.data) {
+    if (!state?.data) {
       return null;
     }
     return state.data.internal_app_name_prefix;

pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx

@@ -111,7 +111,7 @@ export const selectStatements = createSelector(
     props: RouteComponentProps<any>,
     diagnosticsReportsPerStatement,
   ): AggregateStatistics[] => {
-    if (!state.data || !state.valid) {
+    if (!state?.data || !state?.valid) {
       return null;
     }
     let statements = flattenStatementStats(state.data.statements);
@@ -191,7 +191,7 @@ export const selectStatements = createSelector(
 export const selectApps = createSelector(
   (state: AdminUIState) => state.cachedData.statements,
   (state: CachedDataReducerState<StatementsResponseMessage>) => {
-    if (!state.data) {
+    if (!state?.data) {
       return [];
     }
 
@@ -227,7 +227,7 @@ export const selectApps = createSelector(
 export const selectDatabases = createSelector(
   (state: AdminUIState) => state.cachedData.statements,
   (state: CachedDataReducerState<StatementsResponseMessage>) => {
-    if (!state.data) {
+    if (!state?.data) {
       return [];
     }
     return Array.from(
@@ -247,7 +247,7 @@ export const selectDatabases = createSelector(
 export const selectTotalFingerprints = createSelector(
   (state: AdminUIState) => state.cachedData.statements,
   (state: CachedDataReducerState<StatementsResponseMessage>) => {
-    if (!state.data) {
+    if (!state?.data) {
       return 0;
     }
     const aggregated = aggregateStatementStats(state.data.statements);
@@ -260,7 +260,7 @@ export const selectTotalFingerprints = createSelector(
 export const selectLastReset = createSelector(
   (state: AdminUIState) => state.cachedData.statements,
   (state: CachedDataReducerState<StatementsResponseMessage>) => {
-    if (!state.data) {
+    if (!state?.data) {
       return "unknown";
     }
     return PrintTime(util.TimestampToMoment(state.data.last_reset));

pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx

@@ -65,7 +65,7 @@ export const selectData = createSelector(
 export const selectLastReset = createSelector(
   (state: AdminUIState) => state.cachedData.statements,
   (state: CachedDataReducerState<StatementsResponseMessage>) => {
-    if (!state.data) {
+    if (!state?.data) {
       return "unknown";
     }