Compare commits
9 Commits
feature/re
...
9999f843e5
| Author | SHA1 | Date | |
|---|---|---|---|
| 9999f843e5 | |||
| 0153085180 | |||
| 9c23a720d1 | |||
| cc4afd2294 | |||
| 2d85b63775 | |||
| 36c31fa790 | |||
| c7ef3e9d27 | |||
| 50d8662904 | |||
| 5a4457d369 |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "acc-server-manager-web",
|
"name": "acc-server-manager-web",
|
||||||
"version": "0.20.2",
|
"version": "0.24.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev --turbopack",
|
"dev": "next dev --turbopack",
|
||||||
|
|||||||
16
src/app/dashboard/activity-log/page.tsx
Normal file
16
src/app/dashboard/activity-log/page.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
256
src/components/activityLog/ActivityLogTable.tsx
Normal file
256
src/components/activityLog/ActivityLogTable.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -77,10 +77,15 @@ export function ServerCard({ server }: ServerCardProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-3">
|
<div className="mt-3 flex items-center justify-between gap-2">
|
||||||
<Badge variant={statusBadgeVariant(server.status)}>
|
<Badge variant={statusBadgeVariant(server.status)}>
|
||||||
{serviceStatusToString(server.status)}
|
{serviceStatusToString(server.status)}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
{server.lastActivity && (
|
||||||
|
<span className="truncate text-xs text-subtle">
|
||||||
|
by {server.lastActivity.username}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,8 @@ import { EventRulesEditor } from '@/components/configuration/EventRulesEditor';
|
|||||||
import { ServerSettingsEditor } from '@/components/configuration/ServerSettingsEditor';
|
import { ServerSettingsEditor } from '@/components/configuration/ServerSettingsEditor';
|
||||||
import { StatisticsDashboard } from '@/components/statistics/StatisticsDashboard';
|
import { StatisticsDashboard } from '@/components/statistics/StatisticsDashboard';
|
||||||
import { LeaderboardManager } from '@/components/leaderboard/LeaderboardManager';
|
import { LeaderboardManager } from '@/components/leaderboard/LeaderboardManager';
|
||||||
|
import { ActivityLogTable } from '@/components/activityLog/ActivityLogTable';
|
||||||
|
import { ServerLogViewer } from '@/components/server/ServerLogViewer';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { StateHistoryStats } from '@/lib/schemas';
|
import { StateHistoryStats } from '@/lib/schemas';
|
||||||
import { Leaderboard } from '@/lib/schemas/leaderboard';
|
import { Leaderboard } from '@/lib/schemas/leaderboard';
|
||||||
@@ -26,7 +28,9 @@ const tabs = [
|
|||||||
{ id: ServerTab.event, name: 'Event Config', icon: '🏁' },
|
{ id: ServerTab.event, name: 'Event Config', icon: '🏁' },
|
||||||
{ id: ServerTab.eventRules, name: 'Event Rules', icon: '📋' },
|
{ id: ServerTab.eventRules, name: 'Event Rules', icon: '📋' },
|
||||||
{ id: ServerTab.settings, name: 'Server Settings', 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([
|
const configTabs = new Set([
|
||||||
@@ -138,6 +142,12 @@ export function ServerConfigurationTabs({
|
|||||||
case ServerTab.leaderboard:
|
case ServerTab.leaderboard:
|
||||||
return <LeaderboardManager serverId={serverId} initialData={leaderboard} />;
|
return <LeaderboardManager serverId={serverId} initialData={leaderboard} />;
|
||||||
|
|
||||||
|
case ServerTab.activityLog:
|
||||||
|
return <ActivityLogTable serverId={serverId} />;
|
||||||
|
|
||||||
|
case ServerTab.logs:
|
||||||
|
return <ServerLogViewer serverId={serverId} />;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return (
|
return (
|
||||||
<div className="py-12 text-center">
|
<div className="py-12 text-center">
|
||||||
|
|||||||
153
src/components/server/ServerLogViewer.tsx
Normal file
153
src/components/server/ServerLogViewer.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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) {
|
export function Sidebar({ showUsers }: SidebarProps) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const isServers = pathname === '/dashboard' || pathname.startsWith('/dashboard/server');
|
const isServers = pathname === '/dashboard' || pathname.startsWith('/dashboard/server');
|
||||||
const isUsers = pathname.startsWith('/dashboard/membership');
|
const isUsers = pathname.startsWith('/dashboard/membership');
|
||||||
|
const isActivityLog = pathname.startsWith('/dashboard/activity-log');
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
@@ -56,6 +71,12 @@ export function Sidebar({ showUsers }: SidebarProps) {
|
|||||||
active: isServers,
|
active: isServers,
|
||||||
icon: <ServerIcon active={isServers} />
|
icon: <ServerIcon active={isServers} />
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: '/dashboard/activity-log',
|
||||||
|
label: 'Activity Log',
|
||||||
|
active: isActivityLog,
|
||||||
|
icon: <ActivityLogIcon active={isActivityLog} />
|
||||||
|
},
|
||||||
...(showUsers
|
...(showUsers
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
|
|||||||
20
src/lib/actions/activityLog.ts
Normal file
20
src/lib/actions/activityLog.ts
Normal 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'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/lib/actions/serverLog.ts
Normal file
20
src/lib/actions/serverLog.ts
Normal 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'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/lib/api/server/activityLog.ts
Normal file
31
src/lib/api/server/activityLog.ts
Normal 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);
|
||||||
|
}
|
||||||
13
src/lib/api/server/serverLog.ts
Normal file
13
src/lib/api/server/serverLog.ts
Normal 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 ?? [];
|
||||||
|
}
|
||||||
62
src/lib/schemas/activityLog.ts
Normal file
62
src/lib/schemas/activityLog.ts
Normal 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'
|
||||||
|
};
|
||||||
@@ -16,7 +16,9 @@ export enum ServerTab {
|
|||||||
event = 'event',
|
event = 'event',
|
||||||
eventRules = 'eventRules',
|
eventRules = 'eventRules',
|
||||||
settings = 'settings',
|
settings = 'settings',
|
||||||
leaderboard = 'leaderboard'
|
leaderboard = 'leaderboard',
|
||||||
|
activityLog = 'activityLog',
|
||||||
|
logs = 'logs'
|
||||||
}
|
}
|
||||||
export const serverTabSchema = z.enum(ServerTab);
|
export const serverTabSchema = z.enum(ServerTab);
|
||||||
|
|
||||||
|
|||||||
@@ -4,3 +4,4 @@ export * from './config';
|
|||||||
export * from './statistics';
|
export * from './statistics';
|
||||||
export * from './lookups';
|
export * from './lookups';
|
||||||
export * from './leaderboard';
|
export * from './leaderboard';
|
||||||
|
export * from './activityLog';
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
|
import { lastActivityInfoSchema } from './activityLog';
|
||||||
|
|
||||||
export enum ServiceStatus {
|
export enum ServiceStatus {
|
||||||
Unknown,
|
Unknown,
|
||||||
@@ -57,7 +58,8 @@ export const serverSchema = z.object({
|
|||||||
id: z.uuid(),
|
id: z.uuid(),
|
||||||
name: z.string().min(1),
|
name: z.string().min(1),
|
||||||
status: z.enum(ServiceStatus),
|
status: z.enum(ServiceStatus),
|
||||||
state: stateSchema.optional().nullable()
|
state: stateSchema.optional().nullable(),
|
||||||
|
lastActivity: lastActivityInfoSchema.optional().nullable()
|
||||||
});
|
});
|
||||||
|
|
||||||
export type Server = z.infer<typeof serverSchema>;
|
export type Server = z.infer<typeof serverSchema>;
|
||||||
|
|||||||
@@ -44,6 +44,13 @@ export const completeDataSchema = z.object({
|
|||||||
|
|
||||||
export type CompleteData = z.infer<typeof completeDataSchema>;
|
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
|
// WebSocket message schema using discriminated union
|
||||||
export const webSocketMessageSchema = z.discriminatedUnion('type', [
|
export const webSocketMessageSchema = z.discriminatedUnion('type', [
|
||||||
z.object({
|
z.object({
|
||||||
@@ -69,6 +76,12 @@ export const webSocketMessageSchema = z.discriminatedUnion('type', [
|
|||||||
server_id: z.string(),
|
server_id: z.string(),
|
||||||
timestamp: z.number(),
|
timestamp: z.number(),
|
||||||
data: completeDataSchema
|
data: completeDataSchema
|
||||||
|
}),
|
||||||
|
z.object({
|
||||||
|
type: z.literal('log_line'),
|
||||||
|
server_id: z.string(),
|
||||||
|
timestamp: z.number(),
|
||||||
|
data: logLineDataSchema
|
||||||
})
|
})
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user