- Cyberpunk-themed Unraid dashboard - Disk usage monitoring with ring charts - System metrics (CPU, Memory, Parity) - Docker container status display - Optimized for Raspberry Pi 3 - GraphQL API integration 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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
-
Clone this repository:
git clone <repository-url> cd unraid-dash -
Configure API settings:
- Open
script.js - Update the
API_CONFIGobject at the top of the file:const API_CONFIG = { serverUrl: 'http://YOUR_UNRAID_IP:PORT/graphql', apiKey: 'YOUR_API_KEY_HERE' };
- Open
-
Open
index.htmlin 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"
- Verify server URL is correct
- Ensure API key has proper permissions
- Check network connectivity to Unraid server
- Open browser console (F12) to view detailed error messages
Disk usage shows 0%
- Ensure disks are mounted and accessible
- Check that GraphQL query includes
fsSizeandfsUsedfields - Verify array is started on Unraid server
Docker containers not displaying
- Confirm Docker service is running on Unraid
- Verify API key has Docker read permissions
- Check browser console for error messages
Development
To explore the GraphQL API schema:
- Open
schema-test.htmlin a browser - Use the introspection query tool
- 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.