feat: implement full backend + frontend server detail, settings, and create server pages
Backend: - Complete FastAPI backend with 42+ REST endpoints (auth, servers, config, players, bans, missions, mods, games, system) - Game adapter architecture with Arma 3 as first-class adapter - WebSocket real-time events for status, metrics, logs, players - Background thread system (process monitor, metrics, log tail, RCon poller) - Fernet encryption for sensitive config fields at rest - JWT auth with admin/viewer roles, bcrypt password hashing - SQLite with WAL mode, parameterized queries, migration system - APScheduler cleanup jobs for logs, metrics, events Frontend: - Server Detail page with 7 tabs (overview, config, players, bans, missions, mods, logs) - Settings page with password change and admin user management - Create Server wizard (4-step; known bug: silent validation failure) - New hooks: useServerDetail, useAuth, useGames - New components: ServerHeader, ConfigEditor, PlayerTable, BanTable, MissionList, ModList, LogViewer, PasswordChange, UserManager - WebSocket onEvent callback for real-time log accumulation - 120 unit tests passing (Vitest + React Testing Library) Docs: - Added .gitignore, CLAUDE.md, README.md - Updated FRONTEND.md, ARCHITECTURE.md with current implementation state - Added .env.example for backend configuration Known issues: - Create Server form: "Next" buttons don't validate before advancing, causing silent submit failure when fields are invalid - Config sub-tabs need UX redesign for non-technical users
This commit is contained in:
Tran G. (Revernomad) Khoa
@@ -6,6 +6,9 @@ import { useAuthStore } from "@/store/auth.store";
|
||||
import { Sidebar } from "@/components/layout/Sidebar";
|
||||
import { LoginPage } from "@/pages/LoginPage";
|
||||
import { DashboardPage } from "@/pages/DashboardPage";
|
||||
import { ServerDetailPage } from "@/pages/ServerDetailPage";
|
||||
import { CreateServerPage } from "@/pages/CreateServerPage";
|
||||
import { SettingsPage } from "@/pages/SettingsPage";
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
@@ -30,9 +33,9 @@ function ProtectedLayout() {
|
||||
<main className="flex-1 overflow-y-auto bg-surface-base">
|
||||
<Routes>
|
||||
<Route path="/" element={<DashboardPage />} />
|
||||
<Route path="/servers/:serverId" element={<div className="p-6 text-text-primary">Server detail — coming soon</div>} />
|
||||
<Route path="/servers/new" element={<div className="p-6 text-text-primary">Create server — coming soon</div>} />
|
||||
<Route path="/settings" element={<div className="p-6 text-text-primary">Settings — coming soon</div>} />
|
||||
<Route path="/servers/:serverId" element={<ServerDetailPage />} />
|
||||
<Route path="/servers/new" element={<CreateServerPage />} />
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -26,14 +26,25 @@ function renderCard(server: Partial<Server> = {}) {
|
||||
const fullServer: Server = {
|
||||
id: 1,
|
||||
name: "Test Arma3",
|
||||
description: null,
|
||||
game_type: "arma3",
|
||||
status: "running",
|
||||
port: 2302,
|
||||
pid: null,
|
||||
exe_path: "/path/to/server",
|
||||
game_port: 2302,
|
||||
rcon_port: null,
|
||||
max_players: 64,
|
||||
current_players: 32,
|
||||
restart_count: 3,
|
||||
auto_restart: true,
|
||||
max_restarts: 3,
|
||||
restart_count: 3,
|
||||
last_restart_at: null,
|
||||
started_at: null,
|
||||
stopped_at: null,
|
||||
created_at: "2026-01-01T00:00:00Z",
|
||||
updated_at: "2026-01-01T00:00:00Z",
|
||||
cpu_percent: null,
|
||||
ram_mb: null,
|
||||
...server,
|
||||
};
|
||||
|
||||
@@ -70,7 +81,7 @@ describe("ServerCard", () => {
|
||||
});
|
||||
|
||||
it("should display port number", () => {
|
||||
renderCard({ port: 2302 });
|
||||
renderCard({ game_port: 2302 });
|
||||
expect(screen.getByText("2302")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
|
||||
@@ -100,5 +100,38 @@ describe("Sidebar", () => {
|
||||
const { container } = renderSidebar("/servers/1");
|
||||
const link = container.querySelector(`a[href="/servers/1"]`);
|
||||
expect(link).toBeTruthy();
|
||||
// Active server link should have the active styling
|
||||
expect(link?.className).toContain("bg-surface-overlay");
|
||||
});
|
||||
|
||||
it("should apply inactive styling when server is not active", () => {
|
||||
vi.mocked(useServers).mockReturnValue({
|
||||
data: [mockServer],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
} as unknown as ReturnType<typeof useServers>);
|
||||
|
||||
// Navigate to a different server — server 1 should NOT be active
|
||||
const { container } = renderSidebar("/servers/999");
|
||||
const link = container.querySelector(`a[href="/servers/1"]`);
|
||||
expect(link).toBeTruthy();
|
||||
expect(link?.className).toContain("text-text-secondary");
|
||||
expect(link?.className).not.toContain("shadow-neu-recessed");
|
||||
});
|
||||
|
||||
it("should show no servers message when server list is empty", () => {
|
||||
vi.mocked(useServers).mockReturnValue({
|
||||
data: [],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
} as unknown as ReturnType<typeof useServers>);
|
||||
|
||||
renderSidebar();
|
||||
// Servers section label should still show
|
||||
expect(screen.getByText("Servers")).toBeInTheDocument();
|
||||
// No server names should appear
|
||||
expect(screen.queryByText("Test Server")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -44,16 +44,18 @@ describe("apiClient", () => {
|
||||
expect(result.headers?.Authorization).toBe("Bearer test-token-123");
|
||||
});
|
||||
|
||||
it("should clear token and redirect on 401 response", async () => {
|
||||
it("should clear token and redirect on 401 response for non-auth endpoints", async () => {
|
||||
const originalLocation = window.location;
|
||||
Object.defineProperty(window, "location", {
|
||||
value: { href: "" },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
localStorage.setItem("languard_token", "some-token");
|
||||
|
||||
const mockError = {
|
||||
response: { status: 401 },
|
||||
config: {},
|
||||
config: { url: "/api/servers" },
|
||||
};
|
||||
|
||||
const handler = apiClient.interceptors.response.handlers?.[0];
|
||||
@@ -66,4 +68,125 @@ describe("apiClient", () => {
|
||||
|
||||
Object.defineProperty(window, "location", { value: originalLocation });
|
||||
});
|
||||
|
||||
it("should NOT redirect on 401 response for auth endpoints", async () => {
|
||||
const originalLocation = window.location;
|
||||
Object.defineProperty(window, "location", {
|
||||
value: { href: "/dashboard" },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
localStorage.setItem("languard_token", "some-token");
|
||||
|
||||
const mockError = {
|
||||
response: { status: 401 },
|
||||
config: { url: "/api/auth/login" },
|
||||
};
|
||||
|
||||
const handler = apiClient.interceptors.response.handlers?.[0];
|
||||
if (handler?.rejected) {
|
||||
await expect(handler.rejected(mockError as never)).rejects.toBeDefined();
|
||||
}
|
||||
|
||||
// Token should NOT be cleared and redirect should NOT happen for auth endpoints
|
||||
expect(localStorage.getItem("languard_token")).toBe("some-token");
|
||||
expect(window.location.href).toBe("/dashboard");
|
||||
|
||||
Object.defineProperty(window, "location", { value: originalLocation });
|
||||
});
|
||||
|
||||
it("should not clear token or redirect on non-401 errors", async () => {
|
||||
const originalLocation = window.location;
|
||||
Object.defineProperty(window, "location", {
|
||||
value: { href: "/dashboard" },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
localStorage.setItem("languard_token", "some-token");
|
||||
|
||||
const mockError = {
|
||||
response: { status: 500 },
|
||||
config: { url: "/api/servers" },
|
||||
};
|
||||
|
||||
const handler = apiClient.interceptors.response.handlers?.[0];
|
||||
if (handler?.rejected) {
|
||||
await expect(handler.rejected(mockError as never)).rejects.toBeDefined();
|
||||
}
|
||||
|
||||
// Token should NOT be cleared and redirect should NOT happen for 500 errors
|
||||
expect(localStorage.getItem("languard_token")).toBe("some-token");
|
||||
expect(window.location.href).toBe("/dashboard");
|
||||
|
||||
Object.defineProperty(window, "location", { value: originalLocation });
|
||||
});
|
||||
|
||||
it("should clear token and redirect on 401 when config url is undefined", async () => {
|
||||
const originalLocation = window.location;
|
||||
Object.defineProperty(window, "location", {
|
||||
value: { href: "" },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
localStorage.setItem("languard_token", "some-token");
|
||||
|
||||
// When config.url is undefined, the nullish coalescing falls back to ""
|
||||
// which does NOT start with "/api/auth/", so it should clear + redirect
|
||||
const mockError = {
|
||||
response: { status: 401 },
|
||||
config: { url: undefined },
|
||||
};
|
||||
|
||||
const handler = apiClient.interceptors.response.handlers?.[0];
|
||||
if (handler?.rejected) {
|
||||
await expect(handler.rejected(mockError as never)).rejects.toBeDefined();
|
||||
}
|
||||
|
||||
expect(localStorage.getItem("languard_token")).toBeNull();
|
||||
expect(window.location.href).toBe("/login");
|
||||
|
||||
Object.defineProperty(window, "location", { value: originalLocation });
|
||||
});
|
||||
|
||||
it("should handle 401 error without response object", async () => {
|
||||
const originalLocation = window.location;
|
||||
Object.defineProperty(window, "location", {
|
||||
value: { href: "/dashboard" },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
localStorage.setItem("languard_token", "some-token");
|
||||
|
||||
// Network error with no response property
|
||||
const mockError = {
|
||||
config: { url: "/api/servers" },
|
||||
};
|
||||
|
||||
const handler = apiClient.interceptors.response.handlers?.[0];
|
||||
if (handler?.rejected) {
|
||||
await expect(handler.rejected(mockError as never)).rejects.toBeDefined();
|
||||
}
|
||||
|
||||
// Should NOT clear token since it's not a 401
|
||||
expect(localStorage.getItem("languard_token")).toBe("some-token");
|
||||
expect(window.location.href).toBe("/dashboard");
|
||||
|
||||
Object.defineProperty(window, "location", { value: originalLocation });
|
||||
});
|
||||
|
||||
it("should pass through successful responses unchanged", async () => {
|
||||
const handler = apiClient.interceptors.response.handlers?.[0];
|
||||
if (!handler?.fulfilled) return;
|
||||
|
||||
const mockResponse = {
|
||||
data: { success: true },
|
||||
status: 200,
|
||||
statusText: "OK",
|
||||
headers: {},
|
||||
config: {},
|
||||
};
|
||||
|
||||
const result = await handler.fulfilled(mockResponse as never);
|
||||
expect(result).toBe(mockResponse);
|
||||
});
|
||||
});
|
||||
@@ -44,4 +44,77 @@ describe("useAuthStore", () => {
|
||||
expect(state.isAuthenticated).toBe(false);
|
||||
expect(localStorage.getItem("languard_token")).toBeNull();
|
||||
});
|
||||
|
||||
it("should set isAuthenticated to true on rehydration when token exists", () => {
|
||||
const { setAuth } = useAuthStore.getState();
|
||||
const mockUser = { id: 1, username: "admin", role: "admin" as const };
|
||||
|
||||
setAuth("rehydrated-token", mockUser);
|
||||
|
||||
// Simulate rehydration: onRehydrateStorage checks if token exists
|
||||
const state = useAuthStore.getState();
|
||||
expect(state.token).toBe("rehydrated-token");
|
||||
|
||||
// Manually trigger the onRehydrateStorage callback logic
|
||||
// In Zustand persist, onRehydrateStorage returns a function that receives the rehydrated state
|
||||
const persistOptions = useAuthStore.persist;
|
||||
expect(persistOptions).toBeDefined();
|
||||
});
|
||||
|
||||
it("should keep isAuthenticated false on rehydration when no token exists", () => {
|
||||
// Don't set any auth - token is null, isAuthenticated should stay false
|
||||
const state = useAuthStore.getState();
|
||||
expect(state.token).toBeNull();
|
||||
expect(state.isAuthenticated).toBe(false);
|
||||
});
|
||||
|
||||
it("should only persist token and user via partialize", () => {
|
||||
const { setAuth } = useAuthStore.getState();
|
||||
const mockUser = { id: 1, username: "admin", role: "admin" as const };
|
||||
|
||||
setAuth("partialize-test", mockUser);
|
||||
|
||||
// Check that localStorage languard-auth only contains token and user
|
||||
const stored = localStorage.getItem("languard-auth");
|
||||
expect(stored).not.toBeNull();
|
||||
|
||||
const parsed = JSON.parse(stored!);
|
||||
// Zustand persist stores { state: {...}, version: 0 }
|
||||
expect(parsed.state).toBeDefined();
|
||||
expect(parsed.state.token).toBe("partialize-test");
|
||||
expect(parsed.state.user).toEqual(mockUser);
|
||||
// isAuthenticated should NOT be persisted (partialize excludes it)
|
||||
expect(parsed.state.isAuthenticated).toBeUndefined();
|
||||
});
|
||||
|
||||
it("should set isAuthenticated on rehydration when token exists in storage", () => {
|
||||
// Pre-populate localStorage with auth data (simulating a page reload scenario)
|
||||
const mockUser = { id: 1, username: "admin", role: "admin" as const };
|
||||
localStorage.setItem("languard_token", "rehy-token");
|
||||
localStorage.setItem(
|
||||
"languard-auth",
|
||||
JSON.stringify({
|
||||
state: { token: "rehy-token", user: mockUser },
|
||||
version: 0,
|
||||
}),
|
||||
);
|
||||
|
||||
// Reset the store to initial state
|
||||
useAuthStore.setState({
|
||||
token: null,
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
});
|
||||
|
||||
// Trigger rehydration
|
||||
useAuthStore.persist.rehydrate();
|
||||
|
||||
// After rehydration, the onRehydrateStorage callback should set isAuthenticated
|
||||
// Wait a tick for async rehydration
|
||||
const state = useAuthStore.getState();
|
||||
// Note: rehydration is synchronous in test env with localStorage
|
||||
if (state.token) {
|
||||
expect(state.isAuthenticated).toBe(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
182
frontend/src/__tests__/useAuth.test.tsx
Normal file
182
frontend/src/__tests__/useAuth.test.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { renderHook, waitFor } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import {
|
||||
useCurrentUser,
|
||||
useUsers,
|
||||
useChangePassword,
|
||||
useCreateUser,
|
||||
useDeleteUser,
|
||||
useLogout,
|
||||
} from "@/hooks/useAuth";
|
||||
|
||||
vi.mock("@/lib/api", () => ({
|
||||
apiClient: {
|
||||
get: vi.fn(),
|
||||
post: vi.fn(),
|
||||
put: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/store/auth.store", () => ({
|
||||
useAuthStore: vi.fn((selector) =>
|
||||
selector({
|
||||
token: "test-token",
|
||||
user: { id: 1, username: "admin", role: "admin" },
|
||||
isAuthenticated: true,
|
||||
setAuth: vi.fn(),
|
||||
clearAuth: vi.fn(),
|
||||
}),
|
||||
),
|
||||
}));
|
||||
|
||||
import { apiClient } from "@/lib/api";
|
||||
|
||||
function createWrapper() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
return function Wrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
describe("useCurrentUser", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch current user", async () => {
|
||||
const mockUser = { id: 1, username: "admin", role: "admin" };
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockUser },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useCurrentUser(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockUser);
|
||||
expect(apiClient.get).toHaveBeenCalledWith("/api/auth/me");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useUsers", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch user list", async () => {
|
||||
const mockUsers = [
|
||||
{ id: 1, username: "admin", role: "admin", created_at: "2026-01-01", last_login: null },
|
||||
];
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockUsers },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useUsers(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockUsers);
|
||||
expect(apiClient.get).toHaveBeenCalledWith("/api/auth/users");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useChangePassword", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.put).mockReset();
|
||||
});
|
||||
|
||||
it("should call change password endpoint", async () => {
|
||||
vi.mocked(apiClient.put).mockResolvedValueOnce({ data: { success: true, data: { message: "Password changed" } } });
|
||||
|
||||
const { result } = renderHook(() => useChangePassword(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate({ current_password: "old", new_password: "new" });
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.put).toHaveBeenCalledWith("/api/auth/password", {
|
||||
current_password: "old",
|
||||
new_password: "new",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("useCreateUser", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.post).mockReset();
|
||||
});
|
||||
|
||||
it("should create a new user", async () => {
|
||||
vi.mocked(apiClient.post).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useCreateUser(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate({ username: "viewer1", password: "pass123", role: "viewer" });
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.post).toHaveBeenCalledWith("/api/auth/users", {
|
||||
username: "viewer1",
|
||||
password: "pass123",
|
||||
role: "viewer",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("useDeleteUser", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.delete).mockReset();
|
||||
});
|
||||
|
||||
it("should delete a user", async () => {
|
||||
vi.mocked(apiClient.delete).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useDeleteUser(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate(2);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.delete).toHaveBeenCalledWith("/api/auth/users/2");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useLogout", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.post).mockReset();
|
||||
});
|
||||
|
||||
it("should call logout endpoint and clear auth on success", async () => {
|
||||
vi.mocked(apiClient.post).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useLogout(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate();
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.post).toHaveBeenCalledWith("/api/auth/logout");
|
||||
});
|
||||
|
||||
it("should clear auth even on failure", async () => {
|
||||
vi.mocked(apiClient.post).mockRejectedValueOnce(new Error("Network error"));
|
||||
|
||||
const { result } = renderHook(() => useLogout(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate();
|
||||
await waitFor(() => expect(result.current.isError).toBe(true));
|
||||
// clearAuth should still be called via onError
|
||||
});
|
||||
});
|
||||
137
frontend/src/__tests__/useGames.test.tsx
Normal file
137
frontend/src/__tests__/useGames.test.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { renderHook, waitFor } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import {
|
||||
useGamesList,
|
||||
useGameDetail,
|
||||
useGameConfigSchema,
|
||||
useGameDefaults,
|
||||
} from "@/hooks/useGames";
|
||||
|
||||
vi.mock("@/lib/api", () => ({
|
||||
apiClient: {
|
||||
get: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import { apiClient } from "@/lib/api";
|
||||
|
||||
function createWrapper() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
return function Wrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
describe("useGamesList", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch games list", async () => {
|
||||
const mockGames = [
|
||||
{ game_type: "arma3", display_name: "Arma 3", version: "1.0", capabilities: ["rcon", "mods"] },
|
||||
];
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockGames },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useGamesList(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockGames);
|
||||
expect(apiClient.get).toHaveBeenCalledWith("/api/games");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useGameDetail", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch game detail", async () => {
|
||||
const mockDetail = {
|
||||
game_type: "arma3",
|
||||
display_name: "Arma 3",
|
||||
version: "1.0",
|
||||
schema_version: 1,
|
||||
config_sections: ["server", "basic", "profile", "launch", "rcon"],
|
||||
capabilities: ["rcon", "mods", "missions"],
|
||||
allowed_executables: ["arma3server_x64.exe"],
|
||||
};
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockDetail },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useGameDetail("arma3"), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockDetail);
|
||||
expect(apiClient.get).toHaveBeenCalledWith("/api/games/arma3");
|
||||
});
|
||||
|
||||
it("should not fetch when gameType is empty", () => {
|
||||
renderHook(() => useGameDetail(""), { wrapper: createWrapper() });
|
||||
expect(apiClient.get).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("useGameConfigSchema", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch config schema", async () => {
|
||||
const mockSchema = { server: { type: "object", properties: {} } };
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockSchema },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useGameConfigSchema("arma3"), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockSchema);
|
||||
expect(apiClient.get).toHaveBeenCalledWith("/api/games/arma3/config-schema");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useGameDefaults", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch game defaults", async () => {
|
||||
const mockDefaults = {
|
||||
server: { hostname: "Arma 3 Server", max_players: 64 },
|
||||
basic: { min_bandwidth: 131072 },
|
||||
};
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockDefaults },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useGameDefaults("arma3"), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockDefaults);
|
||||
expect(apiClient.get).toHaveBeenCalledWith("/api/games/arma3/defaults");
|
||||
});
|
||||
|
||||
it("should not fetch when gameType is empty", () => {
|
||||
renderHook(() => useGameDefaults(""), { wrapper: createWrapper() });
|
||||
expect(apiClient.get).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
383
frontend/src/__tests__/useServerDetail.test.tsx
Normal file
383
frontend/src/__tests__/useServerDetail.test.tsx
Normal file
@@ -0,0 +1,383 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { renderHook, waitFor } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import {
|
||||
useServerConfig,
|
||||
useServerConfigSection,
|
||||
useServerPlayers,
|
||||
useServerPlayerHistory,
|
||||
useServerBans,
|
||||
useServerMissions,
|
||||
useServerMods,
|
||||
useUpdateConfigSection,
|
||||
useCreateBan,
|
||||
useRevokeBan,
|
||||
useUploadMission,
|
||||
useDeleteMission,
|
||||
useSetEnabledMods,
|
||||
useSendCommand,
|
||||
} from "@/hooks/useServerDetail";
|
||||
|
||||
vi.mock("@/lib/api", () => ({
|
||||
apiClient: {
|
||||
get: vi.fn(),
|
||||
post: vi.fn(),
|
||||
put: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import { apiClient } from "@/lib/api";
|
||||
|
||||
function createWrapper() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
return function Wrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const SERVER_ID = 1;
|
||||
|
||||
describe("useServerConfig", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch server config", async () => {
|
||||
const mockConfig = {
|
||||
server: { hostname: "Test", _meta: { config_version: 1, schema_version: 1 } },
|
||||
basic: { min_bandwidth: 100, _meta: { config_version: 1, schema_version: 1 } },
|
||||
};
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockConfig },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useServerConfig(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockConfig);
|
||||
expect(apiClient.get).toHaveBeenCalledWith(`/api/servers/${SERVER_ID}/config`);
|
||||
});
|
||||
|
||||
it("should not fetch when serverId is 0", () => {
|
||||
renderHook(() => useServerConfig(0), { wrapper: createWrapper() });
|
||||
expect(apiClient.get).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("useServerConfigSection", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch a specific config section", async () => {
|
||||
const mockSection = {
|
||||
hostname: "Test Server",
|
||||
max_players: 64,
|
||||
_meta: { config_version: 1, schema_version: 1 },
|
||||
};
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockSection },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useServerConfigSection(SERVER_ID, "server"), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockSection);
|
||||
expect(apiClient.get).toHaveBeenCalledWith(`/api/servers/${SERVER_ID}/config/server`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useServerPlayers", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch players for a server", async () => {
|
||||
const mockPlayers = {
|
||||
server_id: SERVER_ID,
|
||||
player_count: 2,
|
||||
players: [
|
||||
{ id: 1, name: "Player1", guid: "abc123", ip: "192.168.1.1", ping: 42, slot_id: 0, server_id: SERVER_ID, game_data: null, joined_at: "2026-01-01T00:00:00Z", updated_at: "2026-01-01T00:00:00Z" },
|
||||
],
|
||||
};
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockPlayers },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useServerPlayers(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockPlayers);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useServerPlayerHistory", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch player history with options", async () => {
|
||||
const mockHistory = { total: 10, items: [] };
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockHistory },
|
||||
});
|
||||
|
||||
const { result } = renderHook(
|
||||
() => useServerPlayerHistory(SERVER_ID, { limit: 50, search: "test" }),
|
||||
{ wrapper: createWrapper() },
|
||||
);
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.get).toHaveBeenCalledWith(
|
||||
`/api/servers/${SERVER_ID}/players/history?limit=50&search=test`,
|
||||
);
|
||||
});
|
||||
|
||||
it("should fetch player history without options", async () => {
|
||||
const mockHistory = { total: 0, items: [] };
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockHistory },
|
||||
});
|
||||
|
||||
const { result } = renderHook(
|
||||
() => useServerPlayerHistory(SERVER_ID),
|
||||
{ wrapper: createWrapper() },
|
||||
);
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.get).toHaveBeenCalledWith(
|
||||
`/api/servers/${SERVER_ID}/players/history`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useServerBans", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch bans for a server", async () => {
|
||||
const mockBans = [
|
||||
{ id: 1, server_id: SERVER_ID, guid: "abc", name: "BadPlayer", reason: "cheating", banned_by: "admin", banned_at: "2026-01-01", expires_at: null, is_active: true, game_data: null },
|
||||
];
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockBans },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useServerBans(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockBans);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useServerMissions", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch missions for a server", async () => {
|
||||
const mockMissions = {
|
||||
server_id: SERVER_ID,
|
||||
missions: [{ name: "Test Mission", filename: "mission.pbo", size_bytes: 1024 }],
|
||||
total: 1,
|
||||
};
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockMissions },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useServerMissions(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockMissions);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useServerMods", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.get).mockReset();
|
||||
});
|
||||
|
||||
it("should fetch mods for a server", async () => {
|
||||
const mockMods = {
|
||||
server_id: SERVER_ID,
|
||||
mods: [{ name: "ACE", path: "@ace", size_bytes: 1048576, enabled: true }],
|
||||
enabled_count: 1,
|
||||
};
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: { success: true, data: mockMods },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useServerMods(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data).toEqual(mockMods);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useUpdateConfigSection", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.put).mockReset();
|
||||
});
|
||||
|
||||
it("should update a config section", async () => {
|
||||
vi.mocked(apiClient.put).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useUpdateConfigSection(SERVER_ID, "server"), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate({ hostname: "New Name", config_version: 1 });
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.put).toHaveBeenCalledWith(
|
||||
`/api/servers/${SERVER_ID}/config/server`,
|
||||
{ hostname: "New Name", config_version: 1 },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useCreateBan", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.post).mockReset();
|
||||
});
|
||||
|
||||
it("should create a ban", async () => {
|
||||
vi.mocked(apiClient.post).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useCreateBan(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate({ player_uid: "abc123", ban_type: "GUID", reason: "cheating" });
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.post).toHaveBeenCalledWith(`/api/servers/${SERVER_ID}/bans`, {
|
||||
player_uid: "abc123",
|
||||
ban_type: "GUID",
|
||||
reason: "cheating",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("useRevokeBan", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.delete).mockReset();
|
||||
});
|
||||
|
||||
it("should revoke a ban", async () => {
|
||||
vi.mocked(apiClient.delete).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useRevokeBan(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate(5);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.delete).toHaveBeenCalledWith(`/api/servers/${SERVER_ID}/bans/5`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useUploadMission", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.post).mockReset();
|
||||
});
|
||||
|
||||
it("should upload a mission file", async () => {
|
||||
vi.mocked(apiClient.post).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useUploadMission(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const file = new File(["mission data"], "mission.pbo", { type: "application/octet-stream" });
|
||||
result.current.mutate(file);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.post).toHaveBeenCalledWith(
|
||||
`/api/servers/${SERVER_ID}/missions`,
|
||||
expect.any(FormData),
|
||||
{ headers: { "Content-Type": "multipart/form-data" } },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useDeleteMission", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.delete).mockReset();
|
||||
});
|
||||
|
||||
it("should delete a mission by filename", async () => {
|
||||
vi.mocked(apiClient.delete).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useDeleteMission(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate("mission.pbo");
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.delete).toHaveBeenCalledWith(
|
||||
`/api/servers/${SERVER_ID}/missions/mission.pbo`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useSetEnabledMods", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.put).mockReset();
|
||||
});
|
||||
|
||||
it("should set enabled mods", async () => {
|
||||
vi.mocked(apiClient.put).mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const { result } = renderHook(() => useSetEnabledMods(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate(["@ace", "@cba"]);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.put).toHaveBeenCalledWith(
|
||||
`/api/servers/${SERVER_ID}/mods/enabled`,
|
||||
{ mods: ["@ace", "@cba"] },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useSendCommand", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(apiClient.post).mockReset();
|
||||
});
|
||||
|
||||
it("should send an RCon command", async () => {
|
||||
vi.mocked(apiClient.post).mockResolvedValueOnce({
|
||||
data: { success: true, data: { response: "#login admin" } },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useSendCommand(SERVER_ID), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
result.current.mutate("#login admin");
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(apiClient.post).toHaveBeenCalledWith(
|
||||
`/api/servers/${SERVER_ID}/rcon/command`,
|
||||
{ command: "#login admin" },
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -48,7 +48,7 @@ describe("useServers", () => {
|
||||
name: "Arma3",
|
||||
game_type: "arma3",
|
||||
status: "running",
|
||||
port: 2302,
|
||||
game_port: 2302,
|
||||
max_players: 64,
|
||||
current_players: 10,
|
||||
restart_count: 0,
|
||||
@@ -81,7 +81,7 @@ describe("useServer", () => {
|
||||
name: "Arma3",
|
||||
game_type: "arma3",
|
||||
status: "running",
|
||||
port: 2302,
|
||||
game_port: 2302,
|
||||
max_players: 64,
|
||||
current_players: 10,
|
||||
restart_count: 0,
|
||||
|
||||
@@ -128,4 +128,204 @@ describe("useWebSocket", () => {
|
||||
unmount();
|
||||
expect(mockWsInstance.close).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should include server_ids in WebSocket URL when serverIds provided", () => {
|
||||
renderHook(() => useWebSocket([1, 2]), { wrapper: createWrapper() });
|
||||
const calledUrl = MockWebSocket.mock.calls[0][0] as string;
|
||||
expect(calledUrl).toContain("server_id=1");
|
||||
expect(calledUrl).toContain("server_id=2");
|
||||
});
|
||||
|
||||
it("should reset backoff on successful connection", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
act(() => {
|
||||
if (mockWsInstance.onopen) {
|
||||
mockWsInstance.onopen({ type: "open" } as Event);
|
||||
}
|
||||
});
|
||||
|
||||
// After onopen, backoff should be reset. We verify indirectly via onclose reconnect timing.
|
||||
});
|
||||
|
||||
it("should invalidate queries on metrics event", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
act(() => {
|
||||
if (mockWsInstance.onmessage) {
|
||||
mockWsInstance.onmessage({
|
||||
data: JSON.stringify({
|
||||
type: "metrics",
|
||||
server_id: 1,
|
||||
data: { cpu: 50, memory: 60 },
|
||||
}),
|
||||
} as unknown as MessageEvent);
|
||||
}
|
||||
});
|
||||
|
||||
expect(mockInvalidateQueries).toHaveBeenCalledWith({
|
||||
queryKey: ["metrics", 1],
|
||||
});
|
||||
});
|
||||
|
||||
it("should invalidate queries on log event", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
act(() => {
|
||||
if (mockWsInstance.onmessage) {
|
||||
mockWsInstance.onmessage({
|
||||
data: JSON.stringify({
|
||||
type: "log",
|
||||
server_id: 2,
|
||||
data: { message: "test log" },
|
||||
}),
|
||||
} as unknown as MessageEvent);
|
||||
}
|
||||
});
|
||||
|
||||
expect(mockInvalidateQueries).toHaveBeenCalledWith({
|
||||
queryKey: ["logs", 2],
|
||||
});
|
||||
});
|
||||
|
||||
it("should invalidate queries on players event", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
act(() => {
|
||||
if (mockWsInstance.onmessage) {
|
||||
mockWsInstance.onmessage({
|
||||
data: JSON.stringify({
|
||||
type: "players",
|
||||
server_id: 3,
|
||||
data: { players: [] },
|
||||
}),
|
||||
} as unknown as MessageEvent);
|
||||
}
|
||||
});
|
||||
|
||||
expect(mockInvalidateQueries).toHaveBeenCalledWith({
|
||||
queryKey: ["players", 3],
|
||||
});
|
||||
});
|
||||
|
||||
it("should ignore unparseable WebSocket messages", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
act(() => {
|
||||
if (mockWsInstance.onmessage) {
|
||||
mockWsInstance.onmessage({
|
||||
data: "not valid json{{{",
|
||||
} as unknown as MessageEvent);
|
||||
}
|
||||
});
|
||||
|
||||
expect(mockInvalidateQueries).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should reconnect with backoff on normal close", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
act(() => {
|
||||
if (mockWsInstance.onclose) {
|
||||
mockWsInstance.onclose({ code: 1000, reason: "" } as CloseEvent);
|
||||
}
|
||||
});
|
||||
|
||||
// Should have scheduled a reconnect via setTimeout
|
||||
expect(mockWsInstance.close).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should NOT reconnect on close code 4001 (explicit logout)", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
const connectSpy = vi.fn();
|
||||
|
||||
// Override connect to track reconnection attempts
|
||||
act(() => {
|
||||
if (mockWsInstance.onclose) {
|
||||
mockWsInstance.onclose({ code: 4001, reason: "" } as CloseEvent);
|
||||
}
|
||||
});
|
||||
|
||||
// Advance timers - should NOT trigger reconnect
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(30000);
|
||||
});
|
||||
|
||||
// WebSocket constructor should still only have been called once (initial connect)
|
||||
expect(MockWebSocket).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should close WebSocket on error", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
act(() => {
|
||||
if (mockWsInstance.onerror) {
|
||||
mockWsInstance.onerror({ type: "error" } as Event);
|
||||
}
|
||||
});
|
||||
|
||||
expect(mockWsInstance.close).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should not reconnect when component is unmounted", () => {
|
||||
const { unmount } = renderHook(() => useWebSocket(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Trigger close BEFORE unmount to test unmountedRef check in onclose
|
||||
act(() => {
|
||||
if (mockWsInstance.onclose) {
|
||||
mockWsInstance.onclose({ code: 1000, reason: "" } as CloseEvent);
|
||||
}
|
||||
});
|
||||
|
||||
unmount();
|
||||
|
||||
// After close+unmount, advance timers - no reconnect should happen
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(30000);
|
||||
});
|
||||
|
||||
// Initial connect + reconnect from close = 2 (reconnect was scheduled before unmount)
|
||||
// But after unmount, no further reconnects should happen
|
||||
const callCount = MockWebSocket.mock.calls.length;
|
||||
expect(callCount).toBeLessThanOrEqual(2);
|
||||
});
|
||||
|
||||
it("should increase backoff on reconnect attempts", () => {
|
||||
renderHook(() => useWebSocket(), { wrapper: createWrapper() });
|
||||
|
||||
// First close triggers reconnect with doubled backoff
|
||||
act(() => {
|
||||
if (mockWsInstance.onclose) {
|
||||
mockWsInstance.onclose({ code: 1000, reason: "" } as CloseEvent);
|
||||
}
|
||||
});
|
||||
|
||||
// After close, a timeout should be set. Fast-forward to trigger reconnect.
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(3000);
|
||||
});
|
||||
|
||||
// A second WebSocket should be created (reconnect)
|
||||
expect(MockWebSocket).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("should not schedule reconnect when unmounted flag is set during close", () => {
|
||||
const { unmount } = renderHook(() => useWebSocket(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Unmount sets unmountedRef to true and closes the WebSocket
|
||||
unmount();
|
||||
|
||||
// After unmount, the mock ws close is called but onclose should bail out
|
||||
// because unmountedRef.current is true. No reconnect timeout should be set.
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(30000);
|
||||
});
|
||||
|
||||
// Only the initial WebSocket creation, no reconnects
|
||||
expect(MockWebSocket).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
188
frontend/src/components/servers/BanTable.tsx
Normal file
188
frontend/src/components/servers/BanTable.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import { useState } from "react";
|
||||
import { Shield, Trash2 } from "lucide-react";
|
||||
|
||||
import { useServerBans, useCreateBan, useRevokeBan } from "@/hooks/useServerDetail";
|
||||
import type { CreateBanRequest } from "@/hooks/useServerDetail";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
interface BanTableProps {
|
||||
serverId: number;
|
||||
}
|
||||
|
||||
export function BanTable({ serverId }: BanTableProps) {
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === "admin");
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const { data: bans, isLoading } = useServerBans(serverId);
|
||||
const createBan = useCreateBan(serverId);
|
||||
const revokeBan = useRevokeBan(serverId);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
const handleCreateBan = async (data: CreateBanRequest) => {
|
||||
try {
|
||||
await createBan.mutateAsync(data);
|
||||
addNotification({ type: "success", message: "Ban created" });
|
||||
setShowForm(false);
|
||||
} catch (err) {
|
||||
logger.error("BanTable", "Failed to create ban: %s", err);
|
||||
addNotification({ type: "error", message: "Failed to create ban" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevokeBan = async (banId: number) => {
|
||||
try {
|
||||
await revokeBan.mutateAsync(banId);
|
||||
addNotification({ type: "info", message: "Ban revoked" });
|
||||
} catch (err) {
|
||||
logger.error("BanTable", "Failed to revoke ban %d: %s", banId, err);
|
||||
addNotification({ type: "error", message: "Failed to revoke ban" });
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm p-4">Loading bans...</div>;
|
||||
}
|
||||
|
||||
const banList = bans ?? [];
|
||||
|
||||
return (
|
||||
<div data-testid="ban-table">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-text-primary font-semibold">Active Bans ({banList.length})</h3>
|
||||
{isAdmin && (
|
||||
<button onClick={() => setShowForm(!showForm)} className="btn-primary flex items-center gap-1.5 text-sm">
|
||||
<Shield size={14} />
|
||||
{showForm ? "Cancel" : "Add Ban"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<CreateBanForm onSubmit={handleCreateBan} isLoading={createBan.isPending} />
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-surface-overlay">
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Name</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">GUID</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Reason</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Banned By</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Expires</th>
|
||||
{isAdmin && (
|
||||
<th className="text-right text-text-muted font-medium px-3 py-2">Actions</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{banList.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={isAdmin ? 6 : 5} className="text-text-muted text-center py-6">
|
||||
No active bans
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
banList.map((ban) => (
|
||||
<tr key={ban.id} className="border-b border-surface-overlay/50 hover:bg-surface-overlay/30">
|
||||
<td className="text-text-primary px-3 py-2">{ban.name}</td>
|
||||
<td className="font-mono text-text-muted text-xs px-3 py-2">{ban.guid}</td>
|
||||
<td className="text-text-secondary px-3 py-2">{ban.reason || "--"}</td>
|
||||
<td className="text-text-secondary px-3 py-2">{ban.banned_by}</td>
|
||||
<td className="text-text-secondary text-xs px-3 py-2">
|
||||
{ban.expires_at ? new Date(ban.expires_at).toLocaleString() : "Permanent"}
|
||||
</td>
|
||||
{isAdmin && (
|
||||
<td className="text-right px-3 py-2">
|
||||
<button
|
||||
onClick={() => handleRevokeBan(ban.id)}
|
||||
disabled={revokeBan.isPending}
|
||||
className="btn-ghost text-status-crashed text-xs"
|
||||
aria-label={`Revoke ban ${ban.id}`}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateBanForm({
|
||||
onSubmit,
|
||||
isLoading,
|
||||
}: {
|
||||
onSubmit: (data: CreateBanRequest) => void;
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
const [playerUid, setPlayerUid] = useState("");
|
||||
const [banType, setBanType] = useState<"GUID" | "IP">("GUID");
|
||||
const [reason, setReason] = useState("");
|
||||
const [duration, setDuration] = useState(0);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSubmit({
|
||||
player_uid: playerUid,
|
||||
ban_type: banType,
|
||||
reason: reason || undefined,
|
||||
duration_minutes: duration || 0,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="neu-card p-4 mb-4 space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1">Player UID / GUID</label>
|
||||
<input
|
||||
className="neu-input w-full text-sm"
|
||||
value={playerUid}
|
||||
onChange={(e) => setPlayerUid(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1">Ban Type</label>
|
||||
<select
|
||||
className="neu-input w-full text-sm"
|
||||
value={banType}
|
||||
onChange={(e) => setBanType(e.target.value as "GUID" | "IP")}
|
||||
>
|
||||
<option value="GUID">GUID</option>
|
||||
<option value="IP">IP</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1">Reason</label>
|
||||
<input
|
||||
className="neu-input w-full text-sm"
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
placeholder="Optional reason"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1">Duration (minutes, 0 = permanent)</label>
|
||||
<input
|
||||
className="neu-input w-full text-sm"
|
||||
type="number"
|
||||
min={0}
|
||||
value={duration}
|
||||
onChange={(e) => setDuration(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" disabled={isLoading} className="btn-primary text-sm">
|
||||
{isLoading ? "Creating..." : "Create Ban"}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
179
frontend/src/components/servers/ConfigEditor.tsx
Normal file
179
frontend/src/components/servers/ConfigEditor.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { useState } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { useServerConfig, useServerConfigSection, useUpdateConfigSection } from "@/hooks/useServerDetail";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
interface ConfigEditorProps {
|
||||
serverId: number;
|
||||
}
|
||||
|
||||
const SENSITIVE_KEYS = new Set(["password", "password_admin", "server_command_password", "rcon_password"]);
|
||||
|
||||
export function ConfigEditor({ serverId }: ConfigEditorProps) {
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === "admin");
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const { data: configMap, isLoading } = useServerConfig(serverId);
|
||||
|
||||
const sections = configMap ? Object.keys(configMap).filter((k) => k !== "_meta") : [];
|
||||
const [activeSection, setActiveSection] = useState<string>(sections[0] ?? "");
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm p-4">Loading configuration...</div>;
|
||||
}
|
||||
|
||||
if (!configMap || sections.length === 0) {
|
||||
return <div className="text-text-muted text-sm p-4">No configuration available.</div>;
|
||||
}
|
||||
|
||||
const currentSection = activeSection || sections[0];
|
||||
|
||||
return (
|
||||
<div data-testid="config-editor">
|
||||
<div className="flex gap-1 mb-4 overflow-x-auto">
|
||||
{sections.map((section) => (
|
||||
<button
|
||||
key={section}
|
||||
onClick={() => setActiveSection(section)}
|
||||
className={clsx(
|
||||
"px-3 py-1.5 rounded-lg text-sm font-medium transition-colors capitalize",
|
||||
currentSection === section
|
||||
? "bg-accent text-text-inverse"
|
||||
: "text-text-secondary hover:text-text-primary hover:bg-surface-overlay",
|
||||
)}
|
||||
>
|
||||
{section}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{currentSection && (
|
||||
<ConfigSectionForm
|
||||
key={currentSection}
|
||||
serverId={serverId}
|
||||
section={currentSection}
|
||||
isAdmin={isAdmin}
|
||||
addNotification={addNotification}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ConfigSectionForm({
|
||||
serverId,
|
||||
section,
|
||||
isAdmin,
|
||||
addNotification,
|
||||
}: {
|
||||
serverId: number;
|
||||
section: string;
|
||||
isAdmin: boolean;
|
||||
addNotification: (n: { type: "success" | "error" | "info" | "warning"; message: string }) => void;
|
||||
}) {
|
||||
const { data: sectionData, isLoading } = useServerConfigSection(serverId, section);
|
||||
const updateSection = useUpdateConfigSection(serverId, section);
|
||||
const [editValues, setEditValues] = useState<Record<string, unknown> | null>(null);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm">Loading section...</div>;
|
||||
}
|
||||
|
||||
if (!sectionData) {
|
||||
return <div className="text-text-muted text-sm">No data for this section.</div>;
|
||||
}
|
||||
|
||||
const fields = Object.entries(sectionData).filter(([key]) => key !== "_meta");
|
||||
const meta = sectionData._meta;
|
||||
const displayValues = editValues ?? Object.fromEntries(fields);
|
||||
const isEditing = editValues !== null;
|
||||
|
||||
const handleEdit = () => {
|
||||
setEditValues(Object.fromEntries(fields));
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditValues(null);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editValues || !meta) return;
|
||||
try {
|
||||
await updateSection.mutateAsync({
|
||||
config_version: meta.config_version,
|
||||
...editValues,
|
||||
});
|
||||
addNotification({ type: "success", message: `${section} config updated` });
|
||||
setEditValues(null);
|
||||
} catch (err) {
|
||||
logger.error("ConfigEditor", "Failed to update config section %s: %s", section, err);
|
||||
if (err instanceof Error && "response" in err) {
|
||||
const axiosErr = err as { response?: { status?: number } };
|
||||
if (axiosErr.response?.status === 409) {
|
||||
addNotification({ type: "error", message: "Config was modified by someone else. Please refresh and try again." });
|
||||
} else {
|
||||
addNotification({ type: "error", message: `Failed to update ${section} config` });
|
||||
}
|
||||
} else {
|
||||
addNotification({ type: "error", message: `Failed to update ${section} config` });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (key: string, value: unknown) => {
|
||||
if (!editValues) return;
|
||||
setEditValues({ ...editValues, [key]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-text-muted text-xs">
|
||||
Version: {meta?.config_version ?? "--"} | Schema: {meta?.schema_version ?? "--"}
|
||||
</p>
|
||||
{isAdmin && !isEditing && (
|
||||
<button onClick={handleEdit} className="btn-ghost text-sm">
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{fields.map(([key, value]) => (
|
||||
<div key={key} className="flex items-center gap-3">
|
||||
<label className="text-text-secondary text-sm w-40 shrink-0">{formatLabel(key)}</label>
|
||||
{isEditing && !SENSITIVE_KEYS.has(key) ? (
|
||||
<input
|
||||
className="neu-input flex-1 text-sm"
|
||||
value={String(editValues?.[key] ?? "")}
|
||||
onChange={(e) => handleChange(key, e.target.value)}
|
||||
type={typeof value === "number" ? "number" : "text"}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-text-primary font-mono text-sm flex-1 bg-surface-recessed rounded-lg px-3 py-2">
|
||||
{SENSITIVE_KEYS.has(key) ? "••••••••" : String(value ?? "--")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isEditing && (
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button onClick={handleSave} disabled={updateSection.isPending} className="btn-primary text-sm">
|
||||
{updateSection.isPending ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button onClick={handleCancel} className="btn-ghost text-sm">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatLabel(key: string): string {
|
||||
return key
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
98
frontend/src/components/servers/LogViewer.tsx
Normal file
98
frontend/src/components/servers/LogViewer.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { useState, useRef, useCallback } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface LogEntry {
|
||||
timestamp: string;
|
||||
level: "info" | "warning" | "error";
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface LogViewerProps {
|
||||
logs: LogEntry[];
|
||||
}
|
||||
|
||||
const LEVEL_COLORS = {
|
||||
info: "text-text-secondary",
|
||||
warning: "text-status-starting",
|
||||
error: "text-status-crashed",
|
||||
};
|
||||
|
||||
export function LogViewer({ logs }: LogViewerProps) {
|
||||
const [levelFilter, setLevelFilter] = useState<string>("all");
|
||||
const logRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const filteredLogs = levelFilter === "all"
|
||||
? logs
|
||||
: logs.filter((l) => l.level === levelFilter);
|
||||
|
||||
const levelCounts = {
|
||||
info: logs.filter((l) => l.level === "info").length,
|
||||
warning: logs.filter((l) => l.level === "warning").length,
|
||||
error: logs.filter((l) => l.level === "error").length,
|
||||
};
|
||||
|
||||
// Auto-scroll to bottom
|
||||
if (logRef.current) {
|
||||
logRef.current.scrollTop = logRef.current.scrollHeight;
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-testid="log-viewer">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-text-primary font-semibold">
|
||||
Server Logs ({logs.length})
|
||||
</h3>
|
||||
<div className="flex gap-1">
|
||||
{["all", "info", "warning", "error"].map((level) => (
|
||||
<button
|
||||
key={level}
|
||||
onClick={() => setLevelFilter(level)}
|
||||
className={clsx(
|
||||
"px-2 py-1 rounded text-xs font-medium transition-colors",
|
||||
levelFilter === level
|
||||
? "bg-accent text-text-inverse"
|
||||
: "text-text-secondary hover:bg-surface-overlay",
|
||||
)}
|
||||
>
|
||||
{level === "all" ? "All" : level.charAt(0).toUpperCase() + level.slice(1)}
|
||||
{level !== "all" && levelCounts[level as keyof typeof levelCounts] > 0 && (
|
||||
<span className="ml-1 opacity-70">
|
||||
({levelCounts[level as keyof typeof levelCounts]})
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={logRef}
|
||||
className="bg-surface-recessed rounded-lg shadow-neu-recessed p-3 max-h-96 overflow-y-auto font-mono text-xs"
|
||||
>
|
||||
{filteredLogs.length === 0 ? (
|
||||
<div className="text-text-muted text-center py-6">
|
||||
No log entries yet. Logs will appear in real-time when the server is running.
|
||||
</div>
|
||||
) : (
|
||||
filteredLogs.map((entry, idx) => (
|
||||
<div key={idx} className="flex gap-2 py-0.5">
|
||||
<span className="text-text-muted shrink-0">{formatTimestamp(entry.timestamp)}</span>
|
||||
<span className={clsx("shrink-0 w-16", LEVEL_COLORS[entry.level])}>
|
||||
[{entry.level.toUpperCase()}]
|
||||
</span>
|
||||
<span className="text-text-primary break-all">{entry.message}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatTimestamp(iso: string): string {
|
||||
try {
|
||||
return new Date(iso).toLocaleTimeString();
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
129
frontend/src/components/servers/MissionList.tsx
Normal file
129
frontend/src/components/servers/MissionList.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { Upload, Trash2 } from "lucide-react";
|
||||
|
||||
import { useServerMissions, useUploadMission, useDeleteMission } from "@/hooks/useServerDetail";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
interface MissionListProps {
|
||||
serverId: number;
|
||||
}
|
||||
|
||||
export function MissionList({ serverId }: MissionListProps) {
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === "admin");
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const { data: missionsData, isLoading } = useServerMissions(serverId);
|
||||
const uploadMission = useUploadMission(serverId);
|
||||
const deleteMission = useDeleteMission(serverId);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
try {
|
||||
await uploadMission.mutateAsync(file);
|
||||
addNotification({ type: "success", message: `Mission ${file.name} uploaded` });
|
||||
} catch (err) {
|
||||
logger.error("MissionList", "Failed to upload mission: %s", err);
|
||||
addNotification({ type: "error", message: "Failed to upload mission" });
|
||||
}
|
||||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||||
};
|
||||
|
||||
const handleDelete = async (filename: string) => {
|
||||
try {
|
||||
await deleteMission.mutateAsync(filename);
|
||||
addNotification({ type: "info", message: `Mission ${filename} deleted` });
|
||||
} catch (err) {
|
||||
logger.error("MissionList", "Failed to delete mission %s: %s", filename, err);
|
||||
addNotification({ type: "error", message: `Failed to delete ${filename}` });
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm p-4">Loading missions...</div>;
|
||||
}
|
||||
|
||||
const missions = missionsData?.missions ?? [];
|
||||
|
||||
return (
|
||||
<div data-testid="mission-list">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-text-primary font-semibold">
|
||||
Missions ({missionsData?.total ?? 0})
|
||||
</h3>
|
||||
{isAdmin && (
|
||||
<label className="btn-primary flex items-center gap-1.5 text-sm cursor-pointer">
|
||||
<Upload size={14} />
|
||||
Upload .pbo
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".pbo"
|
||||
onChange={handleUpload}
|
||||
className="hidden"
|
||||
disabled={uploadMission.isPending}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{uploadMission.isPending && (
|
||||
<div className="text-text-secondary text-sm mb-3 animate-pulse">Uploading mission...</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-surface-overlay">
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Filename</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Mission</th>
|
||||
<th className="text-right text-text-muted font-medium px-3 py-2">Size</th>
|
||||
{isAdmin && (
|
||||
<th className="text-right text-text-muted font-medium px-3 py-2">Actions</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{missions.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={isAdmin ? 4 : 3} className="text-text-muted text-center py-6">
|
||||
No missions uploaded
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
missions.map((mission) => (
|
||||
<tr key={mission.filename} className="border-b border-surface-overlay/50 hover:bg-surface-overlay/30">
|
||||
<td className="font-mono text-text-primary text-xs px-3 py-2">{mission.filename}</td>
|
||||
<td className="text-text-secondary px-3 py-2">{mission.name}</td>
|
||||
<td className="text-right font-mono text-text-muted text-xs px-3 py-2">
|
||||
{formatSize(mission.size_bytes)}
|
||||
</td>
|
||||
{isAdmin && (
|
||||
<td className="text-right px-3 py-2">
|
||||
<button
|
||||
onClick={() => handleDelete(mission.filename)}
|
||||
disabled={deleteMission.isPending}
|
||||
className="btn-ghost text-status-crashed"
|
||||
aria-label={`Delete ${mission.filename}`}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${bytes} B`;
|
||||
}
|
||||
105
frontend/src/components/servers/ModList.tsx
Normal file
105
frontend/src/components/servers/ModList.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { useState } from "react";
|
||||
import { Save } from "lucide-react";
|
||||
|
||||
import { useServerMods, useSetEnabledMods } from "@/hooks/useServerDetail";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
interface ModListProps {
|
||||
serverId: number;
|
||||
}
|
||||
|
||||
export function ModList({ serverId }: ModListProps) {
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === "admin");
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const { data: modsData, isLoading } = useServerMods(serverId);
|
||||
const setEnabledMods = useSetEnabledMods(serverId);
|
||||
const [enabledSet, setEnabledSet] = useState<Set<string> | null>(null);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm p-4">Loading mods...</div>;
|
||||
}
|
||||
|
||||
const mods = modsData?.mods ?? [];
|
||||
const serverEnabled = new Set(mods.filter((m) => m.enabled).map((m) => m.name));
|
||||
const activeEnabled = enabledSet ?? serverEnabled;
|
||||
|
||||
const handleToggle = (modName: string) => {
|
||||
const next = new Set(activeEnabled);
|
||||
if (next.has(modName)) {
|
||||
next.delete(modName);
|
||||
} else {
|
||||
next.add(modName);
|
||||
}
|
||||
setEnabledSet(next);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await setEnabledMods.mutateAsync(Array.from(activeEnabled));
|
||||
addNotification({ type: "success", message: "Mods updated" });
|
||||
setEnabledSet(null);
|
||||
} catch (err) {
|
||||
logger.error("ModList", "Failed to update mods: %s", err);
|
||||
addNotification({ type: "error", message: "Failed to update mods" });
|
||||
}
|
||||
};
|
||||
|
||||
const hasChanges = enabledSet !== null;
|
||||
|
||||
return (
|
||||
<div data-testid="mod-list">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-text-primary font-semibold">
|
||||
Mods ({modsData?.enabled_count ?? 0}/{mods.length} enabled)
|
||||
</h3>
|
||||
{isAdmin && hasChanges && (
|
||||
<button onClick={handleSave} disabled={setEnabledMods.isPending} className="btn-primary flex items-center gap-1.5 text-sm">
|
||||
<Save size={14} />
|
||||
{setEnabledMods.isPending ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{mods.length === 0 ? (
|
||||
<div className="text-text-muted text-sm text-center py-6">No mods found</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{mods.map((mod) => (
|
||||
<div
|
||||
key={mod.name}
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-surface-recessed shadow-neu-recessed"
|
||||
>
|
||||
{isAdmin ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={activeEnabled.has(mod.name)}
|
||||
onChange={() => handleToggle(mod.name)}
|
||||
className="w-4 h-4 accent-accent"
|
||||
aria-label={`Toggle ${mod.name}`}
|
||||
/>
|
||||
) : (
|
||||
<span className={`w-4 h-4 rounded border ${mod.enabled ? "bg-accent border-accent" : "border-text-muted"}`} />
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-text-primary text-sm font-medium truncate">{mod.name}</p>
|
||||
<p className="text-text-muted text-xs font-mono truncate">{mod.path}</p>
|
||||
</div>
|
||||
<span className="text-text-muted text-xs font-mono">
|
||||
{formatSize(mod.size_bytes)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes >= 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${bytes} B`;
|
||||
}
|
||||
148
frontend/src/components/servers/PlayerTable.tsx
Normal file
148
frontend/src/components/servers/PlayerTable.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import { useServerPlayers, useServerPlayerHistory } from "@/hooks/useServerDetail";
|
||||
|
||||
interface PlayerTableProps {
|
||||
serverId: number;
|
||||
}
|
||||
|
||||
export function PlayerTable({ serverId }: PlayerTableProps) {
|
||||
const { data: playersData, isLoading } = useServerPlayers(serverId);
|
||||
const [showHistory, setShowHistory] = useState(false);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm p-4">Loading players...</div>;
|
||||
}
|
||||
|
||||
const players = playersData?.players ?? [];
|
||||
const playerCount = playersData?.player_count ?? 0;
|
||||
|
||||
return (
|
||||
<div data-testid="player-table">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-text-primary font-semibold">
|
||||
Online Players ({playerCount})
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowHistory(!showHistory)}
|
||||
className="btn-ghost text-sm"
|
||||
>
|
||||
{showHistory ? "Current Players" : "Player History"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showHistory ? (
|
||||
<PlayerHistorySection serverId={serverId} />
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-surface-overlay">
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Slot</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Name</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">GUID</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">IP</th>
|
||||
<th className="text-right text-text-muted font-medium px-3 py-2">Ping</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{players.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-text-muted text-center py-6">
|
||||
No players online
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
players.map((player) => (
|
||||
<tr key={player.id} className="border-b border-surface-overlay/50 hover:bg-surface-overlay/30">
|
||||
<td className="font-mono text-text-secondary px-3 py-2">{player.slot_id}</td>
|
||||
<td className="text-text-primary px-3 py-2">{player.name}</td>
|
||||
<td className="font-mono text-text-muted text-xs px-3 py-2">{player.guid}</td>
|
||||
<td className="font-mono text-text-muted text-xs px-3 py-2">{player.ip}</td>
|
||||
<td className="text-right font-mono text-text-secondary px-3 py-2">{player.ping}ms</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayerHistorySection({ serverId }: { serverId: number }) {
|
||||
const [search, setSearch] = useState("");
|
||||
const { data: historyData, isLoading } = useServerPlayerHistory(serverId, {
|
||||
limit: 50,
|
||||
search: search || undefined,
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm p-4">Loading history...</div>;
|
||||
}
|
||||
|
||||
const entries = historyData?.items ?? [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search players..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="neu-input w-full text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-surface-overlay">
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Name</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">GUID</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Joined</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Left</th>
|
||||
<th className="text-right text-text-muted font-medium px-3 py-2">Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-text-muted text-center py-6">
|
||||
No player history
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
entries.map((entry) => (
|
||||
<tr key={entry.id} className="border-b border-surface-overlay/50 hover:bg-surface-overlay/30">
|
||||
<td className="text-text-primary px-3 py-2">{entry.name}</td>
|
||||
<td className="font-mono text-text-muted text-xs px-3 py-2">{entry.guid}</td>
|
||||
<td className="text-text-secondary text-xs px-3 py-2">{formatTime(entry.joined_at)}</td>
|
||||
<td className="text-text-secondary text-xs px-3 py-2">
|
||||
{entry.left_at ? formatTime(entry.left_at) : "--"}
|
||||
</td>
|
||||
<td className="text-right font-mono text-text-secondary px-3 py-2">
|
||||
{entry.session_duration_seconds ? formatDuration(entry.session_duration_seconds) : "--"}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatTime(iso: string): string {
|
||||
return new Date(iso).toLocaleString();
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
if (h > 0) return `${h}h ${m}m`;
|
||||
return `${m}m`;
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import type { Server } from "@/hooks/useServers";
|
||||
import { useStartServer, useStopServer, useRestartServer } from "@/hooks/useServers";
|
||||
import { StatusLed } from "@/components/ui/StatusLed";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
interface ServerCardProps {
|
||||
server: Server;
|
||||
@@ -22,7 +23,8 @@ export function ServerCard({ server }: ServerCardProps) {
|
||||
try {
|
||||
await startServer.mutateAsync(server.id);
|
||||
addNotification({ type: "success", message: `${server.name} starting...` });
|
||||
} catch {
|
||||
} catch (err) {
|
||||
logger.error("ServerCard", "Failed to start server %d: %s", server.id, err);
|
||||
addNotification({ type: "error", message: `Failed to start ${server.name}` });
|
||||
}
|
||||
};
|
||||
@@ -31,7 +33,8 @@ export function ServerCard({ server }: ServerCardProps) {
|
||||
try {
|
||||
await stopServer.mutateAsync({ serverId: server.id });
|
||||
addNotification({ type: "info", message: `${server.name} stopping...` });
|
||||
} catch {
|
||||
} catch (err) {
|
||||
logger.error("ServerCard", "Failed to stop server %d: %s", server.id, err);
|
||||
addNotification({ type: "error", message: `Failed to stop ${server.name}` });
|
||||
}
|
||||
};
|
||||
@@ -40,7 +43,8 @@ export function ServerCard({ server }: ServerCardProps) {
|
||||
try {
|
||||
await restartServer.mutateAsync(server.id);
|
||||
addNotification({ type: "info", message: `${server.name} restarting...` });
|
||||
} catch {
|
||||
} catch (err) {
|
||||
logger.error("ServerCard", "Failed to restart server %d: %s", server.id, err);
|
||||
addNotification({ type: "error", message: `Failed to restart ${server.name}` });
|
||||
}
|
||||
};
|
||||
@@ -60,7 +64,7 @@ export function ServerCard({ server }: ServerCardProps) {
|
||||
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<StatItem label="Players" value={`${server.current_players}/${server.max_players}`} />
|
||||
<StatItem label="Port" value={String(server.port)} />
|
||||
<StatItem label="Port" value={String(server.game_port)} />
|
||||
<StatItem label="Restarts" value={String(server.restart_count)} />
|
||||
</div>
|
||||
|
||||
|
||||
167
frontend/src/components/servers/ServerHeader.tsx
Normal file
167
frontend/src/components/servers/ServerHeader.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { Play, Square, RotateCcw, Skull } from "lucide-react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import type { Server } from "@/hooks/useServers";
|
||||
import { useStartServer, useStopServer, useRestartServer, useKillServer } from "@/hooks/useServers";
|
||||
import { StatusLed } from "@/components/ui/StatusLed";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
interface ServerHeaderProps {
|
||||
server: Server;
|
||||
}
|
||||
|
||||
export function ServerHeader({ server }: ServerHeaderProps) {
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === "admin");
|
||||
const startServer = useStartServer();
|
||||
const stopServer = useStopServer();
|
||||
const restartServer = useRestartServer();
|
||||
const killServer = useKillServer();
|
||||
|
||||
const isRunning = server.status === "running";
|
||||
const isBusy = ["starting", "restarting"].includes(server.status);
|
||||
|
||||
const handleStart = async () => {
|
||||
try {
|
||||
await startServer.mutateAsync(server.id);
|
||||
addNotification({ type: "success", message: `${server.name} starting...` });
|
||||
} catch (err) {
|
||||
logger.error("ServerHeader", "Failed to start server %d: %s", server.id, err);
|
||||
addNotification({ type: "error", message: `Failed to start ${server.name}` });
|
||||
}
|
||||
};
|
||||
|
||||
const handleStop = async () => {
|
||||
try {
|
||||
await stopServer.mutateAsync({ serverId: server.id });
|
||||
addNotification({ type: "info", message: `${server.name} stopping...` });
|
||||
} catch (err) {
|
||||
logger.error("ServerHeader", "Failed to stop server %d: %s", server.id, err);
|
||||
addNotification({ type: "error", message: `Failed to stop ${server.name}` });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestart = async () => {
|
||||
try {
|
||||
await restartServer.mutateAsync(server.id);
|
||||
addNotification({ type: "info", message: `${server.name} restarting...` });
|
||||
} catch (err) {
|
||||
logger.error("ServerHeader", "Failed to restart server %d: %s", server.id, err);
|
||||
addNotification({ type: "error", message: `Failed to restart ${server.name}` });
|
||||
}
|
||||
};
|
||||
|
||||
const handleKill = async () => {
|
||||
try {
|
||||
await killServer.mutateAsync(server.id);
|
||||
addNotification({ type: "warning", message: `${server.name} force killed` });
|
||||
} catch (err) {
|
||||
logger.error("ServerHeader", "Failed to kill server %d: %s", server.id, err);
|
||||
addNotification({ type: "error", message: `Failed to kill ${server.name}` });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="neu-card p-5" data-testid={`server-header-${server.id}`}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusLed status={server.status} showLabel />
|
||||
<div>
|
||||
<h1 className="text-text-primary text-xl font-bold">{server.name}</h1>
|
||||
{server.description && (
|
||||
<p className="text-text-secondary text-sm mt-0.5">{server.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-text-muted uppercase tracking-wider bg-surface-recessed px-2.5 py-1 rounded-md">
|
||||
{server.game_type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
|
||||
<StatItem label="Port" value={String(server.game_port)} />
|
||||
<StatItem label="Players" value={`${server.current_players}/${server.max_players}`} />
|
||||
<StatItem label="Restarts" value={String(server.restart_count)} />
|
||||
<StatItem
|
||||
label="CPU"
|
||||
value={server.cpu_percent !== null ? `${server.cpu_percent}%` : "--"}
|
||||
/>
|
||||
<StatItem
|
||||
label="RAM"
|
||||
value={server.ram_mb !== null ? `${server.ram_mb} MB` : "--"}
|
||||
/>
|
||||
<StatItem
|
||||
label="PID"
|
||||
value={server.pid !== null ? String(server.pid) : "--"}
|
||||
/>
|
||||
<StatItem
|
||||
label="Auto-restart"
|
||||
value={server.auto_restart ? "Yes" : "No"}
|
||||
/>
|
||||
<StatItem
|
||||
label="Status"
|
||||
value={server.status}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="flex gap-2">
|
||||
{!isRunning && !isBusy && (
|
||||
<button
|
||||
onClick={handleStart}
|
||||
disabled={startServer.isPending}
|
||||
className="btn-primary flex items-center gap-1.5 text-sm"
|
||||
aria-label={`Start ${server.name}`}
|
||||
>
|
||||
<Play size={14} />
|
||||
Start
|
||||
</button>
|
||||
)}
|
||||
|
||||
{(isRunning || isBusy) && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleStop}
|
||||
disabled={stopServer.isPending || isBusy}
|
||||
className="btn-danger flex items-center gap-1.5 text-sm"
|
||||
aria-label={`Stop ${server.name}`}
|
||||
>
|
||||
<Square size={14} />
|
||||
Stop
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRestart}
|
||||
disabled={restartServer.isPending || isBusy}
|
||||
className="btn-ghost flex items-center gap-1.5 text-sm"
|
||||
aria-label={`Restart ${server.name}`}
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
Restart
|
||||
</button>
|
||||
<button
|
||||
onClick={handleKill}
|
||||
disabled={killServer.isPending || !isBusy && !isRunning}
|
||||
className="btn-ghost text-status-crashed flex items-center gap-1.5 text-sm"
|
||||
aria-label={`Kill ${server.name}`}
|
||||
>
|
||||
<Skull size={14} />
|
||||
Kill
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="bg-surface-recessed rounded-lg shadow-neu-recessed px-3 py-2">
|
||||
<p className="text-text-muted text-xs mb-0.5">{label}</p>
|
||||
<p className="text-text-primary font-mono text-sm font-medium">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
114
frontend/src/components/settings/PasswordChange.tsx
Normal file
114
frontend/src/components/settings/PasswordChange.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { useState } from "react";
|
||||
import { KeyRound } from "lucide-react";
|
||||
|
||||
import { useChangePassword } from "@/hooks/useAuth";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
export function PasswordChange() {
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const changePassword = useChangePassword();
|
||||
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError("New passwords do not match");
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
setError("Password must be at least 6 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await changePassword.mutateAsync({
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword,
|
||||
});
|
||||
addNotification({ type: "success", message: "Password changed successfully" });
|
||||
setCurrentPassword("");
|
||||
setNewPassword("");
|
||||
setConfirmPassword("");
|
||||
} catch (err) {
|
||||
logger.error("PasswordChange", "Failed to change password: %s", err);
|
||||
const message =
|
||||
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
|
||||
"Failed to change password";
|
||||
setError(typeof message === "string" ? message : "Failed to change password");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="neu-card p-5" data-testid="password-change">
|
||||
<h3 className="text-text-primary font-semibold mb-4 flex items-center gap-2">
|
||||
<KeyRound size={18} />
|
||||
Change Password
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 max-w-md">
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5" htmlFor="current-password">
|
||||
Current Password
|
||||
</label>
|
||||
<input
|
||||
id="current-password"
|
||||
type="password"
|
||||
className="neu-input w-full"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5" htmlFor="new-password">
|
||||
New Password
|
||||
</label>
|
||||
<input
|
||||
id="new-password"
|
||||
type="password"
|
||||
className="neu-input w-full"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5" htmlFor="confirm-password">
|
||||
Confirm New Password
|
||||
</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
className="neu-input w-full"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-surface-recessed border border-status-crashed rounded-lg px-3 py-2">
|
||||
<p className="text-status-crashed text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="submit" disabled={changePassword.isPending} className="btn-primary text-sm">
|
||||
{changePassword.isPending ? "Changing..." : "Change Password"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
frontend/src/components/settings/UserManager.tsx
Normal file
157
frontend/src/components/settings/UserManager.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useState } from "react";
|
||||
import { UserPlus, Trash2 } from "lucide-react";
|
||||
|
||||
import { useUsers, useCreateUser, useDeleteUser } from "@/hooks/useAuth";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
export function UserManager() {
|
||||
const currentUser = useAuthStore((s) => s.user);
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const { data: users, isLoading } = useUsers();
|
||||
const createUser = useCreateUser();
|
||||
const deleteUser = useDeleteUser();
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [role, setRole] = useState<"admin" | "viewer">("viewer");
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await createUser.mutateAsync({ username, password, role });
|
||||
addNotification({ type: "success", message: `User ${username} created` });
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
setRole("viewer");
|
||||
setShowForm(false);
|
||||
} catch (err) {
|
||||
logger.error("UserManager", "Failed to create user: %s", err);
|
||||
addNotification({ type: "error", message: "Failed to create user" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (userId: number, username: string) => {
|
||||
if (userId === currentUser?.id) {
|
||||
addNotification({ type: "error", message: "Cannot delete your own account" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteUser.mutateAsync(userId);
|
||||
addNotification({ type: "info", message: `User ${username} deleted` });
|
||||
} catch (err) {
|
||||
logger.error("UserManager", "Failed to delete user %d: %s", userId, err);
|
||||
addNotification({ type: "error", message: "Failed to delete user" });
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-text-muted text-sm p-4">Loading users...</div>;
|
||||
}
|
||||
|
||||
const userList = users ?? [];
|
||||
|
||||
return (
|
||||
<div className="neu-card p-5" data-testid="user-manager">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-text-primary font-semibold">Users</h3>
|
||||
<button onClick={() => setShowForm(!showForm)} className="btn-primary flex items-center gap-1.5 text-sm">
|
||||
<UserPlus size={14} />
|
||||
{showForm ? "Cancel" : "Add User"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<form onSubmit={handleCreate} className="neu-card p-4 mb-4 space-y-3">
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1">Username</label>
|
||||
<input
|
||||
className="neu-input w-full text-sm"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1">Password</label>
|
||||
<input
|
||||
className="neu-input w-full text-sm"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1">Role</label>
|
||||
<select
|
||||
className="neu-input w-full text-sm"
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value as "admin" | "viewer")}
|
||||
>
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" disabled={createUser.isPending} className="btn-primary text-sm">
|
||||
{createUser.isPending ? "Creating..." : "Create User"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-surface-overlay">
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Username</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Role</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Created</th>
|
||||
<th className="text-left text-text-muted font-medium px-3 py-2">Last Login</th>
|
||||
<th className="text-right text-text-muted font-medium px-3 py-2">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{userList.map((user) => (
|
||||
<tr key={user.id} className="border-b border-surface-overlay/50 hover:bg-surface-overlay/30">
|
||||
<td className="text-text-primary px-3 py-2">{user.username}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded-md uppercase ${
|
||||
user.role === "admin"
|
||||
? "bg-accent/20 text-accent"
|
||||
: "bg-surface-overlay text-text-secondary"
|
||||
}`}
|
||||
>
|
||||
{user.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-text-secondary text-xs px-3 py-2">
|
||||
{new Date(user.created_at).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="text-text-secondary text-xs px-3 py-2">
|
||||
{user.last_login ? new Date(user.last_login).toLocaleString() : "Never"}
|
||||
</td>
|
||||
<td className="text-right px-3 py-2">
|
||||
{user.id !== currentUser?.id && (
|
||||
<button
|
||||
onClick={() => handleDelete(user.id, user.username)}
|
||||
disabled={deleteUser.isPending}
|
||||
className="btn-ghost text-status-crashed"
|
||||
aria-label={`Delete user ${user.username}`}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
frontend/src/hooks/useAuth.ts
Normal file
105
frontend/src/hooks/useAuth.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────
|
||||
|
||||
export interface AuthUser {
|
||||
id: number;
|
||||
username: string;
|
||||
role: "admin" | "viewer";
|
||||
}
|
||||
|
||||
export interface UserRecord {
|
||||
id: number;
|
||||
username: string;
|
||||
role: string;
|
||||
created_at: string;
|
||||
last_login: string | null;
|
||||
}
|
||||
|
||||
export interface ChangePasswordRequest {
|
||||
current_password: string;
|
||||
new_password: string;
|
||||
}
|
||||
|
||||
export interface CreateUserRequest {
|
||||
username: string;
|
||||
password: string;
|
||||
role?: "admin" | "viewer";
|
||||
}
|
||||
|
||||
// ── Query Hooks ────────────────────────────────────────────────────────
|
||||
|
||||
export function useCurrentUser() {
|
||||
return useQuery({
|
||||
queryKey: ["auth", "me"],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{ success: boolean; data: AuthUser }>(
|
||||
"/api/auth/me",
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUsers() {
|
||||
return useQuery({
|
||||
queryKey: ["auth", "users"],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{ success: boolean; data: UserRecord[] }>(
|
||||
"/api/auth/users",
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ── Mutation Hooks ─────────────────────────────────────────────────────
|
||||
|
||||
export function useChangePassword() {
|
||||
return useMutation({
|
||||
mutationFn: (data: ChangePasswordRequest) =>
|
||||
apiClient.put("/api/auth/password", data),
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateUser() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: CreateUserRequest) =>
|
||||
apiClient.post("/api/auth/users", data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["auth", "users"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteUser() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (userId: number) =>
|
||||
apiClient.delete(`/api/auth/users/${userId}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["auth", "users"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useLogout() {
|
||||
const clearAuth = useAuthStore((s) => s.clearAuth);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: () => apiClient.post("/api/auth/logout"),
|
||||
onSuccess: () => {
|
||||
clearAuth();
|
||||
queryClient.clear();
|
||||
},
|
||||
onError: () => {
|
||||
// Even if the server rejects, clear local auth
|
||||
clearAuth();
|
||||
queryClient.clear();
|
||||
},
|
||||
});
|
||||
}
|
||||
77
frontend/src/hooks/useGames.ts
Normal file
77
frontend/src/hooks/useGames.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api";
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────
|
||||
|
||||
export interface GameInfo {
|
||||
game_type: string;
|
||||
display_name: string;
|
||||
version: string;
|
||||
capabilities: string[];
|
||||
}
|
||||
|
||||
export interface GameDetail extends GameInfo {
|
||||
schema_version: number;
|
||||
config_sections: string[];
|
||||
allowed_executables: string[];
|
||||
}
|
||||
|
||||
export interface GameDefaults {
|
||||
[sectionName: string]: Record<string, unknown>;
|
||||
}
|
||||
|
||||
// ── Query Hooks ────────────────────────────────────────────────────────
|
||||
|
||||
export function useGamesList() {
|
||||
return useQuery({
|
||||
queryKey: ["games"],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{ success: boolean; data: GameInfo[] }>(
|
||||
"/api/games",
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useGameDetail(gameType: string) {
|
||||
return useQuery({
|
||||
queryKey: ["games", gameType],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: GameDetail;
|
||||
}>(`/api/games/${gameType}`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: !!gameType,
|
||||
});
|
||||
}
|
||||
|
||||
export function useGameConfigSchema(gameType: string) {
|
||||
return useQuery({
|
||||
queryKey: ["games", gameType, "config-schema"],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: Record<string, unknown>;
|
||||
}>(`/api/games/${gameType}/config-schema`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: !!gameType,
|
||||
});
|
||||
}
|
||||
|
||||
export function useGameDefaults(gameType: string) {
|
||||
return useQuery({
|
||||
queryKey: ["games", gameType, "defaults"],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: GameDefaults;
|
||||
}>(`/api/games/${gameType}/defaults`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: !!gameType,
|
||||
});
|
||||
}
|
||||
331
frontend/src/hooks/useServerDetail.ts
Normal file
331
frontend/src/hooks/useServerDetail.ts
Normal file
@@ -0,0 +1,331 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api";
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────
|
||||
|
||||
export interface EnrichedServer {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
game_type: string;
|
||||
status: "stopped" | "running" | "starting" | "restarting" | "crashed";
|
||||
pid: number | null;
|
||||
exe_path: string;
|
||||
game_port: number;
|
||||
rcon_port: number | null;
|
||||
auto_restart: boolean;
|
||||
max_restarts: number;
|
||||
restart_count: number;
|
||||
last_restart_at: string | null;
|
||||
started_at: string | null;
|
||||
stopped_at: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
cpu_percent: number | null;
|
||||
ram_mb: number | null;
|
||||
player_count: number;
|
||||
}
|
||||
|
||||
export interface ConfigSection {
|
||||
[key: string]: unknown;
|
||||
_meta: {
|
||||
config_version: number;
|
||||
schema_version: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ConfigMap {
|
||||
[sectionName: string]: ConfigSection;
|
||||
}
|
||||
|
||||
export interface ConfigPreview {
|
||||
[filename: string]: string;
|
||||
}
|
||||
|
||||
export interface Player {
|
||||
id: number;
|
||||
server_id: number;
|
||||
slot_id: number;
|
||||
name: string;
|
||||
guid: string;
|
||||
ip: string;
|
||||
ping: number;
|
||||
game_data: string | null;
|
||||
joined_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface PlayersResponse {
|
||||
server_id: number;
|
||||
player_count: number;
|
||||
players: Player[];
|
||||
}
|
||||
|
||||
export interface PlayerHistoryEntry {
|
||||
id: number;
|
||||
server_id: number;
|
||||
name: string;
|
||||
guid: string;
|
||||
ip: string;
|
||||
game_data: string | null;
|
||||
joined_at: string;
|
||||
left_at: string | null;
|
||||
session_duration_seconds: number | null;
|
||||
}
|
||||
|
||||
export interface PlayerHistoryResponse {
|
||||
total: number;
|
||||
items: PlayerHistoryEntry[];
|
||||
}
|
||||
|
||||
export interface Ban {
|
||||
id: number;
|
||||
server_id: number;
|
||||
guid: string;
|
||||
name: string;
|
||||
reason: string;
|
||||
banned_by: string;
|
||||
banned_at: string;
|
||||
expires_at: string | null;
|
||||
is_active: boolean;
|
||||
game_data: string | null;
|
||||
}
|
||||
|
||||
export interface CreateBanRequest {
|
||||
player_uid: string;
|
||||
ban_type?: "GUID" | "IP";
|
||||
reason?: string;
|
||||
duration_minutes?: number;
|
||||
}
|
||||
|
||||
export interface Mission {
|
||||
name: string;
|
||||
filename: string;
|
||||
size_bytes: number;
|
||||
}
|
||||
|
||||
export interface MissionsResponse {
|
||||
server_id: number;
|
||||
missions: Mission[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface Mod {
|
||||
name: string;
|
||||
path: string;
|
||||
size_bytes: number;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export interface ModsResponse {
|
||||
server_id: number;
|
||||
mods: Mod[];
|
||||
enabled_count: number;
|
||||
}
|
||||
|
||||
// ── Query Hooks ────────────────────────────────────────────────────────
|
||||
|
||||
export function useServerConfig(serverId: number) {
|
||||
return useQuery({
|
||||
queryKey: ["servers", serverId, "config"],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{ success: boolean; data: ConfigMap }>(
|
||||
`/api/servers/${serverId}/config`,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0,
|
||||
});
|
||||
}
|
||||
|
||||
export function useServerConfigSection(serverId: number, section: string) {
|
||||
return useQuery({
|
||||
queryKey: ["servers", serverId, "config", section],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: ConfigSection;
|
||||
}>(`/api/servers/${serverId}/config/${section}`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0 && !!section,
|
||||
});
|
||||
}
|
||||
|
||||
export function useServerConfigPreview(serverId: number) {
|
||||
return useQuery({
|
||||
queryKey: ["servers", serverId, "config", "preview"],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: ConfigPreview;
|
||||
}>(`/api/servers/${serverId}/config/preview`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0,
|
||||
});
|
||||
}
|
||||
|
||||
export function useServerPlayers(serverId: number) {
|
||||
return useQuery({
|
||||
queryKey: ["players", serverId],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: PlayersResponse;
|
||||
}>(`/api/servers/${serverId}/players`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0,
|
||||
});
|
||||
}
|
||||
|
||||
export function useServerPlayerHistory(
|
||||
serverId: number,
|
||||
opts?: { limit?: number; offset?: number; search?: string },
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: ["players", serverId, "history", opts],
|
||||
queryFn: async () => {
|
||||
const params = new URLSearchParams();
|
||||
if (opts?.limit) params.set("limit", String(opts.limit));
|
||||
if (opts?.offset) params.set("offset", String(opts.offset));
|
||||
if (opts?.search) params.set("search", opts.search);
|
||||
const qs = params.toString();
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: PlayerHistoryResponse;
|
||||
}>(`/api/servers/${serverId}/players/history${qs ? `?${qs}` : ""}`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0,
|
||||
});
|
||||
}
|
||||
|
||||
export function useServerBans(serverId: number) {
|
||||
return useQuery({
|
||||
queryKey: ["bans", serverId],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{ success: boolean; data: Ban[] }>(
|
||||
`/api/servers/${serverId}/bans`,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0,
|
||||
});
|
||||
}
|
||||
|
||||
export function useServerMissions(serverId: number) {
|
||||
return useQuery({
|
||||
queryKey: ["missions", serverId],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: MissionsResponse;
|
||||
}>(`/api/servers/${serverId}/missions`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0,
|
||||
});
|
||||
}
|
||||
|
||||
export function useServerMods(serverId: number) {
|
||||
return useQuery({
|
||||
queryKey: ["mods", serverId],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: ModsResponse;
|
||||
}>(`/api/servers/${serverId}/mods`);
|
||||
return res.data.data;
|
||||
},
|
||||
enabled: serverId > 0,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Mutation Hooks ─────────────────────────────────────────────────────
|
||||
|
||||
export function useUpdateConfigSection(serverId: number, section: string) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) =>
|
||||
apiClient.put(`/api/servers/${serverId}/config/${section}`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["servers", serverId, "config", section],
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["servers", serverId, "config"],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateBan(serverId: number) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: CreateBanRequest) =>
|
||||
apiClient.post(`/api/servers/${serverId}/bans`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["bans", serverId] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRevokeBan(serverId: number) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (banId: number) =>
|
||||
apiClient.delete(`/api/servers/${serverId}/bans/${banId}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["bans", serverId] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUploadMission(serverId: number) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (file: File) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
return apiClient.post(`/api/servers/${serverId}/missions`, formData, {
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["missions", serverId] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteMission(serverId: number) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (filename: string) =>
|
||||
apiClient.delete(
|
||||
`/api/servers/${serverId}/missions/${encodeURIComponent(filename)}`,
|
||||
),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["missions", serverId] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useSetEnabledMods(serverId: number) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (mods: string[]) =>
|
||||
apiClient.put(`/api/servers/${serverId}/mods/enabled`, { mods }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["mods", serverId] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useSendCommand(serverId: number) {
|
||||
return useMutation({
|
||||
mutationFn: (command: string) =>
|
||||
apiClient.post(`/api/servers/${serverId}/rcon/command`, { command }),
|
||||
});
|
||||
}
|
||||
@@ -4,14 +4,25 @@ import { apiClient } from "@/lib/api";
|
||||
export interface Server {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
game_type: string;
|
||||
status: "stopped" | "running" | "starting" | "restarting" | "crashed";
|
||||
port: number;
|
||||
pid: number | null;
|
||||
exe_path: string;
|
||||
game_port: number;
|
||||
rcon_port: number | null;
|
||||
max_players: number;
|
||||
current_players: number;
|
||||
restart_count: number;
|
||||
auto_restart: boolean;
|
||||
max_restarts: number;
|
||||
restart_count: number;
|
||||
last_restart_at: string | null;
|
||||
started_at: string | null;
|
||||
stopped_at: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
cpu_percent: number | null;
|
||||
ram_mb: number | null;
|
||||
}
|
||||
|
||||
export function useServers() {
|
||||
@@ -83,6 +94,18 @@ export function useCreateServer() {
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateServer(serverId: number) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) =>
|
||||
apiClient.put(`/api/servers/${serverId}`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["servers", serverId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteServer() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
@@ -92,4 +115,16 @@ export function useDeleteServer() {
|
||||
queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useKillServer() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (serverId: number) =>
|
||||
apiClient.post(`/api/servers/${serverId}/kill`),
|
||||
onSuccess: (_, serverId) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["servers", serverId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useRef, useCallback } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
const WS_BASE = import.meta.env.VITE_WS_URL ?? "ws://localhost:8000";
|
||||
const RECONNECT_BASE_MS = 2000;
|
||||
@@ -12,7 +13,17 @@ interface WebSocketEvent {
|
||||
data: unknown;
|
||||
}
|
||||
|
||||
export function useWebSocket(serverIds?: number[]) {
|
||||
interface UseWebSocketOptions {
|
||||
serverIds?: number[];
|
||||
onEvent?: (event: WebSocketEvent) => void;
|
||||
}
|
||||
|
||||
export function useWebSocket(opts?: UseWebSocketOptions | number[]) {
|
||||
// Support legacy API: useWebSocket(serverIds)
|
||||
const options = Array.isArray(opts) ? { serverIds: opts } : (opts ?? {});
|
||||
const serverIds = options.serverIds;
|
||||
const onEvent = options.onEvent;
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const { token } = useAuthStore();
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
@@ -39,15 +50,17 @@ export function useWebSocket(serverIds?: number[]) {
|
||||
queryClient.invalidateQueries({ queryKey: ["players", server_id] });
|
||||
break;
|
||||
}
|
||||
|
||||
onEvent?.(event);
|
||||
},
|
||||
[queryClient],
|
||||
[queryClient, onEvent],
|
||||
);
|
||||
|
||||
const connect = useCallback(() => {
|
||||
if (!token || unmountedRef.current) return;
|
||||
|
||||
const params = new URLSearchParams({ token });
|
||||
if (serverIds) {
|
||||
if (serverIds && serverIds.length > 0) {
|
||||
serverIds.forEach((id) => params.append("server_id", String(id)));
|
||||
}
|
||||
|
||||
@@ -64,7 +77,7 @@ export function useWebSocket(serverIds?: number[]) {
|
||||
const event: WebSocketEvent = JSON.parse(e.data);
|
||||
handleEvent(event);
|
||||
} catch {
|
||||
// Ignore unparseable messages
|
||||
logger.debug("WebSocket", "Failed to parse message: %s", e.data);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -80,7 +93,7 @@ export function useWebSocket(serverIds?: number[]) {
|
||||
ws.onerror = () => {
|
||||
ws.close();
|
||||
};
|
||||
}, [token, serverIds, handleEvent]);
|
||||
}, [token, serverIds, onEvent, handleEvent]);
|
||||
|
||||
useEffect(() => {
|
||||
unmountedRef.current = false;
|
||||
|
||||
@@ -20,8 +20,12 @@ apiClient.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
localStorage.removeItem("languard_token");
|
||||
window.location.href = "/login";
|
||||
const url = error.config?.url ?? "";
|
||||
// Don't redirect on auth endpoints — let the calling component handle the error
|
||||
if (!url.startsWith("/api/auth/")) {
|
||||
localStorage.removeItem("languard_token");
|
||||
window.location.href = "/login";
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
},
|
||||
|
||||
54
frontend/src/lib/logger.ts
Normal file
54
frontend/src/lib/logger.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Lightweight logger for the frontend.
|
||||
*
|
||||
* In development: logs to console with level-appropriate methods.
|
||||
* In production: can be swapped for an error reporting service (Sentry, etc.)
|
||||
* by replacing the transport in logger.ts.
|
||||
*/
|
||||
|
||||
type LogLevel = "debug" | "info" | "warn" | "error";
|
||||
|
||||
const LOG_LEVELS: Record<LogLevel, number> = {
|
||||
debug: 0,
|
||||
info: 1,
|
||||
warn: 2,
|
||||
error: 3,
|
||||
};
|
||||
|
||||
const currentLevel: LogLevel =
|
||||
(import.meta.env.VITE_LOG_LEVEL as LogLevel) ??
|
||||
(import.meta.env.DEV ? "debug" : "warn");
|
||||
|
||||
function shouldLog(level: LogLevel): boolean {
|
||||
return LOG_LEVELS[level] >= LOG_LEVELS[currentLevel];
|
||||
}
|
||||
|
||||
function formatMessage(level: LogLevel, context: string, message: string): string {
|
||||
return `[${level.toUpperCase()}] [${context}] ${message}`;
|
||||
}
|
||||
|
||||
export const logger = {
|
||||
debug(context: string, message: string, ...args: unknown[]) {
|
||||
if (shouldLog("debug")) {
|
||||
console.debug(formatMessage("debug", context, message), ...args);
|
||||
}
|
||||
},
|
||||
|
||||
info(context: string, message: string, ...args: unknown[]) {
|
||||
if (shouldLog("info")) {
|
||||
console.info(formatMessage("info", context, message), ...args);
|
||||
}
|
||||
},
|
||||
|
||||
warn(context: string, message: string, ...args: unknown[]) {
|
||||
if (shouldLog("warn")) {
|
||||
console.warn(formatMessage("warn", context, message), ...args);
|
||||
}
|
||||
},
|
||||
|
||||
error(context: string, message: string, ...args: unknown[]) {
|
||||
if (shouldLog("error")) {
|
||||
console.error(formatMessage("error", context, message), ...args);
|
||||
}
|
||||
},
|
||||
};
|
||||
297
frontend/src/pages/CreateServerPage.tsx
Normal file
297
frontend/src/pages/CreateServerPage.tsx
Normal file
@@ -0,0 +1,297 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { ChevronRight, ChevronLeft } from "lucide-react";
|
||||
|
||||
import { useCreateServer, type Server } from "@/hooks/useServers";
|
||||
import { useGamesList } from "@/hooks/useGames";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { useUIStore } from "@/store/ui.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
const createServerSchema = z.object({
|
||||
name: z.string().min(1, "Server name is required"),
|
||||
description: z.string().optional(),
|
||||
game_type: z.string().min(1, "Game type is required"),
|
||||
exe_path: z.string().min(1, "Executable path is required"),
|
||||
game_port: z.number({ coerce: true }).min(1024, "Port must be >= 1024").max(65535, "Port must be <= 65535"),
|
||||
rcon_port: z.number({ coerce: true }).min(1024).max(65535).nullable().optional(),
|
||||
auto_restart: z.boolean().optional(),
|
||||
max_restarts: z.number({ coerce: true }).min(0).max(20).optional(),
|
||||
});
|
||||
|
||||
type CreateServerForm = z.infer<typeof createServerSchema>;
|
||||
|
||||
const STEPS = ["Game Type", "Server Info", "Options", "Review"];
|
||||
|
||||
export function CreateServerPage() {
|
||||
const navigate = useNavigate();
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === "admin");
|
||||
const addNotification = useUIStore((s) => s.addNotification);
|
||||
const createServer = useCreateServer();
|
||||
const { data: games } = useGamesList();
|
||||
|
||||
const [step, setStep] = useState(0);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<CreateServerForm>({
|
||||
resolver: zodResolver(createServerSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
description: "",
|
||||
game_type: "arma3",
|
||||
exe_path: "",
|
||||
game_port: 2302,
|
||||
rcon_port: null,
|
||||
auto_restart: false,
|
||||
max_restarts: 3,
|
||||
},
|
||||
});
|
||||
|
||||
// Redirect non-admin users
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="p-6 text-center">
|
||||
<p className="text-status-crashed text-lg mb-2">Access Denied</p>
|
||||
<p className="text-text-muted">Only admins can create servers.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const onSubmit = async (data: CreateServerForm) => {
|
||||
try {
|
||||
// Clean up NaN / empty values before sending to API
|
||||
const payload: Record<string, unknown> = {
|
||||
name: data.name,
|
||||
game_type: data.game_type,
|
||||
exe_path: data.exe_path,
|
||||
game_port: data.game_port,
|
||||
auto_restart: data.auto_restart ?? false,
|
||||
max_restarts: data.max_restarts ?? 3,
|
||||
};
|
||||
if (data.description) payload.description = data.description;
|
||||
if (data.rcon_port != null && !Number.isNaN(data.rcon_port)) {
|
||||
payload.rcon_port = data.rcon_port;
|
||||
}
|
||||
|
||||
const result = await createServer.mutateAsync(payload as Partial<Server>);
|
||||
addNotification({ type: "success", message: `Server ${data.name} created` });
|
||||
const newId = (result as { data: { id: number } }).data?.id;
|
||||
if (newId) {
|
||||
navigate(`/servers/${newId}`);
|
||||
} else {
|
||||
navigate("/");
|
||||
}
|
||||
} catch (err) {
|
||||
logger.error("CreateServerPage", "Failed to create server: %s", err);
|
||||
const detail =
|
||||
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
|
||||
"Failed to create server";
|
||||
addNotification({
|
||||
type: "error",
|
||||
message: typeof detail === "string" ? detail : "Failed to create server",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const watchedGameType = watch("game_type");
|
||||
const gameOptions = games ?? [];
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-2xl mx-auto" data-testid="create-server-page">
|
||||
<h1 className="text-text-primary text-2xl font-bold mb-6">Create Server</h1>
|
||||
|
||||
{/* Step indicator */}
|
||||
<div className="flex items-center gap-2 mb-8">
|
||||
{STEPS.map((label, idx) => (
|
||||
<div key={label} className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
|
||||
idx <= step
|
||||
? "bg-accent text-text-inverse"
|
||||
: "bg-surface-recessed text-text-muted"
|
||||
}`}
|
||||
>
|
||||
{idx + 1}
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm hidden sm:inline ${
|
||||
idx <= step ? "text-text-primary" : "text-text-muted"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
{idx < STEPS.length - 1 && (
|
||||
<div className={`w-8 h-px ${idx < step ? "bg-accent" : "bg-surface-overlay"}`} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* Step 0: Game Type */}
|
||||
{step === 0 && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5">Game Type</label>
|
||||
<select className="neu-input w-full" {...register("game_type")}>
|
||||
{gameOptions.length === 0 && (
|
||||
<option value="arma3">Arma 3</option>
|
||||
)}
|
||||
{gameOptions.map((game) => (
|
||||
<option key={game.game_type} value={game.game_type}>
|
||||
{game.display_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<p className="text-text-muted text-sm">
|
||||
Selected: <span className="text-text-primary font-medium">{watchedGameType}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 1: Server Info */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5">Server Name</label>
|
||||
<input className="neu-input w-full" {...register("name")} placeholder="My Arma Server" />
|
||||
{errors.name && <p className="text-status-crashed text-xs mt-1">{errors.name.message}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5">Description</label>
|
||||
<input className="neu-input w-full" {...register("description")} placeholder="Optional description" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5">Executable Path</label>
|
||||
<input className="neu-input w-full font-mono text-sm" {...register("exe_path")} placeholder="D:/Arma3Server/arma3server_x64.exe" />
|
||||
{errors.exe_path && <p className="text-status-crashed text-xs mt-1">{errors.exe_path.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5">Game Port</label>
|
||||
<input className="neu-input w-full" type="number" {...register("game_port", { valueAsNumber: true })} />
|
||||
{errors.game_port && <p className="text-status-crashed text-xs mt-1">{errors.game_port.message}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5">RCon Port (optional)</label>
|
||||
<input className="neu-input w-full" type="number" placeholder="2307" {...register("rcon_port", { valueAsNumber: true })} />
|
||||
{errors.rcon_port && <p className="text-status-crashed text-xs mt-1">{errors.rcon_port.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Options */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="auto_restart"
|
||||
className="w-4 h-4 accent-accent"
|
||||
{...register("auto_restart")}
|
||||
/>
|
||||
<label htmlFor="auto_restart" className="text-text-primary text-sm">
|
||||
Auto-restart on crash
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-text-secondary text-sm mb-1.5">Max Restarts</label>
|
||||
<input
|
||||
className="neu-input w-full"
|
||||
type="number"
|
||||
min={0}
|
||||
max={20}
|
||||
{...register("max_restarts", { valueAsNumber: true })}
|
||||
/>
|
||||
<p className="text-text-muted text-xs mt-1">Maximum automatic restarts within the restart window</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Review */}
|
||||
{step === 3 && (
|
||||
<div className="space-y-3">
|
||||
{Object.keys(errors).length > 0 && (
|
||||
<div className="bg-surface-recessed border border-status-crashed rounded-lg px-3 py-2 mb-3">
|
||||
<p className="text-status-crashed text-sm">Please fix validation errors before creating:</p>
|
||||
<ul className="text-status-crashed text-xs mt-1 list-disc list-inside">
|
||||
{Object.entries(errors).map(([field, err]) => (
|
||||
<li key={field}>{field}: {err.message}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-text-primary font-semibold mb-3">Review Configuration</h3>
|
||||
<ReviewItem label="Name" value={watch("name") || "--"} />
|
||||
<ReviewItem label="Description" value={watch("description") || "--"} />
|
||||
<ReviewItem label="Game Type" value={watch("game_type")} />
|
||||
<ReviewItem label="Executable" value={watch("exe_path") || "--"} />
|
||||
<ReviewItem label="Game Port" value={String(watch("game_port"))} />
|
||||
<ReviewItem label="RCon Port" value={watch("rcon_port") ? String(watch("rcon_port")) : "None"} />
|
||||
<ReviewItem label="Auto-restart" value={watch("auto_restart") ? "Yes" : "No"} />
|
||||
<ReviewItem label="Max Restarts" value={String(watch("max_restarts") ?? 3)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation buttons */}
|
||||
<div className="flex justify-between mt-8">
|
||||
{step > 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep(step - 1)}
|
||||
className="btn-ghost flex items-center gap-1.5"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
Back
|
||||
</button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
{step < STEPS.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep(step + 1)}
|
||||
className="btn-primary flex items-center gap-1.5"
|
||||
>
|
||||
Next
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createServer.isPending}
|
||||
className="btn-primary flex items-center gap-1.5"
|
||||
>
|
||||
{createServer.isPending ? "Creating..." : "Create Server"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReviewItem({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 py-2 border-b border-surface-overlay/50">
|
||||
<span className="text-text-muted text-sm w-32 shrink-0">{label}</span>
|
||||
<span className="text-text-primary text-sm font-mono">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { z } from "zod";
|
||||
|
||||
import { apiClient } from "@/lib/api";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { logger } from "@/lib/logger";
|
||||
|
||||
const loginSchema = z.object({
|
||||
username: z.string().min(1, "Username is required"),
|
||||
@@ -36,6 +37,7 @@ export function LoginPage() {
|
||||
setAuth(res.data.data.access_token, res.data.data.user);
|
||||
navigate("/");
|
||||
} catch (err: unknown) {
|
||||
logger.error("LoginPage", "Login failed: %s", err);
|
||||
const message =
|
||||
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
|
||||
"Login failed";
|
||||
|
||||
148
frontend/src/pages/ServerDetailPage.tsx
Normal file
148
frontend/src/pages/ServerDetailPage.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useState, useCallback, useRef } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { useServer } from "@/hooks/useServers";
|
||||
import { useWebSocket } from "@/hooks/useWebSocket";
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { ServerHeader } from "@/components/servers/ServerHeader";
|
||||
import { ConfigEditor } from "@/components/servers/ConfigEditor";
|
||||
import { PlayerTable } from "@/components/servers/PlayerTable";
|
||||
import { BanTable } from "@/components/servers/BanTable";
|
||||
import { MissionList } from "@/components/servers/MissionList";
|
||||
import { ModList } from "@/components/servers/ModList";
|
||||
import { LogViewer } from "@/components/servers/LogViewer";
|
||||
import { StatusLed } from "@/components/ui/StatusLed";
|
||||
|
||||
type Tab = "overview" | "config" | "players" | "bans" | "missions" | "mods" | "logs";
|
||||
|
||||
interface LogEntry {
|
||||
timestamp: string;
|
||||
level: "info" | "warning" | "error";
|
||||
message: string;
|
||||
}
|
||||
|
||||
const MAX_LOG_ENTRIES = 500;
|
||||
|
||||
const TABS: { id: Tab; label: string; adminOnly: boolean }[] = [
|
||||
{ id: "overview", label: "Overview", adminOnly: false },
|
||||
{ id: "config", label: "Config", adminOnly: false },
|
||||
{ id: "players", label: "Players", adminOnly: false },
|
||||
{ id: "bans", label: "Bans", adminOnly: false },
|
||||
{ id: "missions", label: "Missions", adminOnly: false },
|
||||
{ id: "mods", label: "Mods", adminOnly: false },
|
||||
{ id: "logs", label: "Logs", adminOnly: false },
|
||||
];
|
||||
|
||||
export function ServerDetailPage() {
|
||||
const { serverId } = useParams();
|
||||
const id = parseInt(serverId ?? "0", 10);
|
||||
const { data: server, isLoading, isError } = useServer(id);
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === "admin");
|
||||
const [activeTab, setActiveTab] = useState<Tab>("overview");
|
||||
const [logs, setLogs] = useState<LogEntry[]>([]);
|
||||
|
||||
const handleWsEvent = useCallback((event: { type: string; server_id: number | null; data: unknown }) => {
|
||||
if (event.type === "log" && event.server_id === id) {
|
||||
const entry = event.data as LogEntry;
|
||||
if (entry && entry.message) {
|
||||
setLogs((prev) => [...prev.slice(-(MAX_LOG_ENTRIES - 1)), entry]);
|
||||
}
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useWebSocket({ serverIds: id > 0 ? [id] : undefined, onEvent: handleWsEvent });
|
||||
|
||||
const visibleTabs = TABS.filter((tab) => !tab.adminOnly || isAdmin);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="p-6 text-text-muted">Loading server...</div>;
|
||||
}
|
||||
|
||||
if (isError || !server) {
|
||||
return (
|
||||
<div className="p-6 text-center">
|
||||
<p className="text-status-crashed text-lg mb-2">Server not found</p>
|
||||
<p className="text-text-muted">The requested server could not be loaded.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6" data-testid="server-detail-page">
|
||||
<ServerHeader server={server} />
|
||||
|
||||
<div className="flex gap-1 overflow-x-auto">
|
||||
{visibleTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={clsx(
|
||||
"px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap",
|
||||
activeTab === tab.id
|
||||
? "bg-accent text-text-inverse shadow-neu-raised"
|
||||
: "text-text-secondary hover:text-text-primary hover:bg-surface-overlay",
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="neu-card p-5">
|
||||
{activeTab === "overview" && <OverviewTab serverId={id} />}
|
||||
{activeTab === "config" && <ConfigEditor serverId={id} />}
|
||||
{activeTab === "players" && <PlayerTable serverId={id} />}
|
||||
{activeTab === "bans" && <BanTable serverId={id} />}
|
||||
{activeTab === "missions" && <MissionList serverId={id} />}
|
||||
{activeTab === "mods" && <ModList serverId={id} />}
|
||||
{activeTab === "logs" && <LogViewer logs={logs} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OverviewTab({ serverId }: { serverId: number }) {
|
||||
const { data: server } = useServer(serverId);
|
||||
|
||||
if (!server) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4" data-testid="overview-tab">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<StatusLed status={server.status} showLabel />
|
||||
<h2 className="text-text-primary text-lg font-semibold">{server.name}</h2>
|
||||
{server.description && (
|
||||
<span className="text-text-secondary text-sm">— {server.description}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
<StatCard label="Game Type" value={server.game_type} />
|
||||
<StatCard label="Port" value={String(server.game_port)} />
|
||||
<StatCard label="Players" value={`${server.current_players}/${server.max_players}`} />
|
||||
<StatCard label="Status" value={server.status} />
|
||||
<StatCard label="CPU" value={server.cpu_percent !== null ? `${server.cpu_percent}%` : "--"} />
|
||||
<StatCard label="RAM" value={server.ram_mb !== null ? `${server.ram_mb} MB` : "--"} />
|
||||
<StatCard label="Restarts" value={String(server.restart_count)} />
|
||||
<StatCard label="Auto-restart" value={server.auto_restart ? "Enabled" : "Disabled"} />
|
||||
</div>
|
||||
|
||||
{server.exe_path && (
|
||||
<div className="bg-surface-recessed rounded-lg px-3 py-2">
|
||||
<p className="text-text-muted text-xs mb-0.5">Executable</p>
|
||||
<p className="text-text-secondary font-mono text-sm break-all">{server.exe_path}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="bg-surface-recessed rounded-lg shadow-neu-recessed px-3 py-2">
|
||||
<p className="text-text-muted text-xs mb-0.5">{label}</p>
|
||||
<p className="text-text-primary font-mono text-sm font-medium">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
frontend/src/pages/SettingsPage.tsx
Normal file
49
frontend/src/pages/SettingsPage.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { useState } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { useAuthStore } from "@/store/auth.store";
|
||||
import { PasswordChange } from "@/components/settings/PasswordChange";
|
||||
import { UserManager } from "@/components/settings/UserManager";
|
||||
|
||||
type Tab = "account" | "users";
|
||||
|
||||
export function SettingsPage() {
|
||||
const user = useAuthStore((s) => s.user);
|
||||
const isAdmin = user?.role === "admin";
|
||||
const [activeTab, setActiveTab] = useState<Tab>("account");
|
||||
|
||||
const tabs: { id: Tab; label: string; adminOnly: boolean }[] = [
|
||||
{ id: "account", label: "Account", adminOnly: false },
|
||||
{ id: "users", label: "User Management", adminOnly: true },
|
||||
];
|
||||
|
||||
const visibleTabs = tabs.filter((tab) => !tab.adminOnly || isAdmin);
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6" data-testid="settings-page">
|
||||
<h1 className="text-text-primary text-2xl font-bold">Settings</h1>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="flex gap-1">
|
||||
{visibleTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={clsx(
|
||||
"px-4 py-2 rounded-lg text-sm font-medium transition-colors",
|
||||
activeTab === tab.id
|
||||
? "bg-accent text-text-inverse shadow-neu-raised"
|
||||
: "text-text-secondary hover:text-text-primary hover:bg-surface-overlay",
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "account" && <PasswordChange />}
|
||||
{activeTab === "users" && isAdmin && <UserManager />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user