Skip to content

Commit

Permalink
Merge pull request #875 from skrashevich/logs-reverse-order
Browse files Browse the repository at this point in the history
feat(webui): reverse log order to display newest first
  • Loading branch information
AlexxIT authored Apr 22, 2024
2 parents 2d86ffd + 7dc9eaa commit 675476a
Showing 1 changed file with 24 additions and 6 deletions.
30 changes: 24 additions & 6 deletions www/log.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
<div>
<button id="clean">Clean</button>
<button id="update">Auto Update: ON</button>
<button id="reverse">Reverse Log Order: OFF</button>
</div>
<br>
<table>
Expand Down Expand Up @@ -68,9 +69,21 @@
.replace(/\n/g, '<br>');
}

let reverseBtn = document.getElementById('reverse');
let update = document.getElementById('update');

let reverseOrder = false;
let autoUpdateEnabled = true;

reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`;
update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`;

function applyLogStyling(jsonlines) {
const KEYS = ['time', 'level', 'message'];
const lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']');
let lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']');
if (reverseOrder) {
lines = lines.reverse();
}
return lines.map(line => {
const ts = new Date(line['time']);
const msg = Object.keys(line).reduce((msg, key) => {
Expand All @@ -95,19 +108,24 @@

reload();

// Handle auto-update switch
let autoUpdateEnabled = true;

const update = document.getElementById('update');
update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`;
update.addEventListener('click', () => {
autoUpdateEnabled = !autoUpdateEnabled;
update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`;
});

// Toggle log order
reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`;
reverseBtn.addEventListener('click', () => {
reverseOrder = !reverseOrder;
reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`;
reload(); // Reload logs to apply the new order
});

// Reload the logs every 5 seconds
setInterval(() => {
if (autoUpdateEnabled) reload();
}, 5000);
</script>
</body>
</html>
</html>

0 comments on commit 675476a

Please sign in to comment.