feat(log): introduce toggle for reversing log order

Added a button to the log page allowing users to toggle the order in which logs are displayed (normal or reversed). This feature enhances user experience by providing flexibility in viewing logs. The implementation involves a boolean flag `reverseOrder` to track the current state of log order and dynamically updates the button text to reflect the current mode. Additionally, the log fetching function now conditionally reverses the log array based on this flag, ensuring that the display order matches the user's preference. This change could significantly improve usability for users needing to analyze recent events without scrolling through the entire log history.
This commit is contained in:
Sergey Krashevich
2024-03-22 16:49:25 +03:00
parent f8d9fccf74
commit a50c99b8e5
+15 -1
View File
@@ -54,6 +54,7 @@
<div>
<button id="clean">Clean</button>
<button id="update">Auto Update: ON</button>
<button id="reverse">Reverse Log Order: ON</button>
</div>
<br>
<table>
@@ -85,9 +86,14 @@
.replace(/\n/g, '<br>');
}
let reverseOrder = false;
function applyLogStyling(jsonlines) {
const KEYS = ['time', 'level', 'message'];
const lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']').reverse();
const 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) => {
@@ -121,6 +127,14 @@
update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`;
});
// Toggle log order
const reverseBtn = document.getElementById('reverse');
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();