65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<figure>
|
|
<div id="history_graph">{{history_graph|safe}}</div>
|
|
<figcaption class="float-right">
|
|
<span id="history_graph_zoom_out" class="h4 oi oi-zoom-out text-muted" style="cursor:pointer;"></span>
|
|
<span id="history_graph_zoom_in" class="h4 oi oi-zoom-in text-muted" style="cursor:pointer;"></span>
|
|
</figcaption>
|
|
<figcaption class="float-left">
|
|
<span class="h4 text-muted">{{instance_count}} instances</span>
|
|
<span class="h4 text-muted">— {{client_count}} clients</span>
|
|
<span class="h4 text-muted">— {{server_count}} servers</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
<div class="col-12">
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js"></script>
|
|
<script>
|
|
let dataPoints = {{data_points}};
|
|
let maxPoints = 2880;
|
|
maxPoints = Math.min(maxPoints, dataPoints);
|
|
let zoomLevel = Math.floor(maxPoints);
|
|
let performingZoom = false;
|
|
|
|
function updateHistoryGraph() {
|
|
perfomingZoom = true;
|
|
$.get('/history/' + zoomLevel)
|
|
.done(function (content) {
|
|
$('#history_graph').html(content.message);
|
|
//maxPoints = Math.min(maxPoints, dataPoints);
|
|
perfomingZoom = false;
|
|
});
|
|
}
|
|
|
|
//setInterval(updateHistoryGraph, 30000);
|
|
|
|
$('#history_graph_zoom_out').click(function () {
|
|
if (performingZoom === true) {
|
|
return false;
|
|
}
|
|
zoomLevel = Math.floor(zoomLevel * 2) <= maxPoints ? Math.floor(zoomLevel * 2) : maxPoints;
|
|
updateHistoryGraph();
|
|
});
|
|
|
|
$('#history_graph_zoom_in').click(function () {
|
|
if (performingZoom === true) {
|
|
return false;
|
|
}
|
|
zoomLevel = zoomLevel / 2 > 2 ? Math.ceil(zoomLevel / 2) : 2;
|
|
updateHistoryGraph();
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|