UptimeRobot Wallboard

A real-time status wallboard for monitoring your UptimeRobot services. Display service health, uptime status, and alerts on a clean, customizable dashboard perfect for NOC displays, office monitors, or personal dashboards.

Note: Screenshots show demo data only. No real services or sensitive information are displayed.

✨ Key Features

• 🚀 Easy Setup - Built-in installer wizard for first-time configuration
• 📊 Real-time Monitoring - Automatic refresh with live status updates
• 📈 Response Time Graphs - Visual line graphs showing last hour's response times on each tile
• 🎨 Dark/Light Themes - Toggle between themes with system preference support
• 🔍 Smart Filtering - Show all monitors or only those with issues
• 🏷️ Tag Filtering - Filter monitors by tags with colored pills and multi-select
• ⏸️ Paused Device Control - Show/hide paused monitors with one click
• 🖥️ Fullscreen Mode - Auto-fullscreen support for kiosk displays
• 🎯 Customizable - Add your logo and custom title
• ⚙️ Flexible Configuration - URL parameters and config file options
• 🔄 Auto-refresh - Detects configuration changes automatically

🚀 Quick Start

Prerequisites

• Web server with PHP 7.4+ (Apache or Nginx)
• UptimeRobot account with API access
• Basic knowledge of file permissions and web hosting

Installation

1. Clone or download this repository to your web server:

      cd /var/www/html
      git clone https://github.com/BlindTrevor/Uptime-Robot-Wallboard.git status
      cd status

2. Access the installer by navigating to the application in your browser. If no configuration exists, you'll be automatically redirected to installer.php.
3. Enter your UptimeRobot API token (Get it from: UptimeRobot Settings → API Settings)
4. Configure your preferences in the installer form and click "Create Configuration"
5. Done! The wallboard will automatically load and display your monitors

Manual Configuration (Alternative)

If you prefer manual setup:

1. Copy the example configuration:

      cp config.env.example config.env

2. Edit config.env and add your UptimeRobot API token:

      UPTIMEROBOT_API_TOKEN=your-api-token-here
      WALLBOARD_TITLE=My Status Dashboard
      SHOW_PROBLEMS_ONLY=false
      SHOW_PAUSED_DEVICES=false
      REFRESH_RATE=20
      THEME=dark

3. Set secure file permissions:

      chmod 600 config.env
      chown www-data:www-data config.env

4. Access index.php in your browser

📖 Configuration Options

Edit config.env to customize your wallboard:

🎯 Usage

Basic Usage

• Load and display all your UptimeRobot monitors
• Refresh every 20 seconds (configurable)
• Show status with color-coded indicators:
• 🟢 Green = Up/Operational
• 🔴 Red = Down/Offline
• 🟡 Yellow = Paused

URL Parameters

Override settings temporarily using URL parameters:

# Show only problems, refresh every 30 seconds
https://your-domain.com/status/?showProblemsOnly=true&refreshRate=30

# Use light theme and auto-fullscreen for kiosk
https://your-domain.com/status/?theme=light&autoFullscreen=true

# Show paused devices and hide tags
https://your-domain.com/status/?showPausedDevices=true&showTags=false

Control Buttons

• Show Only Problems - Toggle between all monitors and problem-only view
• Show/Hide Paused - Quickly toggle paused monitor visibility
• Show/Hide Tags - Toggle tag visibility on monitor cards
• Show/Hide Filter - Toggle the tag filter section visibility
• Theme Toggle - Switch between dark and light themes
• Fullscreen - Enter/exit fullscreen mode
• Refresh Now - Manually trigger data refresh

Multi-Instance Support 🆕

The wallboard now supports running multiple independent instances (browser tabs/windows/machines) without API query duplication or shared actions:

Session Isolation

• Unique Session ID: Each browser tab/window gets a unique session identifier displayed in the header
• Independent State: Theme, filters, and view settings are isolated per session
• No Cross-Session Interference: Actions in one tab don't affect others

API Request Coordination

• Cross-Tab Communication: When multiple tabs are open, they coordinate to prevent duplicate API calls
• Smart Refresh: Only one tab makes API requests while others benefit from the results
• Reduced API Volume: Automatic coordination helps reduce overall API call volume

Best Practices for Multiple Displays

1. Active Displays: Open normally - tabs will coordinate automatically
2. Passive/View-Only Displays: Use ?norefresh=true parameter (see below)
3. Debugging: Check the session ID in the header to distinguish instances

Disable Auto-Refresh (Passive Mode)

For displays that don't need real-time updates or to reduce API usage:

# Load data once without automatic refreshes
https://your-domain.com/status/?norefresh=true

# Combine with other parameters
https://your-domain.com/status/?norefresh=true&showProblemsOnly=true

• ✅ Initial data loads normally
• ⛔ No automatic API polling
• ⛔ Config change detection disabled
• ✅ Manual "Refresh Now" button still works

• Kiosk displays that don't need real-time updates
• Secondary monitors in multi-display setups
• Reducing API quota usage
• Screenshots or demos with static data

🔒 Security Best Practices

Store Config Outside Webroot (Recommended)

The most secure approach is to store config.env outside your web-accessible directory:

# If your webroot is /var/www/html/status
# Store config at /var/www/html/config.env (one level up)

cat > /var/www/html/config.env << 'EOF'
UPTIMEROBOT_API_TOKEN=your-token-here
# ... other settings ...
EOF

chmod 600 /var/www/html/config.env
chown www-data:www-data /var/www/html/config.env

The application automatically searches parent directories for the config file.

If Storing in Webroot

If you must store config.env in the webroot:

1. Set restrictive permissions:

      chmod 600 config.env

2. Verify .htaccess protection (Apache):

      curl http://your-domain.com/status/config.env
      # Should return 403 Forbidden

3. For Nginx users, add to your server block:

      location ~ /config\.env {
          deny all;
          return 403;
      }

Security Checklist

• ✅ config.env returns 403 when accessed via HTTP
• ✅ File permissions set to 600 (owner read/write only)
• ✅ config.env is in .gitignore (never commit secrets!)
• ✅ Consider storing outside webroot for maximum security

🎨 Themes

Dark Theme (Default)

Screenshot shows demo data with response time graphs visible on each monitor tile.

Light Theme

Screenshot shows demo data with response time graphs in light theme.

• The theme toggle button in the UI
• ?theme=dark, ?theme=light, or ?theme=auto URL parameter
• THEME setting in config.env

🏷️ Tag Filtering

Filter your monitors by tags for better organization and focused monitoring. Each monitor displays its assigned tags as colored pills, making it easy to visually identify and categorize services.

Features

• Colored Tag Pills - Each tag displays with a unique, deterministic color for easy visual identification
• Multi-Tag Filtering - Select one or more tags to filter monitors (OR logic - shows monitors with ANY selected tag)
• Collapsible Filter - Toggle filter visibility with "Show Filter" / "Hide Filter" button
• Clear Filters - One-click to reset all tag selections
• Real-time Updates - Instant filtering as you select/deselect tags

Filter Section

Screenshot shows demo data with the tag filter section expanded, displaying all available tags with colored pills. Response time graphs are visible on each monitor tile.

Click "Show Filter" to reveal all available tags. Click any tag to filter monitors.

Filtered View

Screenshot shows demo data filtered to only display monitors tagged with "critical". The selected tag appears highlighted in the filter section, and only matching monitors are shown with their response time graphs.

When one or more tags are selected, only monitors with those tags are displayed. Selected tags appear highlighted with increased opacity and a shadow effect.

How to Use

1. View Tags - All monitors display their tags as colored pills at the bottom of each card
2. Show Filter - Click the "Show Filter" button in the controls to reveal the tag filter section
3. Select Tags - Click one or more tags to filter monitors. Selected tags are highlighted
4. Clear Filter - Click "Clear Filter" to remove all selections and show all monitors
5. Hide Filter - Click "Hide Filter" to collapse the filter section

Benefits

• Quick Organization - Instantly filter to Production, Staging, API, Database, or any custom tags
• Multi-Environment - Separate views for different environments or regions
• Team Workflows - Filter by team ownership, criticality, or service type
• Visual Clarity - Color-coded tags make it easy to scan and identify services at a glance

Custom Tag Colors

You can customize tag colors using the TAG_COLORS configuration option in config.env. This accepts a JSON object with two optional configurations:

1. Define acceptable color palette:

TAG_COLORS={"acceptable":["#FF0000","#00FF00","blue","orange"]}

2. Map specific tags to specific colors:

TAG_COLORS={"tags":{"production":"red","staging":"yellow","development":"#3ad29f"}}

3. Combine both approaches:

TAG_COLORS={"acceptable":["#FF0000","#00FF00","blue"],"tags":{"critical":"red","warning":"yellow","info":"#abf7b1"}}

Supported color formats include:

• Hex codes: #FF0000, #abf7b1


• CSS color names: red, blue, orange, green


• RGB/HSL formats: rgb(255,0,0), hsl(120,100%,50%)

📈 Response Time Graphs

Each monitor tile that provides response time data displays a small green line graph in the bottom-right corner, showing the monitor's response times over the last hour.

Features

• Automatic Display - Graphs automatically appear for monitors that support response time tracking
• Last Hour Data - Shows response time trends over the past 60 minutes
• Theme-Aware - Graph colors adapt to your selected theme (dark/light)
• Hover Details - Hover over a graph to see min/max/avg response times
• Smart Caching - Response time data is cached for 5 minutes (configurable) to reduce API calls
• Rate Limit Friendly - Requests are queued with delays to avoid overwhelming the API

Configuration

Control the cache duration in config.env:

# Cache response time data for 5 minutes (300 seconds)
RESPONSE_TIME_CACHE_DURATION=300

# Or customize to your needs:
# RESPONSE_TIME_CACHE_DURATION=60    # 1 minute (minimum)
# RESPONSE_TIME_CACHE_DURATION=600   # 10 minutes
# RESPONSE_TIME_CACHE_DURATION=1800  # 30 minutes

Note: The minimum cache duration is 60 seconds (1 minute). Longer cache durations reduce API calls and help stay within rate limits, but graphs will update less frequently.

How It Works

1. When the wallboard loads, it queries the UptimeRobot API for each monitor's response time statistics
2. The data is cached locally for the configured duration (default: 5 minutes)
3. Small line graphs are rendered using HTML5 canvas on each monitor tile
4. Graphs automatically update when the cache expires

📜 Event History & Recent Event Highlighting

The wallboard includes an event history viewer that tracks all monitor status changes and system events. Recent events are automatically highlighted to improve visibility of recent activity.

Features

• Event Tracking - Automatically logs all monitor state changes (up, down, paused) and system events
• Event Types - Track different event categories:
• Up - Monitor status changes to operational/up
• Down - Monitor status changes to down/offline
• Paused - Monitor paused status events
• Error - System errors and transient issues
• Actions - User and page-initiated events (page refresh, button toggles, page load, etc.)
• Recent Event Highlighting - Events within the configured time window are displayed with a prominent color and visual effects
• Configurable Time Window - Customize how long events are considered "recent" (default: 1 hour)
• Event Sidebar - View comprehensive event history with pagination
• Event Filtering - Filter events by type using interactive filter pills
• Circular Logging - Optionally limit event history to a maximum number of events

Recent Event Highlighting

• Distinctive gradient background
• Prominent border color
• Subtle glow effect
• Enhanced hover state

• Identifying ongoing issues
• Tracking recent deployments or changes
• Monitoring system stability over recent hours

Configuration

Control the recent event time window in config.env:

# Highlight events from the last 60 minutes (default)
RECENT_EVENT_WINDOW_MINUTES=60

# Or customize to your needs:
# RECENT_EVENT_WINDOW_MINUTES=30   # 30 minutes
# RECENT_EVENT_WINDOW_MINUTES=120  # 2 hours
# RECENT_EVENT_WINDOW_MINUTES=1440 # 24 hours

If not configured, the default is 60 minutes (1 hour) to maintain backwards compatibility.

How to Use

1. Click the Events button in the controls to open the event history sidebar
2. Recent events (within your configured time window) will appear with prominent highlighting
3. Older events appear with standard styling
4. Use the event type filter pills to show/hide specific event categories (Down, Up, Paused, Error, Actions)
5. Use pagination controls to browse through historical events

🖥️ Kiosk Mode

Perfect for dedicated monitoring displays:

1. Set up auto-fullscreen:

      # In config.env
      AUTO_FULLSCREEN=true

2. Or use URL parameter:

      https://your-domain.com/status/?autoFullscreen=true&showProblemsOnly=true

3. Combine with browser kiosk mode for an immersive experience

🔧 Troubleshooting

No data showing

• Check browser console for errors (F12)
• Verify API token is correct in config.env
• Ensure uptimerobot_status.php is accessible
• Check uptime_errors.log for PHP errors

Configuration not loading

• Verify config.env file exists and has correct permissions
• Check file format: KEY=value (no spaces around =)
• Ensure web server can read the file (chmod 600 and correct ownership)

403 Forbidden errors

• For .env files: This is expected and correct (security protection)
• For PHP files: Check Apache/Nginx configuration allows PHP execution
• Verify .htaccess is not blocking legitimate requests

Installer redirects immediately

• Config file already exists - use the main application
• To reconfigure, delete or rename existing config.env

📚 Advanced Features

Paused Device Control

Control visibility of paused monitors:

• Default: Paused monitors are hidden


• Show Paused: Display paused monitors with warning indicators


• Toggle Button: Quick show/hide via UI button


• URL Override: ?showPausedDevices=true or false

• Display "PAUSED" status with ⏸️ icon


• Use warning (yellow/orange) color


• Are counted separately in the header


• Don't trigger the red "issues" background

Screenshot shows demo data with a paused monitor (Example Staging Server) displayed with warning colors and "PAUSED" status. Response time graphs are visible on all monitor tiles, including the paused one.

Query String Parameters

All configuration options can be overridden via URL (when ALLOW_QUERY_OVERRIDE=true):

?showProblemsOnly=true          # Show only problematic monitors
?showPausedDevices=true         # Show/hide paused monitors
?showTags=false                 # Show/hide tags on monitor cards
?refreshRate=30                 # Set refresh interval (seconds)
?theme=light                    # Set theme (dark/light/auto)
?autoFullscreen=true            # Auto-enter fullscreen
?configCheckRate=10             # Config check interval
?norefresh=true                 # Disable automatic refresh (accepts 'true' or '1')

Disable Automatic Refresh

Note: For multi-instance scenarios and best practices, see the Multi-Instance Support section above.

Use the ?norefresh=true parameter to disable all automatic API refreshes. See the Usage section for detailed information and use cases.

Auto-Refresh on Config Changes

• Title or logo
• Theme settings
• Display filters
• Refresh rates

Logo Display

Add your company logo to the wallboard:

1. Upload your logo file to the application directory
2. Edit config.env:

      WALLBOARD_LOGO=logo.png
      # Or use a URL:
      # WALLBOARD_LOGO=https://example.com/logo.png

3. Recommended size: 200x50 pixels or similar aspect ratio
4. Supported formats: PNG, SVG, JPG, GIF

🤝 Contributing

• Report bugs or issues
• Suggest new features
• Submit pull requests
• Improve documentation

📄 License

This project is open source and available for use and modification.

🙏 Acknowledgments

• Built for UptimeRobot API v3
• Font Awesome for icons
• Community contributions and feedback

📞 Support

For issues, questions, or feature requests, please use the GitHub Issues page.

Made with ❤️ for monitoring enthusiasts