fix: preserve server startedAt from wrapper status
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Server Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "server-manager-dashboard",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.28.1",
|
||||
"vite": "^5.4.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
export interface DashboardData {
|
||||
managerStatus: string;
|
||||
rabbitMqStatus: string;
|
||||
wrapperCount: number;
|
||||
onlineWrapperCount: number;
|
||||
serverCount: number;
|
||||
runningServerCount: number;
|
||||
totalPlayers: number;
|
||||
totalCapacity: number;
|
||||
utilizationPercent: number;
|
||||
desiredServers: number;
|
||||
activeServers: number;
|
||||
}
|
||||
|
||||
export interface Wrapper {
|
||||
id: string; hostname: string; online: boolean; cpu: number; ram: number;
|
||||
ramFree: number; lastHeartbeat: number; serverCount: number;
|
||||
}
|
||||
|
||||
export interface Server {
|
||||
id: string; name: string; status: string; wrapperId: string; port: number;
|
||||
queryPort: number; players: number; maxPlayers: number; created: number;
|
||||
startedAt?: number; emptySince?: number; alive?: boolean; started?: number;
|
||||
}
|
||||
|
||||
async function request<T>(path: string): Promise<T> {
|
||||
const response = await fetch(`/api${path}`);
|
||||
if (!response.ok) throw new Error(`API request failed (${response.status})`);
|
||||
return response.json() as Promise<T>;
|
||||
}
|
||||
|
||||
export const api = {
|
||||
dashboard: () => request<DashboardData>("/dashboard"),
|
||||
wrappers: () => request<Wrapper[]>("/wrappers"),
|
||||
wrapper: (id: string) => request<Wrapper & { servers: Server[] }>(`/wrappers/${encodeURIComponent(id)}`),
|
||||
servers: () => request<Server[]>("/servers"),
|
||||
server: (id: string) => request<Server>(`/servers/${encodeURIComponent(id)}`)
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import { NavLink, Outlet } from "react-router-dom";
|
||||
|
||||
export function Layout() {
|
||||
return <main className="shell">
|
||||
<header><NavLink to="/" className="brand">Server Manager</NavLink><nav>
|
||||
<NavLink to="/">Dashboard</NavLink><NavLink to="/wrappers">Wrapper</NavLink><NavLink to="/servers">Server</NavLink>
|
||||
</nav></header>
|
||||
<Outlet />
|
||||
</main>;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export function PageState({ error }: { error?: Error }) {
|
||||
return <p className={error ? "error" : "loading"}>{error ? error.message : "Daten werden geladen …"}</p>;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export function StatusBadge({ status }: { status: string | boolean }) {
|
||||
const label = typeof status === "boolean" ? (status ? "ONLINE" : "OFFLINE") : status;
|
||||
const tone = ["RUNNING", "ONLINE", "CONNECTED"].includes(label) ? "good"
|
||||
: ["STARTING", "STOPPING"].includes(label) ? "pending" : "bad";
|
||||
return <span className={`status status--${tone}`}>{label}</span>;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import { Layout } from "./components/Layout";
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
import { ServerDetail } from "./pages/ServerDetail";
|
||||
import { Servers } from "./pages/Servers";
|
||||
import { WrapperDetail } from "./pages/WrapperDetail";
|
||||
import { Wrappers } from "./pages/Wrappers";
|
||||
import "./styles.css";
|
||||
|
||||
const router = createBrowserRouter([{ path: "/", element: <Layout />, children: [
|
||||
{ index: true, element: <Dashboard /> }, { path: "wrappers", element: <Wrappers /> },
|
||||
{ path: "wrappers/:id", element: <WrapperDetail /> }, { path: "servers", element: <Servers /> },
|
||||
{ path: "servers/:id", element: <ServerDetail /> }
|
||||
] }]);
|
||||
createRoot(document.getElementById("root")!).render(<StrictMode><RouterProvider router={router} /></StrictMode>);
|
||||
@@ -0,0 +1,13 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api, DashboardData } from "../api/client";
|
||||
import { PageState } from "../components/PageState";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
|
||||
export function Dashboard() {
|
||||
const [data, setData] = useState<DashboardData>(); const [error, setError] = useState<Error>();
|
||||
useEffect(() => { api.dashboard().then(setData).catch(setError); }, []);
|
||||
if (!data) return <PageState error={error} />;
|
||||
return <><section className="title"><div><h1>Dashboard</h1><p>Aktueller Zustand des Managers</p></div><button onClick={() => location.reload()}>Aktualisieren</button></section>
|
||||
<section className="cards"><article><small>Manager</small><StatusBadge status={data.managerStatus} /></article><article><small>RabbitMQ</small><StatusBadge status={data.rabbitMqStatus} /></article><article><small>Wrapper online</small><strong>{data.onlineWrapperCount} / {data.wrapperCount}</strong></article><article><small>Server laufend</small><strong>{data.runningServerCount} / {data.serverCount}</strong></article><article><small>Spieler / Kapazität</small><strong>{data.totalPlayers} / {data.totalCapacity}</strong></article><article><small>Auslastung</small><strong>{data.utilizationPercent}%</strong></article><article><small>Soll-Server</small><strong>{data.desiredServers}</strong></article><article><small>Aktive Server</small><strong>{data.activeServers}</strong></article></section>
|
||||
</>;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { api, Server } from "../api/client";
|
||||
import { PageState } from "../components/PageState";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
|
||||
const date = (value?: number) => value ? new Date(value).toLocaleString("de-DE") : "–";
|
||||
export function ServerDetail() {
|
||||
const { id = "" } = useParams(); const [item, setItem] = useState<Server>(); const [error, setError] = useState<Error>();
|
||||
useEffect(() => { api.server(id).then(setItem).catch(setError); }, [id]); if (!item) return <PageState error={error} />;
|
||||
return <><section className="title"><div><p><Link to="/servers">← Server</Link></p><h1>{item.name}</h1><StatusBadge status={item.status} /></div></section><section className="details"><div><small>ID</small><span>{item.id}</span></div><div><small>Wrapper</small><span>{item.wrapperId}</span></div><div><small>Spieler / Kapazität</small><span>{item.players} / {item.maxPlayers}</span></div><div><small>Port / Query Port</small><span>{item.port} / {item.queryPort}</span></div><div><small>Erstellt</small><span>{date(item.created)}</span></div><div><small>Gestartet</small><span>{date(item.startedAt)}</span></div><div><small>Leer seit</small><span>{date(item.emptySince)}</span></div></section></>;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { api, Server } from "../api/client";
|
||||
import { PageState } from "../components/PageState";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
|
||||
export function Servers() { const [items, setItems] = useState<Server[]>(); const [error, setError] = useState<Error>(); useEffect(() => { api.servers().then(setItems).catch(setError); }, []); if (!items) return <PageState error={error} />;
|
||||
return <><section className="title"><div><h1>Server</h1><p>{items.length} registriert</p></div></section><section className="table-wrap"><table><thead><tr><th>ID</th><th>Name</th><th>Status</th><th>Spieler</th><th>Kapazität</th><th>Port</th><th>Query Port</th><th>Wrapper</th></tr></thead><tbody>{items.map(item => <tr key={item.id}><td><Link to={`/servers/${item.id}`}>{item.id}</Link></td><td>{item.name}</td><td><StatusBadge status={item.status} /></td><td>{item.players}</td><td>{item.maxPlayers}</td><td>{item.port}</td><td>{item.queryPort}</td><td>{item.wrapperId}</td></tr>)}</tbody></table></section></>;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { api, Server, Wrapper } from "../api/client";
|
||||
import { PageState } from "../components/PageState";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
|
||||
export function WrapperDetail() {
|
||||
const { id = "" } = useParams(); const [item, setItem] = useState<(Wrapper & { servers: Server[] })>(); const [error, setError] = useState<Error>();
|
||||
useEffect(() => { api.wrapper(id).then(setItem).catch(setError); }, [id]); if (!item) return <PageState error={error} />;
|
||||
return <><section className="title"><div><p><Link to="/wrappers">← Wrapper</Link></p><h1>{item.hostname}</h1><StatusBadge status={item.online} /></div></section><section className="details"><div><small>ID</small><span>{item.id}</span></div><div><small>CPU</small><span>{item.cpu}%</span></div><div><small>RAM frei / gesamt</small><span>{item.ramFree} / {item.ram}</span></div><div><small>Letzter Heartbeat</small><span>{item.lastHeartbeat ? new Date(item.lastHeartbeat).toLocaleString("de-DE") : "–"}</span></div></section><h2>Zugeordnete Server</h2><section className="table-wrap"><table><thead><tr><th>Name</th><th>Port</th><th>Spieler</th><th>Status</th></tr></thead><tbody>{item.servers.map(server => <tr key={server.id}><td><Link to={`/servers/${server.id}`}>{server.name}</Link></td><td>{server.port}</td><td>{server.players} / {server.maxPlayers}</td><td><StatusBadge status={server.alive ? "RUNNING" : "OFFLINE"} /></td></tr>)}</tbody></table></section></>;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { api, Wrapper } from "../api/client";
|
||||
import { PageState } from "../components/PageState";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
|
||||
export function Wrappers() { const [items, setItems] = useState<Wrapper[]>(); const [error, setError] = useState<Error>(); useEffect(() => { api.wrappers().then(setItems).catch(setError); }, []); if (!items) return <PageState error={error} />;
|
||||
return <><section className="title"><div><h1>Wrapper</h1><p>{items.length} registriert</p></div></section><section className="table-wrap"><table><thead><tr><th>ID</th><th>Hostname</th><th>Status</th><th>CPU</th><th>RAM frei / gesamt</th><th>Heartbeat</th><th>Server</th></tr></thead><tbody>{items.map(item => <tr key={item.id}><td><Link to={`/wrappers/${item.id}`}>{item.id}</Link></td><td>{item.hostname}</td><td><StatusBadge status={item.online} /></td><td>{item.cpu}%</td><td>{item.ramFree} / {item.ram}</td><td>{item.lastHeartbeat ? new Date(item.lastHeartbeat).toLocaleString("de-DE") : "–"}</td><td>{item.serverCount}</td></tr>)}</tbody></table></section></>;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
:root { color: #e7edf6; background: #0e1521; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
|
||||
* { box-sizing: border-box; } body { margin: 0; } a { color: #a9ccff; text-decoration: none; } a:hover { text-decoration: underline; }
|
||||
.shell { max-width: 1240px; padding: 0 28px 48px; margin: auto; } header { min-height: 70px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid #263446; margin-bottom: 44px; } .brand { color:#fff; font-weight:700; font-size:18px; } nav { display:flex; gap:24px; } nav a { color:#91a2b8; padding:24px 0; } nav a.active { color:#fff; border-bottom:2px solid #58a6ff; }
|
||||
.title { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; } h1 { margin:0; font-size:28px; } h2 { margin:38px 0 14px; font-size:18px; } p { color:#91a2b8; margin:7px 0 0; } button { border:1px solid #3c6d9d; color:#dbeafe; background:#17395b; border-radius:6px; padding:9px 13px; cursor:pointer; }
|
||||
.cards { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; } .cards article, .details > div { background:#151f2e; border:1px solid #263446; border-radius:8px; padding:18px; min-height:94px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; } small { color:#91a2b8; font-size:12px; } strong { font-size:23px; }
|
||||
.status { display:inline-flex; width:max-content; align-items:center; gap:6px; border-radius:999px; padding:4px 9px; font-size:11px; font-weight:700; letter-spacing:.03em; } .status--good { color:#8ee6bb; background:#123c2c; } .status--pending { color:#ffd98a; background:#493718; } .status--bad { color:#ffabb0; background:#48232b; }
|
||||
.table-wrap { overflow-x:auto; border:1px solid #263446; border-radius:8px; background:#151f2e; } table { width:100%; border-collapse:collapse; min-width:750px; } th,td { padding:14px 16px; text-align:left; border-bottom:1px solid #263446; font-size:14px; } th { color:#91a2b8; font-size:11px; text-transform:uppercase; letter-spacing:.05em; } tbody tr:last-child td { border-bottom:0; } .details { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .details span { word-break:break-word; } .loading,.error { padding:20px; background:#151f2e; border-radius:8px; } .error { color:#ffabb0; }
|
||||
@media (max-width: 760px) { .shell { padding:0 16px 32px; } header { margin-bottom:28px; } .cards,.details { grid-template-columns:repeat(2, 1fr); } nav { gap:12px; } } @media (max-width: 440px) { .cards,.details { grid-template-columns:1fr; } }
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"root":["./src/main.tsx","./src/api/client.ts","./src/components/layout.tsx","./src/components/pagestate.tsx","./src/components/statusbadge.tsx","./src/pages/dashboard.tsx","./src/pages/serverdetail.tsx","./src/pages/servers.tsx","./src/pages/wrapperdetail.tsx","./src/pages/wrappers.tsx"],"version":"5.9.3"}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
declare const _default: import("vite").UserConfig;
|
||||
export default _default;
|
||||
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": "http://localhost:3000"
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": "http://localhost:3000"
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user