Merge pull request #100021 from cockroachdb/blathers/backport-release…

…-23.1-99962

release-23.1: ui: add checks for values

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/api/txnInsightsApi.ts

@@ -384,7 +384,7 @@ function formatTxnInsightsRow(row: TxnInsightsResponseRow): TxnInsightEvent {
     transactionExecutionID: row.txn_id,
     transactionFingerprintID: row.txn_fingerprint_id,
     implicitTxn: row.implicit_txn,
-    query: row.query.split(" ; ").join("\n"),
+    query: row.query?.split(" ; ").join("\n") || "",
     startTime,
     endTime,
     elapsedTimeMillis: endTime.diff(startTime, "milliseconds"),

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

@@ -378,9 +378,9 @@ export class DatabaseDetailsPage extends React.Component<
     const { search, tables, filters, nodeRegions } = this.props;
 
     const regionsSelected =
-      filters.regions.length > 0 ? filters.regions.split(",") : [];
+      filters.regions?.length > 0 ? filters.regions.split(",") : [];
     const nodesSelected =
-      filters.nodes.length > 0 ? filters.nodes.split(",") : [];
+      filters.nodes?.length > 0 ? filters.nodes.split(",") : [];
 
     return tables
       .filter(table => (search ? filterBySearchQuery(table, search) : true))
@@ -392,13 +392,11 @@ export class DatabaseDetailsPage extends React.Component<
         let foundNode = nodesSelected.length == 0;
 
         table.details.nodes?.forEach(node => {
-          if (
-            foundRegion ||
-            regionsSelected.includes(nodeRegions[node.toString()])
-          ) {
+          const n = node?.toString() || "";
+          if (foundRegion || regionsSelected.includes(nodeRegions[n])) {
             foundRegion = true;
           }
-          if (foundNode || nodesSelected.includes("n" + node.toString())) {
+          if (foundNode || nodesSelected.includes("n" + n)) {
             foundNode = true;
           }
           if (foundNode && foundRegion) return true;
@@ -738,7 +736,7 @@ export class DatabaseDetailsPage extends React.Component<
             hideAppNames={true}
             regions={regions}
             hideTimeLabel={true}
-            nodes={nodes.map(n => "n" + n.toString())}
+            nodes={nodes.map(n => "n" + n?.toString())}
             activeFilters={activeFilters}
             filters={defaultFilters}
             onSubmitFilters={this.onSubmitFilters}

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

@@ -424,9 +424,9 @@ export class DatabasesPage extends React.Component<
 
     // The regions and nodes selected from the filter dropdown.
     const regionsSelected =
-      filters.regions.length > 0 ? filters.regions.split(",") : [];
+      filters.regions?.length > 0 ? filters.regions.split(",") : [];
     const nodesSelected =
-      filters.nodes.length > 0 ? filters.nodes.split(",") : [];
+      filters.nodes?.length > 0 ? filters.nodes.split(",") : [];
 
     return databases
       .filter(db => (search ? filterBySearchQuery(db, search) : true))
@@ -438,13 +438,11 @@ export class DatabasesPage extends React.Component<
         let foundNode = nodesSelected.length == 0;
 
         db.nodes?.forEach(node => {
-          if (
-            foundRegion ||
-            regionsSelected.includes(nodeRegions[node.toString()])
-          ) {
+          const n = node?.toString() || "";
+          if (foundRegion || regionsSelected.includes(nodeRegions[n])) {
             foundRegion = true;
           }
-          if (foundNode || nodesSelected.includes("n" + node.toString())) {
+          if (foundNode || nodesSelected.includes("n" + n)) {
             foundNode = true;
           }
           if (foundNode && foundRegion) return true;
@@ -617,7 +615,7 @@ export class DatabasesPage extends React.Component<
             hideAppNames={true}
             regions={regions}
             hideTimeLabel={true}
-            nodes={nodes.map(n => "n" + n.toString())}
+            nodes={nodes.map(n => "n" + n?.toString())}
             activeFilters={activeFilters}
             filters={defaultFilters}
             onSubmitFilters={this.onSubmitFilters}

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/selectors/recentExecutions.selectors.ts

@@ -96,7 +96,7 @@ export const selectContentionDetailsForStatement = createSelector(
 export const selectAppName = createSelector(
   (state: AppState) => state.adminUI?.sessions,
   response => {
-    if (!response.data) return null;
+    if (!response?.data) return null;
     return response.data.internal_app_name_prefix;
   },
 );

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/sqlActivity/util.tsx

@@ -22,20 +22,20 @@ export function filteredStatementsData(
 ): AggregateStatistics[] {
   const timeValue = getTimeValueInSeconds(filters);
   const sqlTypes =
-    filters.sqlType.length > 0
+    filters.sqlType?.length > 0
       ? filters.sqlType.split(",").map(function (sqlType: string) {
           // Adding "Type" to match the value on the Statement
           // Possible values: TypeDDL, TypeDML, TypeDCL and TypeTCL
           return "Type" + sqlType;
         })
       : [];
   const databases =
-    filters.database.length > 0 ? filters.database.split(",") : [];
+    filters.database?.length > 0 ? filters.database.split(",") : [];
   if (databases.includes(unset)) {
     databases.push("");
   }
-  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(",") : [];
 
   // Return statements filtered by the values selected on the filter and
   // the search text. A statement must match all selected filters to be

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

@@ -241,6 +241,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

@@ -57,7 +57,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 [];
   }
 
@@ -88,7 +88,7 @@ export const selectApps = createSelector(sqlStatsSelector, sqlStatsState => {
 
 // selectDatabases returns the array of all databases in the cluster.
 export const selectDatabases = createSelector(databasesListSelector, state => {
-  if (!state.data) {
+  if (!state?.data) {
     return [];
   }
 
@@ -102,7 +102,7 @@ export const selectDatabases = createSelector(databasesListSelector, state => {
 export const selectTotalFingerprints = createSelector(
   sqlStatsSelector,
   state => {
-    if (!state.data) {
+    if (!state?.data) {
       return 0;
     }
     const aggregated = aggregateStatementStats(state.data.statements);
@@ -113,7 +113,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 "";
   }
 
@@ -144,7 +144,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);
@@ -229,7 +229,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

@@ -561,7 +561,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(","),
       this.props.stmtsTotalRuntimeSecs,
       "statement",
       isTenant,

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

@@ -46,7 +46,7 @@ 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

@@ -43,7 +43,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

@@ -171,8 +171,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

@@ -282,7 +282,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/recentExecutionsSelectors.ts

@@ -61,7 +61,7 @@ export const selectRecentStatement = 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;