Add log file handling and viewing capabilities

This commit introduces the ability to handle log files through the API and provides a new log viewing page. The API now supports GET and DELETE methods for log file operations, allowing retrieval and deletion of log contents. A new log.html page has been added for viewing logs in the browser, with automatic refresh every 5 seconds and styling based on log levels. The app.go file has been updated to include a GetLogFilepath function that retrieves or generates the log file path. The NewLogger function now accepts a file parameter to enable file logging. The main.js file has been updated to include a link to the new log.html page. This enhancement improves the observability and management of the application by providing real-time access to logs and the ability to clear them directly from the web interface.
2023-11-26 23:21:57 +03:00
parent 051c5ff913
commit 8d382afa0f
4 changed files with 211 additions and 2 deletions
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Logs</title>
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+            background-color: white;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+        }
+
+        html, body, #config {
+            width: 100%;
+            height: 100%;
+        }
+
+        .log-viewer {
+            background-color: #f4f4f4;
+            border: 1px solid #ddd;
+            padding: 10px;
+        }
+        .log-entry {
+            font-family: 'Courier New', monospace;
+            margin-bottom: 5px;
+        }
+        .info { color: #0174DF; }
+        .debug { color: #585858; }
+        .error { color: #DF0101; }
+    </style>
+</head>
+<body>
+<script src="main.js"></script>
+<div>
+    <button id="clean">Clean</button>
+</div>
+<br>
+<div class="log-viewer" id="log"></div>
+<script>
+    const logbody = document.getElementById('log');
+
+    document.getElementById('clean').addEventListener('click', async () => {
+        r = await fetch('api/log', {method: 'DELETE'});
+        if (r.ok) {
+            reload();
+            alert('OK');
+        } else {
+            alert(await r.text());
+        }
+    });
+
+    // Sanitizes the input text to prevent XSS when inserting into the DOM
+    function escapeHTML(text) {
+        return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    function applyLogStyling(logText) {
+        // Split the log into lines
+        const lines = logText.split('\n');
+        // Create HTML content with styled spans
+        const styledLines = lines.map(line => {
+        let className = '';
+        if (line.includes(' INF ')) className = 'info';
+        if (line.includes(' DBG ')) className = 'debug';
+        if (line.includes(' ERR ')) className = 'error';
+        return `<div class="log-entry ${className}">${escapeHTML(line)}</div>`;
+        });
+        // Join the lines back into a single string
+        return styledLines.join('');
+    }
+
+    function reload() {
+        const url = new URL('api/log', location.href);
+        fetch(url, {cache: 'no-cache'})
+        .then(response => response.text())
+        .then(data => {
+            // Apply styling to the log data
+            logbody.innerHTML = applyLogStyling(data);
+        })
+        .catch(error => {
+            console.error('An error occurred:', error);
+        });
+    }
+
+  // Reload the logs every 5 seconds
+  setInterval(reload, 5000);
+
+  reload();
+</script>
+</body>
+</html>
@@ -47,6 +47,7 @@ nav li {
        <li><a href="index.html">Streams</a></li>
        <li><a href="add.html">Add</a></li>
        <li><a href="editor.html">Config</a></li>
+        <li><a href="log.html">Log</a></li>
    </ul>
 </nav>
 ` + document.body.innerHTML;