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>
|
|
|
|
|
<p>This is style guide for the <a href="http://www.consul.io">Consul</a> Web UI. When possible,
|
|
|
|
|
it's best to follow this guide modifying the UI.</p>
|
|
|
|
|
</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">
|
|
|
|
|
<div class="col-md-12 topbar">
|
|
|
|
|
<div class="col-md-1">
|
|
|
|
|
<div class="top-brand"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<a class="btn btn-primary" href="#">Services</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<a class="btn btn-default" href="#">Nodes</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<a class="btn btn-default" href="#">Key/Value</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2 col-md-offset-1">
|
|
|
|
|
<a class="btn btn-warning" href="#">5 checks failing</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<a class="btn btn-dropdown btn-default" href="#">
|
|
|
|
|
Data Center 1
|
|
|
|
|
<span class="caret"></span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr>
|
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>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
<div class="panel-bar"></div>
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
<h3 class="panel-title">
|
|
|
|
|
Panel Title
|
|
|
|
|
<small>Panel Subtitle</small>
|
|
|
|
|
<span class="panel-note">Panel Note</span>
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
Panel content
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
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>
|
|
|
|
|
<div class="bg-gray text-center" style="width: 200px; height: 200px; padding: 20px;">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2>Icons</h2>
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
<p>This is style guide for Consul. When possible,
|
|
|
|
|
it's best to follow this guide modifying the UI.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2014-04-21 20:36:50 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
