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