ui: Statement Details page using new details endpoint

Previously, the Statement Details page was being populated
by the same data displayed on Statement Table.
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

Release justification:

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/loading/loading.tsx

@@ -39,7 +39,9 @@ const cx = classNames.bind(styles);
  * getValidErrorsList eliminates any null Error values, and returns either
  * null or a non-empty list of Errors.
  */
-function getValidErrorsList(errors?: Error | Error[] | null): Error[] | null {
+export function getValidErrorsList(
+  errors?: Error | Error[] | null,
+): Error[] | null {
   if (errors) {
     if (!Array.isArray(errors)) {
       // Put single Error into a list to simplify logic in main Loading component.

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
     },
   ];