Merge #110849 #111115

110849: ui: add error message for failed executions r=xinhaoz a=xinhaoz

Part of #87785

This commit adds the error message for failed executions to the
statement and transaction insights pages. Since this value can contain
sensitive information, it must conform to the VIEWACTIVITY and
VIEWACTIVITYREDACTED system privielges.

Release note (ui change): adds "Error message" row to the statement and
transaction insights details pages. If the user has VIEWACTIVITY, they
are able to view the full error message. If they have
VIEWACTIVTYREDACTED, they are given a redacted error message. If they
have both, VIEWACTIVITYTREDACTED  takes precedence.


------------------
Only the most recent commit (ui) should be reviewed.

------------------
<img width="1742" alt="image" src="https://github.com/cockroachdb/cockroach/assets/20136951/786d2a20-1610-4ff7-a8fb-0733d344147c">


111115: dbconsole: add tooltop to replication dash ranges chart r=koorosh a=kvoli

The Ranges chart in the replication dashboard can be easily misinterpreted when in a single node view, because the per-node metric is only reported by one node for each range. Most commonly, this is the leaseholder, and if not, the first replica in the range descriptor.

Add a tooltip which explains this nuance, taken from the [documentation](https://www.cockroachlabs.com/docs/stable/ui-replication-dashboard#ranges).

![image](https://github.com/cockroachdb/cockroach/assets/39606633/c2bcecd2-d8ed-46ec-b6f3-61927ecdce45)


Epic: None
Resolves: #111055

Release note (ui change): Added a tooltip to the ranges chart on the replication dashboard, describing the metric in single vs cluster view.

Co-authored-by: gtr <[email protected]>
Co-authored-by: Austen McClernon <[email protected]>

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

@@ -65,6 +65,7 @@ export type StmtInsightsResponseRow = {
   plan_gist: string;
   cpu_sql_nanos: number;
   error_code: string;
+  last_error_redactable: string;
   status: StatementStatus;
 };
 
@@ -95,6 +96,7 @@ index_recommendations,
 plan_gist,
 cpu_sql_nanos,
 error_code,
+last_error_redactable,
 status
 `;
 
@@ -242,6 +244,7 @@ export function formatStmtInsights(
       planGist: row.plan_gist,
       cpuSQLNanos: row.cpu_sql_nanos,
       errorCode: row.error_code,
+      errorMsg: row.last_error_redactable,
       status: row.status,
     } as StmtInsightEvent;
   });

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

@@ -298,6 +298,7 @@ type TxnInsightsResponseRow = {
   stmt_execution_ids: string[];
   cpu_sql_nanos: number;
   last_error_code: string;
+  last_error_redactable: string;
   status: TransactionStatus;
 };
 
@@ -334,6 +335,7 @@ causes,
 stmt_execution_ids,
 cpu_sql_nanos,
 last_error_code,
+last_error_redactable,
 status`;
 
   if (filters?.execID) {
@@ -403,6 +405,7 @@ function formatTxnInsightsRow(row: TxnInsightsResponseRow): TxnInsightEvent {
     stmtExecutionIDs: row.stmt_execution_ids,
     cpuSQLNanos: row.cpu_sql_nanos,
     errorCode: row.last_error_code,
+    errorMsg: row.last_error_redactable,
     status: row.status,
   };
 }

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

@@ -59,6 +59,7 @@ export type InsightEventBase = {
   transactionFingerprintID: string;
   username: string;
   errorCode: string;
+  errorMsg: string;
 };
 
 export type TxnInsightEvent = InsightEventBase & {
@@ -114,6 +115,7 @@ export type StmtInsightEvent = InsightEventBase & {
   databaseName: string;
   execType?: InsightExecEnum;
   status: StatementStatus;
+  errorMsg?: string;
 };
 
 export type Insight = {
@@ -344,6 +346,7 @@ export interface ExecutionDetails {
   transactionExecutionID?: string;
   execType?: InsightExecEnum;
   errorCode?: string;
+  errorMsg?: string;
   status?: string;
 }
 

pkg/ui/workspaces/cluster-ui/src/insights/utils.spec.ts

@@ -79,6 +79,7 @@ const statementInsightMock: StmtInsightEvent = {
   planGist: "gist",
   cpuSQLNanos: 50,
   errorCode: "",
+  errorMsg: "",
   status: StatementStatus.COMPLETED,
 };
 
@@ -121,6 +122,7 @@ const txnInsightEventMock: TxnInsightEvent = {
   stmtExecutionIDs: [statementInsightMock.statementExecutionID],
   cpuSQLNanos: 50,
   errorCode: "",
+  errorMsg: "",
   status: TransactionStatus.COMPLETED,
 };
 

pkg/ui/workspaces/cluster-ui/src/insights/utils.ts

@@ -408,6 +408,7 @@ export function getStmtInsightRecommendations(
     transactionExecutionID: insightDetails.transactionExecutionID,
     execType: InsightExecEnum.STATEMENT,
     errorCode: insightDetails.errorCode,
+    errorMsg: insightDetails.errorMsg,
     status: insightDetails.status,
   };
 
@@ -431,6 +432,7 @@ export function getTxnInsightRecommendations(
     elapsedTimeMillis: insightDetails.elapsedTimeMillis,
     execType: InsightExecEnum.TRANSACTION,
     errorCode: insightDetails.errorCode,
+    errorMsg: insightDetails.errorMsg,
   };
   const recs: InsightRecommendation[] = [];
 

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

@@ -285,6 +285,10 @@ function descriptionCell(
             <span className={cx("label-bold")}>Error Code: </span>{" "}
             {insightRec.execution.errorCode}
           </div>
+          <div className={cx("description-item")}>
+            <span className={cx("label-bold")}> Error Message: </span>{" "}
+            {insightRec.execution.errorMsg}
+          </div>
         </>
       );
     case "Unknown":

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/replication.tsx

@@ -42,6 +42,9 @@ export default function (props: GraphDashboardProps) {
       title="Ranges"
       sources={storeSources}
       tenantSource={tenantSource}
+      tooltip={`Various details about the status of ranges. In the node view,
+        shows details about ranges the node is responsible for. In the cluster
+        view, shows details about ranges all across the cluster.`}
     >
       <Axis label="ranges">
         <Metric name="cr.store.ranges" title="Ranges" />