Fixes: #17670
Release note (admin ui change): Added tooltips for descriptions of time
series graphs in Replication Dashboard.

pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/replication.tsx

@@ -7,10 +7,32 @@ import { Metric, Axis, AxisUnits } from "src/views/shared/components/metricQuery
import { GraphDashboardProps, nodeDisplayName, storeIDsForNode } from "./dashboardUtils";

export default function (props: GraphDashboardProps) {
  const { nodeIDs, nodesSummary, storeSources } = props;
  const { nodeIDs, nodesSummary, storeSources, tooltipSelection } = props;

  return [
    <LineGraph title="Ranges" sources={storeSources}>
    <LineGraph
      title="Ranges"
      sources={storeSources}
      tooltip={(
        <div>
          Count of ranges {tooltipSelection} with the following properties:
          <dl>
            <dt>Ranges</dt>
            <dd>All ranges</dd>
            <dt>Leaders</dt>
            <dd>Ranges with an elected Raft leader</dd>
            <dt>Lease Holders</dt>
            <dd>Ranges with a current lease</dd>
            <dt>Leaders w/o Lease</dt>
            <dd>Raft leader ranges without a lease</dd>
            <dt>Unavailable</dt>
            <dd>Ranges unavailable due to node outage</dd>
            <dt>Under-replicated</dt>
            <dd>Ranges temporarily under-replicated</dd>
          </dl>
        </div>
      )}
    >
      <Axis label="ranges">
        <Metric name="cr.store.ranges" title="Ranges" />
        <Metric name="cr.store.replicas.leaders" title="Leaders" />
@@ -72,22 +94,54 @@ export default function (props: GraphDashboardProps) {
      </Axis>
    </LineGraph>,

    <LineGraph title="Replica Quiescence" sources={storeSources}>
    <LineGraph
      title="Replica Quiescence"
      sources={storeSources}
      tooltip={(
        <div>
        Number of replicas and quiesced replicas {tooltipSelection}.
        <br/>
        Quiesced replicas have no pending reads or writes and have temporarily disabled consensus protocols.
        </div>
      )}
    >
      <Axis label="replicas">
        <Metric name="cr.store.replicas" title="Replicas" />
        <Metric name="cr.store.replicas.quiescent" title="Quiescent" />
      </Axis>
    </LineGraph>,

    <LineGraph title="Range Operations" sources={storeSources}>
    <LineGraph title="Range Operations" sources={storeSources} 
      tooltip = {`Ranges with split, add, or remove operations ${tooltipSelection}.`}
    >
      <Axis label="ranges">
        <Metric name="cr.store.range.splits" title="Splits" nonNegativeRate />
        <Metric name="cr.store.range.adds" title="Adds" nonNegativeRate />
        <Metric name="cr.store.range.removes" title="Removes" nonNegativeRate />
      </Axis>
    </LineGraph>,

    <LineGraph title="Snapshots" sources={storeSources}>
    <LineGraph
      title="Snapshots"
      sources={storeSources}
      tooltip={(
        <div>
          Snapshots {tooltipSelection} <br/>
          When a node is far behind the log file for a range, the cluster can
          send it a snapshot of the range and it can start following the log from there.
          <dl>
            <dt>Generated</dt>
            <dd>Snapshots {tooltipSelection} created per second</dd>
            <dt>Applied (Raft-initiated)</dt>
            <dd>Snapshots applied {tooltipSelection} per second that were initiated within Raft</dd>
            <dt>Applied (Preemptive)</dt>
            <dd>Snapshots applied {tooltipSelection} per second that were anticipated ahead of time</dd>
            <dt>Reserved</dt>
            <dd>Slots {tooltipSelection} reserved per second for incoming snapshots that will be sent to a node</dd>
          </dl>
        </div>
      )}
    >
      <Axis label="snapshots">
        <Metric name="cr.store.range.snapshots.generated" title="Generated" nonNegativeRate />
        <Metric name="cr.store.range.snapshots.normal-applied" title="Applied (Raft-initiated)" nonNegativeRate />