fix stuck tooltips

This commit is contained in:
root 2020-08-02 00:48:39 -04:00
parent 6dc0d9656f
commit d8c794fa56
2 changed files with 28 additions and 5 deletions

View File

@ -106,7 +106,7 @@ class OManager:
# align time range to grid defined by monitoring interval
now = datetime.now()
for i in self.instances:
lines = math.ceil(time_range*60/5)
lines = math.ceil(time_range*60/5)+1
io_stat = i["op"].get_io_stat(lines=lines)
first_line = True
prev_value = None

View File

@ -464,6 +464,9 @@
colors = Array.from(Array(100), () => "#" + random().toString(16).substr(-6))
var color = Chart.helpers.color;
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
var update_stat = function () {
$.getJSON("/stat", function (data) {
// update top chart
@ -483,8 +486,10 @@
})
traffic_chart.data.datasets = datasets;
traffic_chart.update();
// update table
var ovpn_table = $("#ovpn_table");
$('[data-toggle="tooltip"]').tooltip('hide');
ovpn_table.empty();
ovpn_table.append($(`<thead>
<tr>
@ -492,6 +497,7 @@
<th>Status</th>
<th>Weight</th>
<th>Alive</th>
<th>Ping</th>
<th>Actions</th>
</tr>
</thead>`))
@ -503,7 +509,10 @@
<td class="text-muted">${instance.status}</td>
<td class="text-muted">${instance.weight}</td>
<td class="text-muted">
<div class="chart-sparkline" id="sparkline-${index}"></div>
<div class="chart-sparkline" id="alive-${index}"></div>
</td>
<td class="text-muted">
<div class="chart-sparkline" id="ping-${index}"></div>
</td>
<td class="text-muted">
<a id="start_button_${instance.idx}" href="#!" data-placement="top" data-toggle="tooltip" title="start"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"></path><path d="M18 15l-6-6l-6 6h12" transform="rotate(90 12 12)"></path></svg></a>
@ -521,7 +530,7 @@
tr.find(`#stop_button_${instance.idx}`).click(() => {
$.get(`/stop?i=${instance.idx}`, update_stat);
})
$().peity && $(`#sparkline-${index}`).text(instance.ping_rate.join(", ")).peity("line", {
$().peity && $(`#alive-${index}`).text(instance.ping_rate.join(", ")).peity("line", {
width: 64,
height: 40,
stroke: "#206bc4",
@ -529,14 +538,28 @@
fill: ["#d2e1f3"],
padding: .2,
});
$('[data-toggle="tooltip"]').tooltip()
$().peity && $(`#ping-${index}`).text(instance.ping_mean.join(", ")).peity("bar", {
width: 64,
height: 40,
stroke: "#206bc4",
strokeWidth: 2,
fill: function (_, i, all) {
if (instance.ping_rate[i] == 0) {
return "#ee1111"
} else {
return "#206bc4"
}
},
padding: .2,
max: 200
});
});
});
}
update_stat();
setInterval(update_stat, 5000);
setInterval(update_stat, 1000);
</script>