2014-04-21 20:36:50 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2014-04-22 18:11:54 +00:00
|
|
|
<title>Consul Web UI Style Guide</title>
|
2014-04-21 20:36:50 +00:00
|
|
|
<link rel="stylesheet" href="static/bootstrap.min.css">
|
2014-04-22 18:11:54 +00:00
|
|
|
<link rel="stylesheet" href="static/base.css">
|
2014-04-21 20:36:50 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
2014-04-22 18:11:54 +00:00
|
|
|
<div class="col-md-10 col-md-offset-1">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<h2>Consul Web UI Style Guide</h2>
|
2016-01-13 22:44:01 +00:00
|
|
|
<p>This is style guide for the <a href="https://www.consul.io">Consul</a> Web UI. When possible,
|
2014-04-22 18:11:54 +00:00
|
|
|
it's best to follow this guide modifying the UI.</p>
|
2014-04-22 21:51:19 +00:00
|
|
|
<p>Some reasoning behind choices:
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Colors. Bright colors were chosen to allow for easy
|
|
|
|
|
"scanning" of information.</li>
|
|
|
|
|
<li>Icons will accompany most "actions", those are still
|
|
|
|
|
pending</li>
|
|
|
|
|
<li>Layout. The layout will be primarily 2 columns with the
|
|
|
|
|
header at the top for navigation.</li>
|
|
|
|
|
</p>
|
2014-04-22 18:11:54 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2014-04-21 20:36:50 +00:00
|
|
|
|
2014-04-22 18:11:54 +00:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<h2>Header</h2>
|
|
|
|
|
<hr>
|
|
|
|
|
</div>
|
2014-04-21 20:36:50 +00:00
|
|
|
</div>
|
2014-04-22 18:11:54 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
2014-04-22 19:59:35 +00:00
|
|
|
<div class="col-md-12 col-sm-12 topbar">
|
|
|
|
|
|
|
|
|
|
<div class="col-md-1 col-sm-2">
|
|
|
|
|
<a href="#"><div class="top-brand"></div></a>
|
2014-04-22 18:11:54 +00:00
|
|
|
</div>
|
2014-04-22 19:59:35 +00:00
|
|
|
|
|
|
|
|
<div class="col-md-2 col-sm-3">
|
2014-04-22 18:11:54 +00:00
|
|
|
<a class="btn btn-primary" href="#">Services</a>
|
|
|
|
|
</div>
|
2014-04-22 19:59:35 +00:00
|
|
|
<div class="col-md-2 col-sm-3">
|
2014-04-22 18:11:54 +00:00
|
|
|
<a class="btn btn-default" href="#">Nodes</a>
|
|
|
|
|
</div>
|
2014-04-22 19:59:35 +00:00
|
|
|
<div class="col-md-2 col-sm-3">
|
2014-04-22 18:11:54 +00:00
|
|
|
<a class="btn btn-default" href="#">Key/Value</a>
|
|
|
|
|
</div>
|
2014-04-22 19:59:35 +00:00
|
|
|
|
|
|
|
|
<div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0">
|
2014-04-22 18:11:54 +00:00
|
|
|
<a class="btn btn-warning" href="#">5 checks failing</a>
|
|
|
|
|
</div>
|
2014-04-22 19:59:35 +00:00
|
|
|
|
|
|
|
|
<div class="col-md-2 col-sm-3">
|
2014-04-22 18:11:54 +00:00
|
|
|
<a class="btn btn-dropdown btn-default" href="#">
|
2014-04-22 19:59:35 +00:00
|
|
|
us-east-1
|
2014-04-22 18:11:54 +00:00
|
|
|
<span class="caret"></span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2014-04-21 20:36:50 +00:00
|
|
|
|
|
|
|
|
</div>
|
2014-04-22 18:11:54 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="col-md-10 col-md-offset-1">
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2>Colors</h2>
|
|
|
|
|
<hr>
|
|
|
|
|
<ul class="list-unstyled">
|
|
|
|
|
<li>
|
|
|
|
|
<div style="width: 75px; height: 75px; display:inline-block;" class="bg-purple"></div>
|
|
|
|
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-light-purple"></div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-orange"></div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
2014-04-22 19:59:35 +00:00
|
|
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-dark-green"></div>
|
2014-04-22 18:11:54 +00:00
|
|
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-green"></div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-gray"></div>
|
|
|
|
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-light-gray"></div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2>Headings</h2>
|
|
|
|
|
<hr>
|
|
|
|
|
<h1>Heading 1</h1>
|
|
|
|
|
<h2>Heading 2</h2>
|
|
|
|
|
<h3>Heading 3</h3>
|
|
|
|
|
<h4>Heading 4</h4>
|
|
|
|
|
<h5>Heading 5</h5>
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
<small>Small note text, if you need to include anything extra.</small>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<h2>Panels</h2>
|
|
|
|
|
<hr>
|
2014-04-22 21:51:19 +00:00
|
|
|
<p>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.</p>
|
|
|
|
|
<hr>
|
2014-04-21 20:36:50 +00:00
|
|
|
|
2014-04-22 18:11:54 +00:00
|
|
|
<div class="panel panel-danger">
|
|
|
|
|
<div class="panel-bar"></div>
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
<h3 class="panel-title">
|
|
|
|
|
HTTP Server Accessible
|
|
|
|
|
<small>httpAccess</small>
|
|
|
|
|
<span class="panel-note">critical</span>
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<p>Sends an HTTP request to the HTTP routers /health endpoint.
|
|
|
|
|
This should return 200 OK. If it returns anything else,
|
|
|
|
|
the headers are dumped.</p>
|
|
|
|
|
<h5>OUTPUT</h5>
|
|
|
|
|
<pre>
|
|
|
|
|
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
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="panel panel-success">
|
|
|
|
|
<div class="panel-bar"></div>
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
<h3 class="panel-title">
|
|
|
|
|
Mux Accessible
|
|
|
|
|
<small>muxAccess</small>
|
|
|
|
|
<span class="panel-note">passing</span>
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<p>Makes a TCP connection to the muxer, dumps a relevant error if the connection fails.</p>
|
|
|
|
|
|
|
|
|
|
<h5>OUTPUT</h5>
|
|
|
|
|
<pre>
|
|
|
|
|
Socket connect Successful
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="panel panel-warning">
|
|
|
|
|
<div class="panel-bar"></div>
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
<h3 class="panel-title">
|
|
|
|
|
Router Accessible
|
|
|
|
|
<small>routerAccess</small>
|
|
|
|
|
<span class="panel-note">warning</span>
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<p>Makes a TCP connection to the router, dumps a relevant error if the connection fails.</p>
|
|
|
|
|
|
|
|
|
|
<h5>OUTPUT</h5>
|
|
|
|
|
<pre>
|
|
|
|
|
Socket connect timed out
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2>Loaders</h2>
|
|
|
|
|
<hr>
|
2014-04-22 19:59:35 +00:00
|
|
|
<p>Pending...</p>
|
2014-04-22 18:11:54 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2>Icons</h2>
|
|
|
|
|
<hr>
|
2014-04-22 19:59:35 +00:00
|
|
|
<p>Pending...</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2014-04-22 18:11:54 +00:00
|
|
|
|
2014-04-22 19:59:35 +00:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<h2>Buttons</h2>
|
|
|
|
|
<hr>
|
|
|
|
|
<a href="#" class="btn btn-default">Default button</a>
|
|
|
|
|
<a href="#" class="btn btn-primary">Primary button</a>
|
|
|
|
|
<a href="#" class="btn btn-success">Success button</a>
|
|
|
|
|
<a href="#" class="btn btn-warning">Warning button</a>
|
2014-04-30 14:16:50 +00:00
|
|
|
<a href="#" class="btn btn-danger">Danger button</a>
|
2014-04-22 18:11:54 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2014-04-22 19:59:35 +00:00
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<h2>Lists</h2>
|
2014-04-22 21:51:19 +00:00
|
|
|
<hr>
|
|
|
|
|
<p>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).</p>
|
|
|
|
|
<hr>
|
2014-04-22 19:59:35 +00:00
|
|
|
|
|
|
|
|
<div class="list-group">
|
|
|
|
|
<div class="list-group-item">
|
|
|
|
|
<div class="list-bar bg-green"></div>
|
|
|
|
|
<h4 class="list-group-item-heading">
|
|
|
|
|
<a href="#" class="subtle">vagrant-cloud-http</a>
|
|
|
|
|
<small>vagrant-cloud-http</small>
|
|
|
|
|
<div class="heading-helper">
|
|
|
|
|
<a class="subtle" href="#">5 passing</a>
|
|
|
|
|
</div>
|
|
|
|
|
</h4>
|
|
|
|
|
<ul class="list-inline">
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="list-group-item">
|
|
|
|
|
<div class="list-bar bg-green"></div>
|
|
|
|
|
<h4 class="list-group-item-heading">
|
|
|
|
|
<a href="#" class="subtle">vagrant-cloud-http</a>
|
|
|
|
|
<small>vagrant-cloud-http</small>
|
|
|
|
|
<div class="heading-helper">
|
|
|
|
|
<a class="subtle" href="#">5 passing</a>
|
|
|
|
|
</div>
|
|
|
|
|
</h4>
|
|
|
|
|
<ul class="list-inline">
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="list-group-item">
|
|
|
|
|
<div class="list-bar bg-orange"></div>
|
|
|
|
|
<h4 class="list-group-item-heading">
|
|
|
|
|
<a href="#" class="subtle">vagrant-cloud-http</a>
|
|
|
|
|
<small>vagrant-cloud-http</small>
|
|
|
|
|
<div class="heading-helper">
|
|
|
|
|
<a class="subtle" href="#">1 failing</a>
|
|
|
|
|
</div>
|
|
|
|
|
</h4>
|
|
|
|
|
<ul class="list-inline">
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="list-group-item">
|
|
|
|
|
<div class="list-bar bg-red"></div>
|
|
|
|
|
<h4 class="list-group-item-heading">
|
|
|
|
|
<a href="#" class="subtle">vagrant-cloud-http</a>
|
|
|
|
|
<small>vagrant-cloud-http</small>
|
|
|
|
|
<div class="heading-helper">
|
|
|
|
|
<a class="subtle" href="#">2 failing</a>
|
|
|
|
|
</div>
|
|
|
|
|
</h4>
|
|
|
|
|
<ul class="list-inline">
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
<li><a class="subtle" href="#">node-10-0-109</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2014-04-22 18:11:54 +00:00
|
|
|
</div>
|
2014-04-21 20:36:50 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
