mirror of
https://github.com/outscale/zabbix-super-vision.git
synced 2025-06-23 18:24:32 +02:00
New supervision
- using fastAPI - offline/online working - warning if ZABBIX API is too long - showing settings - showing last ack message - showing procedure - menu split by SU team
This commit is contained in:
sylvain.chateau
@ -1,196 +1,241 @@
|
||||
<!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>
|
||||
|
||||
<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/default.css">
|
||||
<link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<script type="text/javascript" src="/js/jquery-3.4.1.slim.min.js"></script>
|
||||
<script type="text/javascript" src="/js/dynafav-1.0.js"></script>
|
||||
<script type="text/javascript" src="/js/popper.min.js"></script>
|
||||
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-labelledby="configModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="configModalLabel">Configuration</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
SET on settings.py
|
||||
<div class="list-group mb-4">
|
||||
{% for key, value in config.items() %}
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
{{ key }}: {{ value }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</form>
|
||||
Hard value
|
||||
<div class="list-group mb-4">
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
REFRESH SUPER: 30
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</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>
|
||||
<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">
|
||||
{% for team, hostgroups in teams.items() %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ team }}
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
{% for hostgroup in hostgroups %}
|
||||
<a class="dropdown-item" href='/{{hostgroup}}'>{{ hostgroup }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="ml-auto">
|
||||
<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>
|
||||
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#configModal">
|
||||
See config
|
||||
</button>
|
||||
</div>
|
||||
</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 not check_servers[ip] %}
|
||||
<tr class='bg-danger'>
|
||||
<td class='text-center'>
|
||||
<h1>/!\ Zabbix Server: {{ ip }} unreachable /!\</h1>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if config.ZABBIX_API_LIMIT == total_alerts %}
|
||||
<table class='table table-borderless table-sm'>
|
||||
<tr class='bg-danger'>
|
||||
<td class='text-center'>
|
||||
<h1>/!\ ZABBIX_API_LIMIT is reached, you will not see all triggers /!\</h1>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if not accepted_latency %}
|
||||
<table class='table table-borderless table-sm'>
|
||||
<tr class='bg-danger'>
|
||||
<td class='text-center'>
|
||||
<h1>/!\ Zabbix Server API is taking too much time (ZABBIX_API_ACCEPTED_LATENCY : {{ config.ZABBIX_API_ACCEPTED_LATENCY }}) /!\</h1>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if not zabbix_available %}
|
||||
<table class='table table-borderless table-sm'>
|
||||
<tr class='bg-danger'>
|
||||
<td class='text-center'>
|
||||
<h1>/!\ ZABBIX API unreachable /!\</h1>
|
||||
</td>
|
||||
</tr>
|
||||
</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 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>
|
||||
{% if alert["acknowledge"]["message"] %}
|
||||
<i
|
||||
class="fa fa-info-circle"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title='{{ alert["acknowledge"]["username"]}}: {{ alert["acknowledge"]["message"]}}'
|
||||
>
|
||||
</i>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if alert["url"] %}
|
||||
<a href='{{ alert["url"] }}' target="_blank" rel="noopener noreferrer">
|
||||
<i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href='{{zabbix_url}}/zabbix.php?action=problem.view&filter_set=1&filter_triggerids%5B%5D={{alert["triggerid"]}}'
|
||||
target='_blank'>{{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.png" width="15%" /></div>
|
||||
{% endif %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<span id="health-status" class="badge badge-pill badge-success">Super is UP</span>
|
||||
<script type="text/javascript">
|
||||
window.tvMode = {{ tv_mode | tojson }};
|
||||
</script>
|
||||
<script src="/js/super.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user