Skip to content

Add logs to frontend - Complete UI implementation for log viewing #528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Aug 1, 2025

This PR implements a complete frontend interface for viewing application logs, building on the JSON API endpoint that was added in PR #420.

Changes Made

Frontend Components

  • Logs Button: Added a new info-colored button with journal icon to the navbar, positioned before the existing config and add buttons
  • Logs Modal: Created a comprehensive modal dialog with:
    • Extra-large modal size for optimal log readability
    • Control panel with Refresh and Clear Display buttons
    • Auto-refresh toggle with 5-second intervals
    • Monospace font styling for proper log formatting
    • Scrollable container with auto-scroll to latest entries

JavaScript Functionality

  • Integrated log fetching from the existing /api/logs endpoint
  • Implemented log entry parsing and formatting with color-coded log levels:
    • INF (Info) entries displayed in green
    • ERR and FAT (Error/Fatal) entries displayed in red
  • Added comprehensive error handling for API failures
  • Implemented auto-refresh capability with user toggle control
  • Added manual refresh and display clearing functionality

Technical Improvements

  • Enhanced error handling in the main page handler with IP resolution fallback
  • Updated .gitignore to properly exclude build artifacts and data files
  • Maintained consistency with existing Bootstrap modal patterns and dark theme styling

Usage

Users can now click the logs button in the navbar to open a modal displaying real-time application logs. The interface provides controls for refreshing logs, clearing the display, and enabling auto-refresh for monitoring live log output.

The implementation seamlessly integrates with the existing UI design patterns and provides a user-friendly way to monitor application activity directly from the web interface.

Frontend Integration

Fixes #329.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

  • api.ipify.org
    • Triggering command: ./ddns-updater (dns block)
  • api.ipy.ch
  • api.my-ip.io
    • Triggering command: ./ddns-updater (dns block)
  • icanhazip.com
  • ident.me
    • Triggering command: ./ddns-updater (dns block)
  • ifconfig.me
  • nms.intellitrend.de
    • Triggering command: ./ddns-updater (dns block)

If you need me to access, download, or install something from one of these locations, you can either:


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@Copilot Copilot AI changed the title [WIP] Add logs to frontend Add logs to frontend - Complete UI implementation for log viewing Aug 1, 2025
@Copilot Copilot AI requested a review from Plaenkler August 1, 2025 06:44
Copilot finished work on behalf of Plaenkler August 1, 2025 06:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add logs to frontend
2 participants