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
Data Center 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

Panel Title Panel Subtitle Panel Note

Panel 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

Icons

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