Initial commit: Homelab Dashboard with YAML configuration
Features: - Service health monitoring with response times - Proxmox cluster integration (nodes, VMs, containers) - PBS backup server monitoring - Camera viewer with WebRTC (go2rtc) - Docker container monitoring - Uptime Kuma integration - Mobile-friendly responsive design - YAML-based configuration for easy setup
This commit is contained in:
Dashboard
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# Secrets - NEVER commit these
|
||||||
|
secrets.yaml
|
||||||
|
*.secret
|
||||||
|
|
||||||
|
# Python
|
||||||
|
__pycache__/
|
||||||
|
*.py[cod]
|
||||||
|
*.class
|
||||||
|
venv/
|
||||||
|
.venv/
|
||||||
|
*.egg-info/
|
||||||
|
.eggs/
|
||||||
|
|
||||||
|
# User settings
|
||||||
|
settings.json
|
||||||
|
config.yaml
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
logs/
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
161
README.md
Normal file
161
README.md
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
# Homelab Dashboard
|
||||||
|
|
||||||
|
A modern, responsive dashboard for monitoring your homelab infrastructure.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Service Monitoring**: Track health and response times for all your services
|
||||||
|
- **Proxmox Integration**: View cluster status, nodes, VMs, and containers
|
||||||
|
- **PBS Integration**: Monitor Proxmox Backup Server status
|
||||||
|
- **Camera Viewer**: WebRTC-based live camera feeds (via go2rtc)
|
||||||
|
- **Docker Monitoring**: Track containers across multiple Docker hosts
|
||||||
|
- **Uptime Kuma Integration**: Display uptime stats from your monitoring
|
||||||
|
- **Mobile-Friendly**: Responsive design works on all devices
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
### 1. Clone and Setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Copy the dashboard to your server
|
||||||
|
scp -r dashboard/ root@your-server:/opt/
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
apt install python3-venv python3-yaml
|
||||||
|
cd /opt/dashboard
|
||||||
|
python3 -m venv venv
|
||||||
|
source venv/bin/activate
|
||||||
|
pip install fastapi uvicorn httpx jinja2
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Configure
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Copy the example configs
|
||||||
|
cp config.yaml.example config.yaml
|
||||||
|
cp secrets.yaml.example secrets.yaml
|
||||||
|
|
||||||
|
# Edit config.yaml with your services
|
||||||
|
nano config.yaml
|
||||||
|
|
||||||
|
# Add your API credentials to secrets.yaml
|
||||||
|
nano secrets.yaml
|
||||||
|
|
||||||
|
# Protect secrets file
|
||||||
|
chmod 600 secrets.yaml
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Run
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Test manually
|
||||||
|
source venv/bin/activate
|
||||||
|
uvicorn app.main:app --host 0.0.0.0 --port 8000
|
||||||
|
|
||||||
|
# Or create a systemd service (see below)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
### config.yaml
|
||||||
|
|
||||||
|
The main configuration file defines:
|
||||||
|
|
||||||
|
- **dashboard**: Title, theme, refresh interval
|
||||||
|
- **proxmox**: Cluster nodes to monitor
|
||||||
|
- **pbs**: Proxmox Backup Server connection
|
||||||
|
- **cameras**: go2rtc camera streams
|
||||||
|
- **docker**: Docker hosts to monitor
|
||||||
|
- **uptime_kuma**: Uptime monitoring integration
|
||||||
|
- **categories**: Service category colors and icons
|
||||||
|
- **services**: All services to display and monitor
|
||||||
|
- **service_groups**: Logical groupings for services
|
||||||
|
|
||||||
|
See `config.yaml.example` for full documentation.
|
||||||
|
|
||||||
|
### secrets.yaml
|
||||||
|
|
||||||
|
Store sensitive credentials separately:
|
||||||
|
|
||||||
|
- Proxmox API tokens
|
||||||
|
- PBS API tokens
|
||||||
|
- OPNsense API keys
|
||||||
|
- Service-specific API keys
|
||||||
|
|
||||||
|
**Important**: Never commit `secrets.yaml` to version control!
|
||||||
|
|
||||||
|
### Service Configuration
|
||||||
|
|
||||||
|
Each service can have:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- name: MyService
|
||||||
|
url: https://myservice.example.com # URL to open on click
|
||||||
|
ip: 192.168.1.100 # IP for health checks
|
||||||
|
port: 8080 # Port for health checks
|
||||||
|
category: Apps # Category grouping
|
||||||
|
icon: server # Icon name
|
||||||
|
favorite: true # Show in favorites
|
||||||
|
critical: true # Mark as critical
|
||||||
|
group: "My Group" # Service group
|
||||||
|
health_check: # Optional custom health check
|
||||||
|
url: https://custom-check-url/
|
||||||
|
timeout: 10
|
||||||
|
```
|
||||||
|
|
||||||
|
### Available Icons
|
||||||
|
|
||||||
|
server, shield, globe, archive, lock, film, star, video, tv, music,
|
||||||
|
search, download, cog, chart, heartbeat, key, git, workflow, book,
|
||||||
|
image, brain, home, camera, message, database
|
||||||
|
|
||||||
|
## Systemd Service
|
||||||
|
|
||||||
|
Create `/etc/systemd/system/dashboard.service`:
|
||||||
|
|
||||||
|
```ini
|
||||||
|
[Unit]
|
||||||
|
Description=Homelab Dashboard
|
||||||
|
After=network.target
|
||||||
|
|
||||||
|
[Service]
|
||||||
|
Type=simple
|
||||||
|
User=root
|
||||||
|
WorkingDirectory=/opt/dashboard
|
||||||
|
ExecStart=/opt/dashboard/venv/bin/uvicorn app.main:app --host 0.0.0.0 --port 8000
|
||||||
|
Restart=always
|
||||||
|
RestartSec=5
|
||||||
|
|
||||||
|
[Install]
|
||||||
|
WantedBy=multi-user.target
|
||||||
|
```
|
||||||
|
|
||||||
|
Then enable and start:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
systemctl daemon-reload
|
||||||
|
systemctl enable dashboard
|
||||||
|
systemctl start dashboard
|
||||||
|
```
|
||||||
|
|
||||||
|
## Reverse Proxy (Nginx/NPM)
|
||||||
|
|
||||||
|
Example Nginx Proxy Manager configuration:
|
||||||
|
|
||||||
|
- **Domain**: dashboard.yourdomain.com
|
||||||
|
- **Forward Host**: 192.168.1.x (dashboard IP)
|
||||||
|
- **Forward Port**: 8000
|
||||||
|
- **WebSocket Support**: Enable (for live updates)
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
- Python 3.10+
|
||||||
|
- FastAPI
|
||||||
|
- Uvicorn
|
||||||
|
- HTTPX
|
||||||
|
- Jinja2
|
||||||
|
- PyYAML
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT License - Feel free to use and modify for your homelab!
|
||||||
0
app/__init__.py
Normal file
0
app/__init__.py
Normal file
280
app/config.py
Normal file
280
app/config.py
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
"""Dashboard configuration loader - supports YAML config files."""
|
||||||
|
from dataclasses import dataclass, field
|
||||||
|
from typing import Optional, List, Dict, Any
|
||||||
|
import json
|
||||||
|
import os
|
||||||
|
import yaml
|
||||||
|
|
||||||
|
# Base paths
|
||||||
|
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
||||||
|
CONFIG_FILE = os.path.join(BASE_DIR, "config.yaml")
|
||||||
|
SECRETS_FILE = os.path.join(BASE_DIR, "secrets.yaml")
|
||||||
|
SETTINGS_FILE = os.path.join(BASE_DIR, "settings.json")
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class Service:
|
||||||
|
name: str
|
||||||
|
url: str
|
||||||
|
ip: str
|
||||||
|
port: int
|
||||||
|
category: str
|
||||||
|
icon: str = "server"
|
||||||
|
favorite: bool = False
|
||||||
|
critical: bool = False
|
||||||
|
group: Optional[str] = None
|
||||||
|
health_check: Optional[Dict] = None
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class HealthCheckConfig:
|
||||||
|
url: str
|
||||||
|
timeout: float = 5.0
|
||||||
|
|
||||||
|
# Icon SVG paths
|
||||||
|
SERVICE_ICONS = {
|
||||||
|
"shield": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>',
|
||||||
|
"globe": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/>',
|
||||||
|
"archive": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>',
|
||||||
|
"lock": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>',
|
||||||
|
"film": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"/>',
|
||||||
|
"star": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>',
|
||||||
|
"video": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>',
|
||||||
|
"tv": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
|
||||||
|
"music": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>',
|
||||||
|
"search": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>',
|
||||||
|
"download": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>',
|
||||||
|
"cog": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>',
|
||||||
|
"chart": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>',
|
||||||
|
"heartbeat": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>',
|
||||||
|
"key": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>',
|
||||||
|
"git": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>',
|
||||||
|
"workflow": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>',
|
||||||
|
"book": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>',
|
||||||
|
"image": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>',
|
||||||
|
"brain": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>',
|
||||||
|
"home": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>',
|
||||||
|
"camera": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>',
|
||||||
|
"message": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>',
|
||||||
|
"server": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>',
|
||||||
|
"database": '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>',
|
||||||
|
}
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Configuration Loading
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
def load_yaml(path: str) -> Dict:
|
||||||
|
"""Load YAML file, return empty dict if not found."""
|
||||||
|
if os.path.exists(path):
|
||||||
|
try:
|
||||||
|
with open(path, 'r') as f:
|
||||||
|
return yaml.safe_load(f) or {}
|
||||||
|
except Exception as e:
|
||||||
|
print(f"Warning: Failed to load {path}: {e}")
|
||||||
|
return {}
|
||||||
|
|
||||||
|
def load_config() -> Dict:
|
||||||
|
"""Load main config and merge with secrets."""
|
||||||
|
config = load_yaml(CONFIG_FILE)
|
||||||
|
secrets = load_yaml(SECRETS_FILE)
|
||||||
|
|
||||||
|
# Merge secrets into config
|
||||||
|
if secrets:
|
||||||
|
for key in ['proxmox', 'pbs', 'opnsense', 'sabnzbd']:
|
||||||
|
if key in secrets and key in config:
|
||||||
|
config[key].update(secrets[key])
|
||||||
|
elif key in secrets:
|
||||||
|
config[key] = secrets[key]
|
||||||
|
|
||||||
|
return config
|
||||||
|
|
||||||
|
# Load configuration
|
||||||
|
_config = load_config()
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Configuration Values (with defaults for backward compatibility)
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
# Dashboard settings
|
||||||
|
DASHBOARD_TITLE = _config.get('dashboard', {}).get('title', 'Homelab Dashboard')
|
||||||
|
REFRESH_INTERVAL = _config.get('dashboard', {}).get('refresh_interval', 30)
|
||||||
|
|
||||||
|
# Proxmox configuration
|
||||||
|
_proxmox = _config.get('proxmox', {})
|
||||||
|
PROXMOX_ENABLED = _proxmox.get('enabled', True)
|
||||||
|
PROXMOX_NODES = _proxmox.get('nodes', [])
|
||||||
|
PROXMOX_API_TOKEN = _proxmox.get('api_token', '')
|
||||||
|
PROXMOX_API_SECRET = _proxmox.get('api_secret', '')
|
||||||
|
|
||||||
|
# PBS configuration
|
||||||
|
_pbs = _config.get('pbs', {})
|
||||||
|
PBS_ENABLED = _pbs.get('enabled', True)
|
||||||
|
PBS_URL = _pbs.get('url', '')
|
||||||
|
PBS_API_TOKEN = _pbs.get('api_token', '')
|
||||||
|
PBS_API_SECRET = _pbs.get('api_secret', '')
|
||||||
|
|
||||||
|
# OPNsense configuration
|
||||||
|
_opnsense = _config.get('opnsense', {})
|
||||||
|
OPNSENSE_URL = _opnsense.get('url', '')
|
||||||
|
OPNSENSE_API_KEY = _opnsense.get('api_key', '')
|
||||||
|
OPNSENSE_API_SECRET = _opnsense.get('api_secret', '')
|
||||||
|
|
||||||
|
# Prometheus configuration
|
||||||
|
PROMETHEUS_URL = _config.get('prometheus', {}).get('url', '')
|
||||||
|
|
||||||
|
# Camera configuration
|
||||||
|
_cameras = _config.get('cameras', {})
|
||||||
|
CAMERAS_ENABLED = _cameras.get('enabled', False)
|
||||||
|
GO2RTC_URL = _cameras.get('go2rtc_url', '')
|
||||||
|
CAMERAS = _cameras.get('streams', [])
|
||||||
|
|
||||||
|
# Sabnzbd configuration
|
||||||
|
_sabnzbd = _config.get('sabnzbd', {})
|
||||||
|
SABNZBD_URL = _sabnzbd.get('url', '')
|
||||||
|
SABNZBD_API_KEY = _sabnzbd.get('api_key', '')
|
||||||
|
|
||||||
|
# Uptime Kuma configuration
|
||||||
|
_uptime = _config.get('uptime_kuma', {})
|
||||||
|
UPTIME_KUMA_URL = _uptime.get('url', '')
|
||||||
|
UPTIME_KUMA_STATUS_PAGE = _uptime.get('status_page', 'default')
|
||||||
|
|
||||||
|
# Docker hosts
|
||||||
|
_docker = _config.get('docker', {})
|
||||||
|
DOCKER_ENABLED = _docker.get('enabled', False)
|
||||||
|
DOCKER_HOSTS = _docker.get('hosts', [])
|
||||||
|
|
||||||
|
# Categories
|
||||||
|
CATEGORIES = _config.get('categories', {
|
||||||
|
"Infrastructure": {"color": "blue", "icon": "server"},
|
||||||
|
"Media": {"color": "purple", "icon": "film"},
|
||||||
|
"Monitoring": {"color": "amber", "icon": "chart"},
|
||||||
|
"Apps": {"color": "emerald", "icon": "cog"},
|
||||||
|
"Home": {"color": "cyan", "icon": "home"},
|
||||||
|
})
|
||||||
|
|
||||||
|
# Service groups
|
||||||
|
SERVICE_GROUPS = _config.get('service_groups', {})
|
||||||
|
|
||||||
|
# Load services from config
|
||||||
|
def _load_services() -> List[Service]:
|
||||||
|
"""Load services from YAML config."""
|
||||||
|
services = []
|
||||||
|
for svc in _config.get('services', []):
|
||||||
|
health_check = None
|
||||||
|
if 'health_check' in svc:
|
||||||
|
health_check = svc['health_check']
|
||||||
|
|
||||||
|
services.append(Service(
|
||||||
|
name=svc['name'],
|
||||||
|
url=svc['url'],
|
||||||
|
ip=svc['ip'],
|
||||||
|
port=svc['port'],
|
||||||
|
category=svc['category'],
|
||||||
|
icon=svc.get('icon', 'server'),
|
||||||
|
favorite=svc.get('favorite', False),
|
||||||
|
critical=svc.get('critical', False),
|
||||||
|
group=svc.get('group'),
|
||||||
|
health_check=health_check,
|
||||||
|
))
|
||||||
|
return services
|
||||||
|
|
||||||
|
SERVICES = _load_services()
|
||||||
|
|
||||||
|
# Build SERVICE_CHECK_OVERRIDES from health_check configs
|
||||||
|
SERVICE_CHECK_OVERRIDES = {}
|
||||||
|
for svc in SERVICES:
|
||||||
|
if svc.health_check:
|
||||||
|
SERVICE_CHECK_OVERRIDES[svc.name] = (
|
||||||
|
svc.health_check.get('url', f"http://{svc.ip}:{svc.port}/"),
|
||||||
|
svc.health_check.get('timeout', 5.0)
|
||||||
|
)
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Settings (user preferences, stored in settings.json)
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
DEFAULT_SETTINGS = {
|
||||||
|
"refresh_interval": REFRESH_INTERVAL,
|
||||||
|
"theme": _config.get('dashboard', {}).get('theme', 'dark'),
|
||||||
|
"favorites": _config.get('favorites', []),
|
||||||
|
"collapsed_categories": [],
|
||||||
|
"show_response_times": _config.get('dashboard', {}).get('show_response_times', True),
|
||||||
|
"show_icons": _config.get('dashboard', {}).get('show_icons', True),
|
||||||
|
}
|
||||||
|
|
||||||
|
def load_settings():
|
||||||
|
try:
|
||||||
|
if os.path.exists(SETTINGS_FILE):
|
||||||
|
with open(SETTINGS_FILE, 'r') as f:
|
||||||
|
return {**DEFAULT_SETTINGS, **json.load(f)}
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
return DEFAULT_SETTINGS.copy()
|
||||||
|
|
||||||
|
def save_settings(settings):
|
||||||
|
try:
|
||||||
|
with open(SETTINGS_FILE, 'w') as f:
|
||||||
|
json.dump(settings, f, indent=2)
|
||||||
|
return True
|
||||||
|
except:
|
||||||
|
return False
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Helper Functions
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
def get_services_by_category():
|
||||||
|
categories = {}
|
||||||
|
for service in SERVICES:
|
||||||
|
if service.category not in categories:
|
||||||
|
categories[service.category] = []
|
||||||
|
categories[service.category].append(service)
|
||||||
|
return categories
|
||||||
|
|
||||||
|
def get_favorites():
|
||||||
|
settings = load_settings()
|
||||||
|
fav_names = settings.get("favorites", [])
|
||||||
|
return [s for s in SERVICES if s.name in fav_names or s.favorite]
|
||||||
|
|
||||||
|
def get_critical_services():
|
||||||
|
return [s for s in SERVICES if s.critical]
|
||||||
|
|
||||||
|
def get_service_icon(icon_name):
|
||||||
|
return SERVICE_ICONS.get(icon_name, SERVICE_ICONS["server"])
|
||||||
|
|
||||||
|
def reload_config():
|
||||||
|
"""Reload configuration from files (for runtime updates)."""
|
||||||
|
global _config, SERVICES, SERVICE_CHECK_OVERRIDES, CATEGORIES, SERVICE_GROUPS
|
||||||
|
global PROXMOX_NODES, PROXMOX_API_TOKEN, PROXMOX_API_SECRET
|
||||||
|
global PBS_URL, PBS_API_TOKEN, PBS_API_SECRET
|
||||||
|
global GO2RTC_URL, CAMERAS, DOCKER_HOSTS
|
||||||
|
|
||||||
|
_config = load_config()
|
||||||
|
SERVICES = _load_services()
|
||||||
|
|
||||||
|
# Rebuild overrides
|
||||||
|
SERVICE_CHECK_OVERRIDES.clear()
|
||||||
|
for svc in SERVICES:
|
||||||
|
if svc.health_check:
|
||||||
|
SERVICE_CHECK_OVERRIDES[svc.name] = (
|
||||||
|
svc.health_check.get('url', f"http://{svc.ip}:{svc.port}/"),
|
||||||
|
svc.health_check.get('timeout', 5.0)
|
||||||
|
)
|
||||||
|
|
||||||
|
# Update other config values
|
||||||
|
_proxmox = _config.get('proxmox', {})
|
||||||
|
PROXMOX_NODES = _proxmox.get('nodes', [])
|
||||||
|
PROXMOX_API_TOKEN = _proxmox.get('api_token', '')
|
||||||
|
PROXMOX_API_SECRET = _proxmox.get('api_secret', '')
|
||||||
|
|
||||||
|
_pbs = _config.get('pbs', {})
|
||||||
|
PBS_URL = _pbs.get('url', '')
|
||||||
|
PBS_API_TOKEN = _pbs.get('api_token', '')
|
||||||
|
PBS_API_SECRET = _pbs.get('api_secret', '')
|
||||||
|
|
||||||
|
_cameras = _config.get('cameras', {})
|
||||||
|
GO2RTC_URL = _cameras.get('go2rtc_url', '')
|
||||||
|
CAMERAS = _cameras.get('streams', [])
|
||||||
|
|
||||||
|
DOCKER_HOSTS = _config.get('docker', {}).get('hosts', [])
|
||||||
|
CATEGORIES = _config.get('categories', CATEGORIES)
|
||||||
|
SERVICE_GROUPS = _config.get('service_groups', {})
|
||||||
298
app/main.py
Normal file
298
app/main.py
Normal file
@@ -0,0 +1,298 @@
|
|||||||
|
"""Enhanced FastAPI dashboard v2 with all integrations."""
|
||||||
|
from fastapi import FastAPI, Request, Form
|
||||||
|
from fastapi.staticfiles import StaticFiles
|
||||||
|
from fastapi.templating import Jinja2Templates
|
||||||
|
from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse, RedirectResponse
|
||||||
|
import httpx
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
from app.config import (
|
||||||
|
SERVICES, PROXMOX_NODES, PROXMOX_API_TOKEN, PROXMOX_API_SECRET,
|
||||||
|
PBS_URL, PBS_API_TOKEN, PBS_API_SECRET,
|
||||||
|
CATEGORIES, GO2RTC_URL, CAMERAS, SABNZBD_URL, SABNZBD_API_KEY,
|
||||||
|
UPTIME_KUMA_URL, UPTIME_KUMA_STATUS_PAGE, DOCKER_HOSTS,
|
||||||
|
PROMETHEUS_URL, SERVICE_ICONS, SERVICE_GROUPS,
|
||||||
|
get_services_by_category, get_favorites, get_critical_services, get_service_icon,
|
||||||
|
load_settings, save_settings, DEFAULT_SETTINGS
|
||||||
|
)
|
||||||
|
from app.services.health import (
|
||||||
|
check_all_services, get_all_proxmox_metrics, get_camera_list,
|
||||||
|
get_sabnzbd_queue, get_uptime_kuma_status, get_docker_containers,
|
||||||
|
get_docker_container_counts, get_pbs_status, get_storage_pools,
|
||||||
|
get_recent_events, get_cluster_uptime, get_prometheus_metrics
|
||||||
|
)
|
||||||
|
|
||||||
|
app = FastAPI(title="DeathStar Dashboard", version="2.0.0")
|
||||||
|
app.mount("/static", StaticFiles(directory="static"), name="static")
|
||||||
|
templates = Jinja2Templates(directory="app/templates")
|
||||||
|
|
||||||
|
# Add custom filters
|
||||||
|
templates.env.globals["get_service_icon"] = get_service_icon
|
||||||
|
templates.env.globals["SERVICE_ICONS"] = SERVICE_ICONS
|
||||||
|
|
||||||
|
last_check = {"time": None}
|
||||||
|
|
||||||
|
@app.get("/", response_class=HTMLResponse)
|
||||||
|
async def dashboard(request: Request):
|
||||||
|
"""Main dashboard page."""
|
||||||
|
services_status = await check_all_services(SERVICES)
|
||||||
|
nodes_status = await get_all_proxmox_metrics(PROXMOX_NODES, PROXMOX_API_TOKEN, PROXMOX_API_SECRET)
|
||||||
|
docker_counts = await get_docker_container_counts(DOCKER_HOSTS)
|
||||||
|
settings = load_settings()
|
||||||
|
|
||||||
|
online_count = sum(1 for s in services_status.values() if s.status == "online")
|
||||||
|
total_count = len(services_status)
|
||||||
|
critical_down = [s.name for s in get_critical_services()
|
||||||
|
if services_status.get(s.name) and services_status[s.name].status != "online"]
|
||||||
|
cluster_uptime = get_cluster_uptime(nodes_status)
|
||||||
|
|
||||||
|
last_check["time"] = datetime.now()
|
||||||
|
|
||||||
|
return templates.TemplateResponse("dashboard.html", {
|
||||||
|
"request": request,
|
||||||
|
"services_by_category": get_services_by_category(),
|
||||||
|
"services_status": services_status,
|
||||||
|
"nodes_status": nodes_status,
|
||||||
|
"favorites": get_favorites(),
|
||||||
|
"categories": CATEGORIES,
|
||||||
|
"online_count": online_count,
|
||||||
|
"total_count": total_count,
|
||||||
|
"critical_down": critical_down,
|
||||||
|
"last_check": last_check["time"].strftime("%H:%M:%S") if last_check["time"] else "Never",
|
||||||
|
"cameras": CAMERAS,
|
||||||
|
"go2rtc_url": GO2RTC_URL,
|
||||||
|
"docker_counts": docker_counts,
|
||||||
|
"cluster_uptime": cluster_uptime,
|
||||||
|
"settings": settings,
|
||||||
|
"service_groups": SERVICE_GROUPS,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/health")
|
||||||
|
async def health():
|
||||||
|
return {"status": "healthy"}
|
||||||
|
|
||||||
|
@app.get("/api/services", response_class=HTMLResponse)
|
||||||
|
async def api_services(request: Request):
|
||||||
|
"""HTMX endpoint for services."""
|
||||||
|
services_status = await check_all_services(SERVICES)
|
||||||
|
return templates.TemplateResponse("partials/services.html", {
|
||||||
|
"request": request,
|
||||||
|
"services_by_category": get_services_by_category(),
|
||||||
|
"services_status": services_status,
|
||||||
|
"categories": CATEGORIES,
|
||||||
|
"service_groups": SERVICE_GROUPS,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/nodes", response_class=HTMLResponse)
|
||||||
|
async def api_nodes(request: Request):
|
||||||
|
"""HTMX endpoint for Proxmox nodes."""
|
||||||
|
nodes_status = await get_all_proxmox_metrics(PROXMOX_NODES, PROXMOX_API_TOKEN, PROXMOX_API_SECRET)
|
||||||
|
cluster_uptime = get_cluster_uptime(nodes_status)
|
||||||
|
return templates.TemplateResponse("partials/nodes.html", {
|
||||||
|
"request": request,
|
||||||
|
"nodes_status": nodes_status,
|
||||||
|
"cluster_uptime": cluster_uptime,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/nodes-expanded", response_class=HTMLResponse)
|
||||||
|
async def api_nodes_expanded(request: Request):
|
||||||
|
"""HTMX endpoint for expanded Proxmox nodes with VMs/containers."""
|
||||||
|
nodes_status = await get_all_proxmox_metrics(PROXMOX_NODES, PROXMOX_API_TOKEN, PROXMOX_API_SECRET)
|
||||||
|
return templates.TemplateResponse("partials/nodes_expanded.html", {
|
||||||
|
"request": request,
|
||||||
|
"nodes_status": nodes_status,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/favorites", response_class=HTMLResponse)
|
||||||
|
async def api_favorites(request: Request):
|
||||||
|
"""HTMX endpoint for favorites."""
|
||||||
|
services_status = await check_all_services(SERVICES)
|
||||||
|
return templates.TemplateResponse("partials/favorites.html", {
|
||||||
|
"request": request,
|
||||||
|
"favorites": get_favorites(),
|
||||||
|
"services_status": services_status,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/cameras", response_class=HTMLResponse)
|
||||||
|
async def api_cameras(request: Request):
|
||||||
|
"""HTMX endpoint for cameras."""
|
||||||
|
return templates.TemplateResponse("partials/cameras.html", {
|
||||||
|
"request": request,
|
||||||
|
"cameras": CAMERAS,
|
||||||
|
"go2rtc_url": GO2RTC_URL,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/downloads", response_class=HTMLResponse)
|
||||||
|
async def api_downloads(request: Request):
|
||||||
|
"""HTMX endpoint for downloads."""
|
||||||
|
queue = await get_sabnzbd_queue(SABNZBD_URL, SABNZBD_API_KEY)
|
||||||
|
return templates.TemplateResponse("partials/downloads.html", {
|
||||||
|
"request": request,
|
||||||
|
"queue": queue,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/status-banner", response_class=HTMLResponse)
|
||||||
|
async def api_status_banner(request: Request):
|
||||||
|
"""HTMX endpoint for status banner."""
|
||||||
|
services_status = await check_all_services(SERVICES)
|
||||||
|
critical_down = [s.name for s in get_critical_services()
|
||||||
|
if services_status.get(s.name) and services_status[s.name].status != "online"]
|
||||||
|
online_count = sum(1 for s in services_status.values() if s.status == "online")
|
||||||
|
last_check["time"] = datetime.now()
|
||||||
|
|
||||||
|
return templates.TemplateResponse("partials/status_banner.html", {
|
||||||
|
"request": request,
|
||||||
|
"critical_down": critical_down,
|
||||||
|
"online_count": online_count,
|
||||||
|
"total_count": len(services_status),
|
||||||
|
"last_check": last_check["time"].strftime("%H:%M:%S"),
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/docker", response_class=HTMLResponse)
|
||||||
|
async def api_docker(request: Request):
|
||||||
|
"""HTMX endpoint for Docker containers."""
|
||||||
|
containers = await get_docker_containers(DOCKER_HOSTS)
|
||||||
|
counts = await get_docker_container_counts(DOCKER_HOSTS)
|
||||||
|
return templates.TemplateResponse("partials/docker.html", {
|
||||||
|
"request": request,
|
||||||
|
"containers": containers,
|
||||||
|
"hosts": DOCKER_HOSTS,
|
||||||
|
"counts": counts,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/uptime", response_class=HTMLResponse)
|
||||||
|
async def api_uptime(request: Request):
|
||||||
|
"""HTMX endpoint for Uptime Kuma status."""
|
||||||
|
uptime_data = await get_uptime_kuma_status(UPTIME_KUMA_URL, UPTIME_KUMA_STATUS_PAGE)
|
||||||
|
return templates.TemplateResponse("partials/uptime.html", {
|
||||||
|
"request": request,
|
||||||
|
"uptime": uptime_data,
|
||||||
|
"uptime_kuma_url": UPTIME_KUMA_URL,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/pbs", response_class=HTMLResponse)
|
||||||
|
async def api_pbs(request: Request):
|
||||||
|
"""HTMX endpoint for PBS status."""
|
||||||
|
pbs_status = await get_pbs_status(PBS_URL, PBS_API_TOKEN, PBS_API_SECRET)
|
||||||
|
return templates.TemplateResponse("partials/pbs.html", {
|
||||||
|
"request": request,
|
||||||
|
"pbs": pbs_status,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/storage", response_class=HTMLResponse)
|
||||||
|
async def api_storage(request: Request):
|
||||||
|
"""HTMX endpoint for storage pools."""
|
||||||
|
pools = await get_storage_pools(PROXMOX_NODES, PROXMOX_API_TOKEN, PROXMOX_API_SECRET)
|
||||||
|
return templates.TemplateResponse("partials/storage.html", {
|
||||||
|
"request": request,
|
||||||
|
"pools": pools,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/events", response_class=HTMLResponse)
|
||||||
|
async def api_events(request: Request):
|
||||||
|
"""HTMX endpoint for recent events."""
|
||||||
|
events = get_recent_events()
|
||||||
|
return templates.TemplateResponse("partials/events.html", {
|
||||||
|
"request": request,
|
||||||
|
"events": events[-10:],
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/api/camera-snapshot/{camera}")
|
||||||
|
async def camera_snapshot(camera: str):
|
||||||
|
"""Proxy camera snapshot from go2rtc."""
|
||||||
|
try:
|
||||||
|
async with httpx.AsyncClient(timeout=5.0) as client:
|
||||||
|
response = await client.get(f"{GO2RTC_URL}/api/frame.jpeg?src={camera}")
|
||||||
|
if response.status_code == 200:
|
||||||
|
return StreamingResponse(
|
||||||
|
iter([response.content]),
|
||||||
|
media_type="image/jpeg",
|
||||||
|
headers={"Cache-Control": "no-cache"}
|
||||||
|
)
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
|
||||||
|
@app.post("/api/webrtc")
|
||||||
|
async def webrtc_proxy(request: Request, src: str):
|
||||||
|
"""Proxy WebRTC offers to go2rtc"""
|
||||||
|
try:
|
||||||
|
body = await request.body()
|
||||||
|
async with httpx.AsyncClient(timeout=10.0) as client:
|
||||||
|
response = await client.post(
|
||||||
|
f"{GO2RTC_URL}/api/webrtc?src={src}",
|
||||||
|
content=body,
|
||||||
|
headers={"Content-Type": "application/sdp"}
|
||||||
|
)
|
||||||
|
from fastapi import Response
|
||||||
|
return Response(
|
||||||
|
content=response.content,
|
||||||
|
status_code=response.status_code,
|
||||||
|
media_type="application/sdp"
|
||||||
|
)
|
||||||
|
except Exception as e:
|
||||||
|
from fastapi import Response
|
||||||
|
return Response(content=str(e), status_code=500)
|
||||||
|
|
||||||
|
return StreamingResponse(iter([b""]), media_type="image/jpeg")
|
||||||
|
|
||||||
|
@app.get("/api/status")
|
||||||
|
async def api_status_json():
|
||||||
|
"""JSON endpoint for all status data."""
|
||||||
|
services_status = await check_all_services(SERVICES)
|
||||||
|
nodes_status = await get_all_proxmox_metrics(PROXMOX_NODES, PROXMOX_API_TOKEN, PROXMOX_API_SECRET)
|
||||||
|
|
||||||
|
return {
|
||||||
|
"services": {name: {"status": s.status, "response_time_ms": s.response_time_ms}
|
||||||
|
for name, s in services_status.items()},
|
||||||
|
"nodes": [{"name": n.name, "status": n.status, "cpu": n.cpu_percent,
|
||||||
|
"memory": n.memory_percent, "disk": n.disk_percent, "uptime_hours": n.uptime_hours}
|
||||||
|
for n in nodes_status]
|
||||||
|
}
|
||||||
|
|
||||||
|
# Settings page
|
||||||
|
@app.get("/cameras", response_class=HTMLResponse)
|
||||||
|
async def cameras_page(request: Request):
|
||||||
|
"""Full camera viewer page - mobile friendly."""
|
||||||
|
from datetime import datetime
|
||||||
|
return templates.TemplateResponse("cameras.html", {
|
||||||
|
"request": request,
|
||||||
|
"cameras": CAMERAS,
|
||||||
|
"go2rtc_url": GO2RTC_URL,
|
||||||
|
"now": int(datetime.now().timestamp()),
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.get("/settings", response_class=HTMLResponse)
|
||||||
|
async def settings_page(request: Request):
|
||||||
|
"""Settings page."""
|
||||||
|
settings = load_settings()
|
||||||
|
return templates.TemplateResponse("settings.html", {
|
||||||
|
"request": request,
|
||||||
|
"settings": settings,
|
||||||
|
"all_services": SERVICES,
|
||||||
|
"categories": CATEGORIES,
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.post("/settings")
|
||||||
|
async def save_settings_handler(request: Request):
|
||||||
|
"""Save settings."""
|
||||||
|
form = await request.form()
|
||||||
|
settings = load_settings()
|
||||||
|
|
||||||
|
# Update settings from form
|
||||||
|
settings["refresh_interval"] = int(form.get("refresh_interval", 30))
|
||||||
|
settings["theme"] = form.get("theme", "dark")
|
||||||
|
settings["show_response_times"] = form.get("show_response_times") == "on"
|
||||||
|
settings["show_icons"] = form.get("show_icons") == "on"
|
||||||
|
|
||||||
|
# Handle favorites (multi-select)
|
||||||
|
favorites = form.getlist("favorites")
|
||||||
|
if favorites:
|
||||||
|
settings["favorites"] = favorites
|
||||||
|
|
||||||
|
save_settings(settings)
|
||||||
|
return RedirectResponse(url="/settings?saved=1", status_code=303)
|
||||||
|
|
||||||
|
@app.get("/api/settings", response_class=JSONResponse)
|
||||||
|
async def get_settings_api():
|
||||||
|
"""Get settings as JSON."""
|
||||||
|
return load_settings()
|
||||||
0
app/routers/__init__.py
Normal file
0
app/routers/__init__.py
Normal file
0
app/services/__init__.py
Normal file
0
app/services/__init__.py
Normal file
391
app/services/health.py
Normal file
391
app/services/health.py
Normal file
@@ -0,0 +1,391 @@
|
|||||||
|
"""Enhanced services module v2 with PBS, VM/LXC, storage pools, events."""
|
||||||
|
import asyncio
|
||||||
|
from typing import Dict, Any, Optional, List
|
||||||
|
import httpx
|
||||||
|
from dataclasses import dataclass, field
|
||||||
|
from datetime import datetime
|
||||||
|
from collections import deque
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class HealthStatus:
|
||||||
|
name: str
|
||||||
|
status: str
|
||||||
|
response_time_ms: Optional[float] = None
|
||||||
|
error: Optional[str] = None
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class NodeStatus:
|
||||||
|
name: str
|
||||||
|
ip: str
|
||||||
|
status: str
|
||||||
|
cpu_percent: Optional[float] = None
|
||||||
|
memory_percent: Optional[float] = None
|
||||||
|
memory_used_gb: Optional[float] = None
|
||||||
|
memory_total_gb: Optional[float] = None
|
||||||
|
disk_percent: Optional[float] = None
|
||||||
|
uptime_hours: Optional[float] = None
|
||||||
|
vms: List[Dict] = field(default_factory=list)
|
||||||
|
containers: List[Dict] = field(default_factory=list)
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class DockerContainer:
|
||||||
|
name: str
|
||||||
|
status: str
|
||||||
|
state: str
|
||||||
|
image: str
|
||||||
|
host: str
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class UptimeMonitor:
|
||||||
|
id: int
|
||||||
|
name: str
|
||||||
|
status: int
|
||||||
|
ping: Optional[int] = None
|
||||||
|
heartbeats: Optional[List[Dict]] = None
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class PBSStatus:
|
||||||
|
status: str
|
||||||
|
datastore_usage: List[Dict] = field(default_factory=list)
|
||||||
|
last_backup: Optional[str] = None
|
||||||
|
total_size_gb: float = 0
|
||||||
|
used_size_gb: float = 0
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class StoragePool:
|
||||||
|
name: str
|
||||||
|
node: str
|
||||||
|
total_gb: float
|
||||||
|
used_gb: float
|
||||||
|
avail_gb: float
|
||||||
|
percent_used: float
|
||||||
|
pool_type: str
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class StatusEvent:
|
||||||
|
timestamp: datetime
|
||||||
|
service: str
|
||||||
|
old_status: str
|
||||||
|
new_status: str
|
||||||
|
|
||||||
|
# Recent events storage (in-memory, last 20)
|
||||||
|
recent_events: deque = deque(maxlen=20)
|
||||||
|
last_status_cache: Dict[str, str] = {}
|
||||||
|
|
||||||
|
SERVICE_CHECK_OVERRIDES = {
|
||||||
|
"OPNsense": ("https://192.168.1.1:8443/", 10.0),
|
||||||
|
"Vaultwarden": ("https://vault.deathstar-home.one/", 5.0),
|
||||||
|
"Immich": ("http://192.168.1.54:2283/", 5.0),
|
||||||
|
}
|
||||||
|
|
||||||
|
async def check_service(client: httpx.AsyncClient, service) -> HealthStatus:
|
||||||
|
"""Check if a service is reachable."""
|
||||||
|
global last_status_cache, recent_events
|
||||||
|
|
||||||
|
if service.name in SERVICE_CHECK_OVERRIDES:
|
||||||
|
check_url, timeout = SERVICE_CHECK_OVERRIDES[service.name]
|
||||||
|
else:
|
||||||
|
https_ports = [443, 8006, 8007, 8443, 9443]
|
||||||
|
scheme = "https" if service.port in https_ports else "http"
|
||||||
|
check_url = f"{scheme}://{service.ip}:{service.port}/"
|
||||||
|
timeout = 5.0
|
||||||
|
|
||||||
|
start = asyncio.get_event_loop().time()
|
||||||
|
try:
|
||||||
|
response = await client.get(check_url, timeout=timeout, follow_redirects=True)
|
||||||
|
elapsed = (asyncio.get_event_loop().time() - start) * 1000
|
||||||
|
new_status = "online" if response.status_code < 500 else "degraded"
|
||||||
|
result = HealthStatus(name=service.name, status=new_status, response_time_ms=round(elapsed, 1))
|
||||||
|
except:
|
||||||
|
new_status = "offline"
|
||||||
|
result = HealthStatus(name=service.name, status="offline")
|
||||||
|
|
||||||
|
# Track status changes
|
||||||
|
old_status = last_status_cache.get(service.name)
|
||||||
|
if old_status and old_status != new_status:
|
||||||
|
recent_events.append(StatusEvent(
|
||||||
|
timestamp=datetime.now(),
|
||||||
|
service=service.name,
|
||||||
|
old_status=old_status,
|
||||||
|
new_status=new_status
|
||||||
|
))
|
||||||
|
last_status_cache[service.name] = new_status
|
||||||
|
|
||||||
|
return result
|
||||||
|
|
||||||
|
async def check_all_services(services) -> Dict[str, HealthStatus]:
|
||||||
|
"""Check all services concurrently."""
|
||||||
|
async with httpx.AsyncClient(verify=False, timeout=10.0) as client:
|
||||||
|
tasks = [check_service(client, s) for s in services]
|
||||||
|
results = await asyncio.gather(*tasks)
|
||||||
|
return {r.name: r for r in results}
|
||||||
|
|
||||||
|
async def get_proxmox_node_metrics(client: httpx.AsyncClient, node: Dict, token: str, secret: str) -> NodeStatus:
|
||||||
|
"""Get Proxmox node metrics including VMs and containers."""
|
||||||
|
base_url = f"https://{node['ip']}:{node['port']}/api2/json"
|
||||||
|
headers = {"Authorization": f"PVEAPIToken={token}={secret}"}
|
||||||
|
|
||||||
|
result = NodeStatus(name=node["name"], ip=node["ip"], status="offline")
|
||||||
|
|
||||||
|
try:
|
||||||
|
# Get node status
|
||||||
|
response = await client.get(f"{base_url}/nodes/{node['name']}/status", headers=headers, timeout=5.0)
|
||||||
|
if response.status_code == 200:
|
||||||
|
data = response.json()["data"]
|
||||||
|
cpu = data.get("cpu", 0) * 100
|
||||||
|
mem_used = data.get("memory", {}).get("used", 0)
|
||||||
|
mem_total = data.get("memory", {}).get("total", 1)
|
||||||
|
mem_pct = (mem_used / mem_total) * 100 if mem_total else 0
|
||||||
|
disk_used = data.get("rootfs", {}).get("used", 0)
|
||||||
|
disk_total = data.get("rootfs", {}).get("total", 1)
|
||||||
|
disk_pct = (disk_used / disk_total) * 100 if disk_total else 0
|
||||||
|
uptime_sec = data.get("uptime", 0)
|
||||||
|
|
||||||
|
result.status = "online"
|
||||||
|
result.cpu_percent = round(cpu, 1)
|
||||||
|
result.memory_percent = round(mem_pct, 1)
|
||||||
|
result.memory_used_gb = round(mem_used / (1024**3), 1)
|
||||||
|
result.memory_total_gb = round(mem_total / (1024**3), 1)
|
||||||
|
result.disk_percent = round(disk_pct, 1)
|
||||||
|
result.uptime_hours = round(uptime_sec / 3600, 1)
|
||||||
|
|
||||||
|
# Get VMs
|
||||||
|
vm_response = await client.get(f"{base_url}/nodes/{node['name']}/qemu", headers=headers, timeout=5.0)
|
||||||
|
if vm_response.status_code == 200:
|
||||||
|
for vm in vm_response.json().get("data", []):
|
||||||
|
result.vms.append({
|
||||||
|
"vmid": vm.get("vmid"),
|
||||||
|
"name": vm.get("name", f"VM {vm.get('vmid')}"),
|
||||||
|
"status": vm.get("status"),
|
||||||
|
"mem": round(vm.get("mem", 0) / (1024**3), 1) if vm.get("mem") else 0,
|
||||||
|
"cpu": round(vm.get("cpu", 0) * 100, 1) if vm.get("cpu") else 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
# Get containers
|
||||||
|
ct_response = await client.get(f"{base_url}/nodes/{node['name']}/lxc", headers=headers, timeout=5.0)
|
||||||
|
if ct_response.status_code == 200:
|
||||||
|
for ct in ct_response.json().get("data", []):
|
||||||
|
result.containers.append({
|
||||||
|
"vmid": ct.get("vmid"),
|
||||||
|
"name": ct.get("name", f"CT {ct.get('vmid')}"),
|
||||||
|
"status": ct.get("status"),
|
||||||
|
"mem": round(ct.get("mem", 0) / (1024**3), 1) if ct.get("mem") else 0,
|
||||||
|
"cpu": round(ct.get("cpu", 0) * 100, 1) if ct.get("cpu") else 0,
|
||||||
|
})
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
|
||||||
|
return result
|
||||||
|
|
||||||
|
async def get_all_proxmox_metrics(nodes, token: str, secret: str) -> List[NodeStatus]:
|
||||||
|
"""Get metrics for all Proxmox nodes."""
|
||||||
|
async with httpx.AsyncClient(verify=False) as client:
|
||||||
|
tasks = [get_proxmox_node_metrics(client, n, token, secret) for n in nodes]
|
||||||
|
return await asyncio.gather(*tasks)
|
||||||
|
|
||||||
|
async def get_pbs_status(url: str, token: str, secret: str) -> PBSStatus:
|
||||||
|
"""Get PBS backup server status."""
|
||||||
|
result = PBSStatus(status="offline")
|
||||||
|
headers = {"Authorization": f"PBSAPIToken={token}:{secret}"}
|
||||||
|
|
||||||
|
try:
|
||||||
|
async with httpx.AsyncClient(verify=False, timeout=10.0) as client:
|
||||||
|
# Get datastore status
|
||||||
|
ds_response = await client.get(f"{url}/api2/json/status/datastore-usage", headers=headers)
|
||||||
|
if ds_response.status_code == 200:
|
||||||
|
result.status = "online"
|
||||||
|
for ds in ds_response.json().get("data", []):
|
||||||
|
total = ds.get("total", 0)
|
||||||
|
used = ds.get("used", 0)
|
||||||
|
result.datastore_usage.append({
|
||||||
|
"name": ds.get("store"),
|
||||||
|
"total_gb": round(total / (1024**3), 1),
|
||||||
|
"used_gb": round(used / (1024**3), 1),
|
||||||
|
"percent": round((used / total) * 100, 1) if total else 0,
|
||||||
|
})
|
||||||
|
result.total_size_gb += total / (1024**3)
|
||||||
|
result.used_size_gb += used / (1024**3)
|
||||||
|
|
||||||
|
# Try to get last backup task
|
||||||
|
tasks_response = await client.get(f"{url}/api2/json/nodes/localhost/tasks", headers=headers)
|
||||||
|
if tasks_response.status_code == 200:
|
||||||
|
tasks = tasks_response.json().get("data", [])
|
||||||
|
backup_tasks = [t for t in tasks if t.get("type") == "backup"]
|
||||||
|
if backup_tasks:
|
||||||
|
last = backup_tasks[0]
|
||||||
|
result.last_backup = datetime.fromtimestamp(last.get("starttime", 0)).strftime("%Y-%m-%d %H:%M")
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
|
||||||
|
return result
|
||||||
|
|
||||||
|
async def get_storage_pools(nodes, token: str, secret: str) -> List[StoragePool]:
|
||||||
|
"""Get storage pool info from all Proxmox nodes."""
|
||||||
|
pools = []
|
||||||
|
headers = {"Authorization": f"PVEAPIToken={token}={secret}"}
|
||||||
|
|
||||||
|
async with httpx.AsyncClient(verify=False, timeout=10.0) as client:
|
||||||
|
for node in nodes:
|
||||||
|
try:
|
||||||
|
url = f"https://{node['ip']}:{node['port']}/api2/json/nodes/{node['name']}/storage"
|
||||||
|
response = await client.get(url, headers=headers)
|
||||||
|
if response.status_code == 200:
|
||||||
|
for storage in response.json().get("data", []):
|
||||||
|
if storage.get("enabled") and storage.get("total"):
|
||||||
|
total = storage.get("total", 0)
|
||||||
|
used = storage.get("used", 0)
|
||||||
|
avail = storage.get("avail", 0)
|
||||||
|
pools.append(StoragePool(
|
||||||
|
name=storage.get("storage"),
|
||||||
|
node=node["name"],
|
||||||
|
total_gb=round(total / (1024**3), 1),
|
||||||
|
used_gb=round(used / (1024**3), 1),
|
||||||
|
avail_gb=round(avail / (1024**3), 1),
|
||||||
|
percent_used=round((used / total) * 100, 1) if total else 0,
|
||||||
|
pool_type=storage.get("type", "unknown"),
|
||||||
|
))
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
|
||||||
|
return pools
|
||||||
|
|
||||||
|
async def get_docker_containers(hosts: List[Dict]) -> List[DockerContainer]:
|
||||||
|
"""Get Docker containers via docker-socket-proxy."""
|
||||||
|
containers = []
|
||||||
|
async with httpx.AsyncClient(timeout=5.0) as client:
|
||||||
|
for host in hosts:
|
||||||
|
try:
|
||||||
|
url = f"http://{host['ip']}:{host['port']}/containers/json?all=true"
|
||||||
|
response = await client.get(url)
|
||||||
|
if response.status_code == 200:
|
||||||
|
for c in response.json():
|
||||||
|
name = c.get("Names", ["/unknown"])[0].lstrip("/")
|
||||||
|
if name == "docker-socket-proxy":
|
||||||
|
continue
|
||||||
|
containers.append(DockerContainer(
|
||||||
|
name=name,
|
||||||
|
status=c.get("Status", ""),
|
||||||
|
state=c.get("State", "unknown"),
|
||||||
|
image=c.get("Image", "").split("/")[-1].split(":")[0],
|
||||||
|
host=host["name"]
|
||||||
|
))
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
return containers
|
||||||
|
|
||||||
|
async def get_docker_container_counts(hosts: List[Dict]) -> Dict[str, int]:
|
||||||
|
"""Get container counts per host."""
|
||||||
|
counts = {}
|
||||||
|
async with httpx.AsyncClient(timeout=5.0) as client:
|
||||||
|
for host in hosts:
|
||||||
|
try:
|
||||||
|
url = f"http://{host['ip']}:{host['port']}/containers/json"
|
||||||
|
response = await client.get(url)
|
||||||
|
if response.status_code == 200:
|
||||||
|
# Subtract 1 for docker-socket-proxy
|
||||||
|
count = len([c for c in response.json() if "docker-socket-proxy" not in c.get("Names", [""])[0]])
|
||||||
|
counts[host["name"]] = count
|
||||||
|
except:
|
||||||
|
counts[host["name"]] = 0
|
||||||
|
return counts
|
||||||
|
|
||||||
|
async def get_uptime_kuma_status(url: str, status_page: str = "uptime") -> Dict:
|
||||||
|
"""Get Uptime Kuma status."""
|
||||||
|
result = {"monitors": [], "summary": {"up": 0, "down": 0, "total": 0}}
|
||||||
|
try:
|
||||||
|
async with httpx.AsyncClient(timeout=5.0) as client:
|
||||||
|
hb_response = await client.get(f"{url}/api/status-page/heartbeat/{status_page}")
|
||||||
|
info_response = await client.get(f"{url}/api/status-page/{status_page}")
|
||||||
|
|
||||||
|
if hb_response.status_code == 200 and info_response.status_code == 200:
|
||||||
|
heartbeats = hb_response.json().get("heartbeatList", {})
|
||||||
|
info = info_response.json()
|
||||||
|
|
||||||
|
for group in info.get("publicGroupList", []):
|
||||||
|
for monitor in group.get("monitorList", []):
|
||||||
|
monitor_id = str(monitor.get("id"))
|
||||||
|
monitor_heartbeats = heartbeats.get(monitor_id, [])
|
||||||
|
latest_status = 0
|
||||||
|
latest_ping = None
|
||||||
|
if monitor_heartbeats:
|
||||||
|
latest = monitor_heartbeats[-1]
|
||||||
|
latest_status = latest.get("status", 0)
|
||||||
|
latest_ping = latest.get("ping")
|
||||||
|
recent_hb = monitor_heartbeats[-20:] if monitor_heartbeats else []
|
||||||
|
result["monitors"].append(UptimeMonitor(
|
||||||
|
id=monitor.get("id"),
|
||||||
|
name=monitor.get("name"),
|
||||||
|
status=latest_status,
|
||||||
|
ping=latest_ping,
|
||||||
|
heartbeats=[{"status": h.get("status", 0), "ping": h.get("ping")} for h in recent_hb]
|
||||||
|
))
|
||||||
|
if latest_status == 1:
|
||||||
|
result["summary"]["up"] += 1
|
||||||
|
else:
|
||||||
|
result["summary"]["down"] += 1
|
||||||
|
result["summary"]["total"] += 1
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
return result
|
||||||
|
|
||||||
|
async def get_prometheus_metrics(url: str, queries: Dict[str, str]) -> Dict[str, Any]:
|
||||||
|
"""Query Prometheus for metrics."""
|
||||||
|
results = {}
|
||||||
|
try:
|
||||||
|
async with httpx.AsyncClient(timeout=5.0) as client:
|
||||||
|
for name, query in queries.items():
|
||||||
|
response = await client.get(f"{url}/api/v1/query", params={"query": query})
|
||||||
|
if response.status_code == 200:
|
||||||
|
data = response.json().get("data", {}).get("result", [])
|
||||||
|
if data:
|
||||||
|
results[name] = float(data[0].get("value", [0, 0])[1])
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
return results
|
||||||
|
|
||||||
|
async def get_camera_list(go2rtc_url: str) -> List[str]:
|
||||||
|
"""Get camera list from go2rtc."""
|
||||||
|
try:
|
||||||
|
async with httpx.AsyncClient(timeout=5.0) as client:
|
||||||
|
response = await client.get(f"{go2rtc_url}/api/streams")
|
||||||
|
if response.status_code == 200:
|
||||||
|
return list(response.json().keys())
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
return []
|
||||||
|
|
||||||
|
async def get_sabnzbd_queue(url: str, api_key: str = "") -> Dict:
|
||||||
|
"""Get Sabnzbd download queue."""
|
||||||
|
try:
|
||||||
|
async with httpx.AsyncClient(timeout=5.0) as client:
|
||||||
|
params = {"mode": "queue", "output": "json"}
|
||||||
|
if api_key:
|
||||||
|
params["apikey"] = api_key
|
||||||
|
response = await client.get(f"{url}/api", params=params)
|
||||||
|
if response.status_code == 200:
|
||||||
|
data = response.json().get("queue", {})
|
||||||
|
return {
|
||||||
|
"speed": data.get("speed", "0 B/s"),
|
||||||
|
"size_left": data.get("sizeleft", "0 B"),
|
||||||
|
"eta": data.get("timeleft", "Unknown"),
|
||||||
|
"downloading": len(data.get("slots", [])),
|
||||||
|
"items": [
|
||||||
|
{"name": s.get("filename", "Unknown")[:40], "progress": float(s.get("percentage", 0))}
|
||||||
|
for s in data.get("slots", [])[:3]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
return {"speed": "N/A", "downloading": 0, "items": []}
|
||||||
|
|
||||||
|
def get_recent_events() -> List[StatusEvent]:
|
||||||
|
"""Get recent status change events."""
|
||||||
|
return list(recent_events)
|
||||||
|
|
||||||
|
def get_cluster_uptime(nodes: List[NodeStatus]) -> float:
|
||||||
|
"""Calculate total cluster uptime in hours."""
|
||||||
|
total = 0
|
||||||
|
for node in nodes:
|
||||||
|
if node.uptime_hours:
|
||||||
|
total += node.uptime_hours
|
||||||
|
return round(total, 1)
|
||||||
145
app/templates/base.html
Normal file
145
app/templates/base.html
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DeathStar Homelab</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
dark: { 900: '#0a0f1a', 800: '#111827', 700: '#1f2937', 600: '#374151' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
|
||||||
|
.status-pulse { animation: pulse-glow 2s ease-in-out infinite; }
|
||||||
|
.htmx-request { opacity: 0.5; }
|
||||||
|
body { background: linear-gradient(135deg, #0a0f1a 0%, #111827 100%); }
|
||||||
|
.card { background: rgba(31, 41, 55, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(75, 85, 99, 0.3); }
|
||||||
|
.card:hover { border-color: rgba(99, 102, 241, 0.5); }
|
||||||
|
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
|
||||||
|
.progress-bar { height: 4px; border-radius: 2px; background: rgba(75, 85, 99, 0.5); overflow: hidden; }
|
||||||
|
.progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
|
||||||
|
.collapsible-content { max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease; }
|
||||||
|
.collapsed .collapsible-content { max-height: 0; }
|
||||||
|
.camera-thumb { aspect-ratio: 16/9; background: #1f2937; border-radius: 0.5rem; overflow: hidden; }
|
||||||
|
.camera-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
#search-modal { backdrop-filter: blur(4px); }
|
||||||
|
.favorite-card { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); }
|
||||||
|
.status-banner { background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%); }
|
||||||
|
.status-banner.all-good { background: linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%); }
|
||||||
|
.response-fast { color: #10b981; }
|
||||||
|
.response-medium { color: #f59e0b; }
|
||||||
|
.response-slow { color: #ef4444; }
|
||||||
|
.svc-icon { width: 14px; height: 14px; flex-shrink: 0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-gray-100 min-h-screen p-3">
|
||||||
|
<div class="max-w-[1920px] mx-auto">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search Modal -->
|
||||||
|
<div id="search-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
|
||||||
|
<div class="bg-dark-800 rounded-xl p-4 w-full max-w-md mx-4 border border-gray-700">
|
||||||
|
<div class="flex items-center gap-3 mb-3">
|
||||||
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||||
|
<input type="text" id="search-input" placeholder="Search services..." class="flex-1 bg-transparent border-none outline-none text-white placeholder-gray-500">
|
||||||
|
<kbd class="px-2 py-1 text-xs bg-dark-700 rounded text-gray-400">ESC</kbd>
|
||||||
|
</div>
|
||||||
|
<div id="search-results" class="max-h-64 overflow-y-auto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Clock
|
||||||
|
function updateClock() {
|
||||||
|
const now = new Date();
|
||||||
|
const el = document.getElementById('clock');
|
||||||
|
if (el) el.textContent = now.toLocaleTimeString();
|
||||||
|
}
|
||||||
|
setInterval(updateClock, 1000);
|
||||||
|
updateClock();
|
||||||
|
|
||||||
|
// Search
|
||||||
|
const searchModal = document.getElementById('search-modal');
|
||||||
|
const searchInput = document.getElementById('search-input');
|
||||||
|
const searchResults = document.getElementById('search-results');
|
||||||
|
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === '/' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT') {
|
||||||
|
e.preventDefault();
|
||||||
|
searchModal.classList.remove('hidden');
|
||||||
|
searchModal.classList.add('flex');
|
||||||
|
searchInput.focus();
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
searchModal.classList.add('hidden');
|
||||||
|
searchModal.classList.remove('flex');
|
||||||
|
searchInput.value = '';
|
||||||
|
searchResults.innerHTML = '';
|
||||||
|
}
|
||||||
|
if (e.key === 'r' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT') {
|
||||||
|
refreshAll();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
searchModal.addEventListener('click', function(e) {
|
||||||
|
if (e.target === searchModal) {
|
||||||
|
searchModal.classList.add('hidden');
|
||||||
|
searchModal.classList.remove('flex');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', function(e) {
|
||||||
|
const query = e.target.value.toLowerCase();
|
||||||
|
if (query.length < 2) { searchResults.innerHTML = ''; return; }
|
||||||
|
const cards = document.querySelectorAll('.service-card');
|
||||||
|
const matches = [];
|
||||||
|
cards.forEach(card => {
|
||||||
|
const name = card.dataset.name?.toLowerCase() || '';
|
||||||
|
if (name.includes(query)) {
|
||||||
|
const url = card.querySelector('a')?.href || '#';
|
||||||
|
const status = card.querySelector('.status-dot')?.classList.contains('bg-emerald-500') ? 'online' : 'offline';
|
||||||
|
matches.push({ name: card.dataset.name, url, status });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
searchResults.innerHTML = matches.length === 0 ? '<div class="text-gray-500 text-sm py-2">No services found</div>' :
|
||||||
|
matches.map(m => `<a href="${m.url}" target="_blank" class="flex items-center gap-3 p-2 rounded hover:bg-dark-700"><span class="w-2 h-2 rounded-full ${m.status === 'online' ? 'bg-emerald-500' : 'bg-red-500'}"></span><span>${m.name}</span></a>`).join('');
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleCategory(header) {
|
||||||
|
const section = header.closest('.category-section');
|
||||||
|
section.classList.toggle('collapsed');
|
||||||
|
const icon = header.querySelector('.collapse-icon');
|
||||||
|
icon.style.transform = section.classList.contains('collapsed') ? 'rotate(-90deg)' : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshAll() {
|
||||||
|
htmx.trigger('#status-banner', 'refresh');
|
||||||
|
htmx.trigger('#favorites-container', 'refresh');
|
||||||
|
htmx.trigger('#nodes-container', 'refresh');
|
||||||
|
htmx.trigger('#services-container', 'refresh');
|
||||||
|
htmx.trigger('#cameras-container', 'refresh');
|
||||||
|
htmx.trigger('#downloads-container', 'refresh');
|
||||||
|
htmx.trigger('#docker-container', 'refresh');
|
||||||
|
htmx.trigger('#uptime-container', 'refresh');
|
||||||
|
htmx.trigger('#pbs-container', 'refresh');
|
||||||
|
htmx.trigger('#events-container', 'refresh');
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleNodeExpand(nodeEl) {
|
||||||
|
const expanded = nodeEl.querySelector('.node-expanded');
|
||||||
|
if (expanded) expanded.classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
322
app/templates/cameras.html
Normal file
322
app/templates/cameras.html
Normal file
@@ -0,0 +1,322 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
{% block content %}
|
||||||
|
<div class="cameras-page">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between mb-4 sticky top-0 bg-dark-900/95 backdrop-blur py-2 z-10">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<a href="/" class="text-gray-400 hover:text-white p-2 -ml-2">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<h1 class="text-lg font-semibold text-white">Cameras</h1>
|
||||||
|
<span class="text-xs text-gray-500">{{ cameras | length }} cameras</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<!-- View Mode -->
|
||||||
|
<div class="flex bg-dark-700 rounded-lg p-0.5">
|
||||||
|
<button onclick="setViewMode('grid')" id="btn-grid" class="view-btn active px-2 py-1 text-xs rounded-md">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="setViewMode('list')" id="btn-list" class="view-btn px-2 py-1 text-xs rounded-md">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Reconnect -->
|
||||||
|
<button onclick="reconnectAll()" class="p-2 text-gray-400 hover:text-white hover:bg-dark-700 rounded-lg" title="Reconnect all streams">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Camera Grid -->
|
||||||
|
<div id="camera-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||||
|
{% for camera in cameras %}
|
||||||
|
<div class="camera-card" data-camera="{{ camera }}">
|
||||||
|
<div class="aspect-video bg-dark-800 rounded-t-xl overflow-hidden relative cursor-pointer" onclick="openFullscreen('{{ camera }}')">
|
||||||
|
<video id="video-{{ camera }}"
|
||||||
|
class="w-full h-full object-cover"
|
||||||
|
autoplay muted playsinline
|
||||||
|
poster="{{ go2rtc_url }}/api/frame.jpeg?src={{ camera }}"></video>
|
||||||
|
|
||||||
|
<!-- Status indicator -->
|
||||||
|
<div id="status-{{ camera }}" class="absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-yellow-500 animate-pulse"></div>
|
||||||
|
|
||||||
|
<!-- Live indicator -->
|
||||||
|
<div class="absolute top-2 left-2">
|
||||||
|
<span class="live-badge flex items-center gap-1 px-1.5 py-0.5 bg-red-600/90 rounded text-[10px] text-white font-medium">
|
||||||
|
<span class="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></span>
|
||||||
|
LIVE
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between bg-dark-700 rounded-b-xl px-3 py-2">
|
||||||
|
<span class="text-sm text-white font-medium truncate">{{ camera | replace("_", " ") }}</span>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<button onclick="event.stopPropagation(); reconnectCamera('{{ camera }}')" class="p-1.5 text-gray-400 hover:text-cyan-400 hover:bg-dark-600 rounded" title="Reconnect">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="event.stopPropagation(); openFullscreen('{{ camera }}')" class="p-1.5 text-gray-400 hover:text-white hover:bg-dark-600 rounded" title="Fullscreen">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fullscreen Modal -->
|
||||||
|
<div id="fullscreen-modal" class="fixed inset-0 bg-black z-50 hidden">
|
||||||
|
<div class="absolute top-4 left-4 right-4 flex items-center justify-between z-10">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<h2 id="modal-title" class="text-white text-lg font-semibold drop-shadow-lg"></h2>
|
||||||
|
<span class="live-badge flex items-center gap-1 px-2 py-0.5 bg-red-600 rounded text-xs text-white font-medium">
|
||||||
|
<span class="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></span>
|
||||||
|
LIVE
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button onclick="closeFullscreen()" class="p-2 bg-gray-800/80 hover:bg-gray-700 rounded-lg text-white">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-full flex items-center justify-center">
|
||||||
|
<video id="modal-video" class="max-w-full max-h-full" autoplay playsinline></video>
|
||||||
|
</div>
|
||||||
|
<button onclick="prevCamera()" class="absolute left-2 top-1/2 -translate-y-1/2 p-3 bg-black/50 hover:bg-black/70 rounded-full text-white">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="nextCamera()" class="absolute right-2 top-1/2 -translate-y-1/2 p-3 bg-black/50 hover:bg-black/70 rounded-full text-white">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1 bg-black/60 rounded-full text-white text-sm">
|
||||||
|
<span id="modal-counter">1 / 12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.cameras-page { padding-bottom: env(safe-area-inset-bottom); }
|
||||||
|
.view-btn { color: #9ca3af; transition: all 0.15s; }
|
||||||
|
.view-btn.active { background: #374151; color: white; }
|
||||||
|
.view-btn:hover { color: white; }
|
||||||
|
|
||||||
|
@supports (padding: max(0px)) {
|
||||||
|
.cameras-page {
|
||||||
|
padding-left: max(0.75rem, env(safe-area-inset-left));
|
||||||
|
padding-right: max(0.75rem, env(safe-area-inset-right));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const cameras = {{ cameras | tojson }};
|
||||||
|
let currentCameraIndex = 0;
|
||||||
|
let peerConnections = {};
|
||||||
|
let fullscreenPC = null;
|
||||||
|
|
||||||
|
// Initialize WebRTC stream for a camera
|
||||||
|
async function initCameraStream(cameraId) {
|
||||||
|
const video = document.getElementById('video-' + cameraId);
|
||||||
|
const status = document.getElementById('status-' + cameraId);
|
||||||
|
|
||||||
|
if (!video) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Close existing connection if any
|
||||||
|
if (peerConnections[cameraId]) {
|
||||||
|
peerConnections[cameraId].close();
|
||||||
|
}
|
||||||
|
|
||||||
|
status.className = 'absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-yellow-500 animate-pulse';
|
||||||
|
|
||||||
|
const pc = new RTCPeerConnection({
|
||||||
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||||
|
});
|
||||||
|
|
||||||
|
peerConnections[cameraId] = pc;
|
||||||
|
|
||||||
|
pc.ontrack = (event) => {
|
||||||
|
video.srcObject = event.streams[0];
|
||||||
|
status.className = 'absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-green-500';
|
||||||
|
};
|
||||||
|
|
||||||
|
pc.oniceconnectionstatechange = () => {
|
||||||
|
if (pc.iceConnectionState === 'disconnected' || pc.iceConnectionState === 'failed') {
|
||||||
|
status.className = 'absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-red-500';
|
||||||
|
setTimeout(() => initCameraStream(cameraId), 5000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
pc.addTransceiver('video', { direction: 'recvonly' });
|
||||||
|
pc.addTransceiver('audio', { direction: 'recvonly' });
|
||||||
|
|
||||||
|
const offer = await pc.createOffer();
|
||||||
|
await pc.setLocalDescription(offer);
|
||||||
|
|
||||||
|
const response = await fetch('/api/webrtc?src=' + cameraId, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/sdp' },
|
||||||
|
body: offer.sdp
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('HTTP ' + response.status);
|
||||||
|
|
||||||
|
const answer = await response.text();
|
||||||
|
await pc.setRemoteDescription({ type: 'answer', sdp: answer });
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to connect ' + cameraId + ':', error);
|
||||||
|
status.className = 'absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-red-500';
|
||||||
|
setTimeout(() => initCameraStream(cameraId), 10000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reconnectCamera(cameraId) {
|
||||||
|
initCameraStream(cameraId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function reconnectAll() {
|
||||||
|
cameras.forEach(cam => initCameraStream(cam));
|
||||||
|
}
|
||||||
|
|
||||||
|
function setViewMode(mode) {
|
||||||
|
const grid = document.getElementById('camera-grid');
|
||||||
|
const btnGrid = document.getElementById('btn-grid');
|
||||||
|
const btnList = document.getElementById('btn-list');
|
||||||
|
|
||||||
|
if (mode === 'list') {
|
||||||
|
grid.className = 'flex flex-col gap-3';
|
||||||
|
btnList.classList.add('active');
|
||||||
|
btnGrid.classList.remove('active');
|
||||||
|
} else {
|
||||||
|
grid.className = 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3';
|
||||||
|
btnGrid.classList.add('active');
|
||||||
|
btnList.classList.remove('active');
|
||||||
|
}
|
||||||
|
localStorage.setItem('cameraViewMode', mode);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openFullscreen(camera) {
|
||||||
|
currentCameraIndex = cameras.indexOf(camera);
|
||||||
|
const modal = document.getElementById('fullscreen-modal');
|
||||||
|
const video = document.getElementById('modal-video');
|
||||||
|
const title = document.getElementById('modal-title');
|
||||||
|
const counter = document.getElementById('modal-counter');
|
||||||
|
|
||||||
|
title.textContent = camera.replace(/_/g, ' ');
|
||||||
|
counter.textContent = (currentCameraIndex + 1) + ' / ' + cameras.length;
|
||||||
|
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
|
await initFullscreenStream(camera, video);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initFullscreenStream(cameraId, video) {
|
||||||
|
if (fullscreenPC) {
|
||||||
|
fullscreenPC.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
const pc = new RTCPeerConnection({
|
||||||
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||||
|
});
|
||||||
|
|
||||||
|
fullscreenPC = pc;
|
||||||
|
|
||||||
|
pc.ontrack = (event) => {
|
||||||
|
video.srcObject = event.streams[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
pc.addTransceiver('video', { direction: 'recvonly' });
|
||||||
|
pc.addTransceiver('audio', { direction: 'recvonly' });
|
||||||
|
|
||||||
|
const offer = await pc.createOffer();
|
||||||
|
await pc.setLocalDescription(offer);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/webrtc?src=' + cameraId, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/sdp' },
|
||||||
|
body: offer.sdp
|
||||||
|
});
|
||||||
|
|
||||||
|
const answer = await response.text();
|
||||||
|
await pc.setRemoteDescription({ type: 'answer', sdp: answer });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fullscreen stream error:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeFullscreen() {
|
||||||
|
const modal = document.getElementById('fullscreen-modal');
|
||||||
|
const video = document.getElementById('modal-video');
|
||||||
|
|
||||||
|
modal.classList.add('hidden');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
|
||||||
|
if (fullscreenPC) {
|
||||||
|
fullscreenPC.close();
|
||||||
|
fullscreenPC = null;
|
||||||
|
}
|
||||||
|
video.srcObject = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function prevCamera() {
|
||||||
|
currentCameraIndex = (currentCameraIndex - 1 + cameras.length) % cameras.length;
|
||||||
|
openFullscreen(cameras[currentCameraIndex]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextCamera() {
|
||||||
|
currentCameraIndex = (currentCameraIndex + 1) % cameras.length;
|
||||||
|
openFullscreen(cameras[currentCameraIndex]);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (!document.getElementById('fullscreen-modal').classList.contains('hidden')) {
|
||||||
|
if (e.key === 'Escape') closeFullscreen();
|
||||||
|
if (e.key === 'ArrowLeft') prevCamera();
|
||||||
|
if (e.key === 'ArrowRight') nextCamera();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let touchStartX = 0;
|
||||||
|
document.getElementById('fullscreen-modal').addEventListener('touchstart', (e) => {
|
||||||
|
touchStartX = e.touches[0].clientX;
|
||||||
|
});
|
||||||
|
document.getElementById('fullscreen-modal').addEventListener('touchend', (e) => {
|
||||||
|
const diff = touchStartX - e.changedTouches[0].clientX;
|
||||||
|
if (Math.abs(diff) > 50) {
|
||||||
|
if (diff > 0) nextCamera();
|
||||||
|
else prevCamera();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize on page load
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const savedView = localStorage.getItem('cameraViewMode');
|
||||||
|
if (savedView) setViewMode(savedView);
|
||||||
|
|
||||||
|
// Stagger camera connections to avoid overwhelming the server
|
||||||
|
cameras.forEach((cam, index) => {
|
||||||
|
setTimeout(() => initCameraStream(cam), index * 500);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
134
app/templates/dashboard.html
Normal file
134
app/templates/dashboard.html
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="mb-3">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">DeathStar Homelab</h1>
|
||||||
|
<button onclick="refreshAll()" class="p-1.5 rounded-lg bg-dark-700 hover:bg-dark-600 transition-colors" title="Refresh (R)">
|
||||||
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
|
||||||
|
</button>
|
||||||
|
<button onclick="document.getElementById('search-modal').classList.remove('hidden'); document.getElementById('search-modal').classList.add('flex'); document.getElementById('search-input').focus();" class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-dark-700 hover:bg-dark-600 transition-colors text-xs text-gray-400">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||||
|
<span>Search</span>
|
||||||
|
<kbd class="px-1.5 py-0.5 bg-dark-600 rounded text-xs">/</kbd>
|
||||||
|
</button>
|
||||||
|
<a href="/settings" class="p-1.5 rounded-lg bg-dark-700 hover:bg-dark-600 transition-colors" title="Settings">
|
||||||
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-xs text-gray-400">
|
||||||
|
<span id="clock" class="font-mono"></span>
|
||||||
|
<span>{{ online_count }}/{{ total_count }} online</span>
|
||||||
|
<span>Updated: {{ last_check }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="status-banner" hx-get="/api/status-banner" hx-trigger="every 30s, refresh" hx-swap="innerHTML">
|
||||||
|
{% include "partials/status_banner.html" %}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Favorites -->
|
||||||
|
<section class="mb-3">
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Quick Access</h2>
|
||||||
|
</div>
|
||||||
|
<div id="favorites-container" hx-get="/api/favorites" hx-trigger="every 30s, refresh" hx-swap="innerHTML">
|
||||||
|
{% include "partials/favorites.html" %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Proxmox Cluster -->
|
||||||
|
<section class="mb-3">
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"></path></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Proxmox Cluster: NewHope</h2>
|
||||||
|
<span class="text-xs text-gray-500">{{ cluster_uptime }}h total uptime</span>
|
||||||
|
</div>
|
||||||
|
<div id="nodes-container" hx-get="/api/nodes" hx-trigger="every 30s, refresh" hx-swap="innerHTML">
|
||||||
|
{% include "partials/nodes.html" %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-3">
|
||||||
|
<!-- Services (3 cols) -->
|
||||||
|
<div class="lg:col-span-3">
|
||||||
|
<section id="services-container" hx-get="/api/services" hx-trigger="every 30s, refresh" hx-swap="innerHTML">
|
||||||
|
{% include "partials/services.html" %}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Sidebar -->
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- PBS Backup -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Backups</h2>
|
||||||
|
</div>
|
||||||
|
<div id="pbs-container" hx-get="/api/pbs" hx-trigger="every 60s, refresh" hx-swap="innerHTML">
|
||||||
|
<div class="card rounded-lg p-3 text-gray-500 text-xs">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Recent Events -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Recent Events</h2>
|
||||||
|
</div>
|
||||||
|
<div id="events-container" hx-get="/api/events" hx-trigger="every 30s, refresh" hx-swap="innerHTML">
|
||||||
|
<div class="card rounded-lg p-3 text-gray-500 text-xs">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Downloads -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Downloads</h2>
|
||||||
|
</div>
|
||||||
|
<div id="downloads-container" hx-get="/api/downloads" hx-trigger="every 15s, refresh" hx-swap="innerHTML">
|
||||||
|
{% include "partials/downloads.html" %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Cameras -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Cameras</h2>
|
||||||
|
</div>
|
||||||
|
<div id="cameras-container" hx-get="/api/cameras" hx-trigger="every 60s, refresh" hx-swap="innerHTML">
|
||||||
|
{% include "partials/cameras.html" %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Docker -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Docker</h2>
|
||||||
|
<span class="text-xs text-gray-500">{% for name, count in docker_counts.items() %}{{ count }}{% if not loop.last %}+{% endif %}{% endfor %} containers</span>
|
||||||
|
</div>
|
||||||
|
<div id="docker-container" hx-get="/api/docker" hx-trigger="every 30s, refresh" hx-swap="innerHTML">
|
||||||
|
<div class="card rounded-lg p-3 text-gray-500 text-xs">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Uptime Kuma -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
||||||
|
<h2 class="text-sm font-semibold text-gray-300">Uptime</h2>
|
||||||
|
</div>
|
||||||
|
<div id="uptime-container" hx-get="/api/uptime" hx-trigger="every 60s, refresh" hx-swap="innerHTML">
|
||||||
|
<div class="card rounded-lg p-3 text-gray-500 text-xs">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
20
app/templates/partials/cameras.html
Normal file
20
app/templates/partials/cameras.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<div class="grid grid-cols-2 gap-2">
|
||||||
|
{% for camera in cameras[:4] %}
|
||||||
|
<div class="camera-thumb relative group">
|
||||||
|
<img src="/api/camera-snapshot/{{ camera }}"
|
||||||
|
alt="{{ camera }}"
|
||||||
|
class="w-full h-full"
|
||||||
|
loading="lazy"
|
||||||
|
onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 56%22><rect fill=%22%231f2937%22 width=%22100%22 height=%2256%22/><text x=%2250%22 y=%2228%22 text-anchor=%22middle%22 fill=%22%236b7280%22 font-size=%228%22>No Signal</text></svg>'">
|
||||||
|
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<a href="{{ go2rtc_url }}/stream.html?src={{ camera }}" target="_blank" class="text-white text-xs hover:text-cyan-400">
|
||||||
|
{{ camera }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-1 left-1 text-[10px] text-white bg-black/50 px-1 rounded">{{ camera }}</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<a href="/cameras" class="block text-center text-xs text-gray-500 hover:text-cyan-400 mt-2">
|
||||||
|
View all {{ cameras | length }} cameras
|
||||||
|
</a>
|
||||||
20
app/templates/partials/docker.html
Normal file
20
app/templates/partials/docker.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<div class="space-y-2">
|
||||||
|
{% for host in hosts %}
|
||||||
|
<div class="card rounded-lg p-2">
|
||||||
|
<div class="flex items-center justify-between text-xs text-gray-400 mb-2">
|
||||||
|
<span class="font-medium">{{ host.name }}</span>
|
||||||
|
<span class="text-[10px]">{{ counts.get(host.name, 0) }} running</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
{% for container in containers if container.host == host.name %}
|
||||||
|
<div class="flex items-center gap-1.5 px-2 py-1 rounded bg-dark-700 text-xs">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full {% if container.state == 'running' %}bg-emerald-500{% else %}bg-red-500{% endif %}"></span>
|
||||||
|
<span class="text-gray-300 truncate max-w-[80px]" title="{{ container.name }}">{{ container.name }}</span>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<span class="text-gray-500 text-xs">No containers</span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
40
app/templates/partials/downloads.html
Normal file
40
app/templates/partials/downloads.html
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<div class="card rounded-lg p-3">
|
||||||
|
{% if queue and queue.downloading > 0 %}
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs text-gray-400">{{ queue.downloading }} active</span>
|
||||||
|
<span class="text-xs text-emerald-400 font-mono">{{ queue.speed }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if queue.items %}
|
||||||
|
<div class="space-y-2">
|
||||||
|
{% for item in queue.items %}
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between text-xs mb-1">
|
||||||
|
<span class="text-gray-300 truncate flex-1 mr-2">{{ item.name }}</span>
|
||||||
|
<span class="text-gray-500">{{ item.progress | round(1) }}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill bg-emerald-500" style="width: {{ item.progress }}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if queue.eta and queue.eta != 'Unknown' %}
|
||||||
|
<div class="flex items-center justify-between mt-2 text-xs text-gray-500">
|
||||||
|
<span>ETA: {{ queue.eta }}</span>
|
||||||
|
<span>{{ queue.size_left }} left</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<div class="flex items-center gap-2 text-gray-500 text-xs">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||||
|
<span>No active downloads</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<a href="https://sabnzbd.deathstar-home.one" target="_blank" class="block text-center text-xs text-gray-500 hover:text-green-400 mt-2">
|
||||||
|
Open Sabnzbd
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
16
app/templates/partials/events.html
Normal file
16
app/templates/partials/events.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<div class="card rounded-lg p-3">
|
||||||
|
{% if events %}
|
||||||
|
<div class="space-y-1.5">
|
||||||
|
{% for event in events | reverse %}
|
||||||
|
<div class="flex items-center gap-2 text-xs">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full flex-shrink-0 {% if event.new_status == 'online' %}bg-emerald-500{% elif event.new_status == 'degraded' %}bg-amber-500{% else %}bg-red-500{% endif %}"></span>
|
||||||
|
<span class="text-gray-300 truncate flex-1">{{ event.service }}</span>
|
||||||
|
<span class="text-[10px] {% if event.new_status == 'online' %}text-emerald-400{% else %}text-red-400{% endif %}">{{ event.new_status }}</span>
|
||||||
|
<span class="text-[10px] text-gray-500">{{ event.timestamp.strftime('%H:%M') }}</span>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="text-gray-500 text-xs text-center py-2">No recent events</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
13
app/templates/partials/favorites.html
Normal file
13
app/templates/partials/favorites.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{% for service in favorites %}
|
||||||
|
{% set status = services_status.get(service.name) %}
|
||||||
|
<a href="{{ service.url }}" target="_blank"
|
||||||
|
class="favorite-card card flex items-center gap-2 px-3 py-2 rounded-lg hover:scale-105 transition-transform">
|
||||||
|
<span class="w-2 h-2 rounded-full {% if status and status.status == 'online' %}bg-emerald-500{% elif status and status.status == 'degraded' %}bg-amber-500{% else %}bg-red-500{% endif %}"></span>
|
||||||
|
<span class="text-sm font-medium">{{ service.name }}</span>
|
||||||
|
{% if status and status.response_time_ms %}
|
||||||
|
<span class="text-xs text-gray-500">{{ status.response_time_ms }}ms</span>
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
66
app/templates/partials/nodes.html
Normal file
66
app/templates/partials/nodes.html
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-2">
|
||||||
|
{% for node in nodes_status %}
|
||||||
|
<div class="card rounded-lg p-3 cursor-pointer" onclick="toggleNodeExpand(this)">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full {% if node.status == 'online' %}bg-emerald-500{% else %}bg-red-500{% endif %}"></span>
|
||||||
|
<span class="font-semibold text-sm">{{ node.name }}</span>
|
||||||
|
</div>
|
||||||
|
{% if node.uptime_hours %}
|
||||||
|
<span class="text-xs text-gray-500">{{ (node.uptime_hours / 24) | round(1) }}d</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if node.status == 'online' %}
|
||||||
|
<div class="mb-2">
|
||||||
|
<div class="flex items-center justify-between text-xs mb-1">
|
||||||
|
<span class="text-gray-400">CPU</span>
|
||||||
|
<span class="{% if node.cpu_percent and node.cpu_percent > 80 %}text-red-400{% elif node.cpu_percent and node.cpu_percent > 60 %}text-amber-400{% else %}text-emerald-400{% endif %}">{{ node.cpu_percent | default(0) | round(1) }}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar"><div class="progress-fill {% if node.cpu_percent and node.cpu_percent > 80 %}bg-red-500{% elif node.cpu_percent and node.cpu_percent > 60 %}bg-amber-500{% else %}bg-emerald-500{% endif %}" style="width: {{ node.cpu_percent | default(0) }}%"></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<div class="flex items-center justify-between text-xs mb-1">
|
||||||
|
<span class="text-gray-400">RAM</span>
|
||||||
|
<span class="{% if node.memory_percent and node.memory_percent > 85 %}text-red-400{% elif node.memory_percent and node.memory_percent > 70 %}text-amber-400{% else %}text-blue-400{% endif %}">{% if node.memory_used_gb %}{{ node.memory_used_gb }}{% else %}?{% endif %}/{% if node.memory_total_gb %}{{ node.memory_total_gb }}{% else %}?{% endif %}GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar"><div class="progress-fill {% if node.memory_percent and node.memory_percent > 85 %}bg-red-500{% elif node.memory_percent and node.memory_percent > 70 %}bg-amber-500{% else %}bg-blue-500{% endif %}" style="width: {{ node.memory_percent | default(0) }}%"></div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between text-xs mb-1">
|
||||||
|
<span class="text-gray-400">Disk</span>
|
||||||
|
<span class="{% if node.disk_percent and node.disk_percent > 85 %}text-red-400{% elif node.disk_percent and node.disk_percent > 70 %}text-amber-400{% else %}text-purple-400{% endif %}">{{ node.disk_percent | default(0) | round(1) }}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar"><div class="progress-fill {% if node.disk_percent and node.disk_percent > 85 %}bg-red-500{% elif node.disk_percent and node.disk_percent > 70 %}bg-amber-500{% else %}bg-purple-500{% endif %}" style="width: {{ node.disk_percent | default(0) }}%"></div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expandable VM/CT list -->
|
||||||
|
<div class="node-expanded hidden mt-2 pt-2 border-t border-gray-700">
|
||||||
|
{% if node.vms %}
|
||||||
|
<div class="text-[10px] text-gray-400 mb-1">VMs ({{ node.vms | length }})</div>
|
||||||
|
<div class="flex flex-wrap gap-1 mb-2">
|
||||||
|
{% for vm in node.vms[:5] %}
|
||||||
|
<span class="px-1 py-0.5 rounded text-[9px] {% if vm.status == 'running' %}bg-emerald-900/50 text-emerald-400{% else %}bg-gray-700 text-gray-400{% endif %}">{{ vm.name[:10] }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
{% if node.vms | length > 5 %}<span class="text-[9px] text-gray-500">+{{ node.vms | length - 5 }}</span>{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if node.containers %}
|
||||||
|
<div class="text-[10px] text-gray-400 mb-1">LXC ({{ node.containers | length }})</div>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
{% for ct in node.containers[:5] %}
|
||||||
|
<span class="px-1 py-0.5 rounded text-[9px] {% if ct.status == 'running' %}bg-blue-900/50 text-blue-400{% else %}bg-gray-700 text-gray-400{% endif %}">{{ ct.name[:10] }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
{% if node.containers | length > 5 %}<span class="text-[9px] text-gray-500">+{{ node.containers | length - 5 }}</span>{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="text-center text-red-400 text-xs py-2">Offline</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% if cluster_uptime %}
|
||||||
|
<div class="text-xs text-gray-500 mt-2 text-right">Cluster total: {{ cluster_uptime }}h</div>
|
||||||
|
{% endif %}
|
||||||
31
app/templates/partials/pbs.html
Normal file
31
app/templates/partials/pbs.html
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<div class="card rounded-lg p-3">
|
||||||
|
{% if pbs.status == 'online' %}
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs text-emerald-400">Online</span>
|
||||||
|
{% if pbs.last_backup %}
|
||||||
|
<span class="text-xs text-gray-500">Last: {{ pbs.last_backup }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% if pbs.datastore_usage %}
|
||||||
|
<div class="space-y-2">
|
||||||
|
{% for ds in pbs.datastore_usage %}
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between text-xs mb-1">
|
||||||
|
<span class="text-gray-300">{{ ds.name }}</span>
|
||||||
|
<span class="text-gray-500">{{ ds.used_gb }}/{{ ds.total_gb }}GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill {% if ds.percent > 85 %}bg-red-500{% elif ds.percent > 70 %}bg-amber-500{% else %}bg-orange-500{% endif %}" style="width: {{ ds.percent }}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<div class="flex items-center gap-2 text-gray-500 text-xs">
|
||||||
|
<svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
||||||
|
<span>PBS Offline</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<a href="https://192.168.1.159:8007" target="_blank" class="block text-center text-xs text-gray-500 hover:text-orange-400 mt-2">Open PBS</a>
|
||||||
|
</div>
|
||||||
60
app/templates/partials/services.html
Normal file
60
app/templates/partials/services.html
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
{% for category_name, category_services in services_by_category.items() %}
|
||||||
|
{% set cat_info = categories.get(category_name, {}) %}
|
||||||
|
<div class="category-section mb-3">
|
||||||
|
<div class="flex items-center gap-2 mb-2 cursor-pointer select-none" onclick="toggleCategory(this)">
|
||||||
|
<svg class="w-3 h-3 text-gray-500 collapse-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||||
|
<span class="w-3 h-3 rounded-full
|
||||||
|
{% if cat_info.color == 'blue' %}bg-blue-500
|
||||||
|
{% elif cat_info.color == 'purple' %}bg-purple-500
|
||||||
|
{% elif cat_info.color == 'amber' %}bg-amber-500
|
||||||
|
{% elif cat_info.color == 'emerald' %}bg-emerald-500
|
||||||
|
{% elif cat_info.color == 'cyan' %}bg-cyan-500
|
||||||
|
{% else %}bg-gray-500{% endif %}"></span>
|
||||||
|
<h3 class="text-sm font-semibold text-gray-300">{{ category_name }}</h3>
|
||||||
|
<span class="text-xs text-gray-500">({{ category_services | length }})</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapsible-content">
|
||||||
|
<div class="service-grid">
|
||||||
|
{% for service in category_services %}
|
||||||
|
{% set status = services_status.get(service.name) %}
|
||||||
|
<a href="{{ service.url }}" target="_blank"
|
||||||
|
class="service-card card rounded-lg p-2 flex items-center gap-2 hover:scale-[1.02] transition-transform"
|
||||||
|
data-name="{{ service.name }}"
|
||||||
|
data-category="{{ category_name }}">
|
||||||
|
<!-- Status dot -->
|
||||||
|
<span class="status-dot w-2 h-2 rounded-full flex-shrink-0
|
||||||
|
{% if status and status.status == 'online' %}bg-emerald-500 status-online
|
||||||
|
{% elif status and status.status == 'degraded' %}bg-amber-500 status-pulse
|
||||||
|
{% else %}bg-red-500 status-offline{% endif %}"></span>
|
||||||
|
|
||||||
|
<!-- Icon -->
|
||||||
|
<svg class="svc-icon text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">{{ get_service_icon(service.icon) | safe }}</svg>
|
||||||
|
|
||||||
|
<!-- Name and response time -->
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-medium truncate">{{ service.name }}</div>
|
||||||
|
{% if status and status.response_time_ms %}
|
||||||
|
<div class="text-[10px] {% if status.response_time_ms < 100 %}response-fast{% elif status.response_time_ms < 500 %}response-medium{% else %}response-slow{% endif %}">
|
||||||
|
{{ status.response_time_ms }}ms
|
||||||
|
</div>
|
||||||
|
{% elif status and status.status == 'offline' %}
|
||||||
|
<div class="text-[10px] text-red-400">Offline</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Critical badge -->
|
||||||
|
{% if service.critical %}
|
||||||
|
<svg class="w-3 h-3 text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Group badge -->
|
||||||
|
{% if service.group %}
|
||||||
|
<span class="text-[8px] px-1 py-0.5 rounded bg-dark-600 text-gray-400">{{ service.group[:3] }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
17
app/templates/partials/status_banner.html
Normal file
17
app/templates/partials/status_banner.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{% if critical_down %}
|
||||||
|
<div class="status-banner rounded-lg px-4 py-2 flex items-center justify-between border border-red-900/50">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="w-5 h-5 text-red-400 status-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
|
||||||
|
<span class="text-sm text-red-300">
|
||||||
|
<strong>Critical services down:</strong> {{ critical_down | join(", ") }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<a href="#services-container" class="text-xs text-red-400 hover:text-red-300">View details</a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="status-banner all-good rounded-lg px-4 py-2 flex items-center gap-3 border border-emerald-900/50">
|
||||||
|
<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||||
|
<span class="text-sm text-emerald-300">All critical services operational</span>
|
||||||
|
<span class="text-xs text-gray-500 ml-auto">{{ online_count }}/{{ total_count }} services online</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
45
app/templates/partials/uptime.html
Normal file
45
app/templates/partials/uptime.html
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<div class="card rounded-lg p-3">
|
||||||
|
{% if uptime.monitors %}
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs text-gray-400">{{ uptime.summary.up }}/{{ uptime.summary.total }} up</span>
|
||||||
|
{% if uptime.summary.down > 0 %}
|
||||||
|
<span class="text-xs text-red-400">{{ uptime.summary.down }} down</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1.5">
|
||||||
|
{% for monitor in uptime.monitors[:8] %}
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full flex-shrink-0 {% if monitor.status == 1 %}bg-emerald-500{% else %}bg-red-500{% endif %}"></span>
|
||||||
|
<span class="text-xs text-gray-300 truncate flex-1">{{ monitor.name }}</span>
|
||||||
|
<!-- Sparkline -->
|
||||||
|
{% if monitor.heartbeats %}
|
||||||
|
<div class="flex items-end gap-px h-3">
|
||||||
|
{% for hb in monitor.heartbeats[-12:] %}
|
||||||
|
{% set ping_height = ((hb.ping or 50) / 5) %}
|
||||||
|
{% if ping_height > 100 %}{% set ping_height = 100 %}{% endif %}
|
||||||
|
{% if ping_height < 20 %}{% set ping_height = 20 %}{% endif %}
|
||||||
|
<div class="w-1 {% if hb.status == 1 %}bg-emerald-500/60{% else %}bg-red-500/60{% endif %}"
|
||||||
|
style="height: {{ ping_height }}%"></div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if monitor.ping %}
|
||||||
|
<span class="text-[10px] text-gray-500 w-8 text-right">{{ monitor.ping }}ms</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% if uptime.monitors | length > 8 %}
|
||||||
|
<div class="text-xs text-gray-500 mt-2">+{{ uptime.monitors | length - 8 }} more</div>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<div class="flex items-center gap-2 text-gray-500 text-xs">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||||
|
<span>No uptime data</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<a href="{{ uptime_kuma_url }}" target="_blank" class="block text-center text-xs text-gray-500 hover:text-amber-400 mt-2">
|
||||||
|
Open Uptime Kuma
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
92
app/templates/settings.html
Normal file
92
app/templates/settings.html
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Settings - DeathStar Homelab</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: { extend: { colors: { dark: { 900: '#0a0f1a', 800: '#111827', 700: '#1f2937', 600: '#374151' } } } }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { background: linear-gradient(135deg, #0a0f1a 0%, #111827 100%); }
|
||||||
|
.card { background: rgba(31, 41, 55, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(75, 85, 99, 0.3); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-gray-100 min-h-screen p-6">
|
||||||
|
<div class="max-w-2xl mx-auto">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Settings</h1>
|
||||||
|
<a href="/" class="px-4 py-2 rounded-lg bg-dark-700 hover:bg-dark-600 text-sm text-gray-300">Back to Dashboard</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if request.query_params.get('saved') %}
|
||||||
|
<div class="mb-4 p-3 rounded-lg bg-emerald-900/30 border border-emerald-700 text-emerald-300 text-sm">Settings saved successfully!</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<form method="POST" action="/settings" class="space-y-6">
|
||||||
|
<!-- General Settings -->
|
||||||
|
<div class="card rounded-xl p-6">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-gray-200">General</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-2">Refresh Interval (seconds)</label>
|
||||||
|
<select name="refresh_interval" class="w-full bg-dark-700 border border-gray-600 rounded-lg px-3 py-2 text-sm">
|
||||||
|
<option value="15" {% if settings.refresh_interval == 15 %}selected{% endif %}>15 seconds</option>
|
||||||
|
<option value="30" {% if settings.refresh_interval == 30 %}selected{% endif %}>30 seconds</option>
|
||||||
|
<option value="60" {% if settings.refresh_interval == 60 %}selected{% endif %}>60 seconds</option>
|
||||||
|
<option value="120" {% if settings.refresh_interval == 120 %}selected{% endif %}>2 minutes</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-2">Theme</label>
|
||||||
|
<select name="theme" class="w-full bg-dark-700 border border-gray-600 rounded-lg px-3 py-2 text-sm">
|
||||||
|
<option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>Dark</option>
|
||||||
|
<option value="light" {% if settings.theme == 'light' %}selected{% endif %}>Light</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Display Options -->
|
||||||
|
<div class="card rounded-xl p-6">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-gray-200">Display Options</h2>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer">
|
||||||
|
<input type="checkbox" name="show_response_times" {% if settings.show_response_times %}checked{% endif %} class="w-4 h-4 rounded bg-dark-700 border-gray-600">
|
||||||
|
<span class="text-sm text-gray-300">Show response times</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer">
|
||||||
|
<input type="checkbox" name="show_icons" {% if settings.show_icons %}checked{% endif %} class="w-4 h-4 rounded bg-dark-700 border-gray-600">
|
||||||
|
<span class="text-sm text-gray-300">Show service icons</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Favorites -->
|
||||||
|
<div class="card rounded-xl p-6">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-gray-200">Favorites</h2>
|
||||||
|
<p class="text-xs text-gray-500 mb-3">Select services to show in Quick Access</p>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 max-h-64 overflow-y-auto">
|
||||||
|
{% for service in all_services %}
|
||||||
|
<label class="flex items-center gap-2 p-2 rounded-lg bg-dark-700 cursor-pointer hover:bg-dark-600">
|
||||||
|
<input type="checkbox" name="favorites" value="{{ service.name }}"
|
||||||
|
{% if service.name in settings.favorites %}checked{% endif %}
|
||||||
|
class="w-3 h-3 rounded bg-dark-600 border-gray-500">
|
||||||
|
<span class="text-xs text-gray-300 truncate">{{ service.name }}</span>
|
||||||
|
</label>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3">
|
||||||
|
<a href="/" class="px-4 py-2 rounded-lg bg-dark-700 hover:bg-dark-600 text-sm text-gray-300">Cancel</a>
|
||||||
|
<button type="submit" class="px-6 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-sm text-white font-medium">Save Settings</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
215
config.yaml.example
Normal file
215
config.yaml.example
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
# ============================================================
|
||||||
|
# Dashboard Configuration
|
||||||
|
# ============================================================
|
||||||
|
# Copy this file to config.yaml and customize for your setup
|
||||||
|
# Sensitive values (API keys, secrets) go in secrets.yaml
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
# Dashboard settings
|
||||||
|
dashboard:
|
||||||
|
title: "My Homelab"
|
||||||
|
refresh_interval: 30 # seconds
|
||||||
|
theme: dark # dark or light
|
||||||
|
show_response_times: true
|
||||||
|
show_icons: true
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Proxmox Cluster Configuration
|
||||||
|
# ============================================================
|
||||||
|
proxmox:
|
||||||
|
enabled: true
|
||||||
|
nodes:
|
||||||
|
- name: node1
|
||||||
|
ip: 192.168.1.10
|
||||||
|
port: 8006
|
||||||
|
- name: node2
|
||||||
|
ip: 192.168.1.11
|
||||||
|
port: 8006
|
||||||
|
# API credentials go in secrets.yaml
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Proxmox Backup Server (PBS)
|
||||||
|
# ============================================================
|
||||||
|
pbs:
|
||||||
|
enabled: true
|
||||||
|
url: https://192.168.1.20:8007
|
||||||
|
# API credentials go in secrets.yaml
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Camera Configuration (go2rtc)
|
||||||
|
# ============================================================
|
||||||
|
cameras:
|
||||||
|
enabled: true
|
||||||
|
go2rtc_url: http://192.168.1.30:1985
|
||||||
|
# List camera stream names as configured in go2rtc
|
||||||
|
streams:
|
||||||
|
- FrontDoor
|
||||||
|
- Backyard
|
||||||
|
- Driveway
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Docker Hosts
|
||||||
|
# ============================================================
|
||||||
|
docker:
|
||||||
|
enabled: true
|
||||||
|
hosts:
|
||||||
|
- name: docker1
|
||||||
|
ip: 192.168.1.40
|
||||||
|
port: 2375 # Docker API port (ensure it's secured!)
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Uptime Kuma
|
||||||
|
# ============================================================
|
||||||
|
uptime_kuma:
|
||||||
|
enabled: true
|
||||||
|
url: http://192.168.1.50:3001
|
||||||
|
status_page: default # Status page slug
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Categories
|
||||||
|
# ============================================================
|
||||||
|
# Define service categories with colors
|
||||||
|
categories:
|
||||||
|
Infrastructure:
|
||||||
|
color: blue
|
||||||
|
icon: server
|
||||||
|
Media:
|
||||||
|
color: purple
|
||||||
|
icon: film
|
||||||
|
Monitoring:
|
||||||
|
color: amber
|
||||||
|
icon: chart
|
||||||
|
Apps:
|
||||||
|
color: emerald
|
||||||
|
icon: cog
|
||||||
|
Home:
|
||||||
|
color: cyan
|
||||||
|
icon: home
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Services
|
||||||
|
# ============================================================
|
||||||
|
# Define all services to monitor
|
||||||
|
#
|
||||||
|
# Fields:
|
||||||
|
# name: Display name
|
||||||
|
# url: URL to open when clicked (can be external domain)
|
||||||
|
# ip: Internal IP for health checks
|
||||||
|
# port: Port for health checks
|
||||||
|
# category: Must match a category defined above
|
||||||
|
# icon: Icon name (see available icons below)
|
||||||
|
# favorite: Show in favorites section (optional)
|
||||||
|
# critical: Mark as critical service (optional)
|
||||||
|
# group: Group related services together (optional)
|
||||||
|
# health_check: Custom health check config (optional)
|
||||||
|
# url: Override URL for health check
|
||||||
|
# timeout: Custom timeout in seconds
|
||||||
|
#
|
||||||
|
# Available icons:
|
||||||
|
# server, shield, globe, archive, lock, film, star, video,
|
||||||
|
# tv, music, search, download, cog, chart, heartbeat, key,
|
||||||
|
# git, workflow, book, image, brain, home, camera, message, database
|
||||||
|
#
|
||||||
|
services:
|
||||||
|
# Infrastructure
|
||||||
|
- name: Router
|
||||||
|
url: https://192.168.1.1
|
||||||
|
ip: 192.168.1.1
|
||||||
|
port: 443
|
||||||
|
category: Infrastructure
|
||||||
|
icon: shield
|
||||||
|
critical: true
|
||||||
|
|
||||||
|
- name: Reverse Proxy
|
||||||
|
url: https://192.168.1.2:81
|
||||||
|
ip: 192.168.1.2
|
||||||
|
port: 81
|
||||||
|
category: Infrastructure
|
||||||
|
icon: globe
|
||||||
|
critical: true
|
||||||
|
|
||||||
|
# Media
|
||||||
|
- name: Plex
|
||||||
|
url: https://plex.example.com
|
||||||
|
ip: 192.168.1.100
|
||||||
|
port: 32400
|
||||||
|
category: Media
|
||||||
|
icon: film
|
||||||
|
favorite: true
|
||||||
|
|
||||||
|
- name: Radarr
|
||||||
|
url: https://radarr.example.com
|
||||||
|
ip: 192.168.1.101
|
||||||
|
port: 7878
|
||||||
|
category: Media
|
||||||
|
icon: film
|
||||||
|
group: Arr Stack
|
||||||
|
|
||||||
|
- name: Sonarr
|
||||||
|
url: https://sonarr.example.com
|
||||||
|
ip: 192.168.1.102
|
||||||
|
port: 8989
|
||||||
|
category: Media
|
||||||
|
icon: tv
|
||||||
|
group: Arr Stack
|
||||||
|
|
||||||
|
# Monitoring
|
||||||
|
- name: Grafana
|
||||||
|
url: https://grafana.example.com
|
||||||
|
ip: 192.168.1.150
|
||||||
|
port: 3000
|
||||||
|
category: Monitoring
|
||||||
|
icon: chart
|
||||||
|
favorite: true
|
||||||
|
|
||||||
|
- name: Uptime Kuma
|
||||||
|
url: https://status.example.com
|
||||||
|
ip: 192.168.1.151
|
||||||
|
port: 3001
|
||||||
|
category: Monitoring
|
||||||
|
icon: heartbeat
|
||||||
|
|
||||||
|
# Apps
|
||||||
|
- name: Vaultwarden
|
||||||
|
url: https://vault.example.com
|
||||||
|
ip: 192.168.1.200
|
||||||
|
port: 80
|
||||||
|
category: Apps
|
||||||
|
icon: key
|
||||||
|
favorite: true
|
||||||
|
health_check:
|
||||||
|
url: https://vault.example.com/
|
||||||
|
timeout: 5
|
||||||
|
|
||||||
|
# Home Automation
|
||||||
|
- name: Home Assistant
|
||||||
|
url: https://ha.example.com
|
||||||
|
ip: 192.168.1.50
|
||||||
|
port: 8123
|
||||||
|
category: Home
|
||||||
|
icon: home
|
||||||
|
favorite: true
|
||||||
|
critical: true
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Service Groups
|
||||||
|
# ============================================================
|
||||||
|
# Group related services for organization
|
||||||
|
service_groups:
|
||||||
|
Arr Stack:
|
||||||
|
- Radarr
|
||||||
|
- Sonarr
|
||||||
|
- Prowlarr
|
||||||
|
- Sabnzbd
|
||||||
|
Media Players:
|
||||||
|
- Plex
|
||||||
|
- Jellyfin
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Default favorites (can be customized in UI)
|
||||||
|
# ============================================================
|
||||||
|
favorites:
|
||||||
|
- Plex
|
||||||
|
- Grafana
|
||||||
|
- Vaultwarden
|
||||||
|
- Home Assistant
|
||||||
5
requirements.txt
Normal file
5
requirements.txt
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
fastapi>=0.100.0
|
||||||
|
uvicorn>=0.23.0
|
||||||
|
httpx>=0.24.0
|
||||||
|
jinja2>=3.1.0
|
||||||
|
pyyaml>=6.0
|
||||||
36
secrets.yaml.example
Normal file
36
secrets.yaml.example
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
# ============================================================
|
||||||
|
# Dashboard Secrets Configuration
|
||||||
|
# ============================================================
|
||||||
|
# Copy this file to secrets.yaml and fill in your credentials
|
||||||
|
# IMPORTANT: Never commit secrets.yaml to version control!
|
||||||
|
# Add secrets.yaml to your .gitignore
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
# Proxmox API credentials
|
||||||
|
# Create a token: Datacenter > Permissions > API Tokens
|
||||||
|
proxmox:
|
||||||
|
api_token: root@pam!dashboard
|
||||||
|
api_secret: your-proxmox-api-secret-here
|
||||||
|
|
||||||
|
# Proxmox Backup Server credentials
|
||||||
|
# Create a token: Configuration > Access Control > API Token
|
||||||
|
pbs:
|
||||||
|
api_token: root@pam!dashboard
|
||||||
|
api_secret: your-pbs-api-secret-here
|
||||||
|
|
||||||
|
# OPNsense API credentials (optional)
|
||||||
|
# System > Access > Users > [user] > API keys
|
||||||
|
opnsense:
|
||||||
|
api_key: your-opnsense-api-key
|
||||||
|
api_secret: your-opnsense-api-secret
|
||||||
|
|
||||||
|
# Sabnzbd API key (optional)
|
||||||
|
# Config > General > API Key
|
||||||
|
sabnzbd:
|
||||||
|
api_key: your-sabnzbd-api-key
|
||||||
|
|
||||||
|
# Additional service API keys as needed
|
||||||
|
# Add custom keys here following the pattern:
|
||||||
|
# service_name:
|
||||||
|
# api_key: your-key
|
||||||
|
# api_secret: your-secret
|
||||||
Reference in New Issue
Block a user