ui: Statement Details page using new details endpoint

Previously, the Statement Details page was being populated
by the value saved on cache, where we would filter the
existing statement and retrieve the correct one.
With a new endpoint `_status/stmtdetails/{fingerprint_id}`
we can collect more information about the statement.
This first commit changes the source of information of
the Statement Details page to the value retrieved from
the new endpoint. No changes are noticeable from the user's
perspective.
Following commits will add the new information based on the
extra information retrieved by the endpoint.

Partially addresses #72129

Release note: None
Release Justification: Low risk, high benefit change

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

@@ -13,6 +13,19 @@ import { fetchData } from "src/api";
 import { propsToQueryString } from "src/util";
 
 const STATEMENTS_PATH = "/_status/statements";
+const STATEMENT_DETAILS_PATH = "/_status/stmtdetails";
+
+export type StatementsRequest = cockroach.server.serverpb.StatementsRequest;
+export type StatementDetailsRequest = cockroach.server.serverpb.StatementDetailsRequest;
+export type StatementDetailsResponse = cockroach.server.serverpb.StatementDetailsResponse;
+export type StatementDetailsResponseWithKey = {
+  stmtResponse: StatementDetailsResponse;
+  key: string;
+};
+export type ErrorWithKey = {
+  err: Error;
+  key: string;
+};
 
 export const getStatements = (): Promise<cockroach.server.serverpb.StatementsResponse> => {
   return fetchData(
@@ -21,8 +34,6 @@ export const getStatements = (): Promise<cockroach.server.serverpb.StatementsRes
   );
 };
 
-export type StatementsRequest = cockroach.server.serverpb.StatementsRequest;
-
 export const getCombinedStatements = (
   req: StatementsRequest,
 ): Promise<cockroach.server.serverpb.StatementsResponse> => {
@@ -36,3 +47,19 @@ export const getCombinedStatements = (
     `${STATEMENTS_PATH}?${queryStr}`,
   );
 };
+
+export const getStatementDetails = (
+  req: StatementDetailsRequest,
+): Promise<cockroach.server.serverpb.StatementDetailsResponse> => {
+  let queryStr = propsToQueryString({
+    start: req.start.toInt(),
+    end: req.end.toInt(),
+  });
+  for (const app of req.app_names) {
+    queryStr += `&appNames=${app}`;
+  }
+  return fetchData(
+    cockroach.server.serverpb.StatementDetailsResponse,
+    `${STATEMENT_DETAILS_PATH}/${req.fingerprint_id}?${queryStr}`,
+  );
+};

pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx

@@ -329,7 +329,6 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                           statementFingerprintID: stmt.id,
                           statementNoConstants: stmt.sql_no_constants,
                           implicitTxn: session.active_txn?.implicit,
-                          app: "",
                         })}
                         onClick={() =>
                           this.props.onStatementClick &&

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx

@@ -95,7 +95,7 @@ const StatementTableCell = (props: { session: ISession }) => {
         statementFingerprintID: stmt.id,
         statementNoConstants: stmt.sql_no_constants,
         implicitTxn: session.active_txn?.implicit,
-        app: session.application_name,
+        appNames: [session.application_name],
       })}
     >
       <Tooltip placement="bottom" style="tableTitle" content={<>{sql}</>}>

pkg/ui/workspaces/cluster-ui/src/statementDetails/planView/planView.fixtures.tsx

@@ -14,8 +14,8 @@ import { GlobalPropertiesType } from "./planView";
 type IExplainTreePlanNode = cockroach.sql.IExplainTreePlanNode;
 
 export const globalProperties: GlobalPropertiesType = {
-  distribution: { numerator: 0, denominator: 0 },
-  vectorized: { numerator: 0, denominator: 0 },
+  distribution: true,
+  vectorized: true,
 };
 
 export const logicalPlan: IExplainTreePlanNode = {

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

@@ -12,7 +12,6 @@ import React, { Fragment } from "react";
 import _ from "lodash";
 import classNames from "classnames/bind";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
-import { Fraction } from "../statementDetails";
 import { Tooltip } from "@cockroachlabs/ui-components";
 import {
   getAttributeTooltip,
@@ -127,17 +126,6 @@ export function flattenAttributes(
 
 /* ************************* HELPER FUNCTIONS ************************* */
 
-function fractionToString(fraction: Fraction): string {
-  // The fraction denominator is the number of times the statement
-  // has been executed.
-
-  if (Number.isNaN(fraction.numerator)) {
-    return "unknown";
-  }
-
-  return (fraction.numerator > 0).toString();
-}
-
 // flattenTreeAttributes takes a tree representation of a logical
 // plan (IExplainTreePlanNode) and flattens the attributes in each node.
 // (see flattenAttributes)
@@ -274,8 +262,8 @@ function PlanNode({ node }: PlanNodeProps): React.ReactElement {
 }
 
 export type GlobalPropertiesType = {
-  distribution: Fraction;
-  vectorized: Fraction;
+  distribution: boolean;
+  vectorized: boolean;
 };
 
 interface PlanViewProps {
@@ -294,12 +282,12 @@ export function PlanView({
   const globalAttrs: FlatPlanNodeAttribute[] = [
     {
       key: "distribution",
-      values: [fractionToString(globalProperties.distribution)],
+      values: [globalProperties.distribution.toString()],
       warn: false, // distribution is never warned
     },
     {
       key: "vectorized",
-      values: [fractionToString(globalProperties.vectorized)],
+      values: [globalProperties.vectorized.toString()],
       warn: false, // vectorized is never warned
     },
   ];