<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>[{{total_alerts}}] Super(Vision)</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/octicons.min.css">
<link rel="stylesheet" href="/css/offline.css">
<script src="/js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="/js/dynafav-1.0.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/offline.min.js" ></script>
<style type="text/css">
a {
color: #DF7401;
font-weight: bolder;
}
a:hover {
text-decoration: none;
color: #DF7401;
}
body {
background-color: #333;
font-weight: bolder;
}
.disaster {
background-color:#D30801;
color: #FFFFFF !important;
}
.disaster a {
color: white;
}
.table td, .table th { padding: 1px; !important }
.image-container {
display: flex;
justify-content: center;
align-items: center;
padding-top: 15%;
}
.btn-group-sm>.btn, .btn-sm {
padding: .08rem .5rem;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="/">[{{total_alerts}}] Super(Vision)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-sm" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% for hostgroup in hostgroups %}
<li class='nav-item'><a class='nav-link' href='/{{hostgroup}}'>{{hostgroup}}</a></li>
{%endfor%}
</ul>
<button class="btn btn-outline-secondary" type="button" data-toggle="collapse" data-target="#form-msg" aria-expanded="false" aria-controls="form-message"><span class='octicon octicon-comment'></span></button>
</div>
</nav> <div class="row-fluid">
<div class="container">
<div class="collapse" id="form-msg">
<div class="card card-body">
<form action="/post" method="post" accept-charset="utf-8" enctype="application/x-www-form-urlencoded">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Your name" name="name" required>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Message" name="msg" required>
<input type="text" class="form-control" name="url" id="url" hidden readonly>
</div>
<div class="col">
<select class="form-control" name="lvl">
<option value="info">Info</option>
<option value="warning">Warning</option>
<option value="danger">Disaster</option>
</select>
</div>
{% include "form.html" %}
<div class="col">
<button id="publish" name="save" class="btn btn-secondary">Publish <span class="octicon octicon-mail"></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="container-fluid">
{% if check_servers %}
<table class='table table-borderless table-sm'>
{% for ip in check_servers%}
{% if check_servers[ip] != 0 %}
<tr class='bg-danger'>
<td class='text-center align-left'>
<span class='octicon octicon-alert'></span> Zabbix Server: {{ip}} seems unreachable! <span class='octicon octicon-alert'></span>
</td>
</tr>
{%endif%}
{%endfor%}
</table>
{%endif%}
{% if notes %}
<table class='table table-borderless'>
{% for note in notes %}
<tr class='bg-{{note["lvl"]}}'><td class='text-left'><span class='octicon octicon-clock'></span> {{note["date"]}}</td><td class='text-center'> {{note["msg"]}}</td><td class='text-right'><span class='octicon octicon-hubot'></span><i> (by {{note["name"]}})</i></td><td class='text-right'><form action='/del' method='post' accept-charset='utf-8' enctype='application/x-www-form-urlencoded'><input type='text' class='form-control url_note' name='url' hidden readonly><input type='text' name='note_id' value='{{note["ts"]}}' readonly hidden><button type='submit' class='btn btn-outline-light btn-sm' id='del_note' ><span class='octicon octicon-trashcan'></span></button></form></td></tr>"
{% endfor %}
</table>
{% endif %}
<table class="table table-dark table-sm alerts">
{% if alerts|length > 0 %}
{% for alert in alerts %}
{% if alert["priority"] == '5' %}
<tr class="disaster">
{% else %}
<tr>
{%endif%}
<td>
<span class='badge badge-pill' style='background-color:{{alert["color"]}}'>{{alert["hostgroup"]}}</span>
</td>
<td>{{alert["host"]}}</td>
<td>
<a href='{{zabbix_url}}/zabbix.php?action=problem.view&filter_set=1&filter_triggerids%5B%5D={{alert["triggerid"]}}' target='_blank' "+css_class+">{{alert["description"]}}</a>
</td>
{% if alert["priority"] == '1' %}
<td><span class="badge badge-pill badge-info">1</span></td>
{% elif alert["priority"] == '2' %}
<td><span class="badge badge-pill badge-primary">2</span></td>
{% elif alert["priority"] == '3' %}
<td><span class="badge badge-pill badge-warning">3</span></td>
{% elif alert["priority"] == '4' %}
<td><span class="badge badge-pill badge-danger">4</span></td>
{% elif alert["priority"] == '5' %}
<td><span class="octicon octicon-flame"> </span></td>
{% endif %}
<td>
<span class='badge badge-pill badge-light'>{{alert["since"]}}</span>
</td>
</tr>
{%endfor%}
{%else%}
<div class="container-fluid image-container"><img src="/images/zabbix_logo_500x131.png" width="30%"/></div>
{%endif%}
</table>
</div>
</div>
</body>
<script type="text/javascript">
var refresh;
$(document).ready(function() {
{% if tv_mode == true %}
$('nav').hide();
$('form').hide();
{% else %}
$('nav').show();
$('form').show();
{% endif %}
$('#url').val($(location).attr('href'));
$('.url_note').val($(location).attr('href'));
$('#del_note').click(function(e)
{
if(!confirm("This note will be deleted. Are you sure?"))
{
e.preventDefault();
}
});
function reload_page() {
if(Offline.state != 'up') {
clearInterval(refresh);
} else {
var refresh;
location.reload();
}
}
refresh = setInterval(reload_page,30000);
Offline.options = {
// to check the connection status immediatly on page load.
checkOnLoad: true,
// to monitor AJAX requests to check connection.
interceptRequests: true,
// to automatically retest periodically when the connection is down (set to false to disable).
reconnect: {
// delay time in seconds to wait before rechecking.
initialDelay: 3,
// wait time in seconds between retries.
delay: 10
},
// to store and attempt to remake requests which failed while the connection was down.
requests: true
};
});
</script>