ui: add checks for values

Fixes cockroachdb#99655 Fixes cockroachdb#99538 Fixes cockroachdb#99539 Add checks to usages that could cause `Cannot read properties of undefined`. Release note: None
maryliag · Mar 29, 2023 · 2b9fd25 · 2b9fd25
1 parent 61d1dce
commit 2b9fd25
Show file tree

Hide file tree

Showing 53 changed files with 140 additions and 138 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/indexActionsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/indexActionsApi.ts
@@ -26,7 +26,7 @@ export function executeIndexRecAction(
   databaseName: string,
 ): Promise<IndexActionResponse> {
   const statements = stmts
-    .split(";")
+    ?.split(";")
     .filter(stmt => stmt.trim().length != 0)
     .map(stmt => {
       return { sql: stmt.trim() };

diff --git a/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts
@@ -95,7 +95,7 @@ function createIndexRecommendationsToSchemaInsight(
 
   txn_result.rows.forEach(row => {
     row.index_recommendations.forEach(rec => {
-      const recSplit = rec.split(" : ");
+      const recSplit = rec?.split(" : ");
       const recType = recSplit[0];
       const recQuery = recSplit[1];
       let idxType: InsightType;

diff --git a/pkg/ui/workspaces/cluster-ui/src/api/txnInsightsApi.ts b/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"),

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
@@ -181,7 +181,7 @@ function filterBySearchQuery(
   }
 
   const res = search
-    .toLowerCase()
+    ?.toLowerCase()
     .split(" ")
     .every(val => matchString.includes(val));
 
@@ -279,7 +279,7 @@ export class DatabaseDetailsPage extends React.Component<
   changeSortSetting = (ss: SortSetting): void => {
     syncHistory(
       {
-        ascending: ss.ascending.toString(),
+        ascending: ss.ascending?.toString(),
         columnTitle: ss.columnTitle,
       },
       this.props.history,
@@ -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))
@@ -394,11 +394,11 @@ export class DatabaseDetailsPage extends React.Component<
         table.details.nodes?.forEach(node => {
           if (
             foundRegion ||
-            regionsSelected.includes(nodeRegions[node.toString()])
+            regionsSelected.includes(nodeRegions[node?.toString()])
           ) {
             foundRegion = true;
           }
-          if (foundNode || nodesSelected.includes("n" + node.toString())) {
+          if (foundNode || nodesSelected.includes("n" + node?.toString())) {
             foundNode = true;
           }
           if (foundNode && foundRegion) return true;
@@ -411,7 +411,7 @@ export class DatabaseDetailsPage extends React.Component<
   private changeViewMode(viewMode: ViewMode) {
     syncHistory(
       {
-        viewMode: viewMode.toString(),
+        viewMode: viewMode?.toString(),
       },
       this.props.history,
     );
@@ -738,7 +738,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}

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -298,7 +298,7 @@ export class DatabaseTablePage extends React.Component<
 
     searchParams.set(columnTitleAttr, sortSetting.columnTitle);
     searchParams.set(ascendingAttr, String(sortSetting.ascending));
-    history.location.search = searchParams.toString();
+    history.location.search = searchParams?.toString();
     history.replace(history.location);
   }
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx
@@ -155,7 +155,7 @@ function filterBySearchQuery(
   }
 
   return search
-    .toLowerCase()
+    ?.toLowerCase()
     .split(" ")
     .every(val => matchString.includes(val));
 }
@@ -329,7 +329,7 @@ export class DatabasesPage extends React.Component<
   changeSortSetting = (ss: SortSetting): void => {
     syncHistory(
       {
-        ascending: ss.ascending.toString(),
+        ascending: ss.ascending?.toString(),
         columnTitle: ss.columnTitle,
       },
       this.props.history,
@@ -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))
@@ -440,11 +440,11 @@ export class DatabasesPage extends React.Component<
         db.nodes?.forEach(node => {
           if (
             foundRegion ||
-            regionsSelected.includes(nodeRegions[node.toString()])
+            regionsSelected.includes(nodeRegions[node?.toString()])
           ) {
             foundRegion = true;
           }
-          if (foundNode || nodesSelected.includes("n" + node.toString())) {
+          if (foundNode || nodesSelected.includes("n" + node?.toString())) {
             foundNode = true;
           }
           if (foundNode && foundRegion) return true;
@@ -617,7 +617,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}

diff --git a/pkg/ui/workspaces/cluster-ui/src/highlightedText/highlightedText.tsx b/pkg/ui/workspaces/cluster-ui/src/highlightedText/highlightedText.tsx
@@ -34,7 +34,7 @@ export function getWordAt(word: string, text: string): number {
 }
 
 function rebaseText(text: string, highlight: string): string {
-  const search = highlight.split(" ");
+  const search = highlight?.split(" ");
   const maxLength = 425;
   const defaultCropLength = 150;
   const defaultBeforeAfterCrop = 20;
@@ -88,7 +88,7 @@ export function getHighlightedText(
     "highlightNotDefined",
   );
   const search = highlight
-    .split(" ")
+    ?.split(" ")
     .map(val => {
       if (val.length > 0) {
         return val.toLowerCase();
@@ -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) => {

diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx
@@ -423,7 +423,7 @@ export class IndexDetailsPage extends React.Component<
       statement.applicationName.startsWith(INTERNAL_APP_NAME_PREFIX);
 
     if (filters.app && filters.app !== "All") {
-      const criteria = decodeURIComponent(filters.app).split(",");
+      const criteria = decodeURIComponent(filters.app)?.split(",");
       let showInternal = false;
       if (criteria.includes(INTERNAL_APP_NAME_PREFIX)) {
         showInternal = true;
@@ -465,7 +465,7 @@ export class IndexDetailsPage extends React.Component<
     const regions = unique(
       isTenant
         ? flatMap(statements, statement => statement.stats.regions)
-        : nodes.map(node => nodeRegions[node.toString()]),
+        : nodes.map(node => nodeRegions[node?.toString()]),
     ).sort();
 
     const filteredStmts = this.filteredStatements();

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/indexActionBtn.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/indexActionBtn.tsx
@@ -198,7 +198,7 @@ function addIdxName(statement: string): string {
     return statement;
   }
   let result = "";
-  const statements = statement.split(";");
+  const statements = statement?.split(";");
   for (let i = 0; i < statements.length; i++) {
     if (statements[i].trim().toUpperCase().startsWith("CREATE INDEX ON ")) {
       result = `${result}${createIdxName(statements[i])}; `;
@@ -241,7 +241,7 @@ export function createIdxName(statement: string): string {
   }
   info = info.substring(0, i - 1);
 
-  const variables = info.split(",");
+  const variables = info?.split(",");
   let expressions = 0;
   let value;
   for (let i = 0; i < variables.length; i++) {

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/utils.ts b/pkg/ui/workspaces/cluster-ui/src/insights/utils.ts
@@ -38,7 +38,7 @@ export const filterTransactionInsights = (
     txn?.application?.startsWith(internalAppNamePrefix);
   if (filters.app) {
     filteredTransactions = filteredTransactions.filter(txn => {
-      const apps = filters.app.toString().split(",");
+      const apps = filters.app?.toString().split(",");
       let showInternal = false;
       if (apps.includes(internalAppNamePrefix)) {
         showInternal = true;
@@ -108,8 +108,8 @@ export const filterSchemaInsights = (
 
   if (filters.database) {
     const databases =
-      filters.database.toString().length > 0
-        ? filters.database.toString().split(",")
+      filters.database?.toString().length > 0
+        ? filters.database?.toString().split(",")
         : [];
     if (databases.includes(unset)) {
       databases.push("");

diff --git a/pkg/ui/workspaces/cluster-ui/src/multiSelectCheckbox/multiSelectCheckbox.tsx b/pkg/ui/workspaces/cluster-ui/src/multiSelectCheckbox/multiSelectCheckbox.tsx
@@ -106,7 +106,7 @@ export const MultiSelectCheckbox = (props: MultiSelectCheckboxProps) => {
       .map(function (option: SelectOption) {
         return option.label;
       })
-      .toString();
+      ?.toString();
     parent.setState({
       filters: {
         ...parent.state.filters,

diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
@@ -194,7 +194,7 @@ export const handleFiltersFromQueryString = (
         app: filters.app,
         timeNumber: filters.timeNumber,
         timeUnit: filters.timeUnit,
-        fullScan: filters.fullScan.toString(),
+        fullScan: filters.fullScan?.toString(),
         sqlType: filters.sqlType,
         database: filters.database,
         regions: filters.regions,
@@ -237,7 +237,7 @@ export const updateFiltersQueryParamsOnTab = (
         app: filters.app,
         timeNumber: filters.timeNumber,
         timeUnit: filters.timeUnit,
-        fullScan: filters.fullScan.toString(),
+        fullScan: filters.fullScan?.toString(),
         sqlType: filters.sqlType,
         database: filters.database,
         regions: filters.regions,
@@ -482,7 +482,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
         }))
       : [];
     const usernameValue = usernameOptions.filter(option => {
-      return filters.username.split(",").includes(option.label);
+      return filters.username?.split(",").includes(option.label);
     });
     const usernameFilter = (
       <div>
@@ -508,7 +508,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
         }))
       : [];
     const sessionStatusValue = sessionStatusOptions.filter(option => {
-      return filters.sessionStatus.split(",").includes(option.label);
+      return filters.sessionStatus?.split(",").includes(option.label);
     });
     const sessionStatusFilter = (
       <div>
@@ -536,7 +536,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
         }))
       : [];
     const executionStatusValue = executionStatusOptions.filter(option =>
-      filters.executionStatus.split(",").includes(option.label),
+      filters.executionStatus?.split(",").includes(option.label),
     );
     const executionStatusFilter = (
       <div>
@@ -564,7 +564,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
         }))
       : [];
     const schemaInsightTypeValue = schemaInsightTypeOptions.filter(option => {
-      return filters.schemaInsightType.split(",").includes(option.label);
+      return filters.schemaInsightType?.split(",").includes(option.label);
     });
     const schemaInsightTypeFilter = (
       <div>
@@ -619,7 +619,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
         }))
       : [];
     const regionsValue = regionsOptions.filter(option =>
-      filters.regions.split(",").includes(option.label),
+      filters.regions?.split(",").includes(option.label),
     );
     const regionsFilter = (
       <div>
@@ -642,7 +642,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
         }))
       : [];
     const nodesValue = nodesOptions.filter(option => {
-      return filters.nodes.split(",").includes(option.label);
+      return filters.nodes?.split(",").includes(option.label);
     });
     const nodesFilter = (
       <div>
@@ -836,7 +836,7 @@ interface FilterBadgeProps {
 function FilterBadge(props: FilterBadgeProps): React.ReactElement {
   const { filters, name, values, onRemoveFilter } = props;
   const unit = name === "timeNumber" ? props.unit : "";
-  let value = `${getLabelFromKey(name)}: ${values.toString()} ${unit}`;
+  let value = `${getLabelFromKey(name)}: ${values?.toString()} ${unit}`;
   if (value.length > 100) {
     value = value.substring(0, 100) + "...";
   }

diff --git a/pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts b/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;
   },
 );
diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
@@ -173,7 +173,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                     if (session.active_queries?.length > 0) {
                       this.terminateQueryRef?.current?.showModalFor({
                         query_id: session.active_queries[0].id,
-                        node_id: session.node_id.toString(),
+                        node_id: session.node_id?.toString(),
                       });
                     }
                   }}
@@ -187,7 +187,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                     onTerminateSessionClick && onTerminateSessionClick();
                     this.terminateSessionRef?.current?.showModalFor({
                       session_id: session.id,
-                      node_id: session.node_id.toString(),
+                      node_id: session.node_id?.toString(),
                     });
                   }}
                   type="secondary"
@@ -385,12 +385,12 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                     this.props.uiConfig?.showGatewayNodeLink ? (
                       <div className={cx("session-details-link")}>
                         <NodeLink
-                          nodeId={session.node_id.toString()}
+                          nodeId={session.node_id?.toString()}
                           nodeNames={this.props.nodeNames}
                         />
                       </div>
                     ) : (
-                      session.node_id.toString()
+                      session.node_id?.toString()
                     )
                   }
                 />

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -184,7 +184,7 @@ export class SessionsPage extends React.Component<
 
     syncHistory(
       {
-        ascending: ss.ascending.toString(),
+        ascending: ss.ascending?.toString(),
         columnTitle: ss.columnTitle,
       },
       this.props.history,