ui/cluster-ui: filter out txns from closed sessions

Previously, it was possible for the active transactions page
to show txns from closed sessions. The sessions API was
recently updated to return closed sessions, and it is
possible for the active_txn field in a closed session to be
populated. This commit filters  out the closed sessions when
retrieving active transactions.

Release note (bug fix): active transactions page no longer
shows transactions from closed sessions

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

@@ -13,6 +13,7 @@ import {
   SessionsResponse,
   ActiveTransaction,
   ActiveStatement,
+  SessionStatusType,
 } from "./types";
 import * as protos from "@cockroachlabs/crdb-protobuf-client";
 import moment from "moment";
@@ -185,6 +186,14 @@ describe("test activeStatementUtils", () => {
           client_address: "clientAddress2",
           active_queries: activeQueries,
         },
+        {
+          id: new Uint8Array(),
+          username: "foo",
+          status: SessionStatusType.CLOSED,
+          application_name: "application2",
+          client_address: "clientAddress2",
+          active_queries: activeQueries,
+        },
       ],
       errors: [],
       internal_app_name_prefix: "",
@@ -270,6 +279,15 @@ describe("test activeStatementUtils", () => {
           active_queries: [makeActiveQuery()],
           active_txn: txns[1],
         },
+        {
+          id: new Uint8Array(),
+          username: "foo",
+          status: SessionStatusType.CLOSED,
+          application_name: "closed_application",
+          client_address: "clientAddress2",
+          active_queries: [makeActiveQuery()],
+          active_txn: txns[1],
+        },
       ],
       errors: [],
       internal_app_name_prefix: "",
@@ -281,6 +299,9 @@ describe("test activeStatementUtils", () => {
       LAST_UPDATED,
     );
 
+    // Should filter out the txn from closed  session.
+    expect(activeTransactions.length).toBe(2);
+
     expect(activeTransactions.length).toBe(txns.length);
 
     activeTransactions.forEach((txn: ActiveTransaction, i) => {

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

@@ -17,6 +17,7 @@ import {
   ActiveStatementPhase,
   ExecutionStatus,
   ActiveTransactionFilters,
+  SessionStatusType,
 } from "./types";
 import { ActiveStatement, ActiveStatementFilters } from "./types";
 
@@ -54,6 +55,7 @@ export function getActiveStatementsFromSessions(
   const time = lastUpdated || moment.utc();
 
   sessionsResponse.sessions.forEach(session => {
+    if (session.status === SessionStatusType.CLOSED) return;
     session.active_queries.forEach(query => {
       activeQueries.push({
         executionID: query.id,
@@ -140,7 +142,10 @@ export function getActiveTransactionsFromSessions(
   });
 
   return sessionsResponse.sessions
-    .filter(session => session.active_txn)
+    .filter(
+      session =>
+        session.status !== SessionStatusType.CLOSED && session.active_txn,
+    )
     .map(session => {
       const activeTxn = session.active_txn;
 

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

@@ -17,8 +17,11 @@ export type SessionsResponse =
 export type ActiveStatementResponse =
   protos.cockroach.server.serverpb.ActiveQuery;
 export type ExecutionStatus = "Waiting" | "Executing" | "Preparing";
+
 export const ActiveStatementPhase =
   protos.cockroach.server.serverpb.ActiveQuery.Phase;
+export const SessionStatusType =
+  protos.cockroach.server.serverpb.Session.Status;
 
 export type ActiveStatement = {
   executionID: string;

pkg/ui/workspaces/db-console/src/views/sqlActivity/sqlActivityPage.tsx

@@ -11,7 +11,7 @@
 // All changes made on this file, should also be done on the equivalent
 // file on managed-service repo.
 
-import React from "react";
+import React, { useRef } from "react";
 import Helmet from "react-helmet";
 import { Tabs } from "antd";
 import "antd/lib/tabs/style";
@@ -20,7 +20,7 @@ import TransactionsPageConnected from "src/views/transactions/transactionsPage";
 import StatementsPageConnected from "src/views/statements/statementsPage";
 import { commonStyles, util } from "@cockroachlabs/cluster-ui";
 import { RouteComponentProps } from "react-router-dom";
-import { tabAttr } from "src/util/constants";
+import { tabAttr, viewAttr } from "src/util/constants";
 
 const { TabPane } = Tabs;
 
@@ -36,10 +36,22 @@ export const SQL_ACTIVITY_DEFAULT_TAB: SQLActivityTabType =
 const SQLActivityPage = (props: RouteComponentProps) => {
   const currentTab =
     util.queryByName(props.location, tabAttr) || SQLActivityTabType.Statements;
+  const currentView = util.queryByName(props.location, viewAttr);
+  const restoredStmtsViewType = useRef<string>(currentView);
 
   const onTabChange = (tabId: string): void => {
+    const params = new URLSearchParams({ tab: tabId });
+    if (tabId === SQLActivityTabType.Sessions) {
+      restoredStmtsViewType.current = currentView;
+    } else if (currentView || restoredStmtsViewType.current) {
+      // For stmts and txns pages, we want to keep the currently
+      // selected stmts view (historical fingerprint or active) on
+      // tab switch. If we're coming from the sessions tab, we
+      // restore the view.
+      params.set(viewAttr, currentView || restoredStmtsViewType.current);
+    }
     props.history.push({
-      search: new URLSearchParams({ tab: tabId }).toString(),
+      search: params.toString(),
     });
   };