ui: Populate database filter dropdown in stmts page with `SHOW DATABA…

…SES`

sql-over-http call

Fixes: #70461.

Previously, the databases filter dropdown was populated by the
`StatementsResponse` API call. This would result in some databases for
which we do not receive any stmts to be ignored. According to above
issue, the database filter-drop down should always be populated with
cluster databases even when there are no statements or transactions for
them. This commit populates the database filter dropdown using the
`getDatabasesList()` API call which itself executes the `SHOW DATABASES`
SQL query.

Release note (ui change): The databases filter dropdown in the stmts
page now uses the `getDatabasesList()` API call, resulting in all
cluster databases showing up.

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts

@@ -929,6 +929,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
   isTenant: false,
   hasViewActivityRedactedRole: false,
   dismissAlertMessage: noop,
+  refreshDatabases: noop,
   refreshStatementDiagnosticsRequests: noop,
   refreshStatements: noop,
   refreshUserSQLRoles: noop,

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

@@ -32,6 +32,7 @@ import { AggregateStatistics } from "../statementsTable";
 import { sqlStatsSelector } from "../store/sqlStats/sqlStats.selector";
 import { SQLStatsState } from "../store/sqlStats";
 import { localStorageSelector } from "../store/utils/selectors";
+import { databasesListSelector } from "src/store/databasesList/databasesList.selectors";
 
 type ICollectedStatementStatistics =
   cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics;
@@ -86,26 +87,17 @@ export const selectApps = createSelector(sqlStatsSelector, sqlStatsState => {
     .concat(Object.keys(apps).sort());
 });
 
-// selectDatabases returns the array of all databases with statement statistics present
-// in the data.
-export const selectDatabases = createSelector(
-  sqlStatsSelector,
-  sqlStatsState => {
-    if (!sqlStatsState.data) {
-      return [];
-    }
+// selectDatabases returns the array of all databases in the cluster,
+// regardless of whether they have statement statistics present in the data.
+export const selectDatabases = createSelector(databasesListSelector, state => {
+  if (!state.data) {
+    return [];
+  }
 
-    return Array.from(
-      new Set(
-        sqlStatsState.data.statements.map(s =>
-          s.key.key_data.database ? s.key.key_data.database : unset,
-        ),
-      ),
-    )
-      .filter((dbName: string) => dbName !== null && dbName.length > 0)
-      .sort();
-  },
-);
+  return state.data.databases
+    .filter((dbName: string) => dbName !== null && dbName.length > 0)
+    .sort();
+});
 
 // selectTotalFingerprints returns the count of distinct statement fingerprints
 // present in the data.

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -81,7 +81,9 @@ import { isSelectedColumn } from "src/columnsSelector/utils";
 import { StatementViewType } from "./statementPageTypes";
 import moment from "moment";
 import {
+  databasesRequest,
   InsertStmtDiagnosticRequest,
+  SqlExecutionRequest,
   StatementDiagnosticsReport,
 } from "../api";
 
@@ -94,6 +96,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
 // provide convenient definitions for `mapDispatchToProps`, `mapStateToProps` and props that
 // have to be provided by parent component.
 export interface StatementsPageDispatchProps {
+  refreshDatabases: (req: SqlExecutionRequest) => void;
   refreshStatements: (req: StatementsRequest) => void;
   refreshStatementDiagnosticsRequests: () => void;
   refreshNodes: () => void;
@@ -313,6 +316,11 @@ export class StatementsPage extends React.Component<
     this.resetPolling(this.props.timeScale.key);
   };
 
+  refreshDatabases = (): void => {
+    this.props.refreshDatabases(databasesRequest);
+    this.resetPolling(this.props.timeScale.key);
+  };
+
   resetSQLStats = (): void => {
     const req = statementsRequestFromProps(this.props);
     this.props.resetSQLStats(req);
@@ -342,6 +350,8 @@ export class StatementsPage extends React.Component<
       );
     }
 
+    this.refreshDatabases();
+
     this.props.refreshUserSQLRoles();
     if (!this.props.isTenant) {
       this.props.refreshNodes();

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx

@@ -17,6 +17,7 @@ import { actions as statementDiagnosticsActions } from "src/store/statementDiagn
 import { actions as analyticsActions } from "src/store/analytics";
 import { actions as localStorageActions } from "src/store/localStorage";
 import { actions as sqlStatsActions } from "src/store/sqlStats";
+import { actions as databasesListActions } from "src/store/databasesList";
 import { actions as nodesActions } from "../store/nodes";
 import {
   StatementsPageDispatchProps,
@@ -57,6 +58,7 @@ import {
 } from "./recentStatementsPage.selectors";
 import {
   InsertStmtDiagnosticRequest,
+  SqlExecutionRequest,
   StatementDiagnosticsReport,
 } from "../api";
 
@@ -100,6 +102,8 @@ export const ConnectedStatementsPage = withRouter(
     }),
     (dispatch: Dispatch) => ({
       fingerprintsPageProps: {
+        refreshDatabases: (req: SqlExecutionRequest) =>
+          dispatch(databasesListActions.refresh(req)),
         refreshStatements: (req: StatementsRequest) =>
           dispatch(sqlStatsActions.refresh(req)),
         onTimeScaleChange: (ts: TimeScale) => {

pkg/ui/workspaces/cluster-ui/src/store/databasesList/databasesList.reducers.ts

@@ -0,0 +1,47 @@
+// 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 { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { DatabasesListResponse } from "src/api";
+import { DOMAIN_NAME } from "../utils";
+
+import { SqlExecutionRequest } from "../../api/sqlApi";
+
+export type DatabasesListState = {
+  data: DatabasesListResponse;
+  lastError: Error;
+  valid: boolean;
+};
+
+const initialState: DatabasesListState = {
+  data: null,
+  lastError: null,
+  valid: true,
+};
+
+const databasesListSlice = createSlice({
+  name: `${DOMAIN_NAME}/databasesList`,
+  initialState,
+  reducers: {
+    received: (state, action: PayloadAction<DatabasesListResponse>) => {
+      state.data = action.payload;
+      state.valid = true;
+      state.lastError = null;
+    },
+    failed: (state, action: PayloadAction<Error>) => {
+      state.valid = false;
+      state.lastError = action.payload;
+    },
+    refresh: (_, action: PayloadAction<SqlExecutionRequest>) => {},
+    request: (_, action: PayloadAction<SqlExecutionRequest>) => {},
+  },
+});
+
+export const { reducer, actions } = databasesListSlice;

pkg/ui/workspaces/cluster-ui/src/store/databasesList/databasesList.saga.ts

@@ -0,0 +1,34 @@
+// 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 { all, call, put, takeLatest } from "redux-saga/effects";
+
+import { actions } from "./databasesList.reducers";
+import { getDatabasesList } from "src/api";
+
+export function* refreshDatabasesListSaga() {
+  yield put(actions.request());
+}
+
+export function* requestDatabasesListSaga(): any {
+  try {
+    const result = yield call(getDatabasesList);
+    yield put(actions.received(result));
+  } catch (e) {
+    yield put(actions.failed(e));
+  }
+}
+
+export function* databasesListSaga() {
+  yield all([
+    takeLatest(actions.refresh, refreshDatabasesListSaga),
+    takeLatest(actions.request, requestDatabasesListSaga),
+  ]);
+}

pkg/ui/workspaces/cluster-ui/src/store/databasesList/databasesList.selectors.ts

@@ -0,0 +1,17 @@
+// 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 { adminUISelector } from "../utils/selectors";
+
+export const databasesListSelector = createSelector(
+  adminUISelector,
+  adminUiState => adminUiState.databasesList,
+);

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

@@ -0,0 +1,12 @@
+// 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 "./databasesList.reducers";
+export * from "./databasesList.saga";

pkg/ui/workspaces/cluster-ui/src/store/reducers.ts

@@ -15,6 +15,10 @@ import {
   ClusterLocksReqState,
   reducer as clusterLocks,
 } from "./clusterLocks/clusterLocks.reducer";
+import {
+  DatabasesListState,
+  reducer as databasesList,
+} from "./databasesList/databasesList.reducers";
 import {
   IndexStatsReducerState,
   reducer as indexStats,
@@ -71,6 +75,7 @@ export type AdminUiState = {
   jobs: JobsState;
   job: JobState;
   clusterLocks: ClusterLocksReqState;
+  databasesList: DatabasesListState;
   transactionInsights: TransactionInsightsState;
   transactionInsightDetails: TransactionInsightDetailsCachedState;
   executionInsights: ExecutionInsightsState;
@@ -98,6 +103,7 @@ export const reducers = combineReducers<AdminUiState>({
   jobs,
   job,
   clusterLocks,
+  databasesList,
   schemaInsights,
 });
 

pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx

@@ -15,6 +15,7 @@ import { RouteComponentProps, withRouter } from "react-router-dom";
 import * as protos from "src/js/protos";
 import {
   refreshNodes,
+  refreshDatabases,
   refreshStatementDiagnosticsRequests,
   refreshStatements,
   refreshUserSQLRoles,
@@ -217,21 +218,16 @@ export const selectApps = createSelector(
   },
 );
 
-// selectDatabases returns the array of all databases with statement statistics present
-// in the data.
+// selectDatabases returns the array of all databases in the cluster,
+// regardless of whether they have statement statistics present in the data.
 export const selectDatabases = createSelector(
-  (state: AdminUIState) => state.cachedData.statements,
-  (state: CachedDataReducerState<StatementsResponseMessage>) => {
+  (state: AdminUIState) => state.cachedData.databases,
+  (state: CachedDataReducerState<clusterUiApi.DatabasesListResponse>) => {
     if (!state.data) {
       return [];
     }
-    return Array.from(
-      new Set(
-        state.data.statements.map(s =>
-          s.key.key_data.database ? s.key.key_data.database : unset,
-        ),
-      ),
-    )
+
+    return state.data.databases
       .filter((dbName: string) => dbName !== null && dbName.length > 0)
       .sort();
   },
@@ -287,6 +283,7 @@ export const searchLocalSetting = new LocalSetting(
 );
 
 const fingerprintsPageActions = {
+  refreshDatabases,
   refreshStatements,
   onTimeScaleChange: setGlobalTimeScaleAction,
   refreshStatementDiagnosticsRequests,