You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
haproxy-wi/app/templates/metrics.html

92 lines
2.6 KiB

{% extends "base.html" %}
{% block content %}
<style>
table, th, tr, td {
border: 1px solid #ddd;
align: center;
text-align: center;
}
th, tr, td {
width: 6%;
min-width: 3%;
padding: 10px;
}
</style>
<link href="/inc/chart.min.css" rel="stylesheet">
<script src="/inc/metrics.js"></script>
<script src="/inc/chart.min.js"></script>
{% if services == '0' %}
<center>
<br />
<h3>You do not have installed Metrics service.
Read <a href="https://haproxy-wi.org/services.py?service=metrics#installation" title="Metrics installation" style="color: #5d9ceb;" target="_blank">hear</a>
how to install Metrics service</h3>
</center>
{% else %}
{% if servers|length == 0 %}
{% include 'include/getstarted.html' %}
{% else %}
<table style="min-width: 40%;">
<tr class="overviewHead">
<th colspan=13 style="background-color: #d1ecf1">
<span id="table_metrics_head" style="position: absolute;margin-left: 43%;">Metrics</span>
<span id="en_table_metric" class="add switcher_table_metric" title="Enable showing Average table"></span>
<span id="dis_table_metric" class="minus switcher_table_metric" title="Disable showing Average table"></span>
</th>
</tr>
</table>
<div id="table_metrics"></div>
<div style="padding-left: 25px;float: left;margin-top: 6px;">
<b>Time range:</b>
<select title="Choose time range" id="time-range">
<option value="30">30 minutes</option>
<option value="60">1 hour</option>
<option value="180">3 hours</option>
<option value="360">6 hours</option>
<option value="720">12 hours</option>
</select>
</div>
<div id="refresh" style="text-align: right;margin-top: 20px;margin-right: 10px;" title="Refresh metrics" onclick="showMetrics()">
<span class="service-reload"></span>
</div>
{% for s in servers %}
<div class="chart-container">
<canvas id="{{s.0}}" role="img"></canvas>
</div>
{% endfor %}
<script>
function showMetrics() {
let metrics = new Promise(
(resolve, reject) => {
{% for s in servers %}
getChartData('{{s.0}}')
{% endfor %}
if (localStorage.getItem('table_metrics') == 0 || localStorage.getItem('table_metrics') === null) {
$('#dis_table_metric').css('display', 'none');
} else {
$('#en_table_metric').css('display', 'none');
loadMetrics();
}
});
metrics.then();
}
showMetrics()
$( function() {
$("#time-range").on('selectmenuchange', function () {
removeData()
let metrics = new Promise(
(resolve, reject) => {
{% for s in servers %}
getChartData('{{s.0}}')
{% endfor %}
});
metrics.then();
});
});
</script>
{% endif %}
{% endif %}
{% endblock %}