Initial commit: Homelab documentation
- infrastructure.md: Network topology, server overview, credentials - gsm.md: Gameserver Monitor detailed documentation - todo.md: Project roadmap and completed tasks - CLAUDE.md: AI assistant context - temp/: Frontend component backups 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
15
.claude/settings.local.json
Normal file
15
.claude/settings.local.json
Normal file
File diff suppressed because one or more lines are too long
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
gsm-frontend/
|
||||||
33
CLAUDE.md
Normal file
33
CLAUDE.md
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Repository Purpose
|
||||||
|
|
||||||
|
This is a documentation repository for a homelab infrastructure. It contains technical documentation for servers, services, and network configuration - no application code.
|
||||||
|
|
||||||
|
## Infrastructure Overview
|
||||||
|
|
||||||
|
The homelab consists of:
|
||||||
|
- **Raspberry Pi (192.168.2.10)**: Runs Nginx Proxy Manager, Cloudflare DDNS, and Nextcloud via Docker
|
||||||
|
- **Proxmox Server (192.168.2.20)**: Virtualization host running LXC containers and VMs
|
||||||
|
- **Gameserver Monitor (192.168.2.30)**: React/Node.js webapp for monitoring game servers (LXC)
|
||||||
|
- **Factorio Server (192.168.2.50)**: Docker-based game server (LXC)
|
||||||
|
- **Minecraft Server (192.168.2.51)**: ATM10 modded server running via screen (VM)
|
||||||
|
|
||||||
|
## Key Technical Details
|
||||||
|
|
||||||
|
**Gameserver Monitor Stack**: React + Vite + TailwindCSS frontend, Node.js + Express backend, SQLite for auth, nginx as reverse proxy. Located at `/opt/gameserver-monitor/` on the monitor LXC.
|
||||||
|
|
||||||
|
**Gameserver Monitor Rollensystem**:
|
||||||
|
- `user`: Kann nur Server-Metriken sehen (CPU, RAM, Players, Uptime)
|
||||||
|
- `moderator`: Zusätzlich Konsole, RCON, Server Start/Stop/Restart
|
||||||
|
- `superadmin`: Zusätzlich Nutzerverwaltung (User anlegen/löschen, Rollen ändern)
|
||||||
|
|
||||||
|
**Domain**: dimension47.de with subdomains managed via Cloudflare DDNS
|
||||||
|
|
||||||
|
**SSH Access**: The monitor server (.30) has SSH key access to Proxmox and both game servers for remote management.
|
||||||
|
|
||||||
|
## Language Note
|
||||||
|
|
||||||
|
Documentation is written in German.
|
||||||
306
gsm.md
Normal file
306
gsm.md
Normal file
@@ -0,0 +1,306 @@
|
|||||||
|
# Gameserver Monitor (GSM) - Dokumentation
|
||||||
|
|
||||||
|
## Uebersicht
|
||||||
|
|
||||||
|
Der Gameserver Monitor ist eine Web-Applikation zur Ueberwachung und Verwaltung von Gameservern.
|
||||||
|
|
||||||
|
**URL:** https://monitor.dimension47.de
|
||||||
|
**Server:** 192.168.2.30 (LXC Container)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Architektur
|
||||||
|
|
||||||
|
```
|
||||||
|
Browser
|
||||||
|
|
|
||||||
|
v
|
||||||
|
+------------------+
|
||||||
|
| nginx (Port 80) | Reverse Proxy
|
||||||
|
+--------+---------+
|
||||||
|
|
|
||||||
|
+-----+-----+
|
||||||
|
| |
|
||||||
|
v v
|
||||||
|
Frontend Backend
|
||||||
|
(dist/) (Port 3000)
|
||||||
|
| |
|
||||||
|
| +-----+-----+
|
||||||
|
| | | |
|
||||||
|
| v v v
|
||||||
|
| SQLite SSH RCON
|
||||||
|
| | | |
|
||||||
|
| | +-----+-----+
|
||||||
|
| | | |
|
||||||
|
| v v v
|
||||||
|
| users.db .50 .51 .52
|
||||||
|
| whitelist Facto MC VRis
|
||||||
|
|
|
||||||
|
+---> Prometheus (Port 9090)
|
||||||
|
|
|
||||||
|
v
|
||||||
|
Grafana (Port 3001)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
| Komponente | Technologie |
|
||||||
|
|------------|-------------|
|
||||||
|
| Frontend | React 18 + Vite + TailwindCSS 4 + recharts |
|
||||||
|
| Backend | Node.js 20 + Express |
|
||||||
|
| Datenbank | SQLite (better-sqlite3) |
|
||||||
|
| Auth | JWT + bcrypt |
|
||||||
|
| Metrics | Prometheus + Node Exporter |
|
||||||
|
| Dashboards | Grafana |
|
||||||
|
| Reverse Proxy | nginx |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Verzeichnisstruktur
|
||||||
|
|
||||||
|
```
|
||||||
|
/opt/gameserver-monitor/
|
||||||
|
|
|
||||||
|
+-- backend/
|
||||||
|
| +-- server.js # Express Server Entry
|
||||||
|
| +-- config.json # Server-Konfiguration
|
||||||
|
| +-- .env # JWT_SECRET
|
||||||
|
| +-- package.json
|
||||||
|
| |
|
||||||
|
| +-- routes/
|
||||||
|
| | +-- servers.js # /api/servers Endpoints
|
||||||
|
| | +-- auth.js # /api/auth Endpoints
|
||||||
|
| |
|
||||||
|
| +-- services/
|
||||||
|
| | +-- ssh.js # SSH-Verbindungen, Status, Uptime
|
||||||
|
| | +-- rcon.js # RCON-Kommunikation
|
||||||
|
| | +-- prometheus.js # Prometheus Queries
|
||||||
|
| |
|
||||||
|
| +-- middleware/
|
||||||
|
| | +-- auth.js # JWT Middleware
|
||||||
|
| |
|
||||||
|
| +-- db/
|
||||||
|
| +-- init.js # DB-Schema, Whitelist-Cache
|
||||||
|
| +-- users.sqlite # User-Datenbank
|
||||||
|
|
|
||||||
|
+-- frontend/
|
||||||
|
+-- src/
|
||||||
|
| +-- main.jsx
|
||||||
|
| +-- App.jsx
|
||||||
|
| +-- api.js # API Client
|
||||||
|
| |
|
||||||
|
| +-- pages/
|
||||||
|
| | +-- Dashboard.jsx
|
||||||
|
| | +-- ServerDetail.jsx
|
||||||
|
| |
|
||||||
|
| +-- components/
|
||||||
|
| | +-- ServerCard.jsx
|
||||||
|
| | +-- MetricsChart.jsx
|
||||||
|
| | +-- LoginModal.jsx
|
||||||
|
| | +-- SettingsModal.jsx
|
||||||
|
| | +-- UserManagement.jsx
|
||||||
|
| |
|
||||||
|
| +-- context/
|
||||||
|
| +-- UserContext.jsx
|
||||||
|
|
|
||||||
|
+-- public/
|
||||||
|
| +-- minecraft.png
|
||||||
|
| +-- factorio.png
|
||||||
|
| +-- vrising.png
|
||||||
|
| +-- navbarlogograuer.png
|
||||||
|
| +-- navbarlogoweiss.png
|
||||||
|
|
|
||||||
|
+-- dist/ # Build Output (wird von nginx served)
|
||||||
|
+-- index.html
|
||||||
|
+-- package.json
|
||||||
|
+-- vite.config.js
|
||||||
|
+-- tailwind.config.js
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## API Endpoints
|
||||||
|
|
||||||
|
### Authentifizierung
|
||||||
|
|
||||||
|
| Method | Endpoint | Auth | Beschreibung |
|
||||||
|
|--------|----------|------|--------------|
|
||||||
|
| POST | /api/auth/login | - | Login, gibt JWT zurueck |
|
||||||
|
| GET | /api/auth/me | JWT | Aktueller User + Rolle |
|
||||||
|
| POST | /api/auth/change-password | JWT | Eigenes Passwort aendern |
|
||||||
|
| GET | /api/auth/users | superadmin | Alle User auflisten |
|
||||||
|
| POST | /api/auth/users | superadmin | Neuen User erstellen |
|
||||||
|
| PATCH | /api/auth/users/:id/role | superadmin | Rolle aendern |
|
||||||
|
| PATCH | /api/auth/users/:id/password | superadmin | Passwort setzen |
|
||||||
|
| DELETE | /api/auth/users/:id | superadmin | User loeschen |
|
||||||
|
|
||||||
|
### Server
|
||||||
|
|
||||||
|
| Method | Endpoint | Auth | Beschreibung |
|
||||||
|
|--------|----------|------|--------------|
|
||||||
|
| GET | /api/servers | optional | Alle Server mit Status/Metrics |
|
||||||
|
| GET | /api/servers/:id | optional | Einzelner Server |
|
||||||
|
| POST | /api/servers/:id/start | moderator | Server starten |
|
||||||
|
| POST | /api/servers/:id/stop | moderator | Server stoppen |
|
||||||
|
| POST | /api/servers/:id/restart | moderator | Server neustarten |
|
||||||
|
| GET | /api/servers/:id/logs | moderator | Console Logs |
|
||||||
|
| POST | /api/servers/:id/rcon | moderator | RCON Befehl senden |
|
||||||
|
| GET | /api/servers/:id/whitelist | optional | Whitelist (gecached) |
|
||||||
|
| GET | /api/servers/:id/metrics/history | optional | Prometheus History |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Rollensystem
|
||||||
|
|
||||||
|
| Rolle | Rechte |
|
||||||
|
|-------|--------|
|
||||||
|
| (kein Login) | Dashboard ansehen, Metriken sehen |
|
||||||
|
| user | Wie ohne Login |
|
||||||
|
| moderator | + Server starten/stoppen, Logs, RCON, Whitelist |
|
||||||
|
| superadmin | + Nutzerverwaltung |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Server-Konfiguration
|
||||||
|
|
||||||
|
`/opt/gameserver-monitor/backend/config.json`:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"servers": [
|
||||||
|
{
|
||||||
|
"id": "minecraft",
|
||||||
|
"name": "All the Mods 10 | Minecraft",
|
||||||
|
"host": "192.168.2.51",
|
||||||
|
"type": "minecraft",
|
||||||
|
"runtime": "screen",
|
||||||
|
"screenName": "minecraft",
|
||||||
|
"workDir": "/opt/minecraft",
|
||||||
|
"startCmd": "./run.sh",
|
||||||
|
"rconPort": 25575,
|
||||||
|
"rconPassword": "gsm-mc-2026"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "factorio",
|
||||||
|
"name": "Factorio",
|
||||||
|
"host": "192.168.2.50",
|
||||||
|
"type": "factorio",
|
||||||
|
"runtime": "docker",
|
||||||
|
"containerName": "factorio",
|
||||||
|
"rconPort": 27015,
|
||||||
|
"rconPassword": "jieTig6IkixaKuu"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "vrising",
|
||||||
|
"name": "V Rising",
|
||||||
|
"host": "192.168.2.52",
|
||||||
|
"type": "vrising",
|
||||||
|
"runtime": "systemd",
|
||||||
|
"serviceName": "vrising",
|
||||||
|
"workDir": "/home/steam/vrising"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Runtime-Typen
|
||||||
|
|
||||||
|
| Runtime | Status-Check | Start | Stop | Uptime |
|
||||||
|
|---------|--------------|-------|------|--------|
|
||||||
|
| docker | docker inspect | docker start | docker stop | Container StartedAt |
|
||||||
|
| screen | screen -ls | screen -dmS | screen -X quit | ps -o etimes |
|
||||||
|
| systemd | systemctl is-active | systemctl start | systemctl stop | ActiveEnterTimestamp |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
### Oeffentliches Dashboard
|
||||||
|
- Dashboard ist ohne Login sichtbar
|
||||||
|
- Login-Modal fuer Admins ueber "Sign in" Button
|
||||||
|
- Alle Server-Karten sichtbar, aber ohne Admin-Hints
|
||||||
|
|
||||||
|
### Gameserver-Uptime
|
||||||
|
- Zeigt Prozess-Uptime statt Host-Uptime
|
||||||
|
- Docker: Container-Laufzeit
|
||||||
|
- Screen: Session-Laufzeit
|
||||||
|
- Systemd: Service-Aktivzeit
|
||||||
|
|
||||||
|
### Whitelist-Caching (Minecraft)
|
||||||
|
- Whitelist wird serverseitig in SQLite gecached
|
||||||
|
- Anzeige auch wenn Server offline
|
||||||
|
- Bearbeitung nur wenn Server online
|
||||||
|
- Cache wird bei jeder Aenderung aktualisiert
|
||||||
|
|
||||||
|
### Navbar-Logo
|
||||||
|
- Grau (navbarlogograuer.png) im Normalzustand
|
||||||
|
- Weiss (navbarlogoweiss.png) bei Hover
|
||||||
|
- Weiche CSS-Transition (300ms)
|
||||||
|
- Link zu https://zeasy.software
|
||||||
|
|
||||||
|
### Game-Logos
|
||||||
|
- Automatische Erkennung anhand Server-Name
|
||||||
|
- minecraft.png, factorio.png, vrising.png
|
||||||
|
- Angezeigt in ServerCard und ServerDetail
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Wartung
|
||||||
|
|
||||||
|
### Backend neustarten
|
||||||
|
```bash
|
||||||
|
ssh root@192.168.2.30
|
||||||
|
pkill -f 'node server.js'
|
||||||
|
cd /opt/gameserver-monitor/backend
|
||||||
|
node server.js &
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend neu bauen
|
||||||
|
```bash
|
||||||
|
ssh root@192.168.2.30
|
||||||
|
cd /opt/gameserver-monitor/frontend
|
||||||
|
npm run build
|
||||||
|
nginx -s reload
|
||||||
|
```
|
||||||
|
|
||||||
|
### Logs pruefen
|
||||||
|
```bash
|
||||||
|
# Backend (laeuft im Hintergrund)
|
||||||
|
# Fehler werden auf stderr ausgegeben
|
||||||
|
|
||||||
|
# nginx
|
||||||
|
tail -f /var/log/nginx/error.log
|
||||||
|
tail -f /var/log/nginx/access.log
|
||||||
|
```
|
||||||
|
|
||||||
|
### Neuen Server hinzufuegen
|
||||||
|
1. config.json bearbeiten (siehe oben)
|
||||||
|
2. SSH-Key auf neuem Server hinterlegen
|
||||||
|
3. Node Exporter installieren (fuer Prometheus)
|
||||||
|
4. Backend neustarten
|
||||||
|
|
||||||
|
### User verwalten
|
||||||
|
- Ueber UI: Settings > Users (nur superadmin)
|
||||||
|
- Direkt in DB: `/opt/gameserver-monitor/backend/db/users.sqlite`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### 502 Bad Gateway
|
||||||
|
- Backend laeuft nicht
|
||||||
|
- Loesung: Backend manuell starten
|
||||||
|
|
||||||
|
### Server zeigt "offline" obwohl online
|
||||||
|
- SSH-Verbindung fehlgeschlagen
|
||||||
|
- Loesung: SSH-Key pruefen, Firewall pruefen
|
||||||
|
|
||||||
|
### Whitelist leer
|
||||||
|
- RCON-Verbindung fehlgeschlagen
|
||||||
|
- Loesung: RCON-Port und Passwort pruefen
|
||||||
|
|
||||||
|
### Metrics zeigen 0
|
||||||
|
- Prometheus Target nicht erreichbar
|
||||||
|
- Loesung: Node Exporter auf Gameserver pruefen
|
||||||
181
infrastructure.md
Normal file
181
infrastructure.md
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
# Homelab Infrastructure
|
||||||
|
|
||||||
|
## Netzwerktopologie
|
||||||
|
|
||||||
|
```
|
||||||
|
Internet
|
||||||
|
|
|
||||||
|
v
|
||||||
|
+------------------+
|
||||||
|
| Router/Modem | 62.155.227.77 (dynamisch, Telekom)
|
||||||
|
| 192.168.2.1 |
|
||||||
|
+--------+---------+
|
||||||
|
|
|
||||||
|
v
|
||||||
|
+-------------------------------------------------------------+
|
||||||
|
| LAN 192.168.2.0/24 |
|
||||||
|
+-------------------------------------------------------------+
|
||||||
|
| |
|
||||||
|
| +--------------+ +--------------+ +--------------+ |
|
||||||
|
| | Raspberry | | Proxmox | | Windows | |
|
||||||
|
| | Pi (Himbeer)| | Server | | PC | |
|
||||||
|
| | .10 | | .20 | | | |
|
||||||
|
| +------+-------+ +------+-------+ +--------------+ |
|
||||||
|
| | | |
|
||||||
|
| | +-------+-------+-------+ |
|
||||||
|
| | | | | | |
|
||||||
|
| | v v v v |
|
||||||
|
| | +-----+ +-----+ +-----+ +-----+ |
|
||||||
|
| | | .30 | | .50 | | .51 | | .52 | |
|
||||||
|
| | | LXC | | LXC | | VM | | VM | |
|
||||||
|
| | |Monit| |Facto| | MC | |VRis | |
|
||||||
|
| | +-----+ +-----+ +-----+ +-----+ |
|
||||||
|
| | |
|
||||||
|
+---------+---------------------------------------------------+
|
||||||
|
|
|
||||||
|
v
|
||||||
|
+-----------+
|
||||||
|
| Docker |
|
||||||
|
| Services |
|
||||||
|
+-----------+
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Server-Uebersicht
|
||||||
|
|
||||||
|
### Raspberry Pi (alex@Himbeer) - 192.168.2.10
|
||||||
|
|
||||||
|
**Rolle:** Reverse Proxy & DNS Management
|
||||||
|
|
||||||
|
| Service | Container | Funktion |
|
||||||
|
|---------|-----------|----------|
|
||||||
|
| Nginx Proxy Manager | nginx-proxy-manager | Reverse Proxy + SSL (Let's Encrypt) |
|
||||||
|
| Cloudflare DDNS | cloudflare-ddns | Dynamische DNS-Updates |
|
||||||
|
| Nextcloud | nextcloud | Cloud Storage |
|
||||||
|
| MariaDB | nextcloud-db | Nextcloud Datenbank |
|
||||||
|
|
||||||
|
**NPM Admin-UI:** http://192.168.2.10:81
|
||||||
|
|
||||||
|
**Cloudflare DDNS Domains:**
|
||||||
|
- home.dimension47.de
|
||||||
|
- factorio.dimension47.de
|
||||||
|
- minecraft.dimension47.de
|
||||||
|
- monitor.dimension47.de
|
||||||
|
- grafana.dimension47.de
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Proxmox Server - 192.168.2.20
|
||||||
|
|
||||||
|
**Rolle:** Virtualisierungshost
|
||||||
|
|
||||||
|
| VMID | Name | Typ | IP | Cores | RAM | Funktion |
|
||||||
|
|------|------|-----|-----|-------|-----|----------|
|
||||||
|
| 100 | atm10 | VM (QEMU) | .51 | 4 | 12 GB | Minecraft ATM 10 |
|
||||||
|
| 101 | factorio | LXC | .50 | 2 | 4 GB | Factorio Server |
|
||||||
|
| 102 | gameserver-monitor | LXC | .30 | 2 | 4 GB | Monitoring Webapp |
|
||||||
|
| 103 | vrising | VM (QEMU) | .52 | 4 | 12 GB | V Rising Server |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Gameserver Monitor (root@192.168.2.30) - LXC 102
|
||||||
|
|
||||||
|
**Rolle:** Gameserver Ueberwachung & Administration
|
||||||
|
|
||||||
|
**URL:** https://monitor.dimension47.de
|
||||||
|
|
||||||
|
**Default Login:** admin / admin (Passwort aendern nach erstem Login!)
|
||||||
|
|
||||||
|
**Tech Stack:**
|
||||||
|
- OS: Debian 13 (Trixie)
|
||||||
|
- Frontend: React + Vite + TailwindCSS 4 + recharts
|
||||||
|
- Backend: Node.js + Express
|
||||||
|
- Auth: JWT + bcrypt + SQLite
|
||||||
|
- Monitoring: Prometheus + Grafana
|
||||||
|
- Reverse Proxy: nginx
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Oeffentliches Dashboard (ohne Login sichtbar)
|
||||||
|
- Live CPU/RAM Metriken (via SSH)
|
||||||
|
- Gameserver-Uptime (Prozess-Uptime statt Host-Uptime)
|
||||||
|
- Metrics History via Prometheus (15m/1h/6h/24h)
|
||||||
|
- Player Count + Spielerliste via RCON
|
||||||
|
- Game-Logos neben Servernamen
|
||||||
|
- Interaktives Navbar-Logo (Hover-Effekt, Link zu zeasy.software)
|
||||||
|
- Start/Stop/Restart Server (Moderator+)
|
||||||
|
- Console Logs (live, Moderator+)
|
||||||
|
- RCON Console (Moderator+)
|
||||||
|
- Minecraft Whitelist-Verwaltung mit serverseitigem Caching
|
||||||
|
- Rollensystem: user, moderator, superadmin
|
||||||
|
|
||||||
|
**Prometheus Targets:**
|
||||||
|
- localhost:9100 (monitor)
|
||||||
|
- 192.168.2.50:9100 (factorio)
|
||||||
|
- 192.168.2.51:9100 (minecraft)
|
||||||
|
- 192.168.2.52:9100 (vrising)
|
||||||
|
|
||||||
|
**Grafana:** https://grafana.dimension47.de
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Factorio Server (root@192.168.2.50) - LXC 101
|
||||||
|
|
||||||
|
| Eigenschaft | Wert |
|
||||||
|
|-------------|------|
|
||||||
|
| Runtime | Docker |
|
||||||
|
| Container | factorio |
|
||||||
|
| Game Port | 34197/udp |
|
||||||
|
| RCON Port | 27015 |
|
||||||
|
| RCON Password | jieTig6IkixaKuu |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Minecraft Server (root@192.168.2.51) - VM 100
|
||||||
|
|
||||||
|
| Eigenschaft | Wert |
|
||||||
|
|-------------|------|
|
||||||
|
| Modpack | All The Mods 10 (ATM10) |
|
||||||
|
| Runtime | screen |
|
||||||
|
| Screen Name | minecraft |
|
||||||
|
| Game Port | 25565 |
|
||||||
|
| RCON Port | 25575 |
|
||||||
|
| RCON Password | gsm-mc-2026 |
|
||||||
|
| Pfad | /opt/minecraft |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### V Rising Server (root@192.168.2.52) - VM 103
|
||||||
|
|
||||||
|
| Eigenschaft | Wert |
|
||||||
|
|-------------|------|
|
||||||
|
| Runtime | systemd |
|
||||||
|
| Service Name | vrising |
|
||||||
|
| Game Port | 9876/udp, 9877/udp |
|
||||||
|
| Pfad | /home/steam/vrising |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## SSH-Zugang
|
||||||
|
|
||||||
|
Der Gameserver-Monitor (.30) hat SSH-Key-Zugang zu:
|
||||||
|
- 192.168.2.20 (Proxmox)
|
||||||
|
- 192.168.2.50 (Factorio)
|
||||||
|
- 192.168.2.51 (Minecraft)
|
||||||
|
- 192.168.2.52 (V Rising)
|
||||||
|
|
||||||
|
Key: /root/.ssh/id_ed25519
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Wartung
|
||||||
|
|
||||||
|
### Backend neu starten
|
||||||
|
```
|
||||||
|
ssh root@192.168.2.30 "pkill -f 'node server.js'; cd /opt/gameserver-monitor/backend && node server.js &"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend neu bauen
|
||||||
|
```
|
||||||
|
ssh root@192.168.2.30 "cd /opt/gameserver-monitor/frontend && npm run build && nginx -s reload"
|
||||||
|
```
|
||||||
38
temp/App.jsx
Normal file
38
temp/App.jsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||||
|
import { UserProvider } from './context/UserContext'
|
||||||
|
import Login from './pages/Login'
|
||||||
|
import Dashboard from './pages/Dashboard'
|
||||||
|
import ServerDetail from './pages/ServerDetail'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [token, setToken] = useState(localStorage.getItem('token'))
|
||||||
|
|
||||||
|
const handleLogin = (newToken) => {
|
||||||
|
localStorage.setItem('token', newToken)
|
||||||
|
setToken(newToken)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
setToken(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
return <Login onLogin={handleLogin} />
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UserProvider token={token} onLogout={handleLogout}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Dashboard onLogout={handleLogout} />} />
|
||||||
|
<Route path="/server/:serverId" element={<ServerDetail />} />
|
||||||
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</UserProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
147
temp/Dashboard.jsx
Normal file
147
temp/Dashboard.jsx
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { getServers } from '../api'
|
||||||
|
import { useUser } from '../context/UserContext'
|
||||||
|
import ServerCard from '../components/ServerCard'
|
||||||
|
import SettingsModal from '../components/SettingsModal'
|
||||||
|
import UserManagement from '../components/UserManagement'
|
||||||
|
|
||||||
|
export default function Dashboard({ onLogout }) {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const { user, token, loading: userLoading, isSuperadmin, role } = useUser()
|
||||||
|
const [servers, setServers] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [showSettings, setShowSettings] = useState(false)
|
||||||
|
const [showUserMgmt, setShowUserMgmt] = useState(false)
|
||||||
|
|
||||||
|
const fetchServers = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getServers(token)
|
||||||
|
setServers(data)
|
||||||
|
setError('')
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to connect to server')
|
||||||
|
if (err.message.includes('401') || err.message.includes('403')) {
|
||||||
|
onLogout()
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!userLoading) {
|
||||||
|
fetchServers()
|
||||||
|
const interval = setInterval(fetchServers, 10000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}
|
||||||
|
}, [token, userLoading])
|
||||||
|
|
||||||
|
const roleLabels = {
|
||||||
|
user: 'Viewer',
|
||||||
|
moderator: 'Operator',
|
||||||
|
superadmin: 'Admin'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-neutral-400">Loading...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onlineCount = servers.filter(s => s.running).length
|
||||||
|
const totalPlayers = servers.reduce((sum, s) => sum + (s.players?.online || 0), 0)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-sm sticky top-0 z-10">
|
||||||
|
<div className="container-main py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<h1 className="text-xl font-semibold text-white">
|
||||||
|
Gameserver Monitor
|
||||||
|
</h1>
|
||||||
|
<div className="hidden md:flex items-center gap-4 text-sm text-neutral-400">
|
||||||
|
<span>
|
||||||
|
<span className="text-white font-medium">{onlineCount}</span>/{servers.length} online
|
||||||
|
</span>
|
||||||
|
<span className="text-neutral-600">|</span>
|
||||||
|
<span>
|
||||||
|
<span className="text-white font-medium">{totalPlayers}</span> players
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="hidden sm:block text-right mr-2">
|
||||||
|
<div className="text-sm text-white">{user?.username}</div>
|
||||||
|
<div className="text-xs text-neutral-500">{roleLabels[role]}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isSuperadmin && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowUserMgmt(true)}
|
||||||
|
className="btn btn-ghost"
|
||||||
|
>
|
||||||
|
Users
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setShowSettings(true)}
|
||||||
|
className="btn btn-ghost"
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onLogout}
|
||||||
|
className="btn btn-outline"
|
||||||
|
>
|
||||||
|
Sign out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="container-main py-8">
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-md text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-neutral-400">Loading servers...</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{servers.map((server) => (
|
||||||
|
<ServerCard
|
||||||
|
key={server.id}
|
||||||
|
server={server}
|
||||||
|
onClick={() => navigate('/server/' + server.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
{showSettings && (
|
||||||
|
<SettingsModal onClose={() => setShowSettings(false)} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showUserMgmt && (
|
||||||
|
<UserManagement onClose={() => setShowUserMgmt(false)} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
196
temp/Dashboard_current.jsx
Normal file
196
temp/Dashboard_current.jsx
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { getServers } from '../api'
|
||||||
|
import { useUser } from '../context/UserContext'
|
||||||
|
import ServerCard from '../components/ServerCard'
|
||||||
|
import SettingsModal from '../components/SettingsModal'
|
||||||
|
import UserManagement from '../components/UserManagement'
|
||||||
|
|
||||||
|
export default function Dashboard({ onLogout }) {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const { user, token, loading: userLoading, isSuperadmin, role } = useUser()
|
||||||
|
const [servers, setServers] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [showSettings, setShowSettings] = useState(false)
|
||||||
|
const [showUserMgmt, setShowUserMgmt] = useState(false)
|
||||||
|
const [currentTime, setCurrentTime] = useState(new Date())
|
||||||
|
|
||||||
|
const fetchServers = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getServers(token)
|
||||||
|
setServers(data)
|
||||||
|
setError('')
|
||||||
|
} catch (err) {
|
||||||
|
setError('CONNECTION_FAILED: Unable to reach server cluster')
|
||||||
|
if (err.message.includes('401') || err.message.includes('403')) {
|
||||||
|
onLogout()
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!userLoading) {
|
||||||
|
fetchServers()
|
||||||
|
const interval = setInterval(fetchServers, 10000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}
|
||||||
|
}, [token, userLoading])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => setCurrentTime(new Date()), 1000)
|
||||||
|
return () => clearInterval(timer)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const roleLabels = {
|
||||||
|
user: 'VIEWER',
|
||||||
|
moderator: 'OPERATOR',
|
||||||
|
superadmin: 'SYSADMIN'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[#0d0d0d] flex items-center justify-center">
|
||||||
|
<div className="text-[#00ff41] glow-green text-xl">INITIALIZING SYSTEM...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onlineCount = servers.filter(s => s.running).length
|
||||||
|
const totalPlayers = servers.reduce((sum, s) => sum + (s.players?.online || 0), 0)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[#0d0d0d] hex-grid relative overflow-x-hidden">
|
||||||
|
{/* Matrix rain overlay */}
|
||||||
|
<div className="matrix-bg" />
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<header className="relative z-10 border-b border-[#00ff41]/30 bg-black/80 backdrop-blur-sm">
|
||||||
|
<div className="container-main py-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<h1 className="text-xl md:text-2xl font-bold text-[#00ff41] glow-green font-mono">
|
||||||
|
GAMESERVER_MONITOR
|
||||||
|
</h1>
|
||||||
|
<div className="hidden md:flex items-center gap-4 text-[#00ff41]/60 text-sm font-mono">
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<span className="w-2 h-2 rounded-full status-online"></span>
|
||||||
|
{onlineCount}/{servers.length} NODES
|
||||||
|
</span>
|
||||||
|
<span>|</span>
|
||||||
|
<span>{totalPlayers} USERS_CONNECTED</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="hidden sm:block text-[#00ff41]/60 font-mono text-sm">
|
||||||
|
{currentTime.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="text-right hidden sm:block">
|
||||||
|
<div className="text-[#00ff41] font-mono text-sm">{user?.username?.toUpperCase()}</div>
|
||||||
|
<div className="text-[#00ff41]/50 text-xs">[{roleLabels[role]}]</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isSuperadmin && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowUserMgmt(true)}
|
||||||
|
className="btn-matrix px-3 py-1.5 text-sm font-mono"
|
||||||
|
>
|
||||||
|
USERS
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setShowSettings(true)}
|
||||||
|
className="btn-matrix px-3 py-1.5 text-sm font-mono"
|
||||||
|
>
|
||||||
|
SETTINGS
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onLogout}
|
||||||
|
className="btn-matrix px-3 py-1.5 text-sm font-mono"
|
||||||
|
>
|
||||||
|
DISCONNECT
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="relative z-10 container-main py-8">
|
||||||
|
{/* System Status Bar */}
|
||||||
|
<div className="mb-8 p-4 border border-[#00ff41]/30 bg-black/60 backdrop-blur-sm rounded font-mono text-sm">
|
||||||
|
<div className="flex items-center gap-2 text-[#00ff41]/80">
|
||||||
|
<span className="text-[#00ff41]">></span>
|
||||||
|
<span>SYSTEM_STATUS: {error ? 'ERROR' : 'OPERATIONAL'}</span>
|
||||||
|
</div>
|
||||||
|
{error && (
|
||||||
|
<div className="mt-2 text-red-500 flex items-center gap-2">
|
||||||
|
<span className="animate-pulse">!</span>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-[#00ff41] glow-green text-xl animate-pulse">
|
||||||
|
LOADING_NODES...
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 flex justify-center gap-1">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="w-3 h-8 bg-[#00ff41]/30"
|
||||||
|
style={{
|
||||||
|
animation: `pulse 1s ease-in-out ${i * 0.1}s infinite`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{servers.map((server, index) => (
|
||||||
|
<div
|
||||||
|
key={server.id}
|
||||||
|
className="opacity-0 fade-in-up"
|
||||||
|
style={{ animationDelay: `${index * 0.1}s` }}
|
||||||
|
>
|
||||||
|
<ServerCard
|
||||||
|
server={server}
|
||||||
|
onClick={() => navigate(`/server/${server.id}`)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer Stats */}
|
||||||
|
<div className="mt-12 pt-6 border-t border-[#00ff41]/20">
|
||||||
|
<div className="flex flex-wrap justify-center gap-6 text-[#00ff41]/50 font-mono text-xs">
|
||||||
|
<span>REFRESH_RATE: 10s</span>
|
||||||
|
<span>PROTOCOL: RCON/SSH</span>
|
||||||
|
<span>METRICS: PROMETHEUS</span>
|
||||||
|
<span>BUILD: v2.0.0-matrix</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
{showSettings && (
|
||||||
|
<SettingsModal onClose={() => setShowSettings(false)} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showUserMgmt && (
|
||||||
|
<UserManagement onClose={() => setShowUserMgmt(false)} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
86
temp/Login.jsx
Normal file
86
temp/Login.jsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { login } from '../api'
|
||||||
|
|
||||||
|
export default function Login({ onLogin }) {
|
||||||
|
const [username, setUsername] = useState('')
|
||||||
|
const [password, setPassword] = useState('')
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setLoading(true)
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { token } = await login(username, password)
|
||||||
|
onLogin(token)
|
||||||
|
} catch (err) {
|
||||||
|
setError('Invalid username or password')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-4">
|
||||||
|
<div className="w-full max-w-sm">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1 className="text-2xl font-semibold text-white">Gameserver Monitor</h1>
|
||||||
|
<p className="text-neutral-400 mt-2">Sign in to your account</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card p-6">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-md text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-300 mb-2">
|
||||||
|
Username
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
className="input"
|
||||||
|
placeholder="Enter your username"
|
||||||
|
required
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-300 mb-2">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="input"
|
||||||
|
placeholder="Enter your password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="btn btn-primary w-full"
|
||||||
|
>
|
||||||
|
{loading ? 'Signing in...' : 'Sign in'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-neutral-500 text-sm mt-6">
|
||||||
|
Gameserver Monitor v2.0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
192
temp/MetricsChart.jsx
Normal file
192
temp/MetricsChart.jsx
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { AreaChart, Area, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
|
||||||
|
import { getMetricsHistory } from '../api'
|
||||||
|
import { useUser } from '../context/UserContext'
|
||||||
|
|
||||||
|
const GRAFANA_URL = 'https://grafana.dimension47.de'
|
||||||
|
|
||||||
|
export default function MetricsChart({ serverId, serverName, expanded = false }) {
|
||||||
|
const { token } = useUser()
|
||||||
|
const [data, setData] = useState(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [range, setRange] = useState('1h')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
const metrics = await getMetricsHistory(token, serverId, range)
|
||||||
|
setData(metrics)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch metrics:', err)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData()
|
||||||
|
const interval = setInterval(fetchData, 60000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}, [token, serverId, range])
|
||||||
|
|
||||||
|
const formatTime = (timestamp) => {
|
||||||
|
const date = new Date(timestamp)
|
||||||
|
return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatBytes = (bytes) => {
|
||||||
|
if (bytes < 1024) return bytes.toFixed(0) + ' B/s'
|
||||||
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB/s'
|
||||||
|
return (bytes / 1024 / 1024).toFixed(1) + ' MB/s'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
|
||||||
|
<div className="h-20 flex items-center justify-center">
|
||||||
|
<span className="text-[#00ff41]/50 font-mono text-sm animate-pulse">LOADING_METRICS...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data || data.cpu.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
|
||||||
|
<div className="h-20 flex items-center justify-center">
|
||||||
|
<span className="text-[#00ff41]/30 font-mono text-sm">NO_DATA_AVAILABLE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const combinedData = data.cpu.map((point, i) => ({
|
||||||
|
timestamp: point.timestamp,
|
||||||
|
cpu: point.value,
|
||||||
|
memory: data.memory[i]?.value || 0,
|
||||||
|
networkRx: data.networkRx[i]?.value || 0,
|
||||||
|
networkTx: data.networkTx[i]?.value || 0
|
||||||
|
}))
|
||||||
|
|
||||||
|
const CustomTooltip = ({ active, payload, label }) => {
|
||||||
|
if (active && payload && payload.length) {
|
||||||
|
return (
|
||||||
|
<div className="bg-black/95 border border-[#00ff41]/50 rounded p-3 font-mono text-xs">
|
||||||
|
<div className="text-[#00ff41]/60 mb-2">{formatTime(label)}</div>
|
||||||
|
{payload.map((entry, i) => (
|
||||||
|
<div key={i} className="flex justify-between gap-4" style={{ color: entry.color }}>
|
||||||
|
<span>{entry.name}:</span>
|
||||||
|
<span className="font-bold">
|
||||||
|
{entry.name.includes('Network') ? formatBytes(entry.value) : entry.value.toFixed(1) + '%'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartCard = ({ title, dataKey, color, domain, formatter }) => (
|
||||||
|
<div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<span className="text-[#00ff41]/60 font-mono text-xs">{title}</span>
|
||||||
|
<span className="text-[#00ff41] font-mono text-sm font-bold">
|
||||||
|
{formatter
|
||||||
|
? formatter(combinedData[combinedData.length - 1]?.[dataKey] || 0)
|
||||||
|
: (combinedData[combinedData.length - 1]?.[dataKey] || 0).toFixed(1) + '%'
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ResponsiveContainer width="100%" height={expanded ? 150 : 80}>
|
||||||
|
<AreaChart data={combinedData}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id={`gradient-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor={color} stopOpacity={0.4}/>
|
||||||
|
<stop offset="95%" stopColor={color} stopOpacity={0.05}/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
{expanded && (
|
||||||
|
<>
|
||||||
|
<XAxis
|
||||||
|
dataKey="timestamp"
|
||||||
|
tickFormatter={formatTime}
|
||||||
|
tick={{ fill: '#00ff41', fontSize: 10, opacity: 0.5 }}
|
||||||
|
axisLine={{ stroke: '#00ff41', opacity: 0.2 }}
|
||||||
|
tickLine={false}
|
||||||
|
minTickGap={50}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
domain={domain || [0, 'auto']}
|
||||||
|
tick={{ fill: '#00ff41', fontSize: 10, opacity: 0.5 }}
|
||||||
|
axisLine={{ stroke: '#00ff41', opacity: 0.2 }}
|
||||||
|
tickLine={false}
|
||||||
|
width={40}
|
||||||
|
tickFormatter={formatter ? (v) => formatBytes(v).split(' ')[0] : (v) => v.toFixed(0)}
|
||||||
|
/>
|
||||||
|
<Tooltip content={<CustomTooltip />} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey={dataKey}
|
||||||
|
name={title}
|
||||||
|
stroke={color}
|
||||||
|
strokeWidth={2}
|
||||||
|
fill={`url(#gradient-${dataKey})`}
|
||||||
|
isAnimationActive={true}
|
||||||
|
animationDuration={500}
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-[#00ff41]/60 font-mono text-xs">
|
||||||
|
// METRICS_HISTORY
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<select
|
||||||
|
value={range}
|
||||||
|
onChange={(e) => setRange(e.target.value)}
|
||||||
|
className="input-matrix px-3 py-1 rounded font-mono text-xs"
|
||||||
|
>
|
||||||
|
<option value="15m">15 MIN</option>
|
||||||
|
<option value="1h">1 HOUR</option>
|
||||||
|
<option value="6h">6 HOURS</option>
|
||||||
|
<option value="24h">24 HOURS</option>
|
||||||
|
</select>
|
||||||
|
<a
|
||||||
|
href={`${GRAFANA_URL}/d/rYdddlPWk/node-exporter-full?var-job=${serverId}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="btn-matrix px-3 py-1 text-xs font-mono flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<span>📊</span>
|
||||||
|
GRAFANA
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Charts */}
|
||||||
|
{expanded ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<ChartCard title="CPU_USAGE" dataKey="cpu" color="#00ff41" domain={[0, 100]} />
|
||||||
|
<ChartCard title="RAM_USAGE" dataKey="memory" color="#00ffff" domain={[0, 100]} />
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<ChartCard title="NETWORK_RX" dataKey="networkRx" color="#ff00ff" formatter={formatBytes} />
|
||||||
|
<ChartCard title="NETWORK_TX" dataKey="networkTx" color="#ffff00" formatter={formatBytes} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<ChartCard title="CPU" dataKey="cpu" color="#00ff41" domain={[0, 100]} />
|
||||||
|
<ChartCard title="RAM" dataKey="memory" color="#00ffff" domain={[0, 100]} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
96
temp/ServerCard.jsx
Normal file
96
temp/ServerCard.jsx
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
export default function ServerCard({ server, onClick }) {
|
||||||
|
const formatUptime = (seconds) => {
|
||||||
|
const hours = Math.floor(seconds / 3600)
|
||||||
|
if (hours > 24) {
|
||||||
|
const days = Math.floor(hours / 24)
|
||||||
|
return days + 'd ' + (hours % 24) + 'h'
|
||||||
|
}
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
return hours + 'h ' + minutes + 'm'
|
||||||
|
}
|
||||||
|
|
||||||
|
const cpuPercent = Math.min(server.metrics.cpu, 100)
|
||||||
|
const memPercent = Math.min(server.metrics.memory, 100)
|
||||||
|
|
||||||
|
const getProgressColor = (percent) => {
|
||||||
|
if (percent > 80) return 'progress-bar-danger'
|
||||||
|
if (percent > 60) return 'progress-bar-warning'
|
||||||
|
return 'progress-bar-success'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="card card-clickable p-5"
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h3 className="text-lg font-semibold text-white">
|
||||||
|
{server.name}
|
||||||
|
</h3>
|
||||||
|
<span className={server.running ? 'badge badge-success' : 'badge badge-destructive'}>
|
||||||
|
{server.running ? 'Online' : 'Offline'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metrics */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* CPU */}
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-sm mb-1">
|
||||||
|
<span className="text-neutral-400">CPU</span>
|
||||||
|
<span className="text-white">{server.metrics.cpu.toFixed(1)}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="progress">
|
||||||
|
<div
|
||||||
|
className={'progress-bar ' + getProgressColor(cpuPercent)}
|
||||||
|
style={{ width: cpuPercent + '%' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RAM */}
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-sm mb-1">
|
||||||
|
<span className="text-neutral-400">Memory</span>
|
||||||
|
<span className="text-white">
|
||||||
|
{server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="progress">
|
||||||
|
<div
|
||||||
|
className={'progress-bar ' + getProgressColor(memPercent)}
|
||||||
|
style={{ width: memPercent + '%' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer Stats */}
|
||||||
|
<div className="flex items-center justify-between mt-4 pt-4 border-t border-neutral-800 text-sm">
|
||||||
|
<div className="text-neutral-400">
|
||||||
|
<span className="text-white font-medium">{server.players.online}</span>
|
||||||
|
{server.players.max ? ' / ' + server.players.max : ''} players
|
||||||
|
</div>
|
||||||
|
{server.running && (
|
||||||
|
<div className="text-neutral-400">
|
||||||
|
Uptime: <span className="text-white">{formatUptime(server.metrics.uptime)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Players List */}
|
||||||
|
{server.players?.list?.length > 0 && (
|
||||||
|
<div className="mt-3 pt-3 border-t border-neutral-800">
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{server.players.list.map((player, i) => (
|
||||||
|
<span key={i} className="badge badge-secondary">
|
||||||
|
{player}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
109
temp/ServerCard_new.jsx
Normal file
109
temp/ServerCard_new.jsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
export default function ServerCard({ server, onClick }) {
|
||||||
|
const [isHovered, setIsHovered] = useState(false)
|
||||||
|
|
||||||
|
const formatUptime = (seconds) => {
|
||||||
|
const hours = Math.floor(seconds / 3600)
|
||||||
|
if (hours > 24) {
|
||||||
|
const days = Math.floor(hours / 24)
|
||||||
|
return days + 'd ' + (hours % 24) + 'h'
|
||||||
|
}
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
return hours + 'h ' + minutes + 'm'
|
||||||
|
}
|
||||||
|
|
||||||
|
const cpuPercent = Math.min(server.metrics.cpu, 100)
|
||||||
|
const memPercent = Math.min(server.metrics.memory, 100)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="card-matrix rounded-lg p-6 cursor-pointer transition-all duration-300 border border-[#00ff41]/30 hover:border-[#00ff41]/60 hover:bg-[#00ff41]/5"
|
||||||
|
onClick={onClick}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-5">
|
||||||
|
<h2 className="text-xl font-bold text-[#00ff41] font-mono">
|
||||||
|
{server.name.toUpperCase()}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
|
||||||
|
<span className={`text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
|
||||||
|
{server.running ? 'ONLINE' : 'OFFLINE'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CPU & RAM Bars */}
|
||||||
|
<div className="space-y-4 mb-5">
|
||||||
|
{/* CPU */}
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-sm font-mono mb-1">
|
||||||
|
<span className="text-[#00ff41]/60">CPU</span>
|
||||||
|
<span className="text-[#00ff41]">{server.metrics.cpu.toFixed(1)}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
|
||||||
|
style={{ width: cpuPercent + '%', boxShadow: '0 0 8px #00ff41' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RAM */}
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-sm font-mono mb-1">
|
||||||
|
<span className="text-[#00ff41]/60">RAM</span>
|
||||||
|
<span className="text-[#00ff41]">
|
||||||
|
{server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
|
||||||
|
style={{ width: memPercent + '%', boxShadow: '0 0 8px #00ff41' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Row */}
|
||||||
|
<div className="flex justify-between font-mono text-sm border-t border-[#00ff41]/20 pt-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-[#00ff41] text-lg font-bold">{server.players.online}</div>
|
||||||
|
<div className="text-[#00ff41]/50 text-xs">PLAYERS</div>
|
||||||
|
</div>
|
||||||
|
{server.running && (
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-[#00ff41] text-lg font-bold">{formatUptime(server.metrics.uptime)}</div>
|
||||||
|
<div className="text-[#00ff41]/50 text-xs">UPTIME</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-[#00ff41] text-lg font-bold">{server.metrics.cpuCores}</div>
|
||||||
|
<div className="text-[#00ff41]/50 text-xs">CORES</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Players List */}
|
||||||
|
{server.players?.list?.length > 0 && (
|
||||||
|
<div className="mt-4 pt-4 border-t border-[#00ff41]/20">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{server.players.list.map((player, i) => (
|
||||||
|
<span key={i} className="bg-[#00ff41]/10 text-[#00ff41] px-2 py-1 rounded font-mono text-xs">
|
||||||
|
{player}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Click Indicator */}
|
||||||
|
<div className={`mt-4 text-center text-[#00ff41]/40 text-xs font-mono transition-opacity duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
|
||||||
|
CLICK FOR DETAILS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
323
temp/ServerDetail.jsx
Normal file
323
temp/ServerDetail.jsx
Normal file
@@ -0,0 +1,323 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react'
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom'
|
||||||
|
import { getServers, serverAction, sendRcon, getServerLogs } from '../api'
|
||||||
|
import { useUser } from '../context/UserContext'
|
||||||
|
import MetricsChart from '../components/MetricsChart'
|
||||||
|
|
||||||
|
export default function ServerDetail() {
|
||||||
|
const { serverId } = useParams()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const { token, isModerator } = useUser()
|
||||||
|
const [server, setServer] = useState(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [actionLoading, setActionLoading] = useState(false)
|
||||||
|
const [activeTab, setActiveTab] = useState('overview')
|
||||||
|
const [rconCommand, setRconCommand] = useState('')
|
||||||
|
const [rconHistory, setRconHistory] = useState([])
|
||||||
|
const [logs, setLogs] = useState('')
|
||||||
|
const logsRef = useRef(null)
|
||||||
|
const rconRef = useRef(null)
|
||||||
|
|
||||||
|
const fetchServer = async () => {
|
||||||
|
try {
|
||||||
|
const servers = await getServers(token)
|
||||||
|
const found = servers.find(s => s.id === serverId)
|
||||||
|
if (found) {
|
||||||
|
setServer(found)
|
||||||
|
} else {
|
||||||
|
navigate('/')
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
navigate('/')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchServer()
|
||||||
|
const interval = setInterval(fetchServer, 10000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}, [token, serverId])
|
||||||
|
|
||||||
|
const handleAction = async (action) => {
|
||||||
|
setActionLoading(true)
|
||||||
|
try {
|
||||||
|
await serverAction(token, server.id, action)
|
||||||
|
setTimeout(() => {
|
||||||
|
fetchServer()
|
||||||
|
setActionLoading(false)
|
||||||
|
}, 2000)
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
setActionLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRcon = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!rconCommand.trim()) return
|
||||||
|
const cmd = rconCommand
|
||||||
|
setRconCommand('')
|
||||||
|
try {
|
||||||
|
const { response } = await sendRcon(token, server.id, cmd)
|
||||||
|
setRconHistory([...rconHistory, { cmd, res: response, time: new Date() }])
|
||||||
|
} catch (err) {
|
||||||
|
setRconHistory([...rconHistory, { cmd, res: 'Error: ' + err.message, time: new Date(), error: true }])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchLogs = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getServerLogs(token, server.id, 20)
|
||||||
|
setLogs(data.logs || '')
|
||||||
|
if (logsRef.current) {
|
||||||
|
logsRef.current.scrollTop = logsRef.current.scrollHeight
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (activeTab === 'logs' && isModerator && server) {
|
||||||
|
fetchLogs()
|
||||||
|
const interval = setInterval(fetchLogs, 5000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}
|
||||||
|
}, [activeTab, isModerator, server])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (rconRef.current) {
|
||||||
|
rconRef.current.scrollTop = rconRef.current.scrollHeight
|
||||||
|
}
|
||||||
|
}, [rconHistory])
|
||||||
|
|
||||||
|
const formatUptime = (seconds) => {
|
||||||
|
const days = Math.floor(seconds / 86400)
|
||||||
|
const hours = Math.floor((seconds % 86400) / 3600)
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
if (days > 0) return days + 'd ' + hours + 'h ' + minutes + 'm'
|
||||||
|
return hours + 'h ' + minutes + 'm'
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: 'overview', label: 'Overview' },
|
||||||
|
{ id: 'metrics', label: 'Metrics' },
|
||||||
|
...(isModerator ? [
|
||||||
|
{ id: 'console', label: 'Console' },
|
||||||
|
{ id: 'logs', label: 'Logs' },
|
||||||
|
] : []),
|
||||||
|
]
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-neutral-400">Loading...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!server) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-neutral-400">Server not found</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const cpuPercent = Math.min(server.metrics.cpu, 100)
|
||||||
|
const memPercent = Math.min(server.metrics.memory, 100)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-sm sticky top-0 z-10">
|
||||||
|
<div className="container-main py-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/')}
|
||||||
|
className="btn btn-ghost"
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-xl font-semibold text-white">{server.name}</h1>
|
||||||
|
<span className={server.running ? 'badge badge-success' : 'badge badge-destructive'}>
|
||||||
|
{server.running ? 'Online' : 'Offline'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{server.running && (
|
||||||
|
<p className="text-sm text-neutral-400 mt-1">
|
||||||
|
Uptime: {formatUptime(server.metrics.uptime)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="tabs mt-4">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={'tab ' + (activeTab === tab.id ? 'tab-active' : '')}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<main className="container-main py-6">
|
||||||
|
{/* Overview Tab */}
|
||||||
|
{activeTab === 'overview' && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div className="card p-4">
|
||||||
|
<div className="text-sm text-neutral-400">CPU Usage</div>
|
||||||
|
<div className="text-2xl font-semibold text-white mt-1">{server.metrics.cpu.toFixed(1)}%</div>
|
||||||
|
<div className="progress mt-2">
|
||||||
|
<div className="progress-bar" style={{ width: cpuPercent + '%' }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card p-4">
|
||||||
|
<div className="text-sm text-neutral-400">Memory</div>
|
||||||
|
<div className="text-2xl font-semibold text-white mt-1">
|
||||||
|
{server.metrics.memoryUsed?.toFixed(1)} {server.metrics.memoryUnit}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-neutral-500 mt-1">
|
||||||
|
of {server.metrics.memoryTotal?.toFixed(1)} {server.metrics.memoryUnit}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card p-4">
|
||||||
|
<div className="text-sm text-neutral-400">Players</div>
|
||||||
|
<div className="text-2xl font-semibold text-white mt-1">{server.players.online}</div>
|
||||||
|
<div className="text-xs text-neutral-500 mt-1">
|
||||||
|
{server.players.max ? 'of ' + server.players.max + ' max' : 'No limit'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card p-4">
|
||||||
|
<div className="text-sm text-neutral-400">CPU Cores</div>
|
||||||
|
<div className="text-2xl font-semibold text-white mt-1">{server.metrics.cpuCores}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Players List */}
|
||||||
|
{server.players?.list?.length > 0 && (
|
||||||
|
<div className="card p-4">
|
||||||
|
<h3 className="text-sm font-medium text-neutral-300 mb-3">Online Players</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{server.players.list.map((player, i) => (
|
||||||
|
<span key={i} className="badge badge-secondary">{player}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Power Controls */}
|
||||||
|
{isModerator && (
|
||||||
|
<div className="card p-4">
|
||||||
|
<h3 className="text-sm font-medium text-neutral-300 mb-3">Server Controls</h3>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{server.running ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAction('stop')}
|
||||||
|
disabled={actionLoading}
|
||||||
|
className="btn btn-destructive"
|
||||||
|
>
|
||||||
|
{actionLoading ? 'Processing...' : 'Stop Server'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAction('restart')}
|
||||||
|
disabled={actionLoading}
|
||||||
|
className="btn btn-secondary"
|
||||||
|
>
|
||||||
|
{actionLoading ? 'Processing...' : 'Restart Server'}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => handleAction('start')}
|
||||||
|
disabled={actionLoading}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
{actionLoading ? 'Processing...' : 'Start Server'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Metrics Tab */}
|
||||||
|
{activeTab === 'metrics' && (
|
||||||
|
<MetricsChart serverId={server.id} serverName={server.name} expanded={true} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Console Tab */}
|
||||||
|
{activeTab === 'console' && isModerator && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div
|
||||||
|
ref={rconRef}
|
||||||
|
className="terminal p-4 h-80 overflow-y-auto"
|
||||||
|
>
|
||||||
|
<div className="text-neutral-500 text-sm mb-2">RCON Console - {server.name}</div>
|
||||||
|
{rconHistory.length === 0 && (
|
||||||
|
<div className="text-neutral-600 text-sm">Waiting for commands...</div>
|
||||||
|
)}
|
||||||
|
{rconHistory.map((entry, i) => (
|
||||||
|
<div key={i} className="mb-2 text-sm">
|
||||||
|
<div className="text-neutral-400">
|
||||||
|
<span className="text-neutral-600">[{entry.time.toLocaleTimeString()}]</span> > {entry.cmd}
|
||||||
|
</div>
|
||||||
|
<div className={'whitespace-pre-wrap pl-4 ' + (entry.error ? 'text-red-400' : 'text-neutral-300')}>
|
||||||
|
{entry.res}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleRcon} className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={rconCommand}
|
||||||
|
onChange={(e) => setRconCommand(e.target.value)}
|
||||||
|
placeholder="Enter command..."
|
||||||
|
className="input flex-1"
|
||||||
|
/>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Logs Tab */}
|
||||||
|
{activeTab === 'logs' && isModerator && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-sm text-neutral-400">Last 20 lines</span>
|
||||||
|
<button onClick={fetchLogs} className="btn btn-secondary">
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref={logsRef}
|
||||||
|
className="terminal p-4 logs-container text-xs text-neutral-300 whitespace-pre-wrap"
|
||||||
|
>
|
||||||
|
{logs || 'Loading...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
326
temp/ServerDetailModal.jsx
Normal file
326
temp/ServerDetailModal.jsx
Normal file
@@ -0,0 +1,326 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react'
|
||||||
|
import { serverAction, sendRcon, getServerLogs } from '../api'
|
||||||
|
import { useUser } from '../context/UserContext'
|
||||||
|
import MetricsChart from './MetricsChart'
|
||||||
|
|
||||||
|
export default function ServerDetailModal({ server, onClose, onUpdate }) {
|
||||||
|
const { token, isModerator } = useUser()
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [activeTab, setActiveTab] = useState('overview')
|
||||||
|
const [rconCommand, setRconCommand] = useState('')
|
||||||
|
const [rconHistory, setRconHistory] = useState([])
|
||||||
|
const [logs, setLogs] = useState('')
|
||||||
|
const logsRef = useRef(null)
|
||||||
|
const rconRef = useRef(null)
|
||||||
|
|
||||||
|
const typeIcons = {
|
||||||
|
minecraft: '⛏️',
|
||||||
|
factorio: '⚙️'
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAction = async (action) => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
await serverAction(token, server.id, action)
|
||||||
|
setTimeout(() => {
|
||||||
|
onUpdate()
|
||||||
|
setLoading(false)
|
||||||
|
}, 2000)
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRcon = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!rconCommand.trim()) return
|
||||||
|
|
||||||
|
const cmd = rconCommand
|
||||||
|
setRconCommand('')
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { response } = await sendRcon(token, server.id, cmd)
|
||||||
|
setRconHistory([...rconHistory, { cmd, res: response, time: new Date() }])
|
||||||
|
} catch (err) {
|
||||||
|
setRconHistory([...rconHistory, { cmd, res: 'ERROR: ' + err.message, time: new Date(), error: true }])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchLogs = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getServerLogs(token, server.id, 100)
|
||||||
|
setLogs(data.logs || '')
|
||||||
|
if (logsRef.current) {
|
||||||
|
logsRef.current.scrollTop = logsRef.current.scrollHeight
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (activeTab === 'logs' && isModerator) {
|
||||||
|
fetchLogs()
|
||||||
|
const interval = setInterval(fetchLogs, 5000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}
|
||||||
|
}, [activeTab, isModerator])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (rconRef.current) {
|
||||||
|
rconRef.current.scrollTop = rconRef.current.scrollHeight
|
||||||
|
}
|
||||||
|
}, [rconHistory])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEsc = (e) => {
|
||||||
|
if (e.key === 'Escape') onClose()
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', handleEsc)
|
||||||
|
return () => window.removeEventListener('keydown', handleEsc)
|
||||||
|
}, [onClose])
|
||||||
|
|
||||||
|
const formatUptime = (seconds) => {
|
||||||
|
const days = Math.floor(seconds / 86400)
|
||||||
|
const hours = Math.floor((seconds % 86400) / 3600)
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
if (days > 0) return `${days}d ${hours}h ${minutes}m`
|
||||||
|
return `${hours}h ${minutes}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: 'overview', label: 'OVERVIEW', icon: '📊' },
|
||||||
|
{ id: 'metrics', label: 'METRICS', icon: '📈' },
|
||||||
|
...(isModerator ? [
|
||||||
|
{ id: 'console', label: 'CONSOLE', icon: '💻' },
|
||||||
|
{ id: 'logs', label: 'LOGS', icon: '📜' },
|
||||||
|
] : []),
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
|
{/* Backdrop */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 modal-backdrop"
|
||||||
|
onClick={onClose}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Modal */}
|
||||||
|
<div className="relative w-full max-w-4xl max-h-[90vh] overflow-hidden bg-black/95 border border-[#00ff41]/50 rounded-lg glow-box fade-in-up">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="border-b border-[#00ff41]/30 bg-[#00ff41]/5 p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="text-4xl">{typeIcons[server.type] || '🎮'}</span>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-[#00ff41] font-mono tracking-wider glow-green">
|
||||||
|
{server.name.toUpperCase()}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center gap-3 mt-1">
|
||||||
|
<span className={`flex items-center gap-2 text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
|
||||||
|
<span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
|
||||||
|
{server.running ? 'ONLINE' : 'OFFLINE'}
|
||||||
|
</span>
|
||||||
|
<span className="text-[#00ff41]/50 text-sm font-mono">|</span>
|
||||||
|
<span className="text-[#00ff41]/50 text-sm font-mono">
|
||||||
|
UPTIME: {formatUptime(server.metrics.uptime)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-[#00ff41]/60 hover:text-[#00ff41] transition-colors p-2"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex gap-1 mt-4">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={`px-4 py-2 font-mono text-sm transition-all duration-300 rounded-t ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'bg-[#00ff41]/20 text-[#00ff41] border-t border-l border-r border-[#00ff41]/50'
|
||||||
|
: 'text-[#00ff41]/50 hover:text-[#00ff41] hover:bg-[#00ff41]/5'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="mr-2">{tab.icon}</span>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
|
||||||
|
{/* Overview Tab */}
|
||||||
|
{activeTab === 'overview' && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<StatBox label="CPU" value={`${server.metrics.cpu.toFixed(1)}%`} sub={`${server.metrics.cpuCores} cores`} />
|
||||||
|
<StatBox label="RAM" value={`${server.metrics.memoryUsed?.toFixed(1)} ${server.metrics.memoryUnit}`} sub={`/ ${server.metrics.memoryTotal?.toFixed(1)} ${server.metrics.memoryUnit}`} />
|
||||||
|
<StatBox label="PLAYERS" value={`${server.players.online}`} sub={server.players.max ? `/ ${server.players.max}` : 'unlimited'} />
|
||||||
|
<StatBox label="TYPE" value={server.type.toUpperCase()} sub={server.id} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Players List */}
|
||||||
|
{server.players?.list?.length > 0 && (
|
||||||
|
<div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
|
||||||
|
<h3 className="text-[#00ff41] font-mono text-sm mb-3">CONNECTED_USERS:</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{server.players.list.map((player, i) => (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
className="bg-[#00ff41]/10 border border-[#00ff41]/30 text-[#00ff41] px-3 py-1 rounded font-mono text-sm"
|
||||||
|
>
|
||||||
|
{player}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Power Controls */}
|
||||||
|
{isModerator && (
|
||||||
|
<div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
|
||||||
|
<h3 className="text-[#00ff41] font-mono text-sm mb-3">POWER_CONTROLS:</h3>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{server.running ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAction('stop')}
|
||||||
|
disabled={loading}
|
||||||
|
className="btn-matrix px-6 py-2 text-red-500 border-red-500 hover:bg-red-500/20 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? 'PROCESSING...' : 'STOP'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAction('restart')}
|
||||||
|
disabled={loading}
|
||||||
|
className="btn-matrix px-6 py-2 text-yellow-500 border-yellow-500 hover:bg-yellow-500/20 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? 'PROCESSING...' : 'RESTART'}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => handleAction('start')}
|
||||||
|
disabled={loading}
|
||||||
|
className="btn-matrix-solid px-6 py-2 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? 'PROCESSING...' : 'START'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Metrics Tab */}
|
||||||
|
{activeTab === 'metrics' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<MetricsChart serverId={server.id} serverName={server.name} expanded={true} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Console Tab */}
|
||||||
|
{activeTab === 'console' && isModerator && server.hasRcon && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div
|
||||||
|
ref={rconRef}
|
||||||
|
className="terminal rounded h-80 overflow-y-auto p-4"
|
||||||
|
>
|
||||||
|
<div className="text-[#00ff41]/60 font-mono text-sm mb-2">
|
||||||
|
// RCON Terminal - {server.name}
|
||||||
|
</div>
|
||||||
|
{rconHistory.length === 0 && (
|
||||||
|
<div className="text-[#00ff41]/40 font-mono text-sm">
|
||||||
|
Waiting for commands...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{rconHistory.map((entry, i) => (
|
||||||
|
<div key={i} className="mb-2">
|
||||||
|
<div className="text-[#00ff41] font-mono text-sm">
|
||||||
|
<span className="text-[#00ff41]/50">[{entry.time.toLocaleTimeString()}]</span> > {entry.cmd}
|
||||||
|
</div>
|
||||||
|
<div className={`font-mono text-sm whitespace-pre-wrap pl-4 ${entry.error ? 'text-red-500' : 'text-[#00ff41]/70'}`}>
|
||||||
|
{entry.res}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleRcon} className="flex gap-2">
|
||||||
|
<span className="text-[#00ff41] font-mono py-2">></span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={rconCommand}
|
||||||
|
onChange={(e) => setRconCommand(e.target.value)}
|
||||||
|
placeholder="Enter RCON command..."
|
||||||
|
className="input-matrix flex-1 px-4 py-2 rounded font-mono text-sm"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn-matrix-solid px-6 py-2 font-mono text-sm"
|
||||||
|
>
|
||||||
|
EXECUTE
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Logs Tab */}
|
||||||
|
{activeTab === 'logs' && isModerator && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-[#00ff41]/60 font-mono text-sm">
|
||||||
|
// Server Logs - Last 100 lines
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={fetchLogs}
|
||||||
|
className="btn-matrix px-4 py-1 text-sm font-mono"
|
||||||
|
>
|
||||||
|
REFRESH
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref={logsRef}
|
||||||
|
className="terminal rounded h-96 overflow-y-auto p-4 font-mono text-xs text-[#00ff41]/80 whitespace-pre-wrap"
|
||||||
|
>
|
||||||
|
{logs || 'Loading...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="border-t border-[#00ff41]/30 bg-[#00ff41]/5 px-6 py-3">
|
||||||
|
<div className="flex justify-between items-center text-[#00ff41]/40 font-mono text-xs">
|
||||||
|
<span>SERVER_ID: {server.id}</span>
|
||||||
|
<span>PRESS [ESC] TO CLOSE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatBox({ label, value, sub }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-black/50 border border-[#00ff41]/20 rounded p-4 text-center">
|
||||||
|
<div className="text-[#00ff41]/50 font-mono text-xs mb-1">{label}</div>
|
||||||
|
<div className="text-[#00ff41] font-mono text-2xl font-bold glow-green metric-value">{value}</div>
|
||||||
|
<div className="text-[#00ff41]/40 font-mono text-xs mt-1">{sub}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
291
temp/index.css
Normal file
291
temp/index.css
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #404040 #171717;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-track {
|
||||||
|
background: #171717;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-thumb {
|
||||||
|
background: #404040;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #525252;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #0a0a0a;
|
||||||
|
color: #fafafa;
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
button {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #fafafa;
|
||||||
|
color: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: #262626;
|
||||||
|
color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: #363636;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-destructive {
|
||||||
|
background-color: #dc2626;
|
||||||
|
color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-destructive:hover:not(:disabled) {
|
||||||
|
background-color: #b91c1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline:hover:not(:disabled) {
|
||||||
|
background-color: #262626;
|
||||||
|
border-color: #525252;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: #a3a3a3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover:not(:disabled) {
|
||||||
|
background-color: #262626;
|
||||||
|
color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.card {
|
||||||
|
background-color: #171717;
|
||||||
|
border: 1px solid #262626;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
border-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-clickable:hover {
|
||||||
|
background-color: #1c1c1c;
|
||||||
|
border-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inputs */
|
||||||
|
.input {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
background-color: #171717;
|
||||||
|
color: #fafafa;
|
||||||
|
padding: 0.625rem 0.875rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #737373;
|
||||||
|
box-shadow: 0 0 0 2px rgba(115, 115, 115, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::placeholder {
|
||||||
|
color: #737373;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badges */
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-success {
|
||||||
|
background-color: #14532d;
|
||||||
|
color: #86efac;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-destructive {
|
||||||
|
background-color: #450a0a;
|
||||||
|
color: #fca5a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-secondary {
|
||||||
|
background-color: #262626;
|
||||||
|
color: #a3a3a3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress */
|
||||||
|
.progress {
|
||||||
|
height: 0.5rem;
|
||||||
|
background-color: #262626;
|
||||||
|
border-radius: 9999px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fafafa;
|
||||||
|
border-radius: 9999px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-success {
|
||||||
|
background-color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-warning {
|
||||||
|
background-color: #eab308;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-danger {
|
||||||
|
background-color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs */
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
border-bottom: 1px solid #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #737373;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
color: #a3a3a3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-active {
|
||||||
|
color: #fafafa;
|
||||||
|
border-bottom-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status */
|
||||||
|
.status-dot {
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-online {
|
||||||
|
background-color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-offline {
|
||||||
|
background-color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Terminal/Logs */
|
||||||
|
.terminal {
|
||||||
|
background-color: #0a0a0a;
|
||||||
|
border: 1px solid #262626;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-container {
|
||||||
|
height: 320px;
|
||||||
|
max-height: 320px;
|
||||||
|
min-height: 320px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
.container-main {
|
||||||
|
max-width: 900px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utilities */
|
||||||
|
.gap-6 {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-8 {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal */
|
||||||
|
.modal-backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
60
todo.md
Normal file
60
todo.md
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
# Homelab TODOs
|
||||||
|
|
||||||
|
## Prioritaet Hoch
|
||||||
|
|
||||||
|
- [ ] **Pentest fuer Server durchfuehren**
|
||||||
|
- [ ] Portscan aller Server (nmap)
|
||||||
|
- [ ] SSH-Konfiguration pruefen (fail2ban, Key-Only)
|
||||||
|
- [ ] RCON-Passwoerter auf Staerke pruefen
|
||||||
|
- [ ] Firewall-Regeln auditieren
|
||||||
|
- [ ] SSL/TLS-Konfiguration testen
|
||||||
|
- [ ] Nginx-Sicherheitsheader pruefen
|
||||||
|
- [ ] JWT-Secret Rotation implementieren
|
||||||
|
|
||||||
|
- [ ] **GSM Modularisierung & Wiederverwendbarkeit**
|
||||||
|
- [ ] Server-Typen als Plugins auslagern (minecraft, factorio, vrising, ...)
|
||||||
|
- [ ] Generisches Interface fuer neue Gameserver-Typen
|
||||||
|
- [ ] Konfiguration per UI statt config.json
|
||||||
|
- [ ] Docker-Compose fuer einfaches Deployment
|
||||||
|
- [ ] Environment-basierte Konfiguration
|
||||||
|
- [ ] Multi-Instanz-Faehigkeit (mehrere Homelabs)
|
||||||
|
|
||||||
|
## Prioritaet Mittel
|
||||||
|
|
||||||
|
- [ ] Backup-Loesung fuer Gameserver-Welten
|
||||||
|
- [ ] Automatische Snapshots (taeglich)
|
||||||
|
- [ ] Offsite-Backup (Nextcloud/S3)
|
||||||
|
- [ ] Restore-Prozedur dokumentieren
|
||||||
|
|
||||||
|
- [ ] Monitoring-Alerts
|
||||||
|
- [ ] Discord Webhook bei Server-Crash
|
||||||
|
- [ ] Email-Benachrichtigung optional
|
||||||
|
- [ ] Alerting-Regeln in Prometheus/Grafana
|
||||||
|
|
||||||
|
- [ ] Automatische Restarts bei Crash
|
||||||
|
- [ ] Watchdog-Service implementieren
|
||||||
|
- [ ] Health-Checks definieren
|
||||||
|
- [ ] Restart-Limits (kein Endlos-Loop)
|
||||||
|
|
||||||
|
## Prioritaet Niedrig
|
||||||
|
|
||||||
|
- [ ] Dark/Light Mode Toggle im Frontend
|
||||||
|
- [ ] Server-Logs durchsuchbar machen
|
||||||
|
- [ ] Scheduled Restarts (z.B. taeglich 4 Uhr)
|
||||||
|
- [ ] Player-Statistiken (Spielzeit, Join-History)
|
||||||
|
- [ ] Changelog/Audit-Log fuer Admin-Aktionen
|
||||||
|
|
||||||
|
## Erledigt
|
||||||
|
|
||||||
|
- [x] ~~Admin-Passwort im GSM aenderbar~~ (UI)
|
||||||
|
- [x] ~~JWT_SECRET sicher setzen~~
|
||||||
|
- [x] ~~Prometheus + Grafana installieren~~
|
||||||
|
- [x] ~~Grafana extern erreichbar~~
|
||||||
|
- [x] ~~Benutzer-Verwaltung (Rollensystem)~~
|
||||||
|
- [x] ~~Ressourcen-Graphen (CPU/RAM Historie)~~
|
||||||
|
- [x] ~~Oeffentliches Dashboard~~
|
||||||
|
- [x] ~~Whitelist-Caching serverseitig~~
|
||||||
|
- [x] ~~Gameserver-Uptime statt Host-Uptime~~
|
||||||
|
- [x] ~~Game-Logos in UI~~
|
||||||
|
- [x] ~~Navbar-Logo mit Hover-Effekt~~
|
||||||
|
- [x] ~~V Rising Server hinzugefuegt~~
|
||||||
Reference in New Issue
Block a user