Merge cockroachdb#111445 cockroachdb#111468 cockroachdb#111472

111445: ui: eslint should error on eqeqeq violation r=xinhaoz a=xinhaoz Add eqeqeq eslint rule for cluster-ui. This rule is on 'smart' mode, meaning we must use triple equals unless: - comparing two literal values - evaluating the value of typeof - comparing against null Epic: none Release note: None 111468: ui: fix doc link to secure login r=maryliag a=maryliag Fix the doc link to the correct header. Fixes cockroachdb#108633 Release note: None 111472: ui: add check for value r=maryliag a=maryliag Reading value `mean` of undefined was causing a crash. Fixes cockroachdb#107906 Release note (bug fix): Add check for values before using `mean` on Plan Details page, no longer causing a crash. Co-authored-by: Xin Hao Zhang <[email protected]> Co-authored-by: maryliag <[email protected]>
kathancox · Sep 29, 2023 · 8c6f0b9 · 8c6f0b9
4 parents c68c083 + d0e8c56 + 878e59c + 84bd02d
commit 8c6f0b9
Show file tree

Hide file tree

Showing 40 changed files with 116 additions and 111 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/.eslintrc.json b/pkg/ui/workspaces/cluster-ui/.eslintrc.json
@@ -14,6 +14,7 @@
     "@cockroachlabs/crdb/require-antd-style-import": "error",
     // Instead of using console log methods directly, cluster-ui code should
     // call the getLogger() method to provide the appropriate logger.
-    "no-console": "error"
+    "no-console": "error",
+    "eqeqeq": ["error", "smart"]
   }
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/contentionApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/contentionApi.ts
@@ -134,21 +134,21 @@ function getContentionWhereClause(filters?: ContentionFilters): string {
   }
 
   if (filters?.waitingTxnID) {
-    if (whereClause != defaultWhereClause) {
+    if (whereClause !== defaultWhereClause) {
       whereClause += " and ";
     }
     whereClause = whereClause + ` waiting_txn_id >= '${filters.waitingTxnID}' `;
   }
 
   if (filters?.start) {
-    if (whereClause != defaultWhereClause) {
+    if (whereClause !== defaultWhereClause) {
       whereClause += " and ";
     }
     whereClause =
       whereClause + ` collection_ts >= '${filters.start.toISOString()}' `;
   }
   if (filters?.end) {
-    if (whereClause != defaultWhereClause) {
+    if (whereClause !== defaultWhereClause) {
       whereClause += " and ";
     }
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/api/indexActionsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/indexActionsApi.ts
@@ -27,7 +27,7 @@ export function executeIndexRecAction(
 ): Promise<IndexActionResponse> {
   const statements = stmts
     .split(";")
-    .filter(stmt => stmt.trim().length != 0)
+    .filter(stmt => stmt.trim().length !== 0)
     .map(stmt => {
       return { sql: stmt.trim() };
     });

diff --git a/pkg/ui/workspaces/cluster-ui/src/api/safesql.ts b/pkg/ui/workspaces/cluster-ui/src/api/safesql.ts
@@ -178,7 +178,7 @@ export function Format(format: string, args?: any[]): string {
 
     if (i > 0) {
       const lastChar = format.substring(0, i).slice(-1);
-      if (!(lastChar == "=" || isPunct(lastChar) || isSpace(lastChar))) {
+      if (!(lastChar === "=" || isPunct(lastChar) || isSpace(lastChar))) {
         throw new Error(
           `invalid separator: '${lastChar}' is not punctuation or whitespace`,
         );

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
@@ -230,13 +230,13 @@ export class DatabaseDetailsPage extends React.Component<
     // View Mode.
     const view = searchParams.get("viewMode") || undefined;
     let viewMode = ViewMode.Tables;
-    if (view == ViewMode.Grants.toString()) {
+    if (view === ViewMode.Grants.toString()) {
       viewMode = ViewMode.Grants;
     }
     if (
       this.props.onViewModeChange &&
       view &&
-      viewMode != this.props.viewMode
+      viewMode !== this.props.viewMode
     ) {
       this.props.onViewModeChange(viewMode);
     }
@@ -245,19 +245,19 @@ export class DatabaseDetailsPage extends React.Component<
     const ascending = (searchParams.get("ascending") || undefined) === "true";
     const columnTitle = searchParams.get("columnTitle") || undefined;
     const sortSetting =
-      viewMode == ViewMode.Tables
+      viewMode === ViewMode.Tables
         ? this.props.sortSettingTables
         : this.props.sortSettingGrants;
     const onSortingChange =
-      viewMode == ViewMode.Tables
+      viewMode === ViewMode.Tables
         ? this.props.onSortingTablesChange
         : this.props.onSortingGrantsChange;
 
     if (
       onSortingChange &&
       columnTitle &&
-      (sortSetting.columnTitle != columnTitle ||
-        sortSetting.ascending != ascending)
+      (sortSetting.columnTitle !== columnTitle ||
+        sortSetting.ascending !== ascending)
     ) {
       onSortingChange(columnTitle, ascending);
     }
@@ -293,17 +293,17 @@ export class DatabaseDetailsPage extends React.Component<
     // No new tables to update
     if (
       !this.props.tables ||
-      this.props.tables.length == 0 ||
+      this.props.tables.length === 0 ||
       this.props.tables.every(x => x.loaded || x.loading)
     ) {
       return false;
     }
 
-    if (this.state.pagination.current != prevState.pagination.current) {
+    if (this.state.pagination.current !== prevState.pagination.current) {
       return true;
     }
 
-    if (prevProps && this.props.search != prevProps.search) {
+    if (prevProps && this.props.search !== prevProps.search) {
       return true;
     }
 
@@ -314,7 +314,7 @@ export class DatabaseDetailsPage extends React.Component<
       i++
     ) {
       const table = filteredTables[i];
-      if (!table.loaded && !table.loading && table.requestError == undefined) {
+      if (!table.loaded && !table.loading && table.requestError == null) {
         return true;
       }
     }
@@ -371,7 +371,7 @@ export class DatabaseDetailsPage extends React.Component<
       this.props.history,
     );
     const onSortingChange =
-      this.props.viewMode == ViewMode.Tables
+      this.props.viewMode === ViewMode.Tables
         ? this.props.onSortingTablesChange
         : this.props.onSortingGrantsChange;
 
@@ -470,21 +470,21 @@ export class DatabaseDetailsPage extends React.Component<
 
     // Avoid the loop if no filters/search are applied
     if (
-      (!search || search.length == 0) &&
-      regionsSelected.length == 0 &&
-      nodesSelected.length == 0
+      (!search || search.length === 0) &&
+      regionsSelected.length === 0 &&
+      nodesSelected.length === 0
     ) {
       return tables;
     }
 
     return tables
       .filter(table => (search ? filterBySearchQuery(table, search) : true))
       .filter(table => {
-        if (regionsSelected.length == 0 && nodesSelected.length == 0)
+        if (regionsSelected.length === 0 && nodesSelected.length === 0)
           return true;
 
-        let foundRegion = regionsSelected.length == 0;
-        let foundNode = nodesSelected.length == 0;
+        let foundRegion = regionsSelected.length === 0;
+        let foundNode = nodesSelected.length === 0;
 
         table.details.nodes?.forEach(node => {
           const n = node?.toString() || "";
@@ -791,7 +791,7 @@ export class DatabaseDetailsPage extends React.Component<
     const regions = unique(Object.values(nodeRegions));
 
     const sortSetting =
-      this.props.viewMode == ViewMode.Tables
+      this.props.viewMode === ViewMode.Tables
         ? this.props.sortSettingTables
         : this.props.sortSettingGrants;
 
@@ -801,7 +801,7 @@ export class DatabaseDetailsPage extends React.Component<
     // Only show the filter component when the viewMode is Tables and if at
     // least one of drop-down is shown.
     const filterComponent =
-      this.props.viewMode == ViewMode.Tables && (showNodes || showRegions) ? (
+      this.props.viewMode === ViewMode.Tables && (showNodes || showRegions) ? (
         <PageConfigItem>
           <Filter
             hideAppNames={true}

diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx
@@ -211,8 +211,8 @@ export class DatabasesPage extends React.Component<
     if (
       this.props.onSortingChange &&
       columnTitle &&
-      (sortSetting.columnTitle != columnTitle ||
-        sortSetting.ascending != ascending)
+      (sortSetting.columnTitle !== columnTitle ||
+        sortSetting.ascending !== ascending)
     ) {
       this.props.onSortingChange("Databases", columnTitle, ascending);
     }
@@ -232,7 +232,7 @@ export class DatabasesPage extends React.Component<
     const searchParams = new URLSearchParams(history.location.search);
 
     const searchQuery = searchParams.get("q") || undefined;
-    if (onSearchComplete && searchQuery && search != searchQuery) {
+    if (onSearchComplete && searchQuery && search !== searchQuery) {
       onSearchComplete(searchQuery);
     }
 
@@ -284,7 +284,7 @@ export class DatabasesPage extends React.Component<
     // Search
     const searchParams = new URLSearchParams(history.location.search);
     const searchQueryString = searchParams.get("q") || "";
-    if (search && search != searchQueryString) {
+    if (search && search !== searchQueryString) {
       syncHistory(
         {
           q: search,
@@ -459,11 +459,11 @@ export class DatabasesPage extends React.Component<
     return databases
       .filter(db => (search ? filterBySearchQuery(db, search) : true))
       .filter(db => {
-        if (regionsSelected.length == 0 && nodesSelected.length == 0)
+        if (regionsSelected.length === 0 && nodesSelected.length === 0)
           return true;
 
-        let foundRegion = regionsSelected.length == 0;
-        let foundNode = nodesSelected.length == 0;
+        let foundRegion = regionsSelected.length === 0;
+        let foundNode = nodesSelected.length === 0;
 
         db.nodes?.forEach(node => {
           const n = node?.toString() || "";
@@ -487,17 +487,17 @@ export class DatabasesPage extends React.Component<
     // No new dbs to update
     if (
       !this.props.databases ||
-      this.props.databases.length == 0 ||
+      this.props.databases.length === 0 ||
       this.props.databases.every(x => x.loaded || x.loading)
     ) {
       return false;
     }
 
-    if (this.state.pagination.current != prevState.pagination.current) {
+    if (this.state.pagination.current !== prevState.pagination.current) {
       return true;
     }
 
-    if (prevProps && this.props.search != prevProps.search) {
+    if (prevProps && this.props.search !== prevProps.search) {
       return true;
     }
 
@@ -508,7 +508,7 @@ export class DatabasesPage extends React.Component<
       i++
     ) {
       const db = filteredDatabases[i];
-      if (db.loaded || db.loading || db.requestError != undefined) {
+      if (db.loaded || db.loading || db.requestError != null) {
         continue;
       }
       // Info is not loaded for a visible database.

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/indexActionBtn.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/indexActionBtn.tsx
@@ -53,7 +53,7 @@ const IdxRecAction = (props: idxRecProps): React.ReactElement => {
         setApplying(false);
         let foundError = false;
         for (let i = 0; i < r.length; i++) {
-          if (r[i].status == "FAILED") {
+          if (r[i].status === "FAILED") {
             foundError = true;
             setError(r[i].error);
             break;
@@ -202,7 +202,7 @@ function addIdxName(statement: string): string {
   for (let i = 0; i < statements.length; i++) {
     if (statements[i].trim().toUpperCase().startsWith("CREATE INDEX ON ")) {
       result = `${result}${createIdxName(statements[i])}; `;
-    } else if (statements[i].length != 0) {
+    } else if (statements[i].length !== 0) {
       result = `${result}${statements[i]};`;
     }
   }
@@ -231,10 +231,10 @@ export function createIdxName(statement: string): string {
   let parenthesis = 1;
   let i = 0;
   while (parenthesis > 0 && i < info.length) {
-    if (info[i] == "(") {
+    if (info[i] === "(") {
       parenthesis++;
     }
-    if (info[i] == ")") {
+    if (info[i] === ")") {
       parenthesis--;
     }
     i++;

diff --git a/...s/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetailsOverviewTab.tsx b/...s/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetailsOverviewTab.tsx
@@ -96,7 +96,7 @@ the maximum number of statements was reached in the console.`;
   const blockingExecutions: ContentionEvent[] = contentionDetails?.map(
     event => {
       const stmtInsight = statements.find(
-        stmt => stmt.statementExecutionID == event.waitingStmtID,
+        stmt => stmt.statementExecutionID === event.waitingStmtID,
       );
       return {
         executionID: event.blockingExecutionID,

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/insightsColumns.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/insightsColumns.tsx
@@ -123,7 +123,7 @@ export const insightsTableTitles: InsightsTableTitleType = {
   },
   query: (execType: InsightExecEnum) => {
     let tooltipText = `The ${execType} query.`;
-    if (execType == InsightExecEnum.TRANSACTION) {
+    if (execType === InsightExecEnum.TRANSACTION) {
       tooltipText = "The queries attempted in the transaction.";
     }
     return makeToolTip(<p>{tooltipText}</p>, "query", execType);

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/queriesCell.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/queriesCell.tsx
@@ -37,9 +37,9 @@ export function QueriesCell(
 
   const combinedQuery = transactionQueries?.map((query, idx, arr) => (
     <div key={idx}>
-      {idx != 0 && <br />}
+      {idx !== 0 && <br />}
       {query}
-      {idx != arr.length - 1 && <br />}
+      {idx !== arr.length - 1 && <br />}
     </div>
   ));
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/workloadInsightRootControl.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/workloadInsightRootControl.tsx
@@ -65,7 +65,7 @@ export const WorkloadInsightsRootControl = ({
     />
   );
 
-  if (selectedInsightView == InsightExecEnum.TRANSACTION) {
+  if (selectedInsightView === InsightExecEnum.TRANSACTION) {
     return (
       <div>
         <TransactionInsightsView

diff --git a/pkg/ui/workspaces/cluster-ui/src/jobs/util/duration.tsx b/pkg/ui/workspaces/cluster-ui/src/jobs/util/duration.tsx
@@ -46,7 +46,7 @@ export class Duration extends React.PureComponent<{
         );
       }
       return null;
-    } else if (job.status == JOB_STATUS_SUCCEEDED) {
+    } else if (job.status === JOB_STATUS_SUCCEEDED) {
       return (
         <span className={className}>
           {"Duration: " +

diff --git a/pkg/ui/workspaces/cluster-ui/src/jobs/util/jobOptions.tsx b/pkg/ui/workspaces/cluster-ui/src/jobs/util/jobOptions.tsx
@@ -44,7 +44,7 @@ export function jobToVisual(job: Job): JobStatusVisual {
     case JOB_STATUS_CANCELED:
     case JOB_STATUS_CANCEL_REQUESTED:
     case JOB_STATUS_PAUSED:
-      return job.error == ""
+      return job.error === ""
         ? JobStatusVisual.BadgeOnly
         : JobStatusVisual.BadgeWithErrorMessage;
     case JOB_STATUS_PAUSE_REQUESTED:
@@ -55,7 +55,7 @@ export function jobToVisual(job: Job): JobStatusVisual {
 }
 
 function jobToVisualForReplicationIngestion(job: Job): JobStatusVisual {
-  if (job.fraction_completed > 0 && job.status == JOB_STATUS_RUNNING) {
+  if (job.fraction_completed > 0 && job.status === JOB_STATUS_RUNNING) {
     return JobStatusVisual.ProgressBarWithDuration;
   }
   return JobStatusVisual.BadgeOnly;

diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
@@ -751,7 +751,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
                       <Select
                         options={timeUnit}
                         value={timeUnit.filter(
-                          unit => unit.label == filters.timeUnit,
+                          unit => unit.label === filters.timeUnit,
                         )}
                         onChange={e => this.handleSelectChange(e, "timeUnit")}
                         className={timePair.timeUnit}

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -155,8 +155,8 @@ export class SessionsPage extends React.Component<
     if (
       this.props.onSortingChange &&
       columnTitle &&
-      (sortSetting.columnTitle != columnTitle ||
-        sortSetting.ascending != ascending)
+      (sortSetting.columnTitle !== columnTitle ||
+        sortSetting.ascending !== ascending)
     ) {
       this.props.onSortingChange("Sessions", columnTitle, ascending);
     }
@@ -298,7 +298,7 @@ export class SessionsPage extends React.Component<
       .filter((s: SessionInfo) => {
         const isInternal = (s: SessionInfo) =>
           s.session.application_name.startsWith(internalAppNamePrefix);
-        if (filters.app && filters.app != "All") {
+        if (filters.app && filters.app !== "All") {
           const apps = filters.app.split(",");
           let showInternal = false;
           if (apps.includes(internalAppNamePrefix)) {
@@ -324,14 +324,14 @@ export class SessionsPage extends React.Component<
         return timeValue === "empty" || sessionTime >= Number(timeValue);
       })
       .filter((s: SessionInfo) => {
-        if (filters.username && filters.username != "All") {
+        if (filters.username && filters.username !== "All") {
           const usernames = filters.username.split(",");
           return usernames.includes(s.session.username);
         }
         return true;
       })
       .filter((s: SessionInfo) => {
-        if (filters.sessionStatus && filters.sessionStatus != "All") {
+        if (filters.sessionStatus && filters.sessionStatus !== "All") {
           const statuses = filters.sessionStatus.split(",");
           return statuses.includes(getStatusString(s.session.status));
         }