mirror of
https://github.com/status-im/consul.git
synced 2025-02-05 02:16:09 +00:00
Website: GH-730 and cleanup for intro/getting-started/ui.html.
This commit is contained in:
parent
8ca790e7ad
commit
89b51c7f3c
@ -3,43 +3,57 @@ layout: "intro"
|
|||||||
page_title: "Web UI"
|
page_title: "Web UI"
|
||||||
sidebar_current: "gettingstarted-ui"
|
sidebar_current: "gettingstarted-ui"
|
||||||
description: |-
|
description: |-
|
||||||
Consul comes with support for a beautiful, functional web UI out of the box. This UI can be used for viewing all services and nodes, viewing all health checks and their current status, and for reading and setting key/value data. The UI automatically supports multi-datacenter.
|
Consul comes with support for beautiful, functional web UIs out of the box. UIs can be used for viewing all services and nodes, for viewing all health checks and their current status, and for reading and setting key/value data. The UIs automatically supports multi-datacenter.
|
||||||
---
|
---
|
||||||
|
|
||||||
# Consul Web UI
|
# Consul Web UI
|
||||||
|
|
||||||
Consul comes with support for a beautiful, functional web UI.
|
Consul comes with support for beautiful, functional web UIs out of the
|
||||||
The UI can be used for viewing all services and nodes, viewing all
|
box. UIs can be used for viewing all services and nodes, for viewing
|
||||||
health checks and their current status, and for reading and setting
|
all health checks and their current status, and for reading and setting
|
||||||
key/value data. The UI automatically supports multi-datacenter.
|
key/value data. The UIs automatically support multi-datacenter.
|
||||||
|
|
||||||
There are two options for running a web UI for Consul. The first option is self-hosting and using the [open-source UI](/downloads.html), the second option is using [Atlas by HashiCorp](https://atlas.hashicorp.com) to host the dashboard for you.
|
There are two options for running a web UI for Consul. The first option
|
||||||
|
is self-hosting the [open-source UI](/downloads.html); the second option
|
||||||
|
is using [Atlas by HashiCorp](https://atlas.hashicorp.com) to host the
|
||||||
|
dashboard for you.
|
||||||
|
|
||||||
## Atlas-hosted Dashboard
|
## Atlas-hosted Dashboard
|
||||||
To setup the Atlas UI for Consul, you must add two fields to your configuration — the name of your Atlas infrastructure and your Atlas token. Below is an example configuration:
|
|
||||||
|
|
||||||
```text
|
|
||||||
$ consul agent -atlas=ATLAS_USERNAME/demo -atlas-token="ATLAS_TOKEN"
|
|
||||||
```
|
|
||||||
|
|
||||||
To get an Atlas username and token, [create an account here](https://atlas.hashicorp.com/account/new?utm_source=oss&utm_medium=getting-started-ui&utm_campaign=consul) and replace the respective values in your Consul configuration with your credentials.
|
|
||||||
|
|
||||||
You can view a live demo of the Atlas UI [here](https://atlas.hashicorp.com/hashicorp/infrastructures/consul-demo).
|
|
||||||
|
|
||||||
A screenshot of one page of the demo is shown below so you can get an
|
|
||||||
idea of what the web UI is like.
|
|
||||||
|
|
||||||
<div class="center">
|
<div class="center">
|
||||||
![Atlas Web UI](atlas_web_ui.png)
|
![Atlas Web UI](atlas_web_ui.png)
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
To set up the Atlas UI for Consul, you must add two fields to your
|
||||||
|
configuration: the
|
||||||
|
[name of your Atlas infrastructure](/docs/agent/options.html#_atlas)
|
||||||
|
and [your Atlas token](/docs/agent/options.html#_atlas_token). Below is
|
||||||
|
an example command-line invocation of the Consul agent providing these
|
||||||
|
settings:
|
||||||
|
|
||||||
|
```text
|
||||||
|
$ consul agent -atlas=ATLAS_USERNAME/demo -atlas-token="ATLAS_TOKEN"
|
||||||
|
```
|
||||||
|
To get an Atlas username and token,
|
||||||
|
[create an account](https://atlas.hashicorp.com/account/new?utm_source=oss&utm_medium=getting-started-ui&utm_campaign=consul)
|
||||||
|
and replace the respective values in your Consul configuration with
|
||||||
|
your credentials.
|
||||||
|
|
||||||
|
You can view a live demo
|
||||||
|
[here](https://atlas.hashicorp.com/hashicorp/infrastructures/consul-demo).
|
||||||
|
|
||||||
## Self-hosted Dashboard
|
## Self-hosted Dashboard
|
||||||
To set up the self-hosted UI,
|
|
||||||
[download the web UI package](/downloads.html)
|
<div class="center">
|
||||||
and unzip it to a directory somewhere on the server where the Consul agent
|
![Consul Web UI](consul_web_ui.png)
|
||||||
is also being run. Then append the `-ui-dir` to the `consul agent`
|
</div>
|
||||||
command pointing to the directory where you unzipped the UI (the
|
|
||||||
directory with the `index.html` file):
|
To set up the self-hosted UI, [download the web UI package](/downloads.html)
|
||||||
|
and unzip it to a directory somewhere on a system with a Consul agent
|
||||||
|
install. Restart the Consul agent, and append a
|
||||||
|
[`-ui-dir` parameter](/docs/agent/options.html#_ui_dir)
|
||||||
|
pointing to the directory where you unzipped the UI (that is, the
|
||||||
|
directory containing the `index.html` file):
|
||||||
|
|
||||||
```text
|
```text
|
||||||
$ consul agent -ui-dir /path/to/ui
|
$ consul agent -ui-dir /path/to/ui
|
||||||
@ -48,7 +62,6 @@ $ consul agent -ui-dir /path/to/ui
|
|||||||
|
|
||||||
The UI is available at the `/ui` path on the same port as the HTTP API.
|
The UI is available at the `/ui` path on the same port as the HTTP API.
|
||||||
By default this is `http://localhost:8500/ui`.
|
By default this is `http://localhost:8500/ui`.
|
||||||
-datacenter.
|
|
||||||
|
|
||||||
You can view a live demo of the Consul Web UI
|
You can view a live demo of the Consul Web UI
|
||||||
[here](http://demo.consul.io).
|
[here](http://demo.consul.io).
|
||||||
@ -59,9 +72,8 @@ we've also setup demo endpoints in the specific datacenters:
|
|||||||
[SFO1](http://sfo1.demo.consul.io) (San Francisco),
|
[SFO1](http://sfo1.demo.consul.io) (San Francisco),
|
||||||
and [NYC3](http://nyc3.demo.consul.io) (New York).
|
and [NYC3](http://nyc3.demo.consul.io) (New York).
|
||||||
|
|
||||||
A screenshot of one page of the demo is shown below so you can get an
|
## Next Steps
|
||||||
idea of what the web UI is like. Click the screenshot for the full size.
|
|
||||||
|
|
||||||
<div class="center">
|
This concludes our Getting Started guide. See the
|
||||||
![Consul Web UI](consul_web_ui.png)
|
[next steps](next-steps.html) page to learn more about how to continue
|
||||||
</div>
|
your journey with Consul!
|
||||||
|
Loading…
x
Reference in New Issue
Block a user