Consul Web UI Style Guide

This is style guide for the Consul Web UI. When possible, it's best to follow this guide modifying the UI.

Header
Services
Nodes
Key/Value
5 checks failing
us-east-1

Colors

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph text. Consul makes it simple for services to register themselves and to discover other services via a DNS or HTTP interface. Register external services such as SaaS providers as well.

Small note text, if you need to include anything extra.

Panels

Default Panel Subtitle :8080

Content

HTTP Server Accessible httpAccess critical

Sends an HTTP request to the HTTP routers /health endpoint. This should return 200 OK. If it returns anything else, the headers are dumped.

OUTPUT
HTTP/1.1 503 SERVICE UNAVAILABLE
Content-Type: text/html; charset=utf-8
Date: Sun, 20 Apr 2014 15:40:03 GMT
Server: gunicorn/0.17.4
Content-Length: 0
Connection: keep-alive

Mux Accessible muxAccess passing

Makes a TCP connection to the muxer, dumps a relevant error if the connection fails.

OUTPUT
Socket connect Successful

Router Accessible routerAccess warning

Makes a TCP connection to the router, dumps a relevant error if the connection fails.

OUTPUT
Socket connect timed out

Loaders

Pending...

Icons

Pending...

Buttons

Default button Primary button Success button Warning button

Lists

vagrant-cloud-http vagrant-cloud-http
5 passing

vagrant-cloud-http vagrant-cloud-http
5 passing

vagrant-cloud-http vagrant-cloud-http
1 failing

vagrant-cloud-http vagrant-cloud-http
2 failing