cluster-ui: add active stmts and txns pages for CC

This commit adds the active statements and active transactions
pages required by cockroach cloud. The components created
in this commit are intended for use in `managed-service`.

Previously, we poll for updated sessions informaation every
30 minutes. This commit changes the frequency to every 10s.

Release note: None

pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.selectors.ts

@@ -0,0 +1,30 @@
+// 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 { createSelector } from "reselect";
+import { AppState } from "src";
+import { match, RouteComponentProps } from "react-router-dom";
+import { getMatchParamByName } from "src/util/query";
+import { executionIdAttr } from "../util/constants";
+import { getActiveStatementsFromSessions } from "../activeExecutions/activeStatementUtils";
+
+export const selectActiveStatement = createSelector(
+  (_: AppState, props: RouteComponentProps) => props.match,
+  (state: AppState) => state.adminUI.sessions,
+  (match: match, response) => {
+    if (!response.data) return null;
+
+    const executionID = getMatchParamByName(match, executionIdAttr);
+    return getActiveStatementsFromSessions(
+      response.data,
+      response.lastUpdated,
+    ).find(stmt => stmt.executionID === executionID);
+  },
+);

pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetailsConnected.tsx

@@ -0,0 +1,43 @@
+// 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 { RouteComponentProps, withRouter } from "react-router-dom";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { actions as sessionsActions } from "src/store/sessions";
+import { AppState } from "../store";
+import {
+  ActiveStatementDetails,
+  ActiveStatementDetailsDispatchProps,
+} from "./activeStatementDetails";
+import { selectActiveStatement } from "./activeStatementDetails.selectors";
+import { ActiveStatementDetailsStateProps } from ".";
+
+// For tenant cases, we don't show information about node, regions and
+// diagnostics.
+const mapStateToProps = (
+  state: AppState,
+  props: RouteComponentProps,
+): ActiveStatementDetailsStateProps => {
+  return {
+    statement: selectActiveStatement(state, props),
+    match: props.match,
+  };
+};
+
+const mapDispatchToProps = (
+  dispatch: Dispatch,
+): ActiveStatementDetailsDispatchProps => ({
+  refreshSessions: () => dispatch(sessionsActions.refresh()),
+});
+
+export const ActiveStatementDetailsPageConnected = withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(ActiveStatementDetails),
+);

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

@@ -14,3 +14,4 @@ export * from "./diagnostics/diagnosticsUtils";
 export * from "./planView";
 export * from "./statementDetailsConnected";
 export * from "./activeStatementDetails";
+export * from "./activeStatementDetailsConnected";

pkg/ui/workspaces/cluster-ui/src/statementsPage/activeStatementsPage.selectors.ts

@@ -0,0 +1,90 @@
+// 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 { createSelector } from "reselect";
+import { getActiveStatementsFromSessions } from "../activeExecutions/activeStatementUtils";
+import { localStorageSelector } from "./statementsPage.selectors";
+import {
+  ActiveStatementFilters,
+  ActiveStatementsViewDispatchProps,
+  ActiveStatementsViewStateProps,
+  AppState,
+  SortSetting,
+} from "src";
+import { actions as sessionsActions } from "src/store/sessions";
+import { actions as localStorageActions } from "src/store/localStorage";
+import { Dispatch } from "redux";
+
+export const selectActiveStatements = createSelector(
+  (state: AppState) => state.adminUI.sessions,
+  response => {
+    if (!response.data) return [];
+
+    return getActiveStatementsFromSessions(response.data, response.lastUpdated);
+  },
+);
+
+export const selectSortSetting = (state: AppState): SortSetting =>
+  localStorageSelector(state)["sortSetting/ActiveStatementsPage"];
+
+export const selectFilters = (state: AppState): ActiveStatementFilters =>
+  localStorageSelector(state)["filters/ActiveStatementsPage"];
+
+const selectLocalStorageColumns = (state: AppState) => {
+  const localStorage = localStorageSelector(state);
+  return localStorage["showColumns/ActiveStatementsPage"];
+};
+
+export const selectColumns = createSelector(
+  selectLocalStorageColumns,
+  value => {
+    if (value == null) return null;
+
+    return value.split(",").map(col => col.trim());
+  },
+);
+
+export const mapStateToActiveStatementsPageProps = (
+  state: AppState,
+): ActiveStatementsViewStateProps => ({
+  statements: selectActiveStatements(state),
+  sessionsError: state.adminUI.sessions.lastError,
+  selectedColumns: selectColumns(state),
+  sortSetting: selectSortSetting(state),
+  filters: selectFilters(state),
+});
+
+export const mapDispatchToActiveStatementsPageProps = (
+  dispatch: Dispatch,
+): ActiveStatementsViewDispatchProps => ({
+  refreshSessions: () => dispatch(sessionsActions.refresh()),
+  onColumnsSelect: columns => {
+    dispatch(
+      localStorageActions.update({
+        key: "showColumns/ActiveStatementsPage",
+        value: columns.join(","),
+      }),
+    );
+  },
+  onFiltersChange: (filters: ActiveStatementFilters) =>
+    dispatch(
+      localStorageActions.update({
+        key: "filters/ActiveStatementsPage",
+        value: filters,
+      }),
+    ),
+  onSortChange: (ss: SortSetting) =>
+    dispatch(
+      localStorageActions.update({
+        key: "sortSetting/ActiveStatementsPage",
+        value: ss,
+      }),
+    ),
+});