Skip to content

UsingtheWebUI.md

Jump to bottom
Chris edited this page May 15, 2025 · 6 revisions

Using the Web UI

DockFlare features a comprehensive web interface, styled with DaisyUI for a modern look and feel, providing real-time visibility into its status, managed rules, and allowing for interactive policy management.

Access: How to Access the Web UI (Typically http://localhost:5000 or your exposed DockFlare hostname)

Web ui example (Consider updating this screenshot to reflect the latest UI with DaisyUI components, new table columns, and theme selector.)

The UI is organized into several key sections:

1. Tunnel & Agent Status

This top section provides an at-a-glance overview of DockFlare's core operations:

  • Cloudflare API & Tunnel Setup:
    • API Status: Indicates the current status of DockFlare's connection to the Cloudflare API and the setup of the configured Cloudflare Tunnel (e.g., "Tunnel setup complete (using API)", "Error: Failed to retrieve tunnel token"). Detailed error messages are shown if issues occur.
  • Tunnel Details:
    • Desired Name: The name of the Cloudflare Tunnel DockFlare is configured to manage (from TUNNEL_NAME env var).
    • Tunnel ID: The unique ID of the Cloudflare Tunnel being used.
    • Tunnel Token: (Internal Mode Only) A truncated version of the tunnel token used by the cloudflared agent.
  • Agent Control: (This section's appearance and functionality differ based on internal/external mode)
    • Internal Mode:
      • Agent Status: Displays the live status of the cloudflared agent container managed by DockFlare (e.g., "running", "stopped", "initializing").
      • Agent Name: The name of the managed cloudflared container.
      • Start/Stop Buttons: Allows manual starting or stopping of the cloudflared agent container for troubleshooting.
    • External Mode:
      • Indicates that DockFlare is operating with an externally managed cloudflared agent.
      • Displays the EXTERNAL_TUNNEL_ID being used.
      • Agent start/stop controls are disabled as lifecycle is managed externally.
  • Last Action Status: A dynamic message area that shows the outcome of recent operations (e.g., successful policy updates, errors during DNS creation, reconciliation status).

2. Managed Ingress Rules

This table is the heart of the UI, listing all ingress rules currently managed by DockFlare. The table columns include:

  • Status:
    • active: The rule is configured, and the associated container is running.
    • pending deletion: The container has stopped; rule scheduled for deletion after the grace period.
    • pending_label_sync (transient): Appears briefly after "Revert to Labels" is clicked, before labels are re-processed.
  • Hostname: The public hostname. Clickable link to the service. A "wildcard" badge appears if it's a wildcard entry.
  • Service Target: The internal protocol://host:port DockFlare routes traffic to.
  • Container: The short ID of the Docker container managing this rule.
  • Access Policy:
    • Displays the current Access Policy type applied (e.g., "Bypass", "Authenticate by Email", "None (Public)", "Default TLD", or the type from container labels like "Authenticate").
    • If an Access Application exists for this rule, a link to directly edit it in the Cloudflare Dashboard is provided.
    • "UI Override" Badge: This crucial badge appears if the Access Policy for this rule was set via the Web UI. It signifies that the UI-configured policy takes precedence over any cloudflare.tunnel.access.* labels on the container.
  • Manage Policy: This column contains actions for controlling the Access Policy:
    • Edit Button: Opens a dropdown form allowing you to change the Access Policy for the rule. Options typically include:
      • None (Public - No App)
      • Bypass (Public App)
      • Authenticate by Email (prompts for an email address)
      • Use Default *.tld Policy
    • Revert Button: (Only visible if "UI Override" is active). Clicking this removes the UI-set policy, deletes the associated UI-managed Cloudflare Access Application (if any), and makes DockFlare re-evaluate and apply the Access Policy based on the container's current labels during the next reconciliation cycle.
  • Expires At (UTC): (Visible for pending deletion status) The timestamp when the rule is scheduled for automatic deletion.
  • Actions:
    • Delete Button: ("Force Delete") Immediately removes the rule, its DNS record, and any associated DockFlare-managed Access Application from Cloudflare and DockFlare's state, bypassing the grace period.

3. All Cloudflare Tunnels on Account

  • Lists all Cloudflare Tunnels found on your configured Cloudflare Account ID.
  • Displays Tunnel Name, ID, Status, Creation Date, and active Connections (colocation centers).
  • Each tunnel has a +/- button to expand and view any CNAME DNS records in your configured zones that point to that specific tunnel. This is useful for auditing and understanding your overall tunnel landscape.

4. Real-time Activity Logs

  • Log Stream: A mockup-code styled section that displays logs directly from the DockFlare application in real-time using Server-Sent Events (SSE).
  • Content: Shows container start/stop events, label processing, Cloudflare API interactions (tunnel, DNS, Access App changes), errors, and status updates.
  • Usefulness: Essential for monitoring operations, diagnosing issues, and understanding DockFlare's actions. See also Debugging & Logs.

5. Theme Selector

  • Located at the top-right of the page.
  • Allows you to choose from various pre-built DaisyUI themes (e.g., light, dark, cupcake, synthwave, etc.) to customize the UI's appearance. Your preference is saved in browser local storage.

Note on Reverse Proxies: If accessing the UI through a reverse proxy, ensure it's configured to handle Server-Sent Events (SSE) correctly (e.g., no excessive buffering, appropriate timeouts) for the real-time log stream.

Clone this wiki locally