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.

Some reasoning behind choices:

  • Colors. Bright colors were chosen to allow for easy "scanning" of information.
  • Icons will accompany most "actions", those are still pending
  • Layout. The layout will be primarily 2 columns with the header at the top for navigation.

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

Panels are for displaying data in the 2nd (right) column. They show extensive information and are flexible, but also use the highlight colors to allow for scanning.

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 Danger button

Lists

Lists are used primarily for the first (left) column view. They are designed as a quick summary, with links embedded for the top-level item as well as sub-items ( such as a list of nodes, as below).

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