luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

migrating <Tabs> to <CodeTabs> in /docs/connect/observability/ui-visualization

This commit is contained in:
Krastin Krastev 2022-01-24 16:10:03 +01:00
parent 32ee4e440d
commit fcddb890c5
1 changed files with 33 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
website/content/docs/connect/observability/ui-visualization.mdx
View File

@ -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. A full configuration to enable Prometheus is given below.
<Tabs> <CodeTabs>
<Tab heading="HCL">
```hcl ```hcl
ui_config { ui_config {
@ -79,9 +78,6 @@ ui_config {
} }
``` ```
</Tab>
<Tab heading="JSON">
```json ```json
{ {
"ui_config": [ "ui_config": [
@ -98,8 +94,7 @@ ui_config {
} }
``` ```
</Tab> </CodeTabs>
</Tabs>
Similarly, to configure the UI on Kubernetes, use this [reference](/docs/k8s/connect/observability/metrics). 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. An example with Grafana is shown below.
<Tabs> <CodeTabs tabs={[ "HCL", "JSON", "YAML (Kubernetes)" ]}>
<Tab heading="HCL">
<CodeBlockConfig>
```hcl ```hcl
ui_config { ui_config {
enabled = true enabled = true
dashboard_url_templates { dashboard_url_templates {
service = "https://grafana.example.com/d/lDlaj-NGz/ 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-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 </CodeBlockConfig>
without horizontal scrolling in the example above however this needs to be a
normal single-line string value in an HCL configuration file.
</Tab> <CodeBlockConfig>
<Tab heading="JSON">
```json ```json
{ {
@ -148,10 +138,7 @@ normal single-line string value in an HCL configuration file.
{ {
"dashboard_url_templates": [ "dashboard_url_templates": [
{ {
"service": "https://grafana.example.com/d/lDlaj-NGz/ "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}}"
service-overview?orgId=1\u0026var-service={{Service.Name}}\u0026
var-namespace={{Service.Namespace}}\u0026
var-partition={{Service.Partition}}\u0026var-dc={{Datacenter}}"
} }
], ],
"enabled": true "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 </CodeBlockConfig>
without horizontal scrolling in the example above however this needs to be a
normal single-line string value in a JSON configuration file.
</Tab> <CodeBlockConfig>
<Tab heading="Kubernetes YAML">
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 ```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. # The UI is enabled by default so this stanza is not required.
ui: ui:
enabled: true 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. </CodeBlockConfig>
</Tab> </CodeTabs>
</Tabs>
![Consul UI Service Dashboard Link](/img/ui-dashboard-url-template.png) ![Consul UI Service Dashboard Link](/img/ui-dashboard-url-template.png)
@ -221,6 +209,8 @@ un-authenticated workloads on the network**.
With ACLs enabled, the proxy endpoint requires a valid token with read access With ACLs enabled, the proxy endpoint requires a valid token with read access
to all nodes and services (across all namespaces in Enterprise): to all nodes and services (across all namespaces in Enterprise):
<CodeTabs>
```hcl ```hcl
# Consul OSS # Consul OSS
service_prefix "" { service_prefix "" {
@ -241,6 +231,8 @@ namespace_prefix "" {
} }
``` ```
</CodeTabs>
It's typical for most authenticated users to have this level of access in Consul 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 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 [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 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. having a token exposed to them that they might be able to use elsewhere.
<Tabs> <CodeTabs>
<Tab heading="HCL">
```hcl ```hcl
ui_config { ui_config {
@ -304,9 +295,6 @@ ui_config {
} }
``` ```
</Tab>
<Tab heading="JSON">
```json ```json
{ {
"ui_config": [ "ui_config": [
@ -329,8 +317,7 @@ ui_config {
} }
``` ```
</Tab> </CodeTabs>
</Tabs>
## Custom Metrics Providers ## 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. The template for a complete provider JavaScript file is given below.
<CodeTabs>
```JavaScript ```JavaScript
(function () { (function () {
var provider = { var provider = {
@ -553,6 +542,8 @@ The template for a complete provider JavaScript file is given below.
}()); }());
``` ```
</CodeTabs>
Additionally, the built in [Prometheus Additionally, the built in [Prometheus
provider code](https://github.com/hashicorp/consul/blob/main/ui/packages/consul-ui/vendor/metrics-providers/prometheus.js) provider code](https://github.com/hashicorp/consul/blob/main/ui/packages/consul-ui/vendor/metrics-providers/prometheus.js)
can be used as a reference. 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 have been specified in the call to `consul.registerMetricsProvider` as in the
code listing in the last section. code listing in the last section.
<Tabs> <CodeTabs>
<Tab heading="HCL">
```hcl ```hcl
ui_config { ui_config {
@ -581,9 +571,6 @@ ui_config {
} }
``` ```
</Tab>
<Tab heading="JSON">
```json ```json
{ {
"ui_config": { "ui_config": {
@ -595,8 +582,7 @@ ui_config {
} }
``` ```
</Tab> </CodeTabs>
</Tabs>
More than one JavaScript file may be specified in More than one JavaScript file may be specified in
[`metrics_provider_files`](/docs/agent/options#ui_config_metrics_provider_files) [`metrics_provider_files`](/docs/agent/options#ui_config_metrics_provider_files)