Files
snitch/snitch-web/templates/index.hbs

92 lines
1.7 KiB
Handlebars

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<link rel="icon" type="image/svg+xml" href="/static/icon.svg">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
<title>snitch</title>
<style>
body {
color: white;
background-color: #302f3b;
font-family: 'Ubuntu', sans-serif;
}
th {
color: wheat;
}
td {
border: 0.1em solid #5b3f63;
padding: 0.5em;
font-family: 'Ubuntu Mono', mono;
}
.service-error-list {
max-height: 20em;
font-size: small;
overflow: scroll;
transition: max-height ease-in-out 0.4s;
}
.collapsed {
max-height: 0;
}
</style>
<script>
function collapse(id) {
document.getElementById(id).classList.toggle("collapsed")
}
</script>
</head>
<body>
{{#if records}}
<table>
<tr>
<th>Severity</th>
<th>Service</th>
<th>Count</th>
<th>Last message at</th>
</tr>
{{#each records_by_service}}
<tr onclick="collapse('{{@key}}-error-list')">
<td>{{this.severity}}</td>
<td>{{@key}}</td>
<td>{{len this.all_records}}</td>
<td>{{this.last_record.time}}</td>
</tr>
<tr><td colspan="4">
<div
id="{{@key}}-error-list"
class="service-error-list collapsed"
>
<table>
<tr>
<th>Severity</th>
<th>Message</th>
<th>Time</th>
</tr>
{{#each this.all_records}}
<tr>
<td>{{this.severity}}</td>
<td>{{this.message}}</td>
<td>{{this.time}}</td>
</tr>
{{/each}}
</table>
</div></td></tr>
{{/each}}
</table>
{{else}}
<p>
No entries! All is well.
</p>
{{/if}}
</body>
</html>