13 Commits

26 changed files with 746 additions and 80 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "acc-server-manager-web",
"version": "0.23.0",
"version": "0.24.3",
"private": true,
"scripts": {
"dev": "next dev --turbopack",

View File

@@ -0,0 +1,16 @@
import { requireAuth } from '@/lib/auth/server';
import { getServers } from '@/lib/api/server/servers';
import { ActivityLogTable } from '@/components/activityLog/ActivityLogTable';
export default async function ActivityLogPage() {
const session = await requireAuth();
const servers = await getServers(session.token!);
const serverOptions = servers.map((s) => ({ id: s.id, name: s.name }));
return (
<main className="p-5">
<h1 className="mb-5 text-lg font-semibold text-primary">Activity Log</h1>
<ActivityLogTable servers={serverOptions} />
</main>
);
}

View File

@@ -0,0 +1,256 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { getActivityLogAction } from '@/lib/actions/activityLog';
import type { ActivityLog, ActivityLogFilter, ActionType } from '@/lib/schemas/activityLog';
import { ACTION_TYPE_LABELS, actionTypeSchema } from '@/lib/schemas/activityLog';
import { Button } from '@/components/ui/Button';
const PAGE_SIZE = 10;
interface ServerOption {
id: string;
name: string;
}
interface ActivityLogTableProps {
serverId?: string;
servers?: ServerOption[];
}
function formatDate(iso: string): string {
return new Date(iso).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
function parseDetails(raw: string): string {
try {
const obj = JSON.parse(raw) as Record<string, unknown>;
if (obj.file && Array.isArray(obj.changed_keys)) {
return `Updated ${obj.file} — changed: ${(obj.changed_keys as string[]).join(', ')}`;
}
if (obj.service) {
return `Service: ${obj.service}`;
}
if (obj.driver_count !== undefined && obj.race_count !== undefined) {
return `${obj.driver_count} drivers, ${obj.race_count} races`;
}
return raw;
} catch {
return raw;
}
}
const ACTION_BADGE: Record<ActionType, string> = {
config_update: 'bg-blue-bg text-blue',
server_start: 'bg-green-bg text-green',
server_stop: 'bg-red-bg text-red',
server_restart: 'bg-yellow-bg text-yellow',
leaderboard_update: 'bg-overlay text-muted'
};
export function ActivityLogTable({ serverId, servers }: ActivityLogTableProps) {
const [logs, setLogs] = useState<ActivityLog[]>([]);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [filterAction, setFilterAction] = useState<ActionType | ''>('');
const [filterServerId, setFilterServerId] = useState('');
const [filterStartDate, setFilterStartDate] = useState('');
const [filterEndDate, setFilterEndDate] = useState('');
const [appliedFilter, setAppliedFilter] = useState<ActivityLogFilter>({});
const fetchLogs = useCallback(
async (currentPage: number, filter: ActivityLogFilter, reset: boolean) => {
setIsLoading(true);
setError(null);
const params = { ...filter, page: currentPage, page_size: PAGE_SIZE };
if (serverId) params.server_id = serverId;
const result = await getActivityLogAction(params);
setIsLoading(false);
if (!result.success) {
setError(result.message);
return;
}
setHasMore(result.data.length === PAGE_SIZE);
setLogs((prev) => (reset ? result.data : [...prev, ...result.data]));
},
[serverId]
);
useEffect(() => {
fetchLogs(1, {}, true);
}, [fetchLogs]);
const applyFilters = () => {
const filter: ActivityLogFilter = {};
if (filterAction) filter.action = filterAction as ActionType;
if (filterServerId) filter.server_id = filterServerId;
if (filterStartDate) filter.start_date = new Date(filterStartDate).toISOString();
if (filterEndDate) filter.end_date = new Date(filterEndDate).toISOString();
setAppliedFilter(filter);
setPage(1);
setLogs([]);
fetchLogs(1, filter, true);
};
const clearFilters = () => {
setFilterAction('');
setFilterServerId('');
setFilterStartDate('');
setFilterEndDate('');
setAppliedFilter({});
setPage(1);
setLogs([]);
fetchLogs(1, {}, true);
};
const loadMore = () => {
const next = page + 1;
setPage(next);
fetchLogs(next, appliedFilter, false);
};
return (
<div className="flex flex-col gap-4">
<div className="border-border bg-canvas flex flex-wrap items-end gap-3 rounded-lg border p-4">
<div className="flex flex-col gap-1">
<label className="text-subtle text-xs">Action type</label>
<select
value={filterAction}
onChange={(e) => setFilterAction(e.target.value as ActionType | '')}
className="form-input w-44 text-sm"
>
<option value="">All actions</option>
{actionTypeSchema.options.map((opt) => (
<option key={opt} value={opt}>
{ACTION_TYPE_LABELS[opt]}
</option>
))}
</select>
</div>
{servers && servers.length > 0 && (
<div className="flex flex-col gap-1">
<label className="text-subtle text-xs">Server</label>
<select
value={filterServerId}
onChange={(e) => setFilterServerId(e.target.value)}
className="form-input w-48 text-sm"
>
<option value="">All servers</option>
{servers.map((s) => (
<option key={s.id} value={s.id}>
{s.name}
</option>
))}
</select>
</div>
)}
<div className="flex flex-col gap-1">
<label className="text-subtle text-xs">From</label>
<input
type="date"
value={filterStartDate}
onChange={(e) => setFilterStartDate(e.target.value)}
className="form-input w-36 text-sm"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-subtle text-xs">To</label>
<input
type="date"
value={filterEndDate}
onChange={(e) => setFilterEndDate(e.target.value)}
className="form-input w-36 text-sm"
/>
</div>
<Button variant="primary" size="sm" onClick={applyFilters}>
Apply
</Button>
<Button variant="ghost" size="sm" onClick={clearFilters}>
Clear
</Button>
</div>
{error && <p className="text-red text-sm">{error}</p>}
<div className="border-border bg-canvas overflow-hidden rounded-lg border">
{logs.length === 0 && !isLoading ? (
<div className="px-4 py-12 text-center">
<div className="mb-3 text-4xl">📋</div>
<p className="text-muted text-sm">No activity logged yet.</p>
</div>
) : (
<div className="overflow-x-auto">
<table className="min-w-full">
<thead>
<tr className="border-border-muted bg-base border-b">
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
Time
</th>
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
User
</th>
{!serverId && (
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
Server
</th>
)}
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
Action
</th>
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
Details
</th>
</tr>
</thead>
<tbody>
{logs.map((log) => (
<tr
key={log.id}
className="border-border-muted hover:bg-hover border-b transition-colors last:border-0"
>
<td className="text-muted px-4 py-3 text-sm whitespace-nowrap">
{formatDate(log.createdAt)}
</td>
<td className="text-secondary px-4 py-3 text-sm">{log.username}</td>
{!serverId && (
<td className="text-secondary px-4 py-3 text-sm">
{log.server?.name ?? log.serverId}
</td>
)}
<td className="px-4 py-3">
<span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${ACTION_BADGE[log.action] ?? 'bg-canvas text-muted'}`}
>
{ACTION_TYPE_LABELS[log.action] ?? log.action}
</span>
</td>
<td className="text-muted px-4 py-3 text-sm">{parseDetails(log.details)}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
{isLoading && <div className="text-muted px-4 py-4 text-center text-sm">Loading…</div>}
{hasMore && !isLoading && logs.length > 0 && (
<div className="border-border-muted border-t px-4 py-3 text-center">
<Button variant="ghost" size="sm" onClick={loadMore}>
Load more
</Button>
</div>
)}
</div>
</div>
);
}

View File

@@ -1,6 +1,7 @@
'use client';
import type { EventConfig, Session } from '@/lib/schemas/config';
import { TRACKS } from '@/lib/constants/tracks';
interface EventConfigEditorProps {
formData: EventConfig;
@@ -69,31 +70,11 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
onChange={(e) => handleInputChange('track', e.target.value)}
className="form-select w-full"
>
<option value="barcelona">Barcelona</option>
<option value="brands_hatch">Brands Hatch</option>
<option value="donington">Donington</option>
<option value="cota">COTA</option>
<option value="hungaroring">Hungaroring</option>
<option value="imola">Imola</option>
<option value="indianapolis">Indianapolis</option>
<option value="kyalami">Kyalami</option>
<option value="laguna_seca">Laguna Seca</option>
<option value="misano">Misano</option>
<option value="monza">Monza</option>
<option value="mount_panorama">Mount Panorama</option>
<option value="nurburgring">Nurburgring</option>
<option value="nurburgring_24h">Nurburgring 24h</option>
<option value="oulton_park">Oulton Park</option>
<option value="paul_ricard">Paul Ricard</option>
<option value="red_bull_ring">Red Bull Ring</option>
<option value="silverstone">Silverstone</option>
<option value="snetterton">Snetterton</option>
<option value="spa">Spa-Francorchamps</option>
<option value="suzuka">Suzuka</option>
<option value="valencia">Valencia</option>
<option value="zandvoort">Zandvoort</option>
<option value="zolder">Zolder</option>
<option value="watkins_glen">Watkins Glen</option>
{Object.entries(TRACKS).map(([key, name]) => (
<option key={key} value={key}>
{name}
</option>
))}
</select>
</div>
@@ -107,7 +88,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
value={formData.preRaceWaitingTimeSeconds}
onChange={(e) => handleInputChange('preRaceWaitingTimeSeconds', e.target.value)}
className="form-input w-full"
min="0"
min="30"
/>
</div>

View File

@@ -9,12 +9,6 @@ interface EventRulesEditorProps {
}
const numberFields = [
{
key: 'qualifyStandingType' as keyof EventRules,
label: 'Qualify Standing Type',
min: -1,
max: 1
},
{
key: 'pitWindowLengthSec' as keyof EventRules,
label: 'Pit Window Length (seconds)',
@@ -28,7 +22,7 @@ const numberFields = [
{
key: 'mandatoryPitstopCount' as keyof EventRules,
label: 'Mandatory Pitstop Count',
min: -1,
min: 0,
max: 5
},
{
@@ -36,6 +30,12 @@ const numberFields = [
label: 'Max Total Driving Time (seconds)',
min: -1
},
{
key: 'maxDriversCount' as keyof EventRules,
label: 'Max Drivers Count',
min: 1,
max: 10
},
{
key: 'tyreSetCount' as keyof EventRules,
label: 'Tyre Set Count',
@@ -77,6 +77,18 @@ export function EventRulesEditor({ formData, disabled, onFormDataChange }: Event
<div className="space-y-6">
<h3 className="border-b border-border-muted pb-2 text-sm font-semibold text-primary">Race Rules</h3>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<label className="mb-1.5 block text-sm font-medium text-secondary">Qualify Standing Type</label>
<select
disabled={disabled}
value={formData.qualifyStandingType}
onChange={(e) => handleInputChange('qualifyStandingType', parseInt(e.target.value))}
className="form-select w-full"
>
<option value={1}>Fastest Lap</option>
<option value={2}>Average Lap</option>
</select>
</div>
{numberFields.map(({ key, label, min, max }) => (
<div key={key}>
<label className="mb-1.5 block text-sm font-medium text-secondary">{label}</label>

View File

@@ -42,7 +42,7 @@ const numberFields = [
{
key: 'trackMedalsRequirement' as keyof ServerSettings,
label: 'Track Medals Requirement',
min: -1,
min: 0,
max: 3
},
{
@@ -80,6 +80,10 @@ const selectFields = [
key: 'shortFormationLap' as keyof ServerSettings,
label: 'Short Formation Lap'
},
{
key: 'dumpEntryList' as keyof ServerSettings,
label: 'Dump Entry List'
},
{
key: 'ignorePrematureDisconnects' as keyof ServerSettings,
label: 'Ignore Premature Disconnects'

View File

@@ -3,6 +3,7 @@
import Link from 'next/link';
import { useTransition } from 'react';
import { Server, ServiceStatus, serviceStatusToString } from '@/lib/schemas';
import { getTrackDisplayName } from '@/lib/constants/tracks';
import {
startServerEventAction,
restartServerEventAction,
@@ -55,8 +56,8 @@ export function ServerCard({ server }: ServerCardProps) {
const isRunning = server.status === ServiceStatus.Running;
return (
<div className="overflow-hidden rounded-lg border border-border bg-canvas transition-colors hover:border-blue/40">
<Link href={`/dashboard/server/${server.id}`} className="block p-4">
<div className="flex flex-col overflow-hidden rounded-lg border border-border bg-canvas transition-colors hover:border-blue/40">
<Link href={`/dashboard/server/${server.id}`} className="flex flex-1 flex-col p-4">
<div className="flex items-start justify-between">
<span className="text-sm font-semibold text-primary">{server.name}</span>
<StatusDot status={server.status} />
@@ -72,15 +73,20 @@ export function ServerCard({ server }: ServerCardProps) {
<div>
<div className="text-xs text-subtle">Track</div>
<div className="truncate text-sm font-semibold text-primary">
{server.state?.track || 'N/A'}
{server.state?.track ? getTrackDisplayName(server.state.track) : 'N/A'}
</div>
</div>
</div>
<div className="mt-3">
<div className="mt-auto pt-3 flex items-center justify-between gap-2">
<Badge variant={statusBadgeVariant(server.status)}>
{serviceStatusToString(server.status)}
</Badge>
{server.lastActivity && (
<span className="truncate text-xs text-subtle">
by {server.lastActivity.username}
</span>
)}
</div>
</Link>

View File

@@ -1,6 +1,6 @@
'use client';
import { Configurations, ServerTab } from '@/lib/schemas/config';
import { type Configurations, ServerTab } from '@/lib/schemas/config';
import { ConfigurationEditor } from '@/components/configuration/ConfigurationEditor';
import { AssistRulesEditor } from '@/components/configuration/AssistRulesEditor';
import { EventConfigEditor } from '@/components/configuration/EventConfigEditor';
@@ -8,6 +8,8 @@ import { EventRulesEditor } from '@/components/configuration/EventRulesEditor';
import { ServerSettingsEditor } from '@/components/configuration/ServerSettingsEditor';
import { StatisticsDashboard } from '@/components/statistics/StatisticsDashboard';
import { LeaderboardManager } from '@/components/leaderboard/LeaderboardManager';
import { ActivityLogTable } from '@/components/activityLog/ActivityLogTable';
import { ServerLogViewer } from '@/components/server/ServerLogViewer';
import { useState } from 'react';
import { StateHistoryStats } from '@/lib/schemas';
import { Leaderboard } from '@/lib/schemas/leaderboard';
@@ -26,7 +28,9 @@ const tabs = [
{ id: ServerTab.event, name: 'Event Config', icon: '🏁' },
{ id: ServerTab.eventRules, name: 'Event Rules', icon: '📋' },
{ id: ServerTab.settings, name: 'Server Settings', icon: '🔧' },
{ id: ServerTab.leaderboard, name: 'Leaderboard', icon: '🏆' }
{ id: ServerTab.leaderboard, name: 'Leaderboard', icon: '🏆' },
{ id: ServerTab.activityLog, name: 'History', icon: '📋' },
{ id: ServerTab.logs, name: 'Logs', icon: '📄' }
];
const configTabs = new Set([
@@ -50,30 +54,34 @@ export function ServerConfigurationTabs({
const [eventData, setEventData] = useState(configurations.event);
const [eventRulesData, setEventRulesData] = useState(configurations.eventRules);
const [settingsData, setSettingsData] = useState(configurations.settings);
const [dirtyConfigs, setDirtyConfigs] = useState<Set<keyof Configurations>>(new Set());
const [restart, setRestart] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const [saveSuccess, setSaveSuccess] = useState(false);
const markDirty = (key: keyof Configurations) =>
setDirtyConfigs((prev) => new Set(prev).add(key));
const handleSaveAll = async () => {
if (dirtyConfigs.size === 0) return;
setIsSubmitting(true);
setSaveError(null);
setSaveSuccess(false);
const result = await bulkUpdateConfigurationsAction(
serverId,
{
configuration: configData,
assistRules: assistData,
event: eventData,
eventRules: eventRulesData,
settings: settingsData
},
restart
);
const payload: Partial<Configurations> = {};
if (dirtyConfigs.has('configuration')) payload.configuration = configData;
if (dirtyConfigs.has('assistRules')) payload.assistRules = assistData;
if (dirtyConfigs.has('event')) payload.event = eventData;
if (dirtyConfigs.has('eventRules')) payload.eventRules = eventRulesData;
if (dirtyConfigs.has('settings')) payload.settings = settingsData;
const result = await bulkUpdateConfigurationsAction(serverId, payload, restart);
if (result.success) {
setDirtyConfigs(new Set());
setSaveSuccess(true);
setTimeout(() => setSaveSuccess(false), 3000);
} else {
@@ -95,7 +103,7 @@ export function ServerConfigurationTabs({
<ConfigurationEditor
formData={configData}
disabled={isSubmitting}
onFormDataChange={setConfigData}
onFormDataChange={(data) => { setConfigData(data); markDirty('configuration'); }}
/>
);
@@ -104,7 +112,7 @@ export function ServerConfigurationTabs({
<AssistRulesEditor
formData={assistData}
disabled={isSubmitting}
onFormDataChange={setAssistData}
onFormDataChange={(data) => { setAssistData(data); markDirty('assistRules'); }}
/>
);
@@ -113,7 +121,7 @@ export function ServerConfigurationTabs({
<EventConfigEditor
formData={eventData}
disabled={isSubmitting}
onFormDataChange={setEventData}
onFormDataChange={(data) => { setEventData(data); markDirty('event'); }}
/>
);
@@ -122,7 +130,7 @@ export function ServerConfigurationTabs({
<EventRulesEditor
formData={eventRulesData}
disabled={isSubmitting}
onFormDataChange={setEventRulesData}
onFormDataChange={(data) => { setEventRulesData(data); markDirty('eventRules'); }}
/>
);
@@ -131,13 +139,19 @@ export function ServerConfigurationTabs({
<ServerSettingsEditor
formData={settingsData}
disabled={isSubmitting}
onFormDataChange={setSettingsData}
onFormDataChange={(data) => { setSettingsData(data); markDirty('settings'); }}
/>
);
case ServerTab.leaderboard:
return <LeaderboardManager serverId={serverId} initialData={leaderboard} />;
case ServerTab.activityLog:
return <ActivityLogTable serverId={serverId} />;
case ServerTab.logs:
return <ServerLogViewer serverId={serverId} />;
default:
return (
<div className="py-12 text-center">
@@ -193,7 +207,7 @@ export function ServerConfigurationTabs({
</label>
<button
onClick={handleSaveAll}
disabled={isSubmitting}
disabled={isSubmitting || dirtyConfigs.size === 0}
className="rounded-md bg-btn-green border border-btn-green px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-btn-green-hover disabled:cursor-not-allowed disabled:opacity-40"
>
{isSubmitting ? 'Saving…' : 'Save All'}

View File

@@ -1,6 +1,7 @@
'use client';
import Link from 'next/link';
import { Server, serviceStatusToString, ServiceStatus } from '@/lib/schemas/server';
import { getTrackDisplayName } from '@/lib/constants/tracks';
import {
startServerEventAction,
restartServerEventAction,
@@ -72,7 +73,7 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
<div className="flex flex-wrap gap-6 border-b border-border-muted px-5 py-3">
{[
{ label: 'Track', value: server.state?.track ?? 'N/A' },
{ label: 'Track', value: server.state?.track ? getTrackDisplayName(server.state.track) : 'N/A' },
{ label: 'Players', value: `${server.state?.playerCount ?? 0} / ${server.state?.maxConnections ?? 0}` },
{ label: 'Session', value: server.state?.session ?? 'N/A' },
].map(({ label, value }) => (

View File

@@ -60,7 +60,7 @@ export function ServerListWithActions({ servers, user }: ServerListWithActionsPr
{/* Card grid — desktop only */}
<div
className="hidden gap-3 md:grid"
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))' }}
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(420px, 1fr))' }}
>
{servers.map((server) => (
<ServerCard key={server.id} server={server} />

View File

@@ -0,0 +1,153 @@
'use client';
import { useEffect, useRef, useState, useCallback } from 'react';
import { useWebSocket } from '@/lib/websocket/context';
import type { WebSocketMessage } from '@/lib/schemas/websocket';
import { getServerLogAction } from '@/lib/actions/serverLog';
const MAX_BUFFER = 5000;
const LINE_OPTIONS = [100, 500, 1000, 5000] as const;
interface ServerLogViewerProps {
serverId: string;
}
export function ServerLogViewer({ serverId }: ServerLogViewerProps) {
const [lines, setLines] = useState<string[]>([]);
const [initialLines, setInitialLines] = useState<number>(100);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [isPaused, setIsPaused] = useState(false);
const { associateWithServer, addMessageHandler, removeMessageHandler } = useWebSocket();
const scrollRef = useRef<HTMLDivElement>(null);
const isPausedRef = useRef(false);
const appendLines = useCallback((newLines: string[]) => {
setLines((prev) => {
const combined = [...prev, ...newLines];
return combined.length > MAX_BUFFER ? combined.slice(combined.length - MAX_BUFFER) : combined;
});
}, []);
const fetchInitial = useCallback(
async (count: number) => {
setIsLoading(true);
setError(null);
const result = await getServerLogAction(serverId, count);
setIsLoading(false);
if (!result.success) {
setError(result.message);
return;
}
setLines(result.lines);
},
[serverId]
);
useEffect(() => {
associateWithServer(serverId);
fetchInitial(initialLines);
}, [serverId, associateWithServer, fetchInitial, initialLines]);
const handleMessage = useCallback(
(message: WebSocketMessage) => {
if (message.type !== 'log_line') return;
if (message.server_id !== serverId) return;
appendLines([message.data.line]);
},
[serverId, appendLines]
);
useEffect(() => {
addMessageHandler(handleMessage);
return () => {
removeMessageHandler(handleMessage);
};
}, [addMessageHandler, removeMessageHandler, handleMessage]);
// Auto-scroll to bottom when new lines arrive, unless paused
useEffect(() => {
if (!isPausedRef.current && scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [lines]);
const handleScroll = () => {
if (!scrollRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
const isAtBottom = scrollHeight - scrollTop - clientHeight < 40;
const shouldPause = !isAtBottom;
isPausedRef.current = shouldPause;
setIsPaused(shouldPause);
};
const jumpToBottom = () => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
isPausedRef.current = false;
setIsPaused(false);
};
const handleLineLimitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const count = Number(e.target.value);
setInitialLines(count);
};
return (
<div className="flex flex-col gap-3">
<div className="flex items-center gap-3">
<label className="text-xs text-subtle">Initial lines</label>
<select
value={initialLines}
onChange={handleLineLimitChange}
className="form-input w-28 text-sm"
>
{LINE_OPTIONS.map((n) => (
<option key={n} value={n}>
{n}
</option>
))}
</select>
<span className="ml-auto text-xs text-subtle">{lines.length} lines buffered</span>
</div>
{error && <p className="text-sm text-red">{error}</p>}
<div className="relative">
<div
ref={scrollRef}
onScroll={handleScroll}
className="h-[calc(100vh-280px)] min-h-64 overflow-y-auto rounded-lg border border-border bg-base p-3 font-mono text-xs text-secondary"
>
{isLoading ? (
<span className="text-muted">Loading…</span>
) : lines.length === 0 ? (
<span className="text-muted">No log output yet.</span>
) : (
lines.map((line, i) => (
<div key={i} className="leading-5 whitespace-pre-wrap break-all">
{line}
</div>
))
)}
</div>
{isPaused && (
<div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2">
<div className="flex items-center gap-2 rounded-full border border-border bg-overlay px-3 py-1.5 shadow-lg">
<span className="text-xs text-muted">Paused</span>
<button
onClick={jumpToBottom}
className="text-xs font-medium text-blue hover:underline"
>
Jump to bottom
</button>
</div>
</div>
)}
</div>
</div>
);
}

View File

@@ -4,6 +4,7 @@ import { useTransition } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Server, ServiceStatus } from '@/lib/schemas';
import { getTrackDisplayName } from '@/lib/constants/tracks';
import {
startServerEventAction,
restartServerEventAction,
@@ -51,7 +52,7 @@ export function ServerRow({ server }: ServerRowProps) {
<div className="min-w-0">
<div className="truncate text-sm font-semibold text-primary">{server.name}</div>
<div className="truncate text-xs text-muted">
{server.state?.track ?? 'No track'} · {server.state?.playerCount ?? 0} players
{server.state?.track ? getTrackDisplayName(server.state.track) : 'No track'} · {server.state?.playerCount ?? 0} players
</div>
</div>
</Link>

View File

@@ -1,3 +1,5 @@
import { getTrackDisplayName } from '@/lib/constants/tracks';
interface RecentSession {
id: string;
date: string;
@@ -70,7 +72,7 @@ export function RecentSessions({ sessions }: RecentSessionsProps) {
{session.type === 'R' ? 'Race' : session.type === 'Q' ? 'Qualify' : 'Practice'}
</span>
</td>
<td className="px-4 py-3 text-sm text-secondary">{session.track}</td>
<td className="px-4 py-3 text-sm text-secondary">{getTrackDisplayName(session.track)}</td>
<td className="px-4 py-3 text-sm text-muted">
{formatDuration(session.duration)}
</td>

View File

@@ -44,10 +44,25 @@ function UsersIcon({ active }: { active: boolean }) {
);
}
function ActivityLogIcon({ active }: { active: boolean }) {
return (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
className={cn('h-5 w-5', active ? 'text-blue' : 'text-subtle')}
>
<path d="M9 12h6M9 16h6M9 8h6M5 4h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1z" />
</svg>
);
}
export function Sidebar({ showUsers }: SidebarProps) {
const pathname = usePathname();
const isServers = pathname === '/dashboard' || pathname.startsWith('/dashboard/server');
const isUsers = pathname.startsWith('/dashboard/membership');
const isActivityLog = pathname.startsWith('/dashboard/activity-log');
const navItems = [
{
@@ -56,6 +71,12 @@ export function Sidebar({ showUsers }: SidebarProps) {
active: isServers,
icon: <ServerIcon active={isServers} />
},
{
href: '/dashboard/activity-log',
label: 'Activity Log',
active: isActivityLog,
icon: <ActivityLogIcon active={isActivityLog} />
},
...(showUsers
? [
{

View File

@@ -0,0 +1,20 @@
'use server';
import { requireAuth } from '@/lib/auth/server';
import { getActivityLog } from '@/lib/api/server/activityLog';
import type { ActivityLog, ActivityLogFilter } from '@/lib/schemas/activityLog';
export async function getActivityLogAction(
filter?: ActivityLogFilter
): Promise<{ success: true; data: ActivityLog[] } | { success: false; message: string }> {
try {
const session = await requireAuth();
const data = await getActivityLog(session.token!, filter);
return { success: true, data };
} catch (error) {
return {
success: false,
message: error instanceof Error ? error.message : 'Failed to fetch activity log'
};
}
}

View File

@@ -114,6 +114,7 @@ export async function updateServerSettingsAction(serverId: string, formData: For
centralEntryListPath: formData.get('centralEntryListPath') as string,
allowAutoDQ: parseInt(formData.get('allowAutoDQ') as string),
shortFormationLap: parseInt(formData.get('shortFormationLap') as string),
dumpEntryList: parseInt(formData.get('dumpEntryList') as string),
formationLapType: parseInt(formData.get('formationLapType') as string),
ignorePrematureDisconnects: parseInt(formData.get('ignorePrematureDisconnects') as string)
};
@@ -201,6 +202,7 @@ export async function updateEventRulesAction(serverId: string, formData: FormDat
driverStintTimeSec: parseInt(formData.get('driverStintTimeSec') as string),
mandatoryPitstopCount: parseInt(formData.get('mandatoryPitstopCount') as string),
maxTotalDrivingTime: parseInt(formData.get('maxTotalDrivingTime') as string),
maxDriversCount: parseInt(formData.get('maxDriversCount') as string),
isRefuellingAllowedInRace: boolToInt(formData.get('isRefuellingAllowedInRace') === 'true'),
isRefuellingTimeFixed: boolToInt(formData.get('isRefuellingTimeFixed') === 'true'),
isMandatoryPitstopRefuellingRequired:
@@ -237,13 +239,13 @@ export async function updateEventRulesAction(serverId: string, formData: FormDat
export async function bulkUpdateConfigurationsAction(
serverId: string,
configs: Configurations,
configs: Partial<Configurations>,
restart: boolean
) {
try {
const session = await requireAuth();
const validated = configurationsSchema.safeParse(configs);
const validated = configurationsSchema.partial().safeParse(configs);
if (!validated.success) {
return { success: false, message: validated.error.message };
}

View File

@@ -0,0 +1,20 @@
'use server';
import { requireAuth } from '@/lib/auth/server';
import { getServerLog } from '@/lib/api/server/serverLog';
export async function getServerLogAction(
serverId: string,
lines: number = 100
): Promise<{ success: true; lines: string[] } | { success: false; message: string }> {
try {
const session = await requireAuth();
const data = await getServerLog(session.token!, serverId, lines);
return { success: true, lines: data };
} catch (error) {
return {
success: false,
message: error instanceof Error ? error.message : 'Failed to fetch server log'
};
}
}

View File

@@ -0,0 +1,31 @@
import { fetchServerAPI } from './base';
import {
activityLogSchema,
type ActivityLog,
type ActivityLogFilter
} from '@/lib/schemas/activityLog';
function buildQuery(filter?: ActivityLogFilter): string {
if (!filter) return '';
const params = new URLSearchParams();
if (filter.page !== undefined) params.set('page', String(filter.page));
if (filter.page_size !== undefined) params.set('page_size', String(filter.page_size));
if (filter.sort_by) params.set('sort_by', filter.sort_by);
if (filter.sort_desc !== undefined) params.set('sort_desc', String(filter.sort_desc));
if (filter.user_id) params.set('user_id', filter.user_id);
if (filter.server_id) params.set('server_id', filter.server_id);
if (filter.action) params.set('action', filter.action);
if (filter.start_date) params.set('start_date', filter.start_date);
if (filter.end_date) params.set('end_date', filter.end_date);
const str = params.toString();
return str ? `?${str}` : '';
}
export async function getActivityLog(
token: string,
filter?: ActivityLogFilter
): Promise<ActivityLog[]> {
const query = buildQuery(filter);
const response = await fetchServerAPI<ActivityLog[]>(`/activity-log${query}`, token);
return activityLogSchema.array().parse(response.data);
}

View File

@@ -67,7 +67,7 @@ export async function updateServerConfiguration(
export async function bulkUpdateServerConfigurations(
token: string,
serverId: string,
configs: Configurations,
configs: Partial<Configurations>,
restart = false
): Promise<void> {
await fetchServerAPI<ConfigAuditRecord[]>(

View File

@@ -0,0 +1,13 @@
import { fetchServerAPI } from './base';
export async function getServerLog(
token: string,
serverId: string,
lines: number = 100
): Promise<string[]> {
const response = await fetchServerAPI<{ lines: string[] }>(
`/server/${serverId}/log?lines=${lines}`,
token
);
return response.data?.lines ?? [];
}

View File

@@ -0,0 +1,31 @@
export const TRACKS: Record<string, string> = {
barcelona: 'Barcelona',
brands_hatch: 'Brands Hatch',
cota: 'COTA',
donington: 'Donington',
hungaroring: 'Hungaroring',
imola: 'Imola',
indianapolis: 'Indianapolis',
kyalami: 'Kyalami',
laguna_seca: 'Laguna Seca',
misano: 'Misano',
monza: 'Monza',
mount_panorama: 'Mount Panorama',
nurburgring: 'Nürburgring',
nurburgring_24h: 'Nürburgring 24h',
oulton_park: 'Oulton Park',
paul_ricard: 'Paul Ricard',
red_bull_ring: 'Red Bull Ring',
silverstone: 'Silverstone',
snetterton: 'Snetterton',
spa: 'Spa-Francorchamps',
suzuka: 'Suzuka',
valencia: 'Valencia',
watkins_glen: 'Watkins Glen',
zandvoort: 'Zandvoort',
zolder: 'Zolder'
};
export function getTrackDisplayName(key: string): string {
return TRACKS[key] ?? key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
}

View File

@@ -0,0 +1,62 @@
import * as z from 'zod';
export const actionTypeSchema = z.enum([
'config_update',
'server_start',
'server_stop',
'server_restart',
'leaderboard_update'
]);
export type ActionType = z.infer<typeof actionTypeSchema>;
// Minimal server shape embedded in activity log responses (avoids circular import with server.ts)
const embeddedServerSchema = z.object({
id: z.string(),
name: z.string()
}).passthrough();
export type EmbeddedServer = z.infer<typeof embeddedServerSchema>;
export const activityLogSchema = z.object({
id: z.string(),
serverId: z.string(),
server: embeddedServerSchema.optional(),
userId: z.string(),
username: z.string(),
action: actionTypeSchema,
details: z.string(),
createdAt: z.string()
});
export type ActivityLog = z.infer<typeof activityLogSchema>;
export const lastActivityInfoSchema = z.object({
updatedAt: z.string(),
username: z.string(),
action: actionTypeSchema
});
export type LastActivityInfo = z.infer<typeof lastActivityInfoSchema>;
export const activityLogFilterSchema = z.object({
page: z.number().optional(),
page_size: z.number().optional(),
sort_by: z.string().optional(),
sort_desc: z.boolean().optional(),
user_id: z.string().optional(),
server_id: z.string().optional(),
action: actionTypeSchema.optional(),
start_date: z.string().optional(),
end_date: z.string().optional()
});
export type ActivityLogFilter = z.infer<typeof activityLogFilterSchema>;
export const ACTION_TYPE_LABELS: Record<ActionType, string> = {
config_update: 'Config Update',
server_start: 'Server Start',
server_stop: 'Server Stop',
server_restart: 'Server Restart',
leaderboard_update: 'Leaderboard Update'
};

View File

@@ -16,7 +16,9 @@ export enum ServerTab {
event = 'event',
eventRules = 'eventRules',
settings = 'settings',
leaderboard = 'leaderboard'
leaderboard = 'leaderboard',
activityLog = 'activityLog',
logs = 'logs'
}
export const serverTabSchema = z.enum(ServerTab);
@@ -49,7 +51,7 @@ export const serverSettingsSchema = z.object({
serverName: z.string().min(3).max(150),
adminPassword: z.string().min(6).max(50).or(z.literal('').nullable()),
carGroup: z.string().min(1).max(50),
trackMedalsRequirement: z.number().min(-1).max(3),
trackMedalsRequirement: z.number().min(0).max(3),
safetyRatingRequirement: z.number().min(-1).max(99),
racecraftRatingRequirement: z.number().min(-1).max(99),
password: z.string().max(50).optional().or(z.literal('')),
@@ -61,16 +63,17 @@ export const serverSettingsSchema = z.object({
centralEntryListPath: z.string().max(255).optional().or(z.literal('')),
allowAutoDQ: z.number().min(0).max(1).default(0),
shortFormationLap: z.number().min(0).max(1).default(0),
formationLapType: z.number().min(0).max(3).default(0),
ignorePrematureDisconnects: z.number().min(0).max(1).default(0)
dumpEntryList: z.number().min(0).max(1).default(0),
formationLapType: z.number().min(0).max(3).default(3),
ignorePrematureDisconnects: z.number().min(0).max(1).default(1)
});
export type ServerSettings = z.infer<typeof serverSettingsSchema>;
export const sessionSchema = z.object({
hourOfDay: z.number().min(1).max(24).default(14),
hourOfDay: z.number().min(0).max(23).default(14),
dayOfWeekend: z.number().min(1).max(3).default(1),
timeMultiplier: z.number().min(1).max(120).default(1),
timeMultiplier: z.number().min(0).max(24).default(1),
sessionType: z.string().min(1).max(20),
sessionDurationMinutes: z.number().min(1).max(180).default(20)
});
@@ -79,7 +82,7 @@ export type Session = z.infer<typeof sessionSchema>;
export const eventConfigSchema = z.object({
track: z.string().min(1).max(100),
preRaceWaitingTimeSeconds: z.number().min(0).max(600).default(30),
preRaceWaitingTimeSeconds: z.number().min(30).max(600).default(30),
sessionOverTimeSeconds: z.number().min(0).max(300).default(30),
ambientTemp: z.number().min(0).max(50).default(24),
cloudLevel: z.number().min(0).max(1).default(0),
@@ -95,17 +98,18 @@ export const eventConfigSchema = z.object({
export type EventConfig = z.infer<typeof eventConfigSchema>;
export const eventRulesSchema = z.object({
qualifyStandingType: z.number().min(-1).max(1).default(0),
pitWindowLengthSec: z.number().min(-1).max(3600).default(30),
driverStintTimeSec: z.number().min(-1).max(7200).default(30),
mandatoryPitstopCount: z.number().min(-1).max(5).default(0),
maxTotalDrivingTime: z.number().min(-1).max(14400).default(60),
isRefuellingAllowedInRace: z.number().min(0).max(1).default(0),
qualifyStandingType: z.number().min(1).max(2).default(1),
pitWindowLengthSec: z.number().min(-1).max(3600).default(-1),
driverStintTimeSec: z.number().min(-1).max(7200).default(-1),
mandatoryPitstopCount: z.number().min(0).max(5).default(0),
maxTotalDrivingTime: z.number().min(-1).max(14400).default(-1),
maxDriversCount: z.number().min(1).max(10).default(1),
isRefuellingAllowedInRace: z.number().min(0).max(1).default(1),
isRefuellingTimeFixed: z.number().min(0).max(1).default(0),
isMandatoryPitstopRefuellingRequired: z.number().min(0).max(1).default(0),
isMandatoryPitstopTyreChangeRequired: z.number().min(0).max(1).default(0),
isMandatoryPitstopSwapDriverRequired: z.number().min(0).max(1).default(0),
tyreSetCount: z.number().min(0).max(50).default(0)
tyreSetCount: z.number().min(0).max(50).default(50)
});
export type EventRules = z.infer<typeof eventRulesSchema>;

View File

@@ -4,3 +4,4 @@ export * from './config';
export * from './statistics';
export * from './lookups';
export * from './leaderboard';
export * from './activityLog';

View File

@@ -1,4 +1,5 @@
import * as z from 'zod';
import { lastActivityInfoSchema } from './activityLog';
export enum ServiceStatus {
Unknown,
@@ -57,7 +58,8 @@ export const serverSchema = z.object({
id: z.uuid(),
name: z.string().min(1),
status: z.enum(ServiceStatus),
state: stateSchema.optional().nullable()
state: stateSchema.optional().nullable(),
lastActivity: lastActivityInfoSchema.optional().nullable()
});
export type Server = z.infer<typeof serverSchema>;

View File

@@ -44,6 +44,13 @@ export const completeDataSchema = z.object({
export type CompleteData = z.infer<typeof completeDataSchema>;
// Log line data schema
export const logLineDataSchema = z.object({
line: z.string()
});
export type LogLineData = z.infer<typeof logLineDataSchema>;
// WebSocket message schema using discriminated union
export const webSocketMessageSchema = z.discriminatedUnion('type', [
z.object({
@@ -69,6 +76,12 @@ export const webSocketMessageSchema = z.discriminatedUnion('type', [
server_id: z.string(),
timestamp: z.number(),
data: completeDataSchema
}),
z.object({
type: z.literal('log_line'),
server_id: z.string(),
timestamp: z.number(),
data: logLineDataSchema
})
]);