ui: add internal app filter to active statements and transactions pages

This commit adds a single internal app filter option on to the
Active Statements and Active Transactions pages. Active
statements and transactions run by internal apps are no longer
displayed by default.

Release note (ui change): The Active Statements and Active
Transactions pages now have a single filter option for internal
apps. These pages no longer display internal statements and transactions
by default.

pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementUtils.ts

@@ -25,13 +25,37 @@ export const ACTIVE_STATEMENT_SEARCH_PARAM = "q";
 export function filterActiveStatements(
   statements: ActiveStatement[],
   filters: ActiveStatementFilters,
+  internalAppNamePrefix: string,
   search?: string,
 ): ActiveStatement[] {
   if (statements == null) return [];
 
-  let filteredStatements = statements.filter(
-    stmt => filters.app === "" || stmt.application === filters.app,
-  );
+  let filteredStatements = statements;
+
+  const isInternal = (statement: ActiveStatement) =>
+    statement.application.startsWith(internalAppNamePrefix);
+  if (filters.app) {
+    filteredStatements = filteredStatements.filter(
+      (statement: ActiveStatement) => {
+        const apps = filters.app.toString().split(",");
+        let showInternal = false;
+        if (apps.includes(internalAppNamePrefix)) {
+          showInternal = true;
+        }
+        if (apps.includes("(unset)")) {
+          apps.push("");
+        }
+        return (
+          (showInternal && isInternal(statement)) ||
+          apps.includes(statement.application)
+        );
+      },
+    );
+  } else {
+    filteredStatements = filteredStatements.filter(
+      statement => !isInternal(statement),
+    );
+  }
 
   if (search) {
     filteredStatements = filteredStatements.filter(stmt =>
@@ -82,27 +106,51 @@ export function getActiveStatementsFromSessions(
 
 export function getAppsFromActiveStatements(
   statements: ActiveStatement[] | null,
+  internalAppNamePrefix: string,
 ): string[] {
   if (statements == null) return [];
-  return Array.from(
-    statements.reduce(
-      (apps, stmt) => apps.add(stmt.application),
-      new Set<string>(),
-    ),
+
+  const uniqueAppNames = new Set(
+    statements.map(s => {
+      if (s.application.startsWith(internalAppNamePrefix)) {
+        return internalAppNamePrefix;
+      }
+      return s.application ? s.application : "(unset)";
+    }),
   );
+
+  return Array.from(uniqueAppNames).sort();
 }
 
 export function filterActiveTransactions(
   txns: ActiveTransaction[] | null,
   filters: ActiveTransactionFilters,
+  internalAppNamePrefix: string,
   search?: string,
 ): ActiveTransaction[] {
   if (txns == null) return [];
 
   let filteredTxns = txns;
 
+  const isInternal = (txn: ActiveTransaction) =>
+    txn.application.startsWith(internalAppNamePrefix);
   if (filters.app) {
-    filteredTxns = filteredTxns.filter(txn => txn.application === filters.app);
+    filteredTxns = filteredTxns.filter((txn: ActiveTransaction) => {
+      const apps = filters.app.toString().split(",");
+      let showInternal = false;
+      if (apps.includes(internalAppNamePrefix)) {
+        showInternal = true;
+      }
+      if (apps.includes("(unset)")) {
+        apps.push("");
+      }
+
+      return (
+        (showInternal && isInternal(txn)) || apps.includes(txn.application)
+      );
+    });
+  } else {
+    filteredTxns = filteredTxns.filter(txn => !isInternal(txn));
   }
 
   if (search) {
@@ -116,12 +164,20 @@ export function filterActiveTransactions(
 
 export function getAppsFromActiveTransactions(
   txns: ActiveTransaction[],
+  internalAppNamePrefix: string,
 ): string[] {
   if (txns == null) return [];
 
-  return Array.from(
-    txns.reduce((apps, txn) => apps.add(txn.application), new Set<string>()),
+  const uniqueAppNames = new Set(
+    txns.map(t => {
+      if (t.application.startsWith(internalAppNamePrefix)) {
+        return internalAppNamePrefix;
+      }
+      return t.application ? t.application : "(unset)";
+    }),
   );
+
+  return Array.from(uniqueAppNames).sort();
 }
 
 export function getActiveTransactionsFromSessions(

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

@@ -31,6 +31,14 @@ export const selectActiveStatements = createSelector(
   },
 );
 
+export const selectAppName = createSelector(
+  (state: AppState) => state.adminUI.sessions,
+  response => {
+    if (!response.data) return null;
+    return response.data.internal_app_name_prefix;
+  },
+);
+
 export const selectSortSetting = (state: AppState): SortSetting =>
   localStorageSelector(state)["sortSetting/ActiveStatementsPage"];
 
@@ -59,6 +67,7 @@ export const mapStateToActiveStatementsPageProps = (
   selectedColumns: selectColumns(state),
   sortSetting: selectSortSetting(state),
   filters: selectFilters(state),
+  internalAppNamePrefix: selectAppName(state),
 });
 
 export const mapDispatchToActiveStatementsPageProps = (

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

@@ -53,6 +53,7 @@ export type ActiveStatementsViewStateProps = {
   sortSetting: SortSetting;
   sessionsError: Error | null;
   filters: ActiveStatementFilters;
+  internalAppNamePrefix: string;
 };
 
 export type ActiveStatementsViewProps = ActiveStatementsViewStateProps &
@@ -68,6 +69,7 @@ export const ActiveStatementsView: React.FC<ActiveStatementsViewProps> = ({
   statements,
   sessionsError,
   filters,
+  internalAppNamePrefix,
 }: ActiveStatementsViewProps) => {
   const [pagination, setPagination] = useState<ISortedTablePagination>({
     current: 1,
@@ -152,12 +154,13 @@ export const ActiveStatementsView: React.FC<ActiveStatementsViewProps> = ({
   const clearSearch = () => onSubmitSearch("");
   const clearFilters = () => onSubmitFilters({ app: inactiveFiltersState.app });
 
-  const apps = getAppsFromActiveStatements(statements);
+  const apps = getAppsFromActiveStatements(statements, internalAppNamePrefix);
   const countActiveFilters = calculateActiveFilters(filters);
 
   const filteredStatements = filterActiveStatements(
     statements,
     filters,
+    internalAppNamePrefix,
     search,
   );
 

pkg/ui/workspaces/cluster-ui/src/transactionsPage/activeTransactionsPage.selectors.tsx

@@ -11,6 +11,7 @@
 import { createSelector } from "reselect";
 import { getActiveTransactionsFromSessions } from "../activeExecutions/activeStatementUtils";
 import { localStorageSelector } from "src/statementsPage/statementsPage.selectors";
+import { selectAppName } from "src/statementsPage/activeStatementsPage.selectors";
 import {
   ActiveTransactionFilters,
   ActiveTransactionsViewDispatchProps,
@@ -62,6 +63,7 @@ export const mapStateToActiveTransactionsPageProps = (
   selectedColumns: selectColumns(state),
   sortSetting: selectSortSetting(state),
   filters: selectFilters(state),
+  internalAppNamePrefix: selectAppName(state),
 });
 
 export const mapDispatchToActiveTransactionsPageProps = (

pkg/ui/workspaces/cluster-ui/src/transactionsPage/activeTransactionsView.tsx

@@ -53,6 +53,7 @@ export type ActiveTransactionsViewStateProps = {
   sessionsError: Error | null;
   filters: ActiveTransactionFilters;
   sortSetting: SortSetting;
+  internalAppNamePrefix: string;
 };
 
 export type ActiveTransactionsViewProps = ActiveTransactionsViewStateProps &
@@ -70,6 +71,7 @@ export const ActiveTransactionsView: React.FC<ActiveTransactionsViewProps> = ({
   transactions,
   sessionsError,
   filters,
+  internalAppNamePrefix,
 }: ActiveTransactionsViewProps) => {
   const [pagination, setPagination] = useState<ISortedTablePagination>({
     current: 1,
@@ -152,12 +154,16 @@ export const ActiveTransactionsView: React.FC<ActiveTransactionsViewProps> = ({
   const clearSearch = () => onSubmitSearch("");
   const clearFilters = () => onSubmitFilters({ app: inactiveFiltersState.app });
 
-  const apps = getAppsFromActiveTransactions(transactions);
+  const apps = getAppsFromActiveTransactions(
+    transactions,
+    internalAppNamePrefix,
+  );
   const countActiveFilters = calculateActiveFilters(filters);
 
   const filteredTransactions = filterActiveTransactions(
     transactions,
     filters,
+    internalAppNamePrefix,
     search,
   );
   return (

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

@@ -32,6 +32,16 @@ const selectActiveStatements = createSelector(
   },
 );
 
+export const selectAppName = createSelector(
+  (state: AdminUIState) => state.cachedData.sessions,
+  (state?: CachedDataReducerState<SessionsResponseMessage>) => {
+    if (!state.data) {
+      return null;
+    }
+    return state.data.internal_app_name_prefix;
+  },
+);
+
 const selectedColumnsLocalSetting = new LocalSetting<
   AdminUIState,
   string | null
@@ -62,6 +72,7 @@ export const mapStateToActiveStatementViewProps = (state: AdminUIState) => ({
   sortSetting: sortSettingLocalSetting.selector(state),
   statements: selectActiveStatements(state),
   sessionsError: state.cachedData?.sessions.lastError,
+  internalAppNamePrefix: selectAppName(state),
 });
 
 export const activeStatementsViewActions = {

pkg/ui/workspaces/db-console/src/views/transactions/activeTransactionsSelectors.tsx

@@ -21,6 +21,7 @@ import { LocalSetting } from "src/redux/localsettings";
 import { AdminUIState } from "src/redux/state";
 import { SessionsResponseMessage } from "src/util/api";
 import { refreshSessions } from "src/redux/apiReducers";
+import { selectAppName } from "src/views/statements/activeStatementsSelectors";
 
 const selectActiveTransactions = createSelector(
   (state: AdminUIState) => state.cachedData.sessions,
@@ -62,6 +63,7 @@ export const mapStateToActiveTransactionsPageProps = (state: AdminUIState) => ({
   sessionsError: state.cachedData?.sessions.lastError,
   filters: filtersLocalSetting.selector(state),
   sortSetting: sortSettingLocalSetting.selector(state),
+  internalAppNamePrefix: selectAppName(state),
 });
 
 export const activeTransactionsPageActions = {