Merge #111235 #111469

111235: log: add filepath in headers config to http servers r=Santamaura a=Santamaura

This change adds new custom headers, `file-based-headers` in http-defaults in the logging configuration. These headers support key-filepath pairs. When a key-filepath pair is provided
the values are retrieved from the filepath on sink initialization and whenever SIGHUP is received so that a cluster restart is not needed to update those values.

Example usage with the new filepath: headers
headers:
  {X-CRDB-HEADER-A: filepath: path/to/file}

Release note (ops change): Added a new `file-based-headers` field found in `http-defaults` section of the log config which accepts key-filepath pairs. This allows values found at filepaths to be updated without restarting the cluster by sending SIGHUP to notify that values need to be refreshed.

Epic: CRDB-25399
Fixes: CRDB-31521

111469: ui: show metric on charts tooltip r=maryliag a=maryliag

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`.

Co-authored-by: Alex Santamaura <alexsantamaura@gmail.com>
Co-authored-by: maryliag <marylia@cockroachlabs.com>

docs/generated/logsinks.md

@@ -223,6 +223,7 @@ Type-specific configuration options:
 | `timeout` | the HTTP timeout. Defaults to 0 for no timeout. Inherited from `http-defaults.timeout` if not specified. |
 | `disable-keep-alives` | causes the logging sink to re-establish a new connection for every outgoing log message. This option is intended for testing only and can cause excessive network overhead in production systems. Inherited from `http-defaults.disable-keep-alives` if not specified. |
 | `headers` | a list of headers to attach to each HTTP request Inherited from `http-defaults.headers` if not specified. |
+| `file-based-headers` | a list of headers with filepaths whose contents are attached to each HTTP request Inherited from `http-defaults.file-based-headers` if not specified. |
 | `compression` | can be "none" or "gzip" to enable gzip compression. Set to "gzip" by default. Inherited from `http-defaults.compression` if not specified. |
 
 

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}
       >

pkg/ui/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,7 @@ export default function (props: GraphDashboardProps) {
       title="RangeFeed catchup scans duration"
       isKvGraph={false}
       sources={storeSources}
+      showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Duration} label="duration">
         {nodeIDs.map(nid => (

pkg/ui/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 => (

pkg/ui/workspaces/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.

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 => (