ui: new plan table on statement details

Previously, the Explain Plan tab on Statement Details was
showing only one plan. This commit introduces a table of plan
with their respective executions stats.
When a plan is clicked on the table, it shows the Plan and
its statistics.

Fixes cockroachdb#72129

Release justification: Category 4
Release note (ui change): Explain Plan tab on Statement Details
shows statistics for all the plans executed by the selected statement
on the selected period.

pkg/ui/workspaces/cluster-ui/src/sql/sqlhighlight.module.scss

@@ -27,7 +27,7 @@
     font-family: SFMono-Semibold;
     font-size: 14px;
     line-height: 1.57;
-    white-space: pre-line;
+    white-space: pre;
     word-wrap: break-word;
 
     span {

pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/index.ts

@@ -0,0 +1,11 @@
+// Copyright 2022 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 "./planDetails";

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

@@ -0,0 +1,76 @@
+// Copyright 2022 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 React, { useState } from "react";
+import { Helmet } from "react-helmet";
+import { ArrowLeft } from "@cockroachlabs/icons";
+import {
+  PlansSortedTable,
+  makeExplainPlanColumns,
+  PlanHashStats,
+} from "./plansTable";
+import { Button } from "../../button";
+import { SqlBox } from "../../sql";
+
+interface PlanDetailsProps {
+  plans: PlanHashStats[];
+}
+
+export function PlanDetails({ plans }: PlanDetailsProps): React.ReactElement {
+  const [plan, setPlan] = useState(null);
+  const handleDetails = (plan: PlanHashStats): void => {
+    setPlan(plan);
+  };
+  const backToPlanTable = (): void => {
+    setPlan(null);
+  };
+
+  if (plan) {
+    return renderExplainPlan(plan, backToPlanTable);
+  } else {
+    return renderPlanTable(plans, handleDetails);
+  }
+}
+
+function renderPlanTable(
+  plans: PlanHashStats[],
+  handleDetails: (plan: PlanHashStats) => void,
+): React.ReactElement {
+  const columns = makeExplainPlanColumns(handleDetails);
+  return (
+    <PlansSortedTable
+      columns={columns}
+      data={plans}
+      className="statements-table"
+    />
+  );
+}
+
+function renderExplainPlan(
+  plan: PlanHashStats,
+  backToPlanTable: () => void,
+): React.ReactElement {
+  return (
+    <div>
+      <Helmet title="Plan Details" />
+      <Button
+        onClick={backToPlanTable}
+        type="unstyled-link"
+        size="small"
+        icon={<ArrowLeft fontSize={"10px"} />}
+        iconPosition="left"
+        className="small-margin"
+      >
+        All Plans
+      </Button>
+      <SqlBox value={plan.explain_plan} />
+    </div>
+  );
+}

pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/plansTable.tsx

@@ -0,0 +1,140 @@
+// Copyright 2022 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 React from "react";
+import { ColumnDescriptor, SortedTable } from "src/sortedtable";
+import { Tooltip } from "@cockroachlabs/ui-components";
+import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import {
+  Duration,
+  formatNumberForDisplay,
+  longToInt,
+  TimestampToMoment,
+} from "../../util";
+
+export type PlanHashStats = cockroach.server.serverpb.StatementDetailsResponse.ICollectedStatementGroupedByPlanHash;
+export class PlansSortedTable extends SortedTable<PlanHashStats> {}
+
+const planDetailsColumnLabels = {
+  planID: "Plan ID",
+  last_exec_time: "Last Execution Time",
+  avg_exec_time: "Average Execution Time",
+  exec_count: "Execution Count",
+  avg_rows_read: "Average Rows Read",
+};
+export type PlanDetailsTableColumnKeys = keyof typeof planDetailsColumnLabels;
+
+type PlanDetailsTableTitleType = {
+  [key in PlanDetailsTableColumnKeys]: () => JSX.Element;
+};
+
+export const planDetailsTableTitles: PlanDetailsTableTitleType = {
+  planID: () => {
+    return (
+      <Tooltip
+        style="tableTitle"
+        placement="bottom"
+        content={"The ID of the Plan."}
+      >
+        {planDetailsColumnLabels.planID}
+      </Tooltip>
+    );
+  },
+  last_exec_time: () => {
+    return (
+      <Tooltip
+        style="tableTitle"
+        placement="bottom"
+        content={"The last time this Plan was executed."}
+      >
+        {planDetailsColumnLabels.last_exec_time}
+      </Tooltip>
+    );
+  },
+  avg_exec_time: () => {
+    return (
+      <Tooltip
+        style="tableTitle"
+        placement="bottom"
+        content={"The average execution time for this Plan."}
+      >
+        {planDetailsColumnLabels.avg_exec_time}
+      </Tooltip>
+    );
+  },
+  exec_count: () => {
+    return (
+      <Tooltip
+        style="tableTitle"
+        placement="bottom"
+        content={"The execution count for this Plan."}
+      >
+        {planDetailsColumnLabels.exec_count}
+      </Tooltip>
+    );
+  },
+  avg_rows_read: () => {
+    return (
+      <Tooltip
+        style="tableTitle"
+        placement="bottom"
+        content={"The average of rows read by this Plan."}
+      >
+        {planDetailsColumnLabels.avg_rows_read}
+      </Tooltip>
+    );
+  },
+};
+
+export function makeExplainPlanColumns(
+  handleDetails: (plan: PlanHashStats) => void,
+): ColumnDescriptor<PlanHashStats>[] {
+  const duration = (v: number) => Duration(v * 1e9);
+  return [
+    {
+      name: "planID",
+      title: planDetailsTableTitles.planID(),
+      cell: (item: PlanHashStats) => (
+        <a onClick={() => handleDetails(item)}>{longToInt(item.plan_hash)}</a>
+      ),
+      sort: (item: PlanHashStats) => longToInt(item.plan_hash),
+      alwaysShow: true,
+    },
+    {
+      name: "last_exec_time",
+      title: planDetailsTableTitles.last_exec_time(),
+      cell: (item: PlanHashStats) =>
+        TimestampToMoment(item.stats.last_exec_timestamp).format(
+          "MMM DD, YYYY HH:MM",
+        ),
+      sort: (item: PlanHashStats) =>
+        TimestampToMoment(item.stats.last_exec_timestamp).unix(),
+    },
+    {
+      name: "avg_exec_time",
+      title: planDetailsTableTitles.avg_exec_time(),
+      cell: (item: PlanHashStats) =>
+        formatNumberForDisplay(item.stats.run_lat.mean, duration),
+      sort: (item: PlanHashStats) => item.stats.run_lat.mean,
+    },
+    {
+      name: "exec_count",
+      title: planDetailsTableTitles.exec_count(),
+      cell: (item: PlanHashStats) => longToInt(item.stats.count),
+      sort: (item: PlanHashStats) => longToInt(item.stats.count),
+    },
+    {
+      name: "avg_rows_read",
+      title: planDetailsTableTitles.avg_rows_read(),
+      cell: (item: PlanHashStats) => longToInt(item.stats.rows_read.mean),
+      sort: (item: PlanHashStats) => longToInt(item.stats.rows_read.mean),
+    },
+  ];
+}

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

@@ -41,7 +41,7 @@ import { Button } from "src/button";
 import { SqlBox } from "src/sql";
 import { SortSetting } from "src/sortedtable";
 import { Tooltip } from "@cockroachlabs/ui-components";
-import { PlanView } from "./planView";
+import { PlanDetails } from "./planDetails";
 import { SummaryCard } from "src/summaryCard";
 import {
   latencyBreakdown,
@@ -444,6 +444,7 @@ export class StatementDetails extends React.Component<
       hasViewActivityRedactedRole,
     } = this.props;
     const { currentTab } = this.state;
+    const { statements_per_plan_hash } = this.props.statementDetails;
     const {
       stats,
       app_names,
@@ -500,9 +501,7 @@ export class StatementDetails extends React.Component<
     const regions = unique(
       (stats.nodes || []).map(node => nodeRegions[node.toString()]),
     ).sort();
-    const explainPlan =
-      stats.sensitive_info && stats.sensitive_info.most_recent_plan_description;
-    const explainGlobalProps = { distribution: distSQL, vectorized: vec };
+
     const duration = (v: number) => Duration(v * 1e9);
     const hasDiagnosticReports = diagnosticsReports.length > 0;
     const lastExec =
@@ -776,13 +775,13 @@ export class StatementDetails extends React.Component<
           </TabPane>
         )}
         <TabPane tab="Explain Plan" key="explain-plan">
-          <SummaryCard>
-            <PlanView
-              title="Explain Plan"
-              plan={explainPlan}
-              globalProperties={explainGlobalProps}
-            />
-          </SummaryCard>
+          <Row gutter={24}>
+            <Col className="gutter-row" span={24}>
+              <SqlBox value={formatted_query} />
+            </Col>
+          </Row>
+          <p className={summaryCardStylesCx("summary--card__divider")} />
+          <PlanDetails plans={statements_per_plan_hash} />
         </TabPane>
         <TabPane
           tab="Execution Stats"

pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx

@@ -24,7 +24,6 @@ import {
   contentionTime,
   readsAndWrites,
 } from "src/util";
-import { AggregateStatistics } from "src/statementsTable";
 
 export type NodeNames = { [nodeId: string]: string };