ui/cluster-ui: add context to inform ui if on cockroach cloud

Closes #86245

This commit introduces a context `CockroachCloudCountext` that
signifies whether or not the app is within cockroach cloud or
not. This allows us to enable/disable certain features depending
on the platform without plumbing any values. The default context
value is true in order to not set the context explicitly for
cloud components and within the managed-service repo. The
context is provided as false for the db-console app.

This commit also disables the `Time Spent Waiting` column
in active execution tables for CC, since that feature is not yet
available.

Release justification: bug fix, low risk update to existing
functionality
Release note (ui change): The `time spent waiting` columns for
active execution tables has been  hidden on CC

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsSection.tsx

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React from "react";
+import React, { useContext, useMemo } from "react";
 import classNames from "classnames/bind";
 import {
   ActiveStatement,
@@ -22,14 +22,17 @@ import { EmptyStatementsPlaceholder } from "src/statementsPage/emptyStatementsPl
 import { TableStatistics } from "src/tableStatistics";
 import {
   ISortedTablePagination,
+  SortedTable,
   SortSetting,
 } from "../sortedtable/sortedtable";
 import {
-  ActiveStatementsTable,
   getColumnOptions,
+  makeActiveStatementsColumns,
 } from "./activeStatementsTable";
 import { StatementViewType } from "src/statementsPage/statementPageTypes";
 import { calculateActiveFilters } from "src/queryFilter/filter";
+import { CockroachCloudContext } from "src/contexts";
+import { isSelectedColumn } from "src/columnsSelector/utils";
 
 const sortableTableCx = classNames.bind(sortableTableStyles);
 
@@ -58,7 +61,20 @@ export const ActiveStatementsSection: React.FC<
   onChangeSortSetting,
   onColumnsSelect,
 }) => {
-  const tableColumns: SelectOption[] = getColumnOptions(selectedColumns);
+  const isCockroachCloud = useContext(CockroachCloudContext);
+
+  const columns = useMemo(
+    () => makeActiveStatementsColumns(isCockroachCloud),
+    [isCockroachCloud],
+  );
+  const shownColumns = columns.filter(col =>
+    isSelectedColumn(selectedColumns, col),
+  );
+
+  const tableColumns: SelectOption[] = getColumnOptions(
+    columns,
+    selectedColumns,
+  );
   const activeFilters = calculateActiveFilters(filters);
 
   return (
@@ -77,9 +93,10 @@ export const ActiveStatementsSection: React.FC<
           onClearFilters={onClearFilters}
         />
       </div>
-      <ActiveStatementsTable
+      <SortedTable
+        className="statements-table"
         data={statements}
-        selectedColumns={selectedColumns}
+        columns={shownColumns}
         sortSetting={sortSetting}
         onChangeSortSetting={onChangeSortSetting}
         renderNoResult={

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx

@@ -9,32 +9,20 @@
 // licenses/APL.txt.
 
 import React from "react";
-import {
-  SortedTable,
-  ISortedTablePagination,
-  ColumnDescriptor,
-} from "../../sortedtable";
-import { SortSetting } from "../../sortedtable";
-import { ActiveStatement, ExecutionType } from "../types";
+import { Link } from "react-router-dom";
 import { isSelectedColumn } from "../../columnsSelector/utils";
+import { ColumnDescriptor } from "../../sortedtable";
 import {
-  getLabel,
-  ExecutionsColumn,
   activeStatementColumnsFromCommon,
+  ExecutionsColumn,
   executionsTableTitles,
+  getLabel,
 } from "../execTableCommon";
-import { Link } from "react-router-dom";
-
-interface ActiveStatementsTable {
-  data: ActiveStatement[];
-  sortSetting: SortSetting;
-  onChangeSortSetting: (ss: SortSetting) => void;
-  pagination: ISortedTablePagination;
-  renderNoResult?: React.ReactNode;
-  selectedColumns: string[];
-}
+import { ActiveStatement } from "../types";
 
-export function makeActiveStatementsColumns(): ColumnDescriptor<ActiveStatement>[] {
+export function makeActiveStatementsColumns(
+  isCockroachCloud: boolean,
+): ColumnDescriptor<ActiveStatement>[] {
   return [
     activeStatementColumnsFromCommon.executionID,
     {
@@ -50,32 +38,22 @@ export function makeActiveStatementsColumns(): ColumnDescriptor<ActiveStatement>
     activeStatementColumnsFromCommon.status,
     activeStatementColumnsFromCommon.startTime,
     activeStatementColumnsFromCommon.elapsedTime,
-    activeStatementColumnsFromCommon.timeSpentWaiting,
+    !isCockroachCloud
+      ? activeStatementColumnsFromCommon.timeSpentWaiting
+      : null,
     activeStatementColumnsFromCommon.applicationName,
-  ];
+  ].filter(col => col != null);
 }
 
 export function getColumnOptions(
+  columns: ColumnDescriptor<ActiveStatement>[],
   selectedColumns: string[] | null,
 ): { label: string; value: string; isSelected: boolean }[] {
-  return makeActiveStatementsColumns()
+  return columns
     .filter(col => !col.alwaysShow)
     .map(col => ({
       value: col.name,
       label: getLabel(col.name as ExecutionsColumn, "statement"),
       isSelected: isSelectedColumn(selectedColumns, col),
     }));
 }
-
-export const ActiveStatementsTable: React.FC<ActiveStatementsTable> = props => {
-  const { selectedColumns, ...rest } = props;
-  const columns = makeActiveStatementsColumns().filter(col =>
-    isSelectedColumn(selectedColumns, col),
-  );
-
-  return (
-    <SortedTable columns={columns} className="statements-table" {...rest} />
-  );
-};
-
-ActiveStatementsTable.defaultProps = {};

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsSection.tsx

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React from "react";
+import React, { useMemo, useContext } from "react";
 import classNames from "classnames/bind";
 import {
   ActiveStatementFilters,
@@ -25,11 +25,14 @@ import {
   SortSetting,
 } from "../sortedtable/sortedtable";
 import {
-  ActiveTransactionsTable,
+  makeActiveTransactionsColumns,
   getColumnOptions,
 } from "./activeTransactionsTable";
 import { TransactionViewType } from "src/transactionsPage/transactionsPageTypes";
 import { calculateActiveFilters } from "src/queryFilter/filter";
+import { CockroachCloudContext } from "src/contexts";
+import { isSelectedColumn } from "src/columnsSelector/utils";
+import { SortedTable } from "src/sortedtable";
 
 const sortableTableCx = classNames.bind(sortableTableStyles);
 
@@ -58,7 +61,21 @@ export const ActiveTransactionsSection: React.FC<
   onClearFilters,
   onColumnsSelect,
 }) => {
-  const tableColumns: SelectOption[] = getColumnOptions(selectedColumns);
+  const isCockroachCloud = useContext(CockroachCloudContext);
+
+  const columns = useMemo(
+    () => makeActiveTransactionsColumns(isCockroachCloud),
+    [isCockroachCloud],
+  );
+  const shownColumns = columns.filter(col =>
+    isSelectedColumn(selectedColumns, col),
+  );
+
+  const tableColumns: SelectOption[] = getColumnOptions(
+    columns,
+    selectedColumns,
+  );
+
   const activeFilters = calculateActiveFilters(filters);
 
   return (
@@ -77,9 +94,9 @@ export const ActiveTransactionsSection: React.FC<
           onClearFilters={onClearFilters}
         />
       </div>
-      <ActiveTransactionsTable
+      <SortedTable
         data={transactions}
-        selectedColumns={selectedColumns}
+        columns={shownColumns}
         sortSetting={sortSetting}
         onChangeSortSetting={onChangeSortSetting}
         renderNoResult={

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx

@@ -9,34 +9,22 @@
 // licenses/APL.txt.
 
 import React from "react";
-import {
-  SortedTable,
-  ISortedTablePagination,
-  ColumnDescriptor,
-} from "../../sortedtable";
-import { SortSetting } from "../../sortedtable";
-import { ActiveTransaction, ExecutionType } from "../types";
-import { isSelectedColumn } from "../../columnsSelector/utils";
 import { Link } from "react-router-dom";
+import { isSelectedColumn } from "../../columnsSelector/utils";
+import { ColumnDescriptor } from "../../sortedtable";
 import {
-  getLabel,
-  executionsTableTitles,
-  ExecutionsColumn,
   activeTransactionColumnsFromCommon,
+  ExecutionsColumn,
+  executionsTableTitles,
+  getLabel,
 } from "../execTableCommon";
+import { ActiveTransaction, ExecutionType } from "../types";
 
-interface ActiveTransactionsTable {
-  data: ActiveTransaction[];
-  sortSetting: SortSetting;
-  onChangeSortSetting: (ss: SortSetting) => void;
-  pagination: ISortedTablePagination;
-  renderNoResult?: React.ReactNode;
-  selectedColumns: string[];
-}
-
-export function makeActiveTransactionsColumns(): ColumnDescriptor<ActiveTransaction>[] {
+export function makeActiveTransactionsColumns(
+  isCockroachCloud: boolean,
+): ColumnDescriptor<ActiveTransaction>[] {
   const execType: ExecutionType = "transaction";
-  const columns: ColumnDescriptor<ActiveTransaction>[] = [
+  return [
     activeTransactionColumnsFromCommon.executionID,
     {
       name: "mostRecentStatement",
@@ -51,7 +39,9 @@ export function makeActiveTransactionsColumns(): ColumnDescriptor<ActiveTransact
     activeTransactionColumnsFromCommon.status,
     activeTransactionColumnsFromCommon.startTime,
     activeTransactionColumnsFromCommon.elapsedTime,
-    activeTransactionColumnsFromCommon.timeSpentWaiting,
+    !isCockroachCloud
+      ? activeTransactionColumnsFromCommon.timeSpentWaiting
+      : null,
     {
       name: "statementCount",
       title: executionsTableTitles.statementCount(execType),
@@ -65,33 +55,18 @@ export function makeActiveTransactionsColumns(): ColumnDescriptor<ActiveTransact
       sort: (item: ActiveTransaction) => item.retries,
     },
     activeTransactionColumnsFromCommon.applicationName,
-  ];
-  return columns;
+  ].filter(col => col != null);
 }
 
 export function getColumnOptions(
+  columns: ColumnDescriptor<ActiveTransaction>[],
   selectedColumns: string[] | null,
 ): { label: string; value: string; isSelected: boolean }[] {
-  return makeActiveTransactionsColumns()
+  return columns
     .filter(col => !col.alwaysShow)
     .map(col => ({
       value: col.name,
       label: getLabel(col.name as ExecutionsColumn, "transaction"),
       isSelected: isSelectedColumn(selectedColumns, col),
     }));
 }
-
-export const ActiveTransactionsTable: React.FC<
-  ActiveTransactionsTable
-> = props => {
-  const { selectedColumns, ...rest } = props;
-  const columns = makeActiveTransactionsColumns().filter(col =>
-    isSelectedColumn(selectedColumns, col),
-  );
-
-  return (
-    <SortedTable columns={columns} className="statements-table" {...rest} />
-  );
-};
-
-ActiveTransactionsTable.defaultProps = {};

pkg/ui/workspaces/cluster-ui/src/contexts/cockroachCloudContext.tsx

@@ -0,0 +1,13 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import { createContext } from "react";
+
+export const CockroachCloudContext = createContext<boolean>(true);

pkg/ui/workspaces/cluster-ui/src/contexts/index.ts

@@ -0,0 +1,11 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+export * from "./cockroachCloudContext";

pkg/ui/workspaces/cluster-ui/src/index.ts

@@ -51,3 +51,4 @@ export * from "./timeScaleDropdown";
 export * from "./activeExecutions";
 export * from "./graphs";
 export * from "./selectors";
+export * from "./contexts";