diff options
Diffstat (limited to 'cmd/monfront/templates')
| -rw-r--r-- | cmd/monfront/templates/check.html | 51 | ||||
| -rw-r--r-- | cmd/monfront/templates/checkfilter.html | 49 | ||||
| -rw-r--r-- | cmd/monfront/templates/checkformfooter.html | 1 | ||||
| -rw-r--r-- | cmd/monfront/templates/checkformheader.html | 43 | ||||
| -rw-r--r-- | cmd/monfront/templates/checklist.html | 29 | ||||
| -rw-r--r-- | cmd/monfront/templates/error.html | 1 | ||||
| -rw-r--r-- | cmd/monfront/templates/footer.html | 76 | ||||
| -rw-r--r-- | cmd/monfront/templates/grouplist.html | 21 | ||||
| -rw-r--r-- | cmd/monfront/templates/header.html | 101 |
9 files changed, 372 insertions, 0 deletions
diff --git a/cmd/monfront/templates/check.html b/cmd/monfront/templates/check.html new file mode 100644 index 0000000..e30f62a --- /dev/null +++ b/cmd/monfront/templates/check.html @@ -0,0 +1,51 @@ + {{ template "header" . }} + <section id="content"> + {{ template "checkformheader" . }} + {{ $mapping := .Mappings }} + {{ with .CheckDetails }} + <input type="hidden" name="checks" value="{{ .Id }}" /> + <article class="detail"> + <h1>check for service {{ .Name }}</h1> + <div><span class="label">current state</span><span class="value state-{{ index .States 0 }}"></span></div> + <div><span class="label">current notice</span><span class="value">{{ if .Notice }}{{ .Notice.String }}{{ end }}</span></div> + <div><span class="label">Message</span><span class="value">{{ .Message }}</span></div> + <div><span class="label">enabled</span><span class="value">{{ .Enabled }}</span></div> + <div><span class="label">updated</span><span class="value">{{ .Updated.Format "2006.01.02 15:04:05" }}</span></div> + <div><span class="label">next check</span><span class="value">{{ .NextTime.Format "2006.01.02 15:04:05" }}</span></div> + <div><span class="label">last refresh</span><span class="value">{{ .LastRefresh.Format "2006.01.02 15:04:05" }}</span></div> + <div><span class="label">mapping</span><span class="value">{{ .MappingId }}</span></div> + </article> + <article class="detail"> + <h1>node <a href="/checks?node_id={{ .NodeId }}">{{ .NodeName }}</a></h1> + <div><span class="label">Message</span><span class="value">{{ .NodeMessage }}</span></div> + </article> + <article class="detail"> + <h1>command {{ .CommandName }}</h1> + <div><span class="label">Message</span><span class="value">{{ .CommandMessage }}</span></div> + <div><span class="label">command line</span><span class="value"><code>{{ join .CommandLine " " }}</code></span></div> + </article> + <article class="detail"> + <h1>checker {{ .CheckerName }}</h1> + <div><span class="label">Description</span><span class="value">{{ .CheckerMsg }}</span></div> + </article> + <article> + <h1>notifications</h1> + <table> + <thead><tr><th>notifier</th><th>state</th><th>created</th><th>sent</th><th>output</th></thead> + <tbody> + {{ range .Notifications -}} + <tr> + <td>{{ .NotifierName }}</td> + <td class="state-{{ .MappingId }}-{{ .State }}">{{ (index $mapping .MappingId .State).Title }}</td> + <td>{{ .Inserted.Format "2006.01.02 15:04:05" }}</td> + <td>{{ if .Sent.Valid }}{{ .Sent.Time.Format "2006.01.02 15:04:05" }}{{ end }}</td> + <td>{{ .Output }}</td> + </tr> + {{ end -}} + </tbody> + </table> + </article> + {{ end }} + {{ template "checkformfooter" . }} + </section> + {{ template "footer" . }} diff --git a/cmd/monfront/templates/checkfilter.html b/cmd/monfront/templates/checkfilter.html new file mode 100644 index 0000000..f86ce3c --- /dev/null +++ b/cmd/monfront/templates/checkfilter.html @@ -0,0 +1,49 @@ + <form action="/checks" method="get"> + <aside id="edit"> + <div class="option"> + <select id="filter-state" name="filter-state" class="states"> + <option value="">filter state</option> + {{ $FilterValsState := "" }} + {{ if .Filter.Vals.state }}{{$FilterValsState = .Filter.Vals.state }}{{ end }} + <option value="0" {{ if eq (itoa 0) $FilterValsState }}selected{{ end }}>>= OK</option> + <option value="1" {{ if eq (itoa 1) $FilterValsState }}selected{{ end }}>>= Warning</option> + <option value="2" {{ if eq (itoa 2) $FilterValsState }}selected{{ end }}>>= Error</option> + <option value="3" {{ if eq (itoa 3) $FilterValsState }}selected{{ end }}>>= Unknown</option> + </select> + </div> + <div class="option"> + <select id="filter-ack" name="filter-ack"> + <option value="">filter acknowledged</option> + <option value="false" {{ if eq "false" (index .Filter.Vals "ack") }}selected{{ end }}>unacknowledged</option> + <option value="true" {{ if eq "true" (index .Filter.Vals "ack") }}selected{{ end }}>acknowledged</option> + </select> + </div> + <div class="option"> + <select id="filter-mapping" name="filter-mapping"> + <option value="">filter mapping</option> + {{ $FilterValsMapping := "" }} + {{ if .Filter.Vals.mapping }}{{ $FilterValsMapping = .Filter.Vals.mapping }}{{ end }} + {{ range $mapId, $mapping := .Mappings -}} + <option value="{{ $mapId }}" {{ if eq (itoa $mapId) $FilterValsMapping }}selected{{ end }}>{{ (index $mapping 0).Name }}</option> + {{ end }} + </select> + </div> + <div class="option"> + <select id="filter-command" name="filter-command"> + <option value="">filter command</option> + {{ $FilterValsCommands := "" }} + {{ if .Filter.Vals.command }}{{ $FilterValsCommands = .Filter.Vals.command }}{{ end }} + {{ range $command, $comId := .Commands -}} + <option value="{{ $comId }}" {{ if eq (itoa $comId) $FilterValsCommands }}selected{{ end }}>{{ $command }}</option> + {{ end }} + </select> + </div> + <div class="option"> + <input name="filter-search" placeholder="hostname" value="{{ .Filter.Vals.search }}" /> + </div> + <div class="option"> + <button name="filter" value="1">filter</button> + <button name="reset" value="1">reset</button> + </div> + </aside> + </form> diff --git a/cmd/monfront/templates/checkformfooter.html b/cmd/monfront/templates/checkformfooter.html new file mode 100644 index 0000000..5582354 --- /dev/null +++ b/cmd/monfront/templates/checkformfooter.html @@ -0,0 +1 @@ +</form> diff --git a/cmd/monfront/templates/checkformheader.html b/cmd/monfront/templates/checkformheader.html new file mode 100644 index 0000000..7662670 --- /dev/null +++ b/cmd/monfront/templates/checkformheader.html @@ -0,0 +1,43 @@ + {{ if .CanEdit }} + <form action="/action" method="post"> + <aside id="edit"> + <button class="default_button" name="action" value="comment"></button> + <div class="option input"> + <input type="number" name="run_in" placeholder="run in" title="define the number of minutes after which the check should be run again" /> + <button name="action" value="reschedule">run now</button> + </div> + <div class="option"> + <button name="action" value="deack">deack</button> + <button name="action" value="ack">ack</button> + </div> + <div class="option"> + <button name="action" value="enable">enable</button> + <button name="action" value="disable">disable</button> + </div> + <div class="option"> + <button name="action" value="mute">mute</button> + <button name="action" value="unmute">unmute</button> + </div> + <div class="option input"> + <input size="" name="comment" placeholder="enter comment ..." /> + </div> + <div class="option"> + <button name="action" value="comment">comment</button> + <button name="action" value="uncomment">uncomment</button> + </div> + <div class="option"> + <button type="button" name="create_check">create</button> + <button name="action" value="delete_check">delete</button> + </div> + </aside> + <aside id="create_check" class="hidden"> + <div class="option"> + <label for="host">host</label> + <input name="host" placeholder="hostname" /> + </div> + <div class="option"> + <label for="command">command</label> + <input name="command" placeholder="command" /> + </div> + </aside> + {{ end }} diff --git a/cmd/monfront/templates/checklist.html b/cmd/monfront/templates/checklist.html new file mode 100644 index 0000000..17830ef --- /dev/null +++ b/cmd/monfront/templates/checklist.html @@ -0,0 +1,29 @@ + {{ template "header" . }} + <section id="content"> + {{ template "checkfilter" . }} + {{ template "checkformheader" . }} + <table> + <thead><tr><th><input type="checkbox" title="select all" /></th><th>host</th><th>service</th><th>status</th><th title="shows how long the check is already in that state">for</th><th>next check in</th><th>message</th></tr></thead> + <tbody> + {{ $current := "" }} + {{ $mapping := .Mappings }} + {{ range .Checks }} + <tr> + <td><input type="checkbox" name="checks" value="{{ .CheckID }}" /></td> + <td>{{ if ne $current .NodeName }}{{ $current = .NodeName }}<a href="/checks?node_id={{ .NodeId }}">{{ .NodeName }}</a>{{ end }}</td> + <td>{{ .CheckName }}</td> + <td class="state-{{ .State }}"> + {{- if ne .Notify true }}<span class="icon mute"></span>{{ end -}} + {{- if .Notice.Valid }}<span class="icon notice" title="{{ .Notice.String }}"></span>{{ end -}} + <a href="/check?check_id={{ .CheckID }}">{{ .CommandName }}</a> + </td> + <td>{{ since .StateSince }}</td> + <td>{{ in .NextTime }}</td> + <td><code>{{ .Msg }}</code></td> + </tr> + {{ end }} + </tbody> + </table> + {{ template "checkformfooter" . }} + </section> + {{ template "footer" . }} diff --git a/cmd/monfront/templates/error.html b/cmd/monfront/templates/error.html new file mode 100644 index 0000000..efffc4c --- /dev/null +++ b/cmd/monfront/templates/error.html @@ -0,0 +1 @@ +{{ .Error }} diff --git a/cmd/monfront/templates/footer.html b/cmd/monfront/templates/footer.html new file mode 100644 index 0000000..124b585 --- /dev/null +++ b/cmd/monfront/templates/footer.html @@ -0,0 +1,76 @@ + <script type="text/javascript"> + function row_head_click_event(event) { + check = false; + current = event.target; + while (current != null) { + if (current.nodeName == 'TABLE') { + break; + } + if (current.nodeName == 'TR') { + check = !current.children[0].children[0].checked; + current.children[0].children[0].checked = check; + } + current = current.parentNode; + } + lines = current.children[1].children + for (i = 0; i < lines.length; i++) { + select_row(event, lines[i], lines[i].children[0].children[0], check); + } + } + function row_click_event(event) { + if (event.target.nodeName == 'INPUT') { + return; + } + current = event.target; + while (current = current.parentNode) { + if (current.nodeName == 'BODY') { + break; + } + if (current.nodeName != 'TR') { + continue; + } + e = current.children[0].children[0]; + check = !e.checked; + select_row(event, current, e, check); + break; + } + } + function select_row(event, row, input, check) { + if (input != event.target) { + input.checked = check; + } + if (input.checked) { + row.classList.add("selected"); + } else { + row.classList.remove("selected"); + } + input.focus(); + } + + for (selector of ['thead > tr', 'thead input']) { + els = document.querySelectorAll(selector); + for (i = 0; i < els.length; i++) { + els[i].addEventListener('click', {handleEvent: row_head_click_event}); + } + } + for (selector of ['tbody > tr', 'tbody input']) { + els = document.querySelectorAll(selector); + for (i = 0; i < els.length; i++) { + els[i].addEventListener('click', {handleEvent: row_click_event}); + } + } + butt = document.querySelectorAll('button[type=button][name=create_check]'); + for (i = 0; i < butt.length; i++) { + butt[i].addEventListener('click', {handleEvent: function(event){ + cur = document.querySelector('#create_check').style.display; + console.log("meh: " + cur); + if (cur == 'block') { + document.querySelector('#create_check').style.display = 'none'; + } else { + document.querySelector('#create_check').style.display = 'block'; + } + }}); + } + </script> + </body> +</html> diff --git a/cmd/monfront/templates/grouplist.html b/cmd/monfront/templates/grouplist.html new file mode 100644 index 0000000..fa0554c --- /dev/null +++ b/cmd/monfront/templates/grouplist.html @@ -0,0 +1,21 @@ + {{ template "header" . }} + {{ template "checkformheader" . }} + <content> + <table> + <thead><tr><th></th><th>group</th><th>host</th><th>worst state</th></tr></thead> + <tbody> + {{ $current := "" }} + {{ $mapping := .Mappings }} + {{ range .Groups }} + <tr> + <td><input type="checkbox" name="nodes" value="{{ .NodeId }}" /></td> + <td>{{ if ne $current .Name }}{{ $current = .Name }}<a href="{{ if $.Unhandled }}/unhandled{{ end }}/checks?group_id={{ .GroupId }}">{{ .Name }}</a>{{ end }}</td> + <td><a href="/checks?node_id={{ .NodeId }}">{{ .NodeName }}</a></td> + <td class="state-{{ .MappingId }}-{{ .State }}">{{ (index $mapping .MappingId .State).Title }}</td> + </tr> + {{ end }} + </tbody> + </table> + </content> + {{ template "checkformfooter" . }} + {{ template "footer" . }} diff --git a/cmd/monfront/templates/header.html b/cmd/monfront/templates/header.html new file mode 100644 index 0000000..1f9040d --- /dev/null +++ b/cmd/monfront/templates/header.html @@ -0,0 +1,101 @@ +<!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> + <li class="submenu"> + <form action="/checks" method="get"> + </form> + </li> + </ul> + </nav> + {{ if .Error }}<div class="error">{{ .Error }}</div>{{ end }} |