mirror of https://github.com/hashicorp/consul
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
11 KiB
320 lines
11 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Consul Web UI Style Guide</title> |
|
<link rel="stylesheet" href="static/bootstrap.min.css"> |
|
<link rel="stylesheet" href="static/base.css"> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<div class="col-md-10 col-md-offset-1"> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<h2>Consul Web UI Style Guide</h2> |
|
<p>This is style guide for the <a href="https://www.consul.io">Consul</a> Web UI. When possible, |
|
it's best to follow this guide modifying the UI.</p> |
|
<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> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<h2>Header</h2> |
|
<hr> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="container"> |
|
<div class="col-md-12"> |
|
|
|
<div class="row"> |
|
<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> |
|
</div> |
|
|
|
<div class="col-md-2 col-sm-3"> |
|
<a class="btn btn-primary" href="#">Services</a> |
|
</div> |
|
<div class="col-md-2 col-sm-3"> |
|
<a class="btn btn-default" href="#">Nodes</a> |
|
</div> |
|
<div class="col-md-2 col-sm-3"> |
|
<a class="btn btn-default" href="#">Key/Value</a> |
|
</div> |
|
|
|
<div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0"> |
|
<a class="btn btn-warning" href="#">5 checks failing</a> |
|
</div> |
|
|
|
<div class="col-md-2 col-sm-3"> |
|
<a class="btn btn-dropdown btn-default" href="#"> |
|
us-east-1 |
|
<span class="caret"></span> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</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-pink"></div> |
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-light-pink"></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> |
|
<div style="width: 75px; height: 75px; display:inline-block" class="bg-dark-green"></div> |
|
<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> |
|
<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> |
|
|
|
<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> |
|
<p>Pending...</p> |
|
</div> |
|
|
|
<div class="col-md-6"> |
|
<h2>Icons</h2> |
|
<hr> |
|
<p>Pending...</p> |
|
</div> |
|
</div> |
|
|
|
<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> |
|
<a href="#" class="btn btn-danger">Danger button</a> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-12"> |
|
<h2>Lists</h2> |
|
<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> |
|
|
|
<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> |
|
|
|
|
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|