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

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";