diff --git a/website/content/docs/connect/observability/ui-visualization.mdx b/website/content/docs/connect/observability/ui-visualization.mdx
index 9a9056ff0..63768ff6b 100644
--- a/website/content/docs/connect/observability/ui-visualization.mdx
+++ b/website/content/docs/connect/observability/ui-visualization.mdx
@@ -66,8 +66,7 @@ service named `prometheus-server` so each Consul agent can reach it on
A full configuration to enable Prometheus is given below.
-
-
+
```hcl
ui_config {
@@ -79,9 +78,6 @@ ui_config {
}
```
-
-
-
```json
{
"ui_config": [
@@ -98,8 +94,7 @@ ui_config {
}
```
-
-
+
Similarly, to configure the UI on Kubernetes, use this [reference](/docs/k8s/connect/observability/metrics).
@@ -120,27 +115,22 @@ to the relevant information.
An example with Grafana is shown below.
-
-
+
+
+
```hcl
ui_config {
enabled = true
dashboard_url_templates {
- service = "https://grafana.example.com/d/lDlaj-NGz/
- service-overview?orgId=1&var-service={{Service.Name}}&
- var-namespace={{Service.Namespace}}&
- var-partition={{Service.Partition}}&var-dc={{Datacenter}}"
+ service = "https://grafana.example.com/d/lDlaj-NGz/service-overview?orgId=1&var-service={{Service.Name}}&var-namespace={{Service.Namespace}}&var-partition={{Service.Partition}}&var-dc={{Datacenter}}"
}
}
```
--> **Note**: the URL is wrapped over multiple lines to make it easier to read
-without horizontal scrolling in the example above however this needs to be a
-normal single-line string value in an HCL configuration file.
+
-
-
+
```json
{
@@ -148,10 +138,7 @@ normal single-line string value in an HCL configuration file.
{
"dashboard_url_templates": [
{
- "service": "https://grafana.example.com/d/lDlaj-NGz/
- service-overview?orgId=1\u0026var-service={{Service.Name}}\u0026
- var-namespace={{Service.Namespace}}\u0026
- var-partition={{Service.Partition}}\u0026var-dc={{Datacenter}}"
+ "service": "https://grafana.example.com/d/lDlaj-NGz/service-overview?orgId=1\u0026var-service={{Service.Name}}\u0026var-namespace={{Service.Namespace}}\u0026var-partition={{Service.Partition}}\u0026var-dc={{Datacenter}}"
}
],
"enabled": true
@@ -160,17 +147,19 @@ normal single-line string value in an HCL configuration file.
}
```
--> **Note**: the URL is wrapped over multiple lines to make it easier to read
-without horizontal scrolling in the example above however this needs to be a
-normal single-line string value in a JSON configuration file.
+
-
-
-
-On Kubernetes, Consul Server configuration is set in your Helm config via the
-[`server.extraConfig`](/docs/k8s/helm#v-server-extraconfig) key as JSON:
+
```yaml
+################################### Notes: ####################################
+# On Kubernetes, Consul Server configuration is set in your Helm config via #
+# the server.extraConfig key as JSON. #
+# #
+# The `{{` characters in the URL must be escaped using `{{ "{{" }}` so that #
+# Helm doesn't try to template them. #
+###############################################################################
+
# The UI is enabled by default so this stanza is not required.
ui:
enabled: true
@@ -185,10 +174,9 @@ server:
}
```
--> **Note**: The `{{` characters in the URL must be escaped using `{{ "{{" }}` so that Helm doesn't try to template them.
+
-
-
+
@@ -221,6 +209,8 @@ un-authenticated workloads on the network**.
With ACLs enabled, the proxy endpoint requires a valid token with read access
to all nodes and services (across all namespaces in Enterprise):
+
+
```hcl
# Consul OSS
service_prefix "" {
@@ -241,6 +231,8 @@ namespace_prefix "" {
}
```
+
+
It's typical for most authenticated users to have this level of access in Consul
as it's required for viewing the catalog or discovering services. If you use a
[Single Sign-On integration](/docs/security/acl/auth-methods/oidc) (Consul
@@ -285,8 +277,7 @@ visible to Consul operators in the configuration file while UI users can query
the metrics they need without separately obtaining a token for that provider or
having a token exposed to them that they might be able to use elsewhere.
-
-
+
```hcl
ui_config {
@@ -304,9 +295,6 @@ ui_config {
}
```
-
-
-
```json
{
"ui_config": [
@@ -329,8 +317,7 @@ ui_config {
}
```
-
-
+
## Custom Metrics Providers
@@ -347,6 +334,8 @@ feedback on [GitHub](https://github.com/hashicorp/consul) or
The template for a complete provider JavaScript file is given below.
+
+
```JavaScript
(function () {
var provider = {
@@ -553,6 +542,8 @@ The template for a complete provider JavaScript file is given below.
}());
```
+
+
Additionally, the built in [Prometheus
provider code](https://github.com/hashicorp/consul/blob/main/ui/packages/consul-ui/vendor/metrics-providers/prometheus.js)
can be used as a reference.
@@ -565,8 +556,7 @@ named `example-provider`, which is defined in
have been specified in the call to `consul.registerMetricsProvider` as in the
code listing in the last section.
-
-
+
```hcl
ui_config {
@@ -581,9 +571,6 @@ ui_config {
}
```
-
-
-
```json
{
"ui_config": {
@@ -595,8 +582,7 @@ ui_config {
}
```
-
-
+
More than one JavaScript file may be specified in
[`metrics_provider_files`](/docs/agent/options#ui_config_metrics_provider_files)