98 lines
4.2 KiB
HTML
98 lines
4.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>{{ .Title }}</title>
|
||
|
|
<meta name="referrer" content="same-origin">
|
||
|
|
<link rel="shortcut icon" href="/static/favicon" />
|
||
|
|
<style type="text/css">
|
||
|
|
:root {
|
||
|
|
--main-bg-color: #3a4149;
|
||
|
|
--dark-bg-color: #2f353a;
|
||
|
|
--light-bg-color: #626971;
|
||
|
|
--main-fg-color: #eeeeee;
|
||
|
|
|
||
|
|
--bg-okay: hsla(125, 50%, 40%, 1);
|
||
|
|
--bg-warn: hsla(40, 100%, 50%, 1);
|
||
|
|
--bg-crit: hsla(0, 75%, 50%, 1);
|
||
|
|
--bg-unkn: gray;
|
||
|
|
}
|
||
|
|
* { font-size: 100%; }
|
||
|
|
body { background: var(--dark-bg-color); padding: 0; margin: 0; color: var(--main-fg-color); }
|
||
|
|
section#content { padding: 1em; background: var(--main-bg-color); border: 1px solid black; margin: 0.5em; }
|
||
|
|
#mainmenu, aside { background: var(--main-bg-color); border-bottom: 1px solid black; }
|
||
|
|
#mainmenu ul, aside {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
align-content: center; }
|
||
|
|
aside { padding: 0.5em; border: 1px solid black; border-bottom: none; }
|
||
|
|
#mainmenu li { list-style-type: none; }
|
||
|
|
#mainmenu a, #mainmenu a:visited, #mainmenu a:active, #mainmenu a:hover, #mainmenu span {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #e4e7ea;
|
||
|
|
padding: 0.5em 0.75em;
|
||
|
|
display: block; }
|
||
|
|
aside .option { display: grid; grid-template-columns: auto auto; margin: 0em 0.25em; }
|
||
|
|
input[type="number"] { width: 4em; }
|
||
|
|
button, select { background: var(--dark-bg-color); color: var(--main-fg-color); border: 1px solid black; padding: 0.25em 0.5em; }
|
||
|
|
a { color: var(--main-fg-color); }
|
||
|
|
form article { border: 1px solid black; border-bottom: none; padding: 0.5em; }
|
||
|
|
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
|
||
|
|
table tr:nth-child(odd) { background: rgba(0, 0, 0, 0.15); }
|
||
|
|
table tr:nth-child(even) { background: var(--main-bg-color); }
|
||
|
|
table tr.selected:nth-child(odd) { background: var(--light-bg-color); }
|
||
|
|
table tr.selected:nth-child(even) { background: rgba(255, 255, 255, 0.45); }
|
||
|
|
table tr:hover, table tr:hover a { background: #dfdfdf; color: black; }
|
||
|
|
table th { background: var(--main-bg-color); color: var(--main-fg-color); font-weigth: 700; }
|
||
|
|
table td, table th { text-align: center; border: 1px solid black; padding: 0.35em 0.15em; }
|
||
|
|
table code { font-size: 75%; }
|
||
|
|
table td.disabled { text-decoration: line-through; }
|
||
|
|
.icon {
|
||
|
|
display: inline-block;
|
||
|
|
height: 1em;
|
||
|
|
margin: 0;
|
||
|
|
width: 1em;
|
||
|
|
vertical-align: bottom;
|
||
|
|
margin-right: 0.5em;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
.hidden { display: none; }
|
||
|
|
.default_button { margin: 0; padding: 0; border: 0; height: 0; width: 0; }
|
||
|
|
.mute { background-image: url(/static/icon-mute); }
|
||
|
|
.notice { background-image: url(/static/icon-notice); }
|
||
|
|
.detail > div { display: grid; grid-template-columns: 25% auto; }
|
||
|
|
.detail > div:hover { background: #dfdfdf; color: black; }
|
||
|
|
.error { padding: 0.5em; background: #ffc6c6; border: 1px solid red; }
|
||
|
|
select.states option[value="0"], .state-0 { background-color: var(--bg-okay); }
|
||
|
|
select.states option[value="1"], .state-1 { background-color: var(--bg-warn); }
|
||
|
|
select.states option[value="2"], .state-2 { background-color: var(--bg-crit); }
|
||
|
|
select.states option[value="3"], .state-3 { background-color: var(--bg-unkn); }
|
||
|
|
.state-0:after { content: 'okay' }
|
||
|
|
.state-1:after { content: 'warning' }
|
||
|
|
.state-2:after { content: 'critical' }
|
||
|
|
.state-3:after { content: 'unknown' }
|
||
|
|
/* state background colors */
|
||
|
|
{{ range $mapId, $mapping := .Mappings -}}
|
||
|
|
{{ range $target, $val := $mapping -}}
|
||
|
|
.state-{{ $mapId }}-{{ $target }} { background: {{ $val.Color }}; color: black; }
|
||
|
|
{{ end -}}
|
||
|
|
{{ end -}}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
setTimeout(function() { if (document.activeElement.tagName == "BODY") { location.reload(true) } }, 30000)
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<nav id="mainmenu">
|
||
|
|
<ul>
|
||
|
|
<li><span>{{ now.Format "2006.01.02" }}</span></li>
|
||
|
|
<li><span>{{ now.Format "15:04:05" }}</span></li>
|
||
|
|
<li><a href="/">home</a></li>
|
||
|
|
<li><a href="/checks?filter-state=1&filter-ack=false">checks</a></li>
|
||
|
|
<li><a href="/groups">groups</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
{{ if .Error }}<div class="error">{{ .Error }}</div>{{ end }}
|