streamingccl,db-console: add Cross-Cluster Replication metrics page

This change adds a new option to the metric dropdown dashboard
for Cross-Cluster Replication. This page will show all the user-facing
metrics relevant to C2C replication.

Informs: #95995

Release note: None

pkg/ccl/streamingccl/streamingest/metrics.go

@@ -18,31 +18,31 @@ import (
 var (
 	metaReplicationEventsIngested = metric.Metadata{
 		Name:        "replication.events_ingested",
-		Help:        "Events ingested by all ingestion jobs",
+		Help:        "Events ingested by all replication jobs",
 		Measurement: "Events",
 		Unit:        metric.Unit_COUNT,
 	}
 	metaReplicationResolvedEventsIngested = metric.Metadata{
 		Name:        "replication.resolved_events_ingested",
-		Help:        "Resolved events ingested by all ingestion jobs",
+		Help:        "Resolved events ingested by all replication jobs",
 		Measurement: "Events",
 		Unit:        metric.Unit_COUNT,
 	}
 	metaReplicationIngestedBytes = metric.Metadata{
-		Name:        "replication.ingested_bytes",
-		Help:        "Bytes ingested by all ingestion jobs",
+		Name:        "replication.kv_bytes",
+		Help:        "KV bytes (sum of keys + values) ingested by all replication jobs",
 		Measurement: "Bytes",
 		Unit:        metric.Unit_BYTES,
 	}
 	metaReplicationSSTBytes = metric.Metadata{
 		Name:        "replication.sst_bytes",
-		Help:        "SST bytes (compressed) sent to KV by all ingestion jobs",
+		Help:        "SST bytes (compressed) sent to KV by all replication jobs",
 		Measurement: "Bytes",
 		Unit:        metric.Unit_BYTES,
 	}
 	metaReplicationFlushes = metric.Metadata{
 		Name:        "replication.flushes",
-		Help:        "Total flushes across all ingestion jobs",
+		Help:        "Total flushes across all replication jobs",
 		Measurement: "Flushes",
 		Unit:        metric.Unit_COUNT,
 	}
@@ -99,8 +99,9 @@ var (
 		Unit:        metric.Unit_COUNT,
 	}
 	metaFrontierLagSeconds = metric.Metadata{
-		Name:        "replication.frontier_lag_seconds",
-		Help:        "Time the replication frontier lags",
+		Name: "replication.frontier_lag_seconds",
+		Help: "Time between the wall clock and replicated time of the replication stream. " +
+			"This metric tracks how far behind the replication stream is relative to now",
 		Measurement: "Seconds",
 		Unit:        metric.Unit_SECONDS,
 	}

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

@@ -0,0 +1,55 @@
+// Copyright 2023 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+
+import { LineGraph } from "src/views/cluster/components/linegraph";
+import { Metric, Axis } from "src/views/shared/components/metricQuery";
+import { AxisUnits } from "@cockroachlabs/cluster-ui";
+
+import { GraphDashboardProps } from "./dashboardUtils";
+
+export default function (props: GraphDashboardProps) {
+  const { storeSources } = props;
+
+  return [
+    <LineGraph
+      title="Replication Lag"
+      sources={storeSources}
+      tooltip={`The time between the wall clock and replicated time of the replication stream. 
+          This metric tracks how far behind the replication stream is relative to now.`}
+    >
+      <Axis units={AxisUnits.Duration} label="time">
+        <Metric
+          name="cr.node.replication.frontier_lag_seconds"
+          title="Replication Lag"
+        />
+      </Axis>
+    </LineGraph>,
+    <LineGraph
+      title="KV Bytes"
+      sources={storeSources}
+      tooltip={`KV bytes (sum of keys + values) ingested by all replication jobs`}
+    >
+      <Axis units={AxisUnits.Duration} label="time">
+        <Metric name="cr.node.replication.kv_bytes" title="KV Bytes" />
+      </Axis>
+    </LineGraph>,
+    <LineGraph
+      title="SST Bytes"
+      sources={storeSources}
+      tooltip={`SST bytes (compressed) sent to KV by all replication jobs`}
+    >
+      <Axis units={AxisUnits.Duration} label="time">
+        <Metric name="cr.node.replication.sst_bytes" title="SST Bytes" />
+      </Axis>
+    </LineGraph>,
+  ];
+}

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

@@ -64,6 +64,7 @@ import hardwareDashboard from "./dashboards/hardware";
 import changefeedsDashboard from "./dashboards/changefeeds";
 import overloadDashboard from "./dashboards/overload";
 import ttlDashboard from "./dashboards/ttl";
+import crossClusterReplication from "./dashboards/crossClusterReplication";
 import { getMatchParamByName } from "src/util/query";
 import { PayloadAction } from "src/interfaces/action";
 import {
@@ -103,6 +104,10 @@ const dashboards: { [key: string]: GraphDashboard } = {
   changefeeds: { label: "Changefeeds", component: changefeedsDashboard },
   overload: { label: "Overload", component: overloadDashboard },
   ttl: { label: "TTL", component: ttlDashboard },
+  crossClusterReplication: {
+    label: "Cross-Cluster Replication",
+    component: crossClusterReplication,
+  },
 };
 
 const defaultDashboard = "overview";