ui: split txn and stmt fingerprints requests and storage

Previously, both the stmt and txns fingerprints
pages were using the same api response from the
/statements. This was because we need the stmts
response to build txns pages. Howevever having to
fetch both types of stats can slow down the request.
Now that we can specify the fetch_mode as part of
the request, we can split the 2 into their own api
calls and redux fields.

Epic: none
Part of: cockroachdb#97875

Release note: None

pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts

@@ -32,6 +32,12 @@ export type StatementDetailsResponseWithKey = {
   stmtResponse: StatementDetailsResponse;
   key: string;
 };
+
+export type SqlStatsResponse = cockroach.server.serverpb.StatementsResponse;
+
+const FetchStatsMode =
+  cockroach.server.serverpb.CombinedStatementsStatsRequest.StatsType;
+
 export type ErrorWithKey = {
   err: Error;
   key: string;
@@ -43,13 +49,32 @@ export const getCombinedStatements = (
   const queryStr = propsToQueryString({
     start: req.start.toInt(),
     end: req.end.toInt(),
+    "fetch_mode.stats_type": FetchStatsMode.StmtStatsOnly,
   });
   return fetchData(
     cockroach.server.serverpb.StatementsResponse,
     `${STATEMENTS_PATH}?${queryStr}`,
     null,
     null,
-    "30M",
+    "10M",
+  );
+};
+
+export const getFlushedTxnStatsApi = (
+  req: StatementsRequest,
+): Promise<SqlStatsResponse> => {
+  const queryStr = propsToQueryString({
+    start: req.start.toInt(),
+    end: req.end.toInt(),
+    combined: true,
+    "fetch_mode.stats_type": FetchStatsMode.TxnStatsOnly,
+  });
+  return fetchData(
+    cockroach.server.serverpb.StatementsResponse,
+    `${STATEMENTS_PATH}?${queryStr}`,
+    null,
+    null,
+    "10M",
   );
 };
 

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

@@ -14,6 +14,7 @@ import { actions } from "./localStorage.reducer";
 import { actions as sqlStatsActions } from "src/store/sqlStats";
 import { actions as stmtInsightActions } from "src/store/insights/statementInsights";
 import { actions as txnInsightActions } from "src/store/insights/transactionInsights";
+import { actions as txnStatsActions } from "src/store/transactionStats";
 
 export function* updateLocalStorageItemSaga(action: AnyAction) {
   const { key, value } = action.payload;
@@ -29,6 +30,7 @@ export function* updateTimeScale(action: AnyAction) {
     put(sqlStatsActions.invalidated()),
     put(stmtInsightActions.invalidated()),
     put(txnInsightActions.invalidated()),
+    put(txnStatsActions.invalidated()),
   ]);
 }
 

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

@@ -63,6 +63,7 @@ import {
   reducer as statementFingerprintInsights,
   StatementFingerprintInsightsCachedState,
 } from "./insights/statementFingerprintInsights";
+import { reducer as txnStats, TxnStatsState } from "./transactionStats";
 
 export type AdminUiState = {
   statementDiagnostics: StatementDiagnosticsState;
@@ -72,7 +73,8 @@ export type AdminUiState = {
   sessions: SessionsState;
   terminateQuery: TerminateQueryState;
   uiConfig: UIConfigState;
-  sqlStats: SQLStatsState;
+  statements: SQLStatsState;
+  transactions: TxnStatsState;
   sqlDetailsStats: SQLDetailsStatsReducerState;
   indexStats: IndexStatsReducerState;
   jobs: JobsState;
@@ -101,7 +103,8 @@ export const reducers = combineReducers<AdminUiState>({
   txnInsights,
   terminateQuery,
   uiConfig,
-  sqlStats,
+  statements: sqlStats,
+  transactions: txnStats,
   sqlDetailsStats,
   indexStats,
   jobs,

pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.reducer.ts

@@ -37,6 +37,8 @@ export type UpdateTimeScalePayload = {
   ts: TimeScale;
 };
 
+// This is actually statements only, despite the SQLStatsState name.
+// We can rename this in the future. Leaving it now to reduce backport surface area.
 const sqlStatsSlice = createSlice({
   name: `${DOMAIN_NAME}/sqlstats`,
   initialState,

pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.sagas.ts

@@ -20,6 +20,7 @@ import {
   actions as sqlStatsActions,
   UpdateTimeScalePayload,
 } from "./sqlStats.reducer";
+import { actions as txnStatsActions } from "../transactionStats";
 import { actions as sqlDetailsStatsActions } from "../statementDetails/statementDetails.reducer";
 
 export function* refreshSQLStatsSaga(action: PayloadAction<StatementsRequest>) {
@@ -54,6 +55,7 @@ export function* resetSQLStatsSaga() {
     yield all([
       put(sqlDetailsStatsActions.invalidateAll()),
       put(sqlStatsActions.invalidated()),
+      put(txnStatsActions.invalidated()),
     ]);
   } catch (e) {
     yield put(sqlStatsActions.failed(e));

pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.selector.ts

@@ -13,5 +13,5 @@ import { adminUISelector } from "../utils/selectors";
 
 export const sqlStatsSelector = createSelector(
   adminUISelector,
-  adminUiState => adminUiState?.sqlStats,
+  adminUiState => adminUiState?.statements,
 );

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

@@ -0,0 +1,12 @@
+// Copyright 2021 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 "./txnStats.reducer";
+export * from "./txnStats.sagas";

pkg/ui/workspaces/cluster-ui/src/store/transactionStats/txnStats.reducer.ts

@@ -0,0 +1,73 @@
+// Copyright 2021 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 { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import { DOMAIN_NAME } from "../utils";
+import { StatementsRequest } from "src/api/statementsApi";
+import { TimeScale } from "../../timeScaleDropdown";
+import moment from "moment";
+import { StatementsResponse } from "../sqlStats";
+
+export type TxnStatsData = cockroach.server.serverpb.IStatementsResponse;
+
+export type TxnStatsState = {
+  data: TxnStatsData;
+  inFlight: boolean;
+  lastError: Error;
+  valid: boolean;
+  lastUpdated: moment.Moment | null;
+};
+
+const initialState: TxnStatsState = {
+  data: null,
+  inFlight: false,
+  lastError: null,
+  valid: false,
+  lastUpdated: null,
+};
+
+export type UpdateTimeScalePayload = {
+  ts: TimeScale;
+};
+
+// This is actually statements only, despite the SQLStatsState name.
+// We can rename this in the future. Leaving it now to reduce backport surface area.
+const txnStatsSlice = createSlice({
+  name: `${DOMAIN_NAME}/txnStats`,
+  initialState,
+  reducers: {
+    received: (state, action: PayloadAction<StatementsResponse>) => {
+      state.inFlight = false;
+      state.data = action.payload;
+      state.valid = true;
+      state.lastError = null;
+      state.lastUpdated = moment.utc();
+    },
+    failed: (state, action: PayloadAction<Error>) => {
+      state.inFlight = false;
+      state.valid = false;
+      state.lastError = action.payload;
+      state.lastUpdated = moment.utc();
+    },
+    invalidated: state => {
+      state.inFlight = false;
+      state.valid = false;
+    },
+    refresh: (state, _: PayloadAction<StatementsRequest>) => {
+      state.inFlight = true;
+    },
+    request: (state, _: PayloadAction<StatementsRequest>) => {
+      state.inFlight = true;
+    },
+  },
+});
+
+export const { reducer, actions } = txnStatsSlice;

pkg/ui/workspaces/cluster-ui/src/store/transactionStats/txnStats.sagas.spec.ts

@@ -0,0 +1,100 @@
+// Copyright 2021 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 { expectSaga } from "redux-saga-test-plan";
+import {
+  EffectProviders,
+  StaticProvider,
+  throwError,
+} from "redux-saga-test-plan/providers";
+import * as matchers from "redux-saga-test-plan/matchers";
+import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+
+import { getFlushedTxnStatsApi } from "src/api/statementsApi";
+import { refreshTxnStatsSaga, requestTxnStatsSaga } from "./txnStats.sagas";
+import { actions, reducer, TxnStatsState } from "./txnStats.reducer";
+import Long from "long";
+import moment from "moment";
+
+const lastUpdated = moment();
+
+describe("txnStats sagas", () => {
+  let spy: jest.SpyInstance;
+  beforeAll(() => {
+    spy = jest.spyOn(moment, "utc").mockImplementation(() => lastUpdated);
+  });
+
+  afterAll(() => {
+    spy.mockRestore();
+  });
+
+  const payload = new cockroach.server.serverpb.StatementsRequest({
+    start: Long.fromNumber(1596816675),
+    end: Long.fromNumber(1596820675),
+    combined: true,
+  });
+  const txnStatsResponse = new cockroach.server.serverpb.StatementsResponse({
+    transactions: [
+      {
+        stats_data: { transaction_fingerprint_id: new Long(1) },
+      },
+      {
+        stats_data: { transaction_fingerprint_id: new Long(2) },
+      },
+    ],
+    last_reset: null,
+  });
+
+  const txnStatsAPIProvider: (EffectProviders | StaticProvider)[] = [
+    [matchers.call.fn(getFlushedTxnStatsApi), txnStatsResponse],
+  ];
+
+  describe("refreshTxnStatsSaga", () => {
+    it("dispatches request txnStats action", () => {
+      return expectSaga(refreshTxnStatsSaga, actions.request(payload))
+        .provide(txnStatsAPIProvider)
+        .put(actions.request(payload))
+        .run();
+    });
+  });
+
+  describe("requestTxnStatsSaga", () => {
+    it("successfully requests statements list", () => {
+      return expectSaga(requestTxnStatsSaga, actions.request(payload))
+        .provide(txnStatsAPIProvider)
+        .put(actions.received(txnStatsResponse))
+        .withReducer(reducer)
+        .hasFinalState<TxnStatsState>({
+          inFlight: false,
+          data: txnStatsResponse,
+          lastError: null,
+          valid: true,
+          lastUpdated,
+        })
+        .run();
+    });
+
+    it("returns error on failed request", () => {
+      const error = new Error("Failed request");
+      return expectSaga(requestTxnStatsSaga, actions.request(payload))
+        .provide([[matchers.call.fn(getFlushedTxnStatsApi), throwError(error)]])
+        .put(actions.failed(error))
+        .withReducer(reducer)
+        .hasFinalState<TxnStatsState>({
+          inFlight: false,
+          data: null,
+          lastError: error,
+          valid: false,
+          lastUpdated,
+        })
+        .run();
+    });
+  });
+});

pkg/ui/workspaces/cluster-ui/src/store/transactionStats/txnStats.sagas.ts

@@ -0,0 +1,41 @@
+// Copyright 2021 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 { PayloadAction } from "@reduxjs/toolkit";
+import { all, call, put, takeLatest } from "redux-saga/effects";
+import {
+  getFlushedTxnStatsApi,
+  StatementsRequest,
+} from "src/api/statementsApi";
+import { actions as txnStatsActions } from "./txnStats.reducer";
+
+export function* refreshTxnStatsSaga(
+  action: PayloadAction<StatementsRequest>,
+): Generator<unknown> {
+  yield put(txnStatsActions.request(action.payload));
+}
+
+export function* requestTxnStatsSaga(
+  action: PayloadAction<StatementsRequest>,
+): any {
+  try {
+    const result = yield call(getFlushedTxnStatsApi, action.payload);
+    yield put(txnStatsActions.received(result));
+  } catch (e) {
+    yield put(txnStatsActions.failed(e));
+  }
+}
+
+export function* txnStatsSaga(): any {
+  yield all([
+    takeLatest(txnStatsActions.refresh, refreshTxnStatsSaga),
+    takeLatest(txnStatsActions.request, requestTxnStatsSaga),
+  ]);
+}

pkg/ui/workspaces/cluster-ui/src/store/transactionStats/txnStats.selector.ts

@@ -0,0 +1,17 @@
+// Copyright 2021 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 txnStatsSelector = createSelector(
+  adminUISelector,
+  adminUiState => adminUiState?.transactions,
+);

pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetailsConnected.tsx

@@ -16,6 +16,7 @@ import { Dispatch } from "redux";
 import { AppState, uiConfigActions } from "src/store";
 import { actions as nodesActions } from "../store/nodes";
 import { actions as sqlStatsActions } from "src/store/sqlStats";
+import { actions as txnStatsActions } from "src/store/transactionStats";
 import { TxnInsightsRequest } from "../api";
 import {
   actions as transactionInsights,
@@ -44,7 +45,7 @@ import { TimeScale } from "../timeScaleDropdown";
 import { actions as analyticsActions } from "../store/analytics";
 
 export const selectTransaction = createSelector(
-  (state: AppState) => state.adminUI?.sqlStats,
+  (state: AppState) => state.adminUI?.transactions,
   (_state: AppState, props: RouteComponentProps) => props,
   (transactionState, props) => {
     const transactions = transactionState.data?.transactions;
@@ -106,7 +107,7 @@ const mapDispatchToProps = (
   dispatch: Dispatch,
 ): TransactionDetailsDispatchProps => ({
   refreshData: (req?: StatementsRequest) =>
-    dispatch(sqlStatsActions.refresh(req)),
+    dispatch(txnStatsActions.refresh(req)),
   refreshNodes: () => dispatch(nodesActions.refresh()),
   refreshUserSQLRoles: () => dispatch(uiConfigActions.refreshUserSQLRoles()),
   onTimeScaleChange: (ts: TimeScale) => {