Michael Simard 86d34e9462 Security: Extract API credentials to separate config file
- Move API credentials from script.js to config.js
- Add config.js to .gitignore to prevent credential exposure
- Create config.example.js as template for new installations
- Add validation check for missing configuration
- Update index.html to load config.js before script.js

This change ensures API keys are never committed to the repository
while maintaining full functionality of the dashboard.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-22 22:11:27 -06:00

Thanos Systems Monitor

A cyberpunk-themed dashboard for monitoring Unraid server status, designed to run on Raspberry Pi 3.

Features

  • Disk Usage Monitoring

    • Total disk usage visualization
    • Individual disk statistics (Docker, Photos, Media)
    • Ring chart displays with percentage and capacity
    • Detailed disk array with progress bars
  • System Metrics

    • CPU usage monitoring
    • Memory usage tracking
    • Parity status display with error reporting
    • Last parity check date
  • Docker Containers

    • Container status display (Running/Offline)
    • Visual grid layout with color-coded states
  • Cyberpunk Theme

    • Black background with teal accents
    • Pink warning indicators (70-89% usage)
    • White critical alerts (90%+ usage)
    • Animated borders and glowing effects
    • Scanline animation

Requirements

  • Unraid server with GraphQL API enabled
  • API key with appropriate permissions
  • Modern web browser
  • Raspberry Pi 3 (or any device with a web browser)

Installation

  1. Clone this repository:

    git clone <repository-url>
    cd unraid-dash
    
  2. Configure API settings:

    • Open script.js
    • Update the API_CONFIG object at the top of the file:
      const API_CONFIG = {
          serverUrl: 'http://YOUR_UNRAID_IP:PORT/graphql',
          apiKey: 'YOUR_API_KEY_HERE'
      };
      
  3. Open index.html in a web browser

Configuration

Disk Categories

The dashboard categorizes disks as follows:

  • Total Disk: All disks combined
  • Docker: Disk 6 only
  • Photos: Disk 7 only
  • Media: All disks except Disk 6 and Disk 7

To modify these categories, edit the disk processing logic in script.js (lines 373-389).

Update Interval

The dashboard refreshes data every 5 seconds by default. To change this, modify line 373 in script.js:

setInterval(updateDashboard, 5000); // Change 5000 to desired milliseconds

Color Thresholds

Warning and critical thresholds are defined in the update functions:

  • Normal (< 70%): Teal (#00ffff)
  • Warning (70-89%): Pink (#ff00ff)
  • Critical (90%+): White (#ffffff)

File Structure

unraid-dash/
├── index.html              # Main dashboard HTML
├── styles.css              # Cyberpunk styling
├── script.js               # API integration and update logic
├── schema-test.html        # GraphQL schema exploration tool
├── config-example.js       # Configuration template
├── graph_scheme.txt        # Complete GraphQL schema
├── GRAPHQL_SCHEMA_FINDINGS.md  # Schema discovery documentation
├── PROJECT_SUMMARY.md      # Development history
└── README.md               # This file

API Permissions

The dashboard requires read access to:

  • System metrics (CPU, Memory)
  • Array information (disks, capacity, parity)
  • Docker containers

Browser Compatibility

Tested and working on:

  • Chrome/Chromium
  • Firefox
  • Safari
  • Edge

Performance

Optimized for Raspberry Pi 3:

  • Lightweight vanilla JavaScript (no frameworks)
  • CSS-based animations
  • Minimal DOM manipulation
  • Efficient data fetching with Promise.all()

Troubleshooting

Dashboard shows "ERROR: Failed to fetch data from Unraid server"

  1. Verify server URL is correct
  2. Ensure API key has proper permissions
  3. Check network connectivity to Unraid server
  4. Open browser console (F12) to view detailed error messages

Disk usage shows 0%

  1. Ensure disks are mounted and accessible
  2. Check that GraphQL query includes fsSize and fsUsed fields
  3. Verify array is started on Unraid server

Docker containers not displaying

  1. Confirm Docker service is running on Unraid
  2. Verify API key has Docker read permissions
  3. Check browser console for error messages

Development

To explore the GraphQL API schema:

  1. Open schema-test.html in a browser
  2. Use the introspection query tool
  3. Test custom queries before adding to dashboard

Security Note

IMPORTANT: The script.js file contains your API key. Do not commit this file with real credentials to public repositories. Use config-example.js as a template.

License

This project is provided as-is for personal use.

Credits

Developed with Claude Code by Anthropic.

Description
No description provided
Readme 74 KiB
Languages
HTML 43.7%
JavaScript 39.6%
CSS 16.7%