From 67043e51967408318383b26cc24baec227277c31 Mon Sep 17 00:00:00 2001 From: Xin Hao Zhang Date: Tue, 16 Aug 2022 16:51:49 -0400 Subject: [PATCH] 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 --- .../activeStatementsSection.tsx | 27 +- .../activeStatementsTable.tsx | 50 +- .../activeTransactionsSection.tsx | 27 +- .../activeTransactionsTable.tsx | 57 +- .../src/contexts/cockroachCloudContext.tsx | 13 + .../cluster-ui/src/contexts/index.ts | 11 + pkg/ui/workspaces/cluster-ui/src/index.ts | 1 + pkg/ui/workspaces/db-console/src/app.tsx | 609 +++++++++--------- 8 files changed, 409 insertions(+), 386 deletions(-) create mode 100644 pkg/ui/workspaces/cluster-ui/src/contexts/cockroachCloudContext.tsx create mode 100644 pkg/ui/workspaces/cluster-ui/src/contexts/index.ts diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsSection.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsSection.tsx index b934f150b3d7..33a1bda7e472 100644 --- a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsSection.tsx +++ b/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} /> - void; - pagination: ISortedTablePagination; - renderNoResult?: React.ReactNode; - selectedColumns: string[]; -} +import { ActiveStatement } from "../types"; -export function makeActiveStatementsColumns(): ColumnDescriptor[] { +export function makeActiveStatementsColumns( + isCockroachCloud: boolean, +): ColumnDescriptor[] { return [ activeStatementColumnsFromCommon.executionID, { @@ -50,15 +38,18 @@ export function makeActiveStatementsColumns(): ColumnDescriptor activeStatementColumnsFromCommon.status, activeStatementColumnsFromCommon.startTime, activeStatementColumnsFromCommon.elapsedTime, - activeStatementColumnsFromCommon.timeSpentWaiting, + !isCockroachCloud + ? activeStatementColumnsFromCommon.timeSpentWaiting + : null, activeStatementColumnsFromCommon.applicationName, - ]; + ].filter(col => col != null); } export function getColumnOptions( + columns: ColumnDescriptor[], selectedColumns: string[] | null, ): { label: string; value: string; isSelected: boolean }[] { - return makeActiveStatementsColumns() + return columns .filter(col => !col.alwaysShow) .map(col => ({ value: col.name, @@ -66,16 +57,3 @@ export function getColumnOptions( isSelected: isSelectedColumn(selectedColumns, col), })); } - -export const ActiveStatementsTable: React.FC = props => { - const { selectedColumns, ...rest } = props; - const columns = makeActiveStatementsColumns().filter(col => - isSelectedColumn(selectedColumns, col), - ); - - return ( - - ); -}; - -ActiveStatementsTable.defaultProps = {}; diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsSection.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsSection.tsx index a287ad5f6a6a..d97b0559a0f4 100644 --- a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsSection.tsx +++ b/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} /> - void; - pagination: ISortedTablePagination; - renderNoResult?: React.ReactNode; - selectedColumns: string[]; -} - -export function makeActiveTransactionsColumns(): ColumnDescriptor[] { +export function makeActiveTransactionsColumns( + isCockroachCloud: boolean, +): ColumnDescriptor[] { const execType: ExecutionType = "transaction"; - const columns: ColumnDescriptor[] = [ + return [ activeTransactionColumnsFromCommon.executionID, { name: "mostRecentStatement", @@ -51,7 +39,9 @@ export function makeActiveTransactionsColumns(): ColumnDescriptor item.retries, }, activeTransactionColumnsFromCommon.applicationName, - ]; - return columns; + ].filter(col => col != null); } export function getColumnOptions( + columns: ColumnDescriptor[], selectedColumns: string[] | null, ): { label: string; value: string; isSelected: boolean }[] { - return makeActiveTransactionsColumns() + return columns .filter(col => !col.alwaysShow) .map(col => ({ value: col.name, @@ -80,18 +70,3 @@ export function getColumnOptions( isSelected: isSelectedColumn(selectedColumns, col), })); } - -export const ActiveTransactionsTable: React.FC< - ActiveTransactionsTable -> = props => { - const { selectedColumns, ...rest } = props; - const columns = makeActiveTransactionsColumns().filter(col => - isSelectedColumn(selectedColumns, col), - ); - - return ( - - ); -}; - -ActiveTransactionsTable.defaultProps = {}; diff --git a/pkg/ui/workspaces/cluster-ui/src/contexts/cockroachCloudContext.tsx b/pkg/ui/workspaces/cluster-ui/src/contexts/cockroachCloudContext.tsx new file mode 100644 index 000000000000..05395c024679 --- /dev/null +++ b/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(true); diff --git a/pkg/ui/workspaces/cluster-ui/src/contexts/index.ts b/pkg/ui/workspaces/cluster-ui/src/contexts/index.ts new file mode 100644 index 000000000000..f252008a33d3 --- /dev/null +++ b/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"; diff --git a/pkg/ui/workspaces/cluster-ui/src/index.ts b/pkg/ui/workspaces/cluster-ui/src/index.ts index 798adcbf290c..551bc580787f 100644 --- a/pkg/ui/workspaces/cluster-ui/src/index.ts +++ b/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"; diff --git a/pkg/ui/workspaces/db-console/src/app.tsx b/pkg/ui/workspaces/db-console/src/app.tsx index 004ca0dda585..3350e588c704 100644 --- a/pkg/ui/workspaces/db-console/src/app.tsx +++ b/pkg/ui/workspaces/db-console/src/app.tsx @@ -79,6 +79,7 @@ import ActiveTransactionDetails from "./views/transactions/activeTransactionDeta import "styl/app.styl"; import { Tracez } from "src/views/tracez/tracez"; import InsightsOverviewPage from "src/views/insights/insightsOverview"; +import { CockroachCloudContext } from "@cockroachlabs/cluster-ui"; // NOTE: If you are adding a new path to the router, and that path contains any // components that are personally identifying information, you MUST update the @@ -101,322 +102,332 @@ export const App: React.FC = (props: AppProps) => { return ( - - {/* login */} - {createLoginRoute()} - {createLogoutRoute(store)} - - - - - {/* overview page */} - {visualizationRoutes()} + + + {/* login */} + {createLoginRoute()} + {createLogoutRoute(store)} + + + + + {/* overview page */} + {visualizationRoutes()} - {/* time series metrics */} - - - - - + {/* time series metrics */} + + + + + - {/* node details */} - - - + {/* node details */} + + + - {/* events & jobs */} - - - + {/* events & jobs */} + + + - {/* databases */} - - - - + {/* databases */} + + + + - - - - - - + + + + + + - {/* data distribution */} - + {/* data distribution */} + - {/* SQL activity */} - + {/* SQL activity */} + - {/* Active executions */} - + {/* Active executions */} + - + - {/* statement statistics */} - - - - - - - - - + {/* statement statistics */} + + + + + + + + + - {/* sessions */} - - + {/* sessions */} + + - {/* transactions */} - - - - {/* Insights */} - + {/* transactions */} + + + + {/* Insights */} + - {/* debug pages */} - - - - - - - + {/* debug pages */} + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - {/* hot ranges */} - - {/* old route redirects */} - - - - - - - + + + + + + + + + + + + + {/* hot ranges */} + + {/* old route redirects */} + + + + + + + - + - {/* 404 */} - - - - - + {/* 404 */} + + + + + + );