Implemented a real-time console log streaming via WebSocket for debugging purposes. Users can enable console output in settings to view application logs directly in the web interface.

2026-04-11 13:47:05 +02:00 · 2026-01-14 21:47:17 +01:00
parent e997059e2a
commit 44da16977c
16 changed files with 501 additions and 15 deletions
--- a/pkg/web/console_logger.go
+++ b/pkg/web/console_logger.go
@@ -0,0 +1,105 @@
+// Fail2ban UI - A Swiss made, management interface for Fail2ban.
+//
+// Copyright (C) 2025 Swissmakers GmbH (https://swissmakers.ch)
+//
+// Licensed under the GNU General Public License, Version 3 (GPL-3.0)
+// You may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.gnu.org/licenses/gpl-3.0.en.html
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package web
+
+import (
+	"io"
+	"log"
+	"os"
+	"sync"
+
+	"github.com/swissmakers/fail2ban-ui/internal/config"
+)
+
+// ConsoleLogWriter is a multi-writer that writes to both the original log output
+// and broadcasts to WebSocket clients when console output is enabled
+type ConsoleLogWriter struct {
+	originalWriter io.Writer
+	hub            *Hub
+	mu             sync.RWMutex
+	enabled        bool
+}
+
+// NewConsoleLogWriter creates a new console log writer
+func NewConsoleLogWriter(hub *Hub, originalWriter io.Writer) *ConsoleLogWriter {
+	return &ConsoleLogWriter{
+		originalWriter: originalWriter,
+		hub:            hub,
+		enabled:        false,
+	}
+}
+
+// SetEnabled enables or disables console output broadcasting
+func (c *ConsoleLogWriter) SetEnabled(enabled bool) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	c.enabled = enabled
+}
+
+// Write implements io.Writer interface
+func (c *ConsoleLogWriter) Write(p []byte) (n int, err error) {
+	// Always write to original writer
+	n, err = c.originalWriter.Write(p)
+	
+	// Broadcast to WebSocket if enabled
+	c.mu.RLock()
+	enabled := c.enabled
+	c.mu.RUnlock()
+	
+	if enabled && c.hub != nil {
+		// Remove trailing newline for cleaner display
+		message := string(p)
+		if len(message) > 0 && message[len(message)-1] == '\n' {
+			message = message[:len(message)-1]
+		}
+		if len(message) > 0 {
+			c.hub.BroadcastConsoleLog(message)
+		}
+	}
+	
+	return n, err
+}
+
+var globalConsoleLogWriter *ConsoleLogWriter
+var consoleLogWriterOnce sync.Once
+
+// SetupConsoleLogWriter sets up the console log writer and replaces the standard log output
+// This captures all log.Printf, log.Println, etc. output
+func SetupConsoleLogWriter(hub *Hub) {
+	consoleLogWriterOnce.Do(func() {
+		// Create a multi-writer that writes to both original stdout and our console writer
+		globalConsoleLogWriter = NewConsoleLogWriter(hub, os.Stdout)
+		
+		// Replace log output - this captures all log.Printf, log.Println, etc.
+		log.SetOutput(globalConsoleLogWriter)
+	})
+}
+
+// UpdateConsoleLogEnabled updates the enabled state based on settings
+func UpdateConsoleLogEnabled() {
+	if globalConsoleLogWriter != nil {
+		settings := config.GetSettings()
+		globalConsoleLogWriter.SetEnabled(settings.ConsoleOutput)
+	}
+}
+
+// SetConsoleLogEnabled directly sets the enabled state
+func SetConsoleLogEnabled(enabled bool) {
+	if globalConsoleLogWriter != nil {
+		globalConsoleLogWriter.SetEnabled(enabled)
+	}
+}
--- a/pkg/web/static/fail2ban-ui.css
+++ b/pkg/web/static/fail2ban-ui.css
@@ -462,6 +462,11 @@ button.bg-red-500:hover, button.bg-red-600:hover {
    color: rgb(107 114 128);
 }

+/* Console output text colors */
+.text-gray-100 {
+    color: #f3f4f6;
+}
+
 #wsTooltip .border-gray-700 {
    border-color: rgb(55 65 81);
 }
--- a/pkg/web/static/js/console.js
+++ b/pkg/web/static/js/console.js
@@ -0,0 +1,213 @@
+// Console Output Handler for Fail2ban UI
+"use strict";
+
+let consoleOutputContainer = null;
+let consoleOutputElement = null;
+let maxConsoleLines = 1000; // Maximum number of lines to keep in console
+let wasConsoleEnabledOnLoad = false; // Track if console was enabled when page loaded
+
+function initConsoleOutput() {
+  consoleOutputContainer = document.getElementById('consoleOutputContainer');
+  consoleOutputElement = document.getElementById('consoleOutputWindow');
+  
+  if (!consoleOutputContainer || !consoleOutputElement) {
+    return;
+  }
+
+  // Register WebSocket callback for console logs
+  if (typeof wsManager !== 'undefined' && wsManager) {
+    wsManager.onConsoleLog(function(message, timestamp) {
+      appendConsoleLog(message, timestamp);
+    });
+  } else {
+    // Wait for WebSocket manager to be available
+    const wsCheckInterval = setInterval(function() {
+      if (typeof wsManager !== 'undefined' && wsManager) {
+        wsManager.onConsoleLog(function(message, timestamp) {
+          appendConsoleLog(message, timestamp);
+        });
+        clearInterval(wsCheckInterval);
+      }
+    }, 100);
+    
+    // Stop checking after 5 seconds
+    setTimeout(function() {
+      clearInterval(wsCheckInterval);
+    }, 5000);
+  }
+}
+
+function toggleConsoleOutput(userClicked) {
+  const checkbox = document.getElementById('consoleOutput');
+  const container = document.getElementById('consoleOutputContainer');
+  
+  if (!checkbox || !container) {
+    return;
+  }
+  
+  if (checkbox.checked) {
+    container.classList.remove('hidden');
+    // Initialize console if not already done
+    if (!consoleOutputElement) {
+      initConsoleOutput();
+    } else {
+      // Re-register WebSocket callback in case it wasn't registered before
+      if (typeof wsManager !== 'undefined' && wsManager) {
+        // Remove any existing callbacks and re-register
+        if (!wsManager.consoleLogCallbacks) {
+          wsManager.consoleLogCallbacks = [];
+        }
+        // Check if callback already exists
+        let callbackExists = false;
+        for (let i = 0; i < wsManager.consoleLogCallbacks.length; i++) {
+          if (wsManager.consoleLogCallbacks[i].toString().includes('appendConsoleLog')) {
+            callbackExists = true;
+            break;
+          }
+        }
+        if (!callbackExists) {
+          wsManager.onConsoleLog(function(message, timestamp) {
+            appendConsoleLog(message, timestamp);
+          });
+        }
+      }
+    }
+    
+    // Show save hint only if user just clicked to enable (not on page load)
+    const consoleEl = document.getElementById('consoleOutputWindow');
+    if (consoleEl && userClicked && !wasConsoleEnabledOnLoad) {
+      // Clear initial placeholder message
+      const placeholder = consoleEl.querySelector('.text-gray-500');
+      if (placeholder && placeholder.textContent === 'Console output will appear here...') {
+        placeholder.remove();
+      }
+      
+      // Show save hint message
+      const hintDiv = document.createElement('div');
+      hintDiv.className = 'text-yellow-400 italic text-center py-4';
+      hintDiv.id = 'consoleSaveHint';
+      const hintText = typeof t !== 'undefined' ? t('settings.console.save_hint', 'Please save your settings first before logs will be displayed here.') : 'Please save your settings first before logs will be displayed here.';
+      hintDiv.textContent = hintText;
+      consoleEl.appendChild(hintDiv);
+    } else if (consoleEl) {
+      // Just clear initial placeholder if it exists
+      const placeholder = consoleEl.querySelector('.text-gray-500');
+      if (placeholder && placeholder.textContent === 'Console output will appear here...') {
+        placeholder.remove();
+      }
+    }
+  } else {
+    container.classList.add('hidden');
+  }
+}
+
+function appendConsoleLog(message, timestamp) {
+  if (!consoleOutputElement) {
+    consoleOutputElement = document.getElementById('consoleOutputWindow');
+  }
+  
+  if (!consoleOutputElement) {
+    return;
+  }
+  
+  // Remove initial placeholder message
+  const placeholder = consoleOutputElement.querySelector('.text-gray-500');
+  if (placeholder && placeholder.textContent === 'Console output will appear here...') {
+    placeholder.remove();
+  }
+  
+  // Remove save hint when first log arrives
+  const saveHint = document.getElementById('consoleSaveHint');
+  if (saveHint) {
+    saveHint.remove();
+  }
+  
+  // Create log line
+  const logLine = document.createElement('div');
+  logLine.className = 'text-green-400 leading-relaxed';
+  
+  // Format timestamp if provided
+  let timeStr = '';
+  if (timestamp) {
+    try {
+      const date = new Date(timestamp);
+      timeStr = '<span class="text-gray-500">[' + date.toLocaleTimeString() + ']</span> ';
+    } catch (e) {
+      // Ignore timestamp parsing errors
+    }
+  }
+  
+  // Escape HTML to prevent XSS (but preserve timestamp HTML)
+  let escapedMessage = message;
+  if (typeof escapeHtml === 'function') {
+    escapedMessage = escapeHtml(escapedMessage);
+  } else {
+    // Fallback HTML escaping
+    escapedMessage = escapedMessage
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+  
+  // Color code different log levels
+  let logClass = 'text-green-400';
+  const msgLower = message.toLowerCase();
+  if (msgLower.includes('error') || msgLower.includes('fatal')) {
+    logClass = 'text-red-400';
+  } else if (msgLower.includes('warning') || msgLower.includes('warn')) {
+    logClass = 'text-yellow-400';
+  } else if (msgLower.includes('info') || msgLower.includes('debug')) {
+    logClass = 'text-blue-400';
+  }
+  
+  logLine.className = logClass + ' leading-relaxed';
+  logLine.innerHTML = timeStr + escapedMessage;
+  
+  // Add to console
+  consoleOutputElement.appendChild(logLine);
+  
+  // Limit number of lines
+  const lines = consoleOutputElement.children;
+  if (lines.length > maxConsoleLines) {
+    consoleOutputElement.removeChild(lines[0]);
+  }
+  
+  // Auto-scroll to bottom
+  consoleOutputElement.scrollTop = consoleOutputElement.scrollHeight;
+}
+
+function clearConsole() {
+  if (!consoleOutputElement) {
+    consoleOutputElement = document.getElementById('consoleOutputWindow');
+  }
+  
+  if (consoleOutputElement) {
+    consoleOutputElement.textContent = '';
+    // Note: wasConsoleEnabledOnLoad remains true, so hint won't show again after clear
+  }
+}
+
+// Initialize on page load
+if (typeof window !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      // Check if console output is already enabled on page load
+      const checkbox = document.getElementById('consoleOutput');
+      if (checkbox && checkbox.checked) {
+        wasConsoleEnabledOnLoad = true; // Mark that it was enabled on load
+        toggleConsoleOutput(false); // false = not a user click
+      }
+      initConsoleOutput();
+    });
+  } else {
+    // Check if console output is already enabled on page load
+    const checkbox = document.getElementById('consoleOutput');
+    if (checkbox && checkbox.checked) {
+      wasConsoleEnabledOnLoad = true; // Mark that it was enabled on load
+      toggleConsoleOutput(false); // false = not a user click
+    }
+    initConsoleOutput();
+  }
+}
--- a/pkg/web/static/js/settings.js
+++ b/pkg/web/static/js/settings.js
@@ -70,6 +70,15 @@ function loadSettings() {
      }
      
      document.getElementById('debugMode').checked = data.debug || false;
+      const consoleOutputEl = document.getElementById('consoleOutput');
+      if (consoleOutputEl) {
+        consoleOutputEl.checked = data.consoleOutput || false;
+        // Mark that console was enabled on load (settings were already saved)
+        if (typeof wasConsoleEnabledOnLoad !== 'undefined') {
+          wasConsoleEnabledOnLoad = consoleOutputEl.checked;
+        }
+        toggleConsoleOutput(false); // false = not a user click, loading from saved settings
+      }
      
      // Set callback URL and add auto-update listener for port changes
      const callbackURLInput = document.getElementById('callbackURL');
@@ -201,6 +210,7 @@ function saveSettings(event) {
    language: document.getElementById('languageSelect').value,
    port: currentPort,
    debug: document.getElementById('debugMode').checked,
+    consoleOutput: document.getElementById('consoleOutput') ? document.getElementById('consoleOutput').checked : false,
    destemail: document.getElementById('destEmail').value.trim(),
    callbackUrl: callbackUrl,
    callbackSecret: document.getElementById('callbackSecret').value.trim(),
--- a/pkg/web/static/js/websocket.js
+++ b/pkg/web/static/js/websocket.js
@@ -15,6 +15,7 @@ class WebSocketManager {
    this.lastBanEventId = null;
    this.statusCallbacks = [];
    this.banEventCallbacks = [];
+    this.consoleLogCallbacks = [];
    
    // Connection metrics for tooltip
    this.connectedAt = null;
@@ -58,11 +59,20 @@ class WebSocketManager {

      this.ws.onmessage = (event) => {
        try {
-          const message = JSON.parse(event.data);
-          this.messageCount++;
-          this.handleMessage(message);
+          // WebSocket may send multiple JSON messages separated by newlines
+          // Split by newlines and parse each message separately
+          const messages = event.data.split('\n').filter(line => line.trim().length > 0);
+          for (const messageText of messages) {
+            try {
+              const message = JSON.parse(messageText);
+              this.messageCount++;
+              this.handleMessage(message);
+            } catch (parseErr) {
+              console.error('Error parsing individual WebSocket message:', parseErr, 'Raw:', messageText);
+            }
+          }
        } catch (err) {
-          console.error('Error parsing WebSocket message:', err);
+          console.error('Error processing WebSocket message:', err);
        }
      };

@@ -112,11 +122,27 @@ class WebSocketManager {
      case 'heartbeat':
        this.handleHeartbeat(message);
        break;
+      case 'console_log':
+        this.handleConsoleLog(message);
+        break;
      default:
        console.log('Unknown message type:', message.type);
    }
  }

+  handleConsoleLog(message) {
+    // Notify all registered console log callbacks
+    if (this.consoleLogCallbacks) {
+      this.consoleLogCallbacks.forEach(callback => {
+        try {
+          callback(message.message, message.time);
+        } catch (err) {
+          console.error('Error in console log callback:', err);
+        }
+      });
+    }
+  }
+
  handleBanEvent(eventData) {
    // Check if we've already processed this event (prevent duplicates)
    // Only check if event has an ID and we have a lastBanEventId
@@ -170,6 +196,13 @@ class WebSocketManager {
    this.banEventCallbacks.push(callback);
  }

+  onConsoleLog(callback) {
+    if (!this.consoleLogCallbacks) {
+      this.consoleLogCallbacks = [];
+    }
+    this.consoleLogCallbacks.push(callback);
+  }
+
  disconnect() {
    if (this.ws) {
      this.ws.close();
--- a/pkg/web/templates/index.html
+++ b/pkg/web/templates/index.html
@@ -231,9 +231,33 @@
          </div>

          <!-- Debug Log Output -->
-          <div class="flex items-center border border-gray-200 rounded-lg p-2 overflow-x-auto bg-gray-50">
-            <input type="checkbox" id="debugMode" class="h-4 w-7 text-blue-600 transition duration-150 ease-in-out">
-            <label for="debugMode" class="ml-2 block text-sm text-gray-700" data-i18n="settings.enable_debug">Enable Debug Log</label>
+          <div class="flex items-center gap-4 border border-gray-200 rounded-lg p-2 overflow-x-auto bg-gray-50">
+            <div class="flex items-center">
+              <input type="checkbox" id="debugMode" class="h-4 w-7 text-blue-600 transition duration-150 ease-in-out">
+              <label for="debugMode" class="ml-2 block text-sm text-gray-700" data-i18n="settings.enable_debug">Enable Debug Log</label>
+            </div>
+            <div class="flex items-center">
+              <input type="checkbox" id="consoleOutput" class="h-4 w-7 text-blue-600 transition duration-150 ease-in-out" onchange="toggleConsoleOutput(true)">
+              <label for="consoleOutput" class="ml-2 block text-sm text-gray-700" data-i18n="settings.enable_console">Enable Console Output</label>
+            </div>
+          </div>
+
+          <!-- Console Output Window -->
+          <div id="consoleOutputContainer" class="hidden mt-4 border border-gray-700 rounded-lg bg-gray-900 shadow-lg overflow-hidden">
+            <div class="flex items-center justify-between bg-gray-800 px-4 py-2 border-b border-gray-700">
+              <div class="flex items-center gap-2">
+                <div class="flex gap-1.5">
+                  <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                  <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                </div>
+                <h4 class="text-sm font-medium text-gray-100 ml-2" data-i18n="settings.console.title">Console Output</h4>
+              </div>
+              <button type="button" onclick="clearConsole()" class="text-xs text-gray-100 hover:text-white px-2 py-1 rounded hover:bg-gray-700 transition-colors" data-i18n="settings.console.clear">Clear</button>
+            </div>
+            <div id="consoleOutputWindow" class="overflow-y-auto p-4 font-mono text-sm text-green-400 bg-gray-900" style="max-height: 430px; min-height: 200px;">
+              <div class="text-gray-500">Console output will appear here...</div>
+            </div>
          </div>
        </div>

@@ -1355,6 +1379,7 @@
  <script src="/static/js/dashboard.js?v={{.version}}"></script>
  <script src="/static/js/servers.js?v={{.version}}"></script>
  <script src="/static/js/jails.js?v={{.version}}"></script>
+  <script src="/static/js/console.js?v={{.version}}"></script>
  <script src="/static/js/settings.js?v={{.version}}"></script>
  <script src="/static/js/filters.js?v={{.version}}"></script>
  <script src="/static/js/websocket.js?v={{.version}}"></script>
--- a/pkg/web/websocket.go
+++ b/pkg/web/websocket.go
@@ -73,6 +73,26 @@ type Hub struct {
 	mu sync.RWMutex
 }

+// BroadcastConsoleLog broadcasts a console log message to all connected clients
+func (h *Hub) BroadcastConsoleLog(message string) {
+	logMsg := map[string]interface{}{
+		"type":    "console_log",
+		"message": message,
+		"time":    time.Now().UTC().Format(time.RFC3339),
+	}
+	data, err := json.Marshal(logMsg)
+	if err != nil {
+		log.Printf("Error marshaling console log: %v", err)
+		return
+	}
+
+	select {
+	case h.broadcast <- data:
+	default:
+		// Channel full, drop message
+	}
+}
+
 // NewHub creates a new WebSocket hub
 func NewHub() *Hub {
 	return &Hub{