ui: surface the transaction restarts chart

Resolves #65856 Release note (ui change): The KV transaction restarts chart was moved from the "distributed" metrics to the "sql" metrics page so as to be close to the SQL transactions chart, for more prominent visibility.
cockroachdb · Jun 28, 2021 · ef5135d · ef5135d
1 parent ecdd850
commit ef5135d
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 46 deletions.
diff --git a/pkg/ui/src/util/docs.ts b/pkg/ui/src/util/docs.ts
@@ -64,6 +64,9 @@ export const statementsSql = docsURL(
 export const statementsRetries = docsURL(
   "transactions.html#transaction-retries",
 );
+export const transactionRetryErrorReference = docsURL(
+  "transaction-retry-error-reference.html",
+);
 export const statementsTimeInterval = docsURL(
   "admin-ui-statements-page.html#time-interval",
 );

diff --git a/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/distributed.tsx b/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/distributed.tsx
@@ -86,51 +86,6 @@ export default function (props: GraphDashboardProps) {
       </Axis>
     </LineGraph>,
 
-    <LineGraph title="KV Transaction Restarts" sources={nodeSources}>
-      <Axis label="restarts">
-        <Metric
-          name="cr.node.txn.restarts.writetooold"
-          title="Write Too Old"
-          nonNegativeRate
-        />
-        <Metric
-          name="cr.node.txn.restarts.writetoooldmulti"
-          title="Write Too Old (multiple)"
-          nonNegativeRate
-        />
-        <Metric
-          name="cr.node.txn.restarts.serializable"
-          title="Forwarded Timestamp (iso=serializable)"
-          nonNegativeRate
-        />
-        <Metric
-          name="cr.node.txn.restarts.asyncwritefailure"
-          title="Async Consensus Failure"
-          nonNegativeRate
-        />
-        <Metric
-          name="cr.node.txn.restarts.readwithinuncertainty"
-          title="Read Within Uncertainty Interval"
-          nonNegativeRate
-        />
-        <Metric
-          name="cr.node.txn.restarts.txnaborted"
-          title="Aborted"
-          nonNegativeRate
-        />
-        <Metric
-          name="cr.node.txn.restarts.txnpush"
-          title="Push Failure"
-          nonNegativeRate
-        />
-        <Metric
-          name="cr.node.txn.restarts.unknown"
-          title="Unknown"
-          nonNegativeRate
-        />
-      </Axis>
-    </LineGraph>,
-
     <LineGraph
       title="KV Transaction Durations: 99th percentile"
       tooltip={`The 99th percentile of transaction durations over a 1 minute period.

diff --git a/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/graphTooltips.tsx b/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/graphTooltips.tsx
@@ -119,3 +119,14 @@ export const StatementDenialsClusterSettingsTooltip: React.FC<{
     in the format feature.statement_type.enabled = FALSE.
   </div>
 );
+
+export const TransactionRestartsToolTip: React.FC<{
+  tooltipSelection?: string;
+}> = ({ tooltipSelection }) => (
+  <div>
+    The number of transactions restarted broken down by errors{" "}
+    {tooltipSelection}. Refer to the transaction retry error reference{" "}
+    <Anchor href={docsURL.transactionRetryErrorReference}>documentation</Anchor>{" "}
+    for more details.
+  </div>
+);
diff --git a/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/sql.tsx b/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/sql.tsx
@@ -19,7 +19,10 @@ import {
 } from "src/views/shared/components/metricQuery";
 
 import { GraphDashboardProps, nodeDisplayName } from "./dashboardUtils";
-import { StatementDenialsClusterSettingsTooltip } from "src/views/cluster/containers/nodeGraphs/dashboards/graphTooltips";
+import {
+  StatementDenialsClusterSettingsTooltip,
+  TransactionRestartsToolTip,
+} from "src/views/cluster/containers/nodeGraphs/dashboards/graphTooltips";
 
 export default function (props: GraphDashboardProps) {
   const { nodeIDs, nodesSummary, nodeSources, tooltipSelection } = props;
@@ -305,6 +308,57 @@ export default function (props: GraphDashboardProps) {
       </Axis>
     </LineGraph>,
 
+    <LineGraph
+      title="Transaction Restarts"
+      sources={nodeSources}
+      tooltip={
+        <TransactionRestartsToolTip tooltipSelection={tooltipSelection} />
+      }
+    >
+      <Axis label="restarts">
+        <Metric
+          name="cr.node.txn.restarts.writetooold"
+          title="Write Too Old"
+          nonNegativeRate
+        />
+        <Metric
+          name="cr.node.txn.restarts.writetoooldmulti"
+          title="Write Too Old (multiple)"
+          nonNegativeRate
+        />
+        <Metric
+          name="cr.node.txn.restarts.serializable"
+          title="Forwarded Timestamp (iso=serializable)"
+          nonNegativeRate
+        />
+        <Metric
+          name="cr.node.txn.restarts.asyncwritefailure"
+          title="Async Consensus Failure"
+          nonNegativeRate
+        />
+        <Metric
+          name="cr.node.txn.restarts.readwithinuncertainty"
+          title="Read Within Uncertainty Interval"
+          nonNegativeRate
+        />
+        <Metric
+          name="cr.node.txn.restarts.txnaborted"
+          title="Aborted"
+          nonNegativeRate
+        />
+        <Metric
+          name="cr.node.txn.restarts.txnpush"
+          title="Push Failure"
+          nonNegativeRate
+        />
+        <Metric
+          name="cr.node.txn.restarts.unknown"
+          title="Unknown"
+          nonNegativeRate
+        />
+      </Axis>
+    </LineGraph>,
+
     <LineGraph
       title="Transaction Latency: 99th percentile"
       tooltip={`The 99th percentile of total transaction time over a 1 minute period.