IntenseWebs/LibreQoS
3
0
Fork 0
mirror of https://github.com/LibreQoE/LibreQoS.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add pause button and fast/slow modes to circuit_queue page

Browse Source 
FIXES #303

Adds a pause button to freeze a snapshot of the current circuit
queue page.

Adds a "fast mode" and "slow mode" toggle. Slow mode continues
at a 1s update cadence. Fast mode uses animation frame support
to update at a good speed, at the expense of CPU usage.

Stores the preference in local storage, so it will resume the
same mode next time you visit the page.
This commit is contained in:
Herbert Wolverson 2023-03-28 14:13:36 +00:00
parent 7321c00234
commit 53acf90600
1 changed files with 85 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/rust/lqos_node_manager/static/circuit_queue.html
View File

@ -94,7 +94,8 @@
</ul>
</div>
<div class="col-sm-2">
<div id="raw"></div>
<a href="#" class="btn btn-small btn-info" id="btnPause"><i class="fa fa-pause"></i> Pause</a>
<a href="#" class="btn btn-small btn-info" id="btnSlow"><i class="fa fa-hourglass"></i> Slow Mode</a>
</div>
</div>
</div>
@ -520,10 +521,10 @@
up = 0 - up;
let down_slot = Math.floor((down / circuit_info[CircuitInfo.capacity][0]) * 10.0);
let up_slot = Math.floor((up / circuit_info[CircuitInfo.capacity][1]) * 10.0);
/*if (down_slot < 0) down_slot = 0;
if (down_slot < 0) down_slot = 0;
if (up_slot < 0) up_slot = 0;
if (down_slot > 11) down_slot = 11;
if (up_slot > 11) up_slot = 11;*/
if (down_slot > 10) down_slot = 10;
if (up_slot > 10) up_slot = 10;
this.quantiles[0][down_slot] += 1;
this.quantiles[1][up_slot] += 1;
//console.log(down_slot, up_slot);
@ -796,9 +797,28 @@
let id = 0;
let activeTab = "pills-home-tab";
var lastCalledTime;
var fps;
var worstDelta = 0;
var paused = false;
var slowMode = false;
function oneSecondCadence() {
//console.log(activeTab);
function showFps() {
if(!lastCalledTime) {
lastCalledTime = Date.now();
fps = 0;
return;
}
delta = (Date.now() - lastCalledTime)/1000;
lastCalledTime = Date.now();
fps = 1/delta;
//$("#fps").text(fps.toFixed(0));
worstDelta = Math.max(delta, worstDelta);
}
function updateFrame() {
showFps();
if (!paused) {
switch (activeTab) {
case "pills-funnel-tab": {
getFunnel();
@ -811,7 +831,16 @@
getThroughput();
}
}
setTimeout(oneSecondCadence, 1000);
}
// Doing this to balance out the FPS
// It will tend towards the slowest
if (slowMode) {
setTimeout(updateFrame, 1000);
} else {
setTimeout(() => {
requestAnimationFrame(updateFrame);
}, worstDelta * 200);
}
}
function wireUpTabEvents() {
@ -822,8 +851,45 @@
});
}
function isSlowMode() {
let slow = localStorage.getItem("slowMode");
if (slow == null) {
localStorage.setItem("slowMode", false);
slow = false;
}
if (slow == "false") {
slow = false;
} else if (slow == "true") {
slow = true;
}
return slow;
}
function start() {
wireUpTabEvents();
$("#btnPause").on('click', () => {
paused = !paused;
if (paused) {
$("#btnPause").html("<i class='fa fa-play'></i> Resume");
} else {
$("#btnPause").html("<i class='fa fa-pause'></i> Pause");
}
});
slowMode = isSlowMode();
if (slowMode) {
$("#btnSlow").html("<i class='fa fa-fast-forward'></i> Fast Mode");
} else {
$("#btnSlow").html("<i class='fa fa-hourglass'></i> Slow Mode");
}
$("#btnSlow").on('click', () => {
slowMode = !slowMode;
localStorage.setItem("slowMode", slowMode);
if (slowMode) {
$("#btnSlow").html("<i class='fa fa-fast-forward'></i> Fast Mode");
} else {
$("#btnSlow").html("<i class='fa fa-hourglass'></i> Slow Mode");
}
});
colorReloadButton();
updateHostCounts();
const params = new Proxy(new URLSearchParams(window.location.search), {
@ -831,7 +897,8 @@
});
id = params.id;
$.get("/api/watch_circuit/" + params.id, () => {
oneSecondCadence();
//updateFrame();
requestAnimationFrame(updateFrame);
});
}