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
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...
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).