82 lines
2.1 KiB
HTML
82 lines
2.1 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>endstat</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:200|Source+Code+Pro:400" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background-color: #212121;
|
|
color: #fff;
|
|
font-family: 'Montserrat', sans-serif;
|
|
width: 700px;
|
|
margin: 0 auto;
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
main {
|
|
padding: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
align-items: stretch;
|
|
background-color: #424242;
|
|
margin: 1rem 0;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
p { margin: 0; }
|
|
a { color: #fff; text-decoration: none; }
|
|
h1 { margin: 0; }
|
|
|
|
h3 { margin: 0; text-align: justify; flex-shrink: 0; }
|
|
.info { display: flex; align-items: baseline; }
|
|
.info a { text-align: right; }
|
|
.spacer { flex: 1 0 1rem; }
|
|
|
|
.indicator {
|
|
width: 1rem;
|
|
min-height: 100%;
|
|
border-radius: .5rem 0 0 .5rem;
|
|
}
|
|
.ok { background-color: #4ed34e; }
|
|
.warn { background-color: #fcfc64; }
|
|
.error { background-color: #ff392e; }
|
|
.error-msg { margin-top: 1rem; font-family: 'Source Code Pro', monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Status Overview</h1>
|
|
<p>{{ results.timestamp_str }}</p>
|
|
</header>
|
|
{% for group in results.groups -%}
|
|
<h2>{{ group.label }}</h2>
|
|
{% for status in group.endpoints -%}
|
|
<section>
|
|
<aside class="indicator {{ status.status }}"></aside>
|
|
<main>
|
|
<div class="info">
|
|
<h3>{{ status.label }}</h3>
|
|
<div class="spacer"></div>
|
|
{% if status.status != 2 %}<p>{{ status.rtt }}</p>{% endif %}
|
|
</div>
|
|
<a href="{{ status.location }}" target="_blank">{{ status.location }}</a>
|
|
{% for msg in status.errors -%}
|
|
<p class="error-msg">{{ msg }}</p>
|
|
{% endfor -%}
|
|
</main>
|
|
</section>
|
|
{% endfor -%}
|
|
{% endfor -%}
|
|
</body>
|
|
</html>
|