ui: show metric on charts tooltip

To make it easier to identify the metric being used to generate charts, this commit adds the metric to the tooltip of all charts on the Metrics page. Fixes #109277 This also fix the metric name for `Schema Registry Registrations`. Fixes #108095 Release note (ui change): On the Metric page, now the information about which metric is used to create each chart is available on the chart's tooltip. Release note (bug fix): Fix metric name for `Schema Registry Registrations`.
cockroachdb · Sep 29, 2023 · 7c5f685 · 7c5f685
1 parent 4b2badd
commit 7c5f685
Show file tree

Hide file tree

Showing 15 changed files with 293 additions and 86 deletions.
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
@@ -67,6 +67,7 @@ export interface OwnProps extends MetricsDataComponentProps {
   hoverState?: HoverState;
   preCalcGraphSize?: boolean;
   legendAsTooltip?: boolean;
+  showMetricsInTooltip?: boolean;
 }
 
 export type LineGraphProps = OwnProps & WithTimezoneProps;
@@ -381,7 +382,41 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
       tenantSource,
       preCalcGraphSize,
       legendAsTooltip,
+      showMetricsInTooltip,
     } = this.props;
+    let tt = tooltip;
+    const addLines: React.ReactNode = tooltip ? (
+      <>
+        <br />
+        <br />
+      </>
+    ) : null;
+    // Extend tooltip to include metrics names
+    if (showMetricsInTooltip) {
+      if (data?.results?.length == 1) {
+        tt = (
+          <>
+            {tt}
+            {addLines}
+            Metric: {data.results[0].query.name}
+          </>
+        );
+      } else if (data?.results?.length > 1) {
+        tt = (
+          <>
+            {tt}
+            {addLines}
+            Metrics:
+            <ul>
+              {data.results.map(m => (
+                <li key={m.query.name}>{m.query.name}</li>
+              ))}
+            </ul>
+          </>
+        );
+      }
+    }
+
     if (!this.hasDataPoints(data) && isSecondaryTenant(tenantSource)) {
       return (
         <div className="linegraph-empty">
@@ -404,7 +439,7 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
       <Visualization
         title={title}
         subtitle={subtitle}
-        tooltip={tooltip}
+        tooltip={tt}
         loading={!data}
         preCalcGraphSize={preCalcGraphSize}
       >

diff --git a/.../workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/changefeeds.tsx b/.../workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/changefeeds.tsx
@@ -37,6 +37,7 @@ export default function (props: GraphDashboardProps) {
       isKvGraph={false}
       sources={storeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Count} label="count">
         <Metric
@@ -53,7 +54,9 @@ export default function (props: GraphDashboardProps) {
 
     <LineGraph
       title="Commit Latency"
-      tooltip={`The difference between an event's MVCC timestamp and the time it was acknowledged as received by the downstream sink.`}
+      tooltip={`The difference between an event's MVCC timestamp and the time it was
+          acknowledged as received by the downstream sink.`}
+      showMetricsInTooltip={true}
       isKvGraph={false}
       sources={storeSources}
       tenantSource={tenantSource}
@@ -77,7 +80,12 @@ export default function (props: GraphDashboardProps) {
       </Axis>
     </LineGraph>,
 
-    <LineGraph title="Emitted Bytes" isKvGraph={false} sources={storeSources}>
+    <LineGraph
+      title="Emitted Bytes"
+      isKvGraph={false}
+      sources={storeSources}
+      showMetricsInTooltip={true}
+    >
       <Axis units={AxisUnits.Bytes} label="bytes">
         <Metric
           name="cr.node.changefeed.emitted_bytes"
@@ -92,6 +100,7 @@ export default function (props: GraphDashboardProps) {
       isKvGraph={false}
       sources={storeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Count} label="actions">
         <Metric
@@ -110,7 +119,12 @@ export default function (props: GraphDashboardProps) {
     <LineGraph
       title="Max Checkpoint Latency"
       isKvGraph={false}
-      tooltip={`The most any changefeed's persisted checkpoint is behind the present.  Larger values indicate issues with successfully ingesting or emitting changes.  If errors cause a changefeed to restart, or the changefeed is paused and unpaused, emitted data up to the last checkpoint may be re-emitted.`}
+      tooltip={`The most any changefeed's persisted checkpoint is behind the present.
+          Larger values indicate issues with successfully ingesting or emitting
+          changes. If errors cause a changefeed to restart, or the changefeed is
+          paused and unpaused, emitted data up to the last checkpoint may be
+          re-emitted.`}
+      showMetricsInTooltip={true}
       tenantSource={tenantSource}
     >
       <Axis units={AxisUnits.Duration} label="time">
@@ -125,7 +139,10 @@ export default function (props: GraphDashboardProps) {
 
     <LineGraph
       title="Changefeed Restarts"
-      tooltip={`The rate of transient non-fatal errors, such as temporary connectivity issues or a rolling upgrade. This rate constantly becoming non-zero may indicate a more persistent issue.`}
+      tooltip={`The rate of transient non-fatal errors, such as temporary connectivity
+          issues or a rolling upgrade. This rate constantly becoming non-zero
+          may indicate a more persistent issue.`}
+      showMetricsInTooltip={true}
       isKvGraph={false}
       sources={storeSources}
       tenantSource={tenantSource}
@@ -141,7 +158,9 @@ export default function (props: GraphDashboardProps) {
 
     <LineGraph
       title="Oldest Protected Timestamp"
-      tooltip={`The oldest data that any changefeed is protecting from being able to be automatically garbage collected.`}
+      tooltip={`The oldest data that any changefeed is protecting from being able to
+          be automatically garbage collected.`}
+      showMetricsInTooltip={true}
       isKvGraph={false}
       sources={storeSources}
     >
@@ -157,7 +176,10 @@ export default function (props: GraphDashboardProps) {
 
     <LineGraph
       title="Backfill Pending Ranges"
-      tooltip={`The number of ranges being backfilled (ex: due to an initial scan or schema change) that are yet to completely enter the Changefeed pipeline.`}
+      tooltip={`The number of ranges being backfilled (ex: due to an initial scan or
+          schema change) that are yet to completely enter the Changefeed
+          pipeline.`}
+      showMetricsInTooltip={true}
       isKvGraph={false}
       sources={storeSources}
     >
@@ -171,13 +193,16 @@ export default function (props: GraphDashboardProps) {
 
     <LineGraph
       title="Schema Registry Registrations"
-      tooltip={`The rate of schema registration requests made by CockroachDB nodes to a configured schema registry endpoint (ex: A Kafka feed pointing to a Confluent Schema Registry)`}
+      tooltip={`The rate of schema registration requests made by CockroachDB nodes to
+          a configured schema registry endpoint (ex: A Kafka feed pointing to a
+          Confluent Schema Registry)`}
+      showMetricsInTooltip={true}
       isKvGraph={false}
       sources={storeSources}
     >
       <Axis units={AxisUnits.Count} label="action">
         <Metric
-          name="cr.node.changefeed.schema_registry_registrations"
+          name="cr.node.changefeed.schema_registry.registrations"
           title="Schema Registry Registrations"
           nonNegativeRate
         />
@@ -188,7 +213,9 @@ export default function (props: GraphDashboardProps) {
       title="Ranges in catchup mode"
       isKvGraph={false}
       sources={storeSources}
-      tooltip="Total number of ranges with an active rangefeed that are performing catchup scan"
+      tooltip={`Total number of ranges with an active rangefeed that are performing
+          catchup scan`}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Count} label="ranges">
         <Metric
@@ -203,6 +230,8 @@ export default function (props: GraphDashboardProps) {
       title="RangeFeed catchup scans duration"
       isKvGraph={false}
       sources={storeSources}
+      showMetricsInTooltip={true}
+      tooltip={`Metric: cr.store.kv.rangefeed.catchup_scan_nanos`}
     >
       <Axis units={AxisUnits.Duration} label="duration">
         {nodeIDs.map(nid => (

diff --git a/.../workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/distributed.tsx b/.../workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/distributed.tsx
@@ -25,6 +25,7 @@ export default function (props: GraphDashboardProps) {
       title="Batches"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis label="batches">
         <Metric
@@ -40,7 +41,12 @@ export default function (props: GraphDashboardProps) {
       </Axis>
     </LineGraph>,
 
-    <LineGraph title="RPCs" sources={nodeSources} tenantSource={tenantSource}>
+    <LineGraph
+      title="RPCs"
+      sources={nodeSources}
+      tenantSource={tenantSource}
+      showMetricsInTooltip={true}
+    >
       <Axis label="rpcs">
         <Metric
           name="cr.node.distsender.rpc.sent"
@@ -59,6 +65,7 @@ export default function (props: GraphDashboardProps) {
       title="RPC Errors"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis label="errors">
         <Metric
@@ -83,6 +90,7 @@ export default function (props: GraphDashboardProps) {
       title="KV Transactions"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis label="transactions">
         <Metric name="cr.node.txn.commits" title="Committed" nonNegativeRate />
@@ -99,7 +107,8 @@ export default function (props: GraphDashboardProps) {
       title="KV Transaction Durations: 99th percentile"
       tenantSource={tenantSource}
       tooltip={`The 99th percentile of transaction durations over a 1 minute period.
-                              Values are displayed individually for each node.`}
+          Values are displayed individually for each node.`}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Duration} label="transaction duration">
         {_.map(nodeIDs, node => (
@@ -118,7 +127,8 @@ export default function (props: GraphDashboardProps) {
       title="KV Transaction Durations: 90th percentile"
       tenantSource={tenantSource}
       tooltip={`The 90th percentile of transaction durations over a 1 minute period.
-                              Values are displayed individually for each node.`}
+          Values are displayed individually for each node.`}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Duration} label="transaction duration">
         {_.map(nodeIDs, node => (
@@ -136,8 +146,10 @@ export default function (props: GraphDashboardProps) {
     <LineGraph
       title="Node Heartbeat Latency: 99th percentile"
       tenantSource={tenantSource}
-      tooltip={`The 99th percentile of latency to heartbeat a node's internal liveness record over a 1 minute period.
-                              Values are displayed individually for each node.`}
+      tooltip={`The 99th percentile of latency to heartbeat a node's internal liveness
+          record over a 1 minute period. Values are displayed individually for
+          each node.`}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Duration} label="heartbeat latency">
         {_.map(nodeIDs, node => (
@@ -155,8 +167,10 @@ export default function (props: GraphDashboardProps) {
     <LineGraph
       title="Node Heartbeat Latency: 90th percentile"
       tenantSource={tenantSource}
-      tooltip={`The 90th percentile of latency to heartbeat a node's internal liveness record over a 1 minute period.
-                              Values are displayed individually for each node.`}
+      tooltip={`The 90th percentile of latency to heartbeat a node's internal liveness
+          record over a 1 minute period. Values are displayed individually for
+          each node.`}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Duration} label="heartbeat latency">
         {_.map(nodeIDs, node => (

diff --git a/...orkspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/graphTooltips.tsx b/...orkspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/graphTooltips.tsx
@@ -152,25 +152,25 @@ export const TransactionRestartsToolTip: React.FC<{
   </div>
 );
 
-export const CircuitBreakerTrippedReplicasTooltip: React.FC = () => (
+export const CircuitBreakerTrippedReplicasTooltip: React.ReactNode = (
   <div>
     Number of Replicas for which the per-Replica circuit breaker is currently
     tripped.
   </div>
 );
 
-export const CircuitBreakerTrippedEventsTooltip: React.FC = () => (
+export const CircuitBreakerTrippedEventsTooltip: React.ReactNode = (
   <div>
     The number of circuit breaker events occurred per aggregated interval of
     time across all nodes since the process started.
   </div>
 );
 
-export const PausedFollowersTooltip: React.FC = () => (
+export const PausedFollowersTooltip: React.ReactNode = (
   <div>The number of nonessential followers that have replication paused.</div>
 );
 
-export const ReceiverSnapshotsQueuedTooltip: React.FC = () => (
+export const ReceiverSnapshotsQueuedTooltip: React.ReactNode = (
   <div>
     The number of snapshots queued to be applied on a receiver which can only{" "}
     accept 1 at a time per store.

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/hardware.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/hardware.tsx
@@ -40,6 +40,7 @@ export default function (props: GraphDashboardProps) {
       sources={nodeSources}
       tenantSource={tenantSource}
       tooltip={<div>CPU usage for the CRDB nodes {tooltipSelection}</div>}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Percentage} label="CPU">
         {nodeIDs.map(nid => (
@@ -57,6 +58,7 @@ export default function (props: GraphDashboardProps) {
       sources={nodeSources}
       tenantSource={tenantSource}
       tooltip={<div>Machine-wide CPU usage {tooltipSelection}</div>}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Percentage} label="CPU">
         {nodeIDs.map(nid => (
@@ -74,6 +76,7 @@ export default function (props: GraphDashboardProps) {
       sources={nodeSources}
       tenantSource={tenantSource}
       tooltip={<div>Memory in use {tooltipSelection}</div>}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Bytes} label="memory usage">
         {nodeIDs.map(nid => (
@@ -90,6 +93,7 @@ export default function (props: GraphDashboardProps) {
       title="Disk Read MiB/s"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Bytes} label="bytes">
         {nodeIDs.map(nid => (
@@ -107,6 +111,7 @@ export default function (props: GraphDashboardProps) {
       title="Disk Write MiB/s"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Bytes} label="bytes">
         {nodeIDs.map(nid => (
@@ -124,6 +129,7 @@ export default function (props: GraphDashboardProps) {
       title="Disk Read IOPS"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Count} label="IOPS">
         {nodeIDs.map(nid => (
@@ -141,6 +147,7 @@ export default function (props: GraphDashboardProps) {
       title="Disk Write IOPS"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Count} label="IOPS">
         {nodeIDs.map(nid => (
@@ -158,6 +165,7 @@ export default function (props: GraphDashboardProps) {
       title="Disk Ops In Progress"
       sources={nodeSources}
       tenantSource={tenantSource}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Count} label="Ops">
         {nodeIDs.map(nid => (
@@ -175,6 +183,7 @@ export default function (props: GraphDashboardProps) {
       sources={storeSources}
       tenantSource={tenantSource}
       tooltip={<AvailableDiscCapacityGraphTooltip />}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Bytes} label="capacity">
         {nodeIDs.map(nid => (