feat: add server-sent events for logging and activity tracking
- Implemented a custom tracing layer (`AppLogLayer`) to capture log events and broadcast them to SSE clients. - Created admin routes for streaming server logs and listing recent activity logs. - Added an activity log repository interface and SQLite implementation for persisting activity events. - Integrated activity logging into user authentication and channel CRUD operations. - Developed frontend components for displaying server logs and activity logs in the admin panel. - Enhanced the video player with a stats overlay for monitoring streaming metrics.
This commit is contained in:
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import type { ActivityEvent } from "@/lib/types";
|
||||
|
||||
const eventColors: Record<string, string> = {
|
||||
channel_created: "bg-green-900/40 text-green-400",
|
||||
channel_updated: "bg-blue-900/40 text-blue-400",
|
||||
channel_deleted: "bg-red-900/40 text-red-400",
|
||||
schedule_generated: "bg-violet-900/40 text-violet-400",
|
||||
user_login: "bg-zinc-800 text-zinc-400",
|
||||
};
|
||||
|
||||
function fmtTs(ts: string) {
|
||||
try {
|
||||
const d = new Date(ts);
|
||||
return d.toLocaleTimeString(undefined, { hour12: false });
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
interface ActivityLogPanelProps {
|
||||
events: ActivityEvent[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export function ActivityLogPanel({ events, isLoading }: ActivityLogPanelProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="border-b border-zinc-800 px-4 py-2.5">
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-violet-400">
|
||||
Activity
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{isLoading && events.length === 0 ? (
|
||||
<p className="mt-8 text-center text-xs text-zinc-600">Loading…</p>
|
||||
) : events.length === 0 ? (
|
||||
<p className="mt-8 text-center text-xs text-zinc-600">No activity yet.</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{events.map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="rounded-md border border-zinc-800 bg-zinc-900 p-3"
|
||||
>
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span
|
||||
className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${
|
||||
eventColors[event.event_type] ?? "bg-zinc-800 text-zinc-400"
|
||||
}`}
|
||||
>
|
||||
{event.event_type.replace(/_/g, " ")}
|
||||
</span>
|
||||
<span className="ml-auto font-mono text-[10px] text-zinc-600">
|
||||
{fmtTs(event.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-300">{event.detail}</p>
|
||||
{event.channel_id && (
|
||||
<p className="mt-0.5 font-mono text-[10px] text-zinc-600">
|
||||
ch: {event.channel_id.slice(0, 8)}…
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
k-tv-frontend/app/(main)/admin/components/server-logs-panel.tsx
Normal file
129
k-tv-frontend/app/(main)/admin/components/server-logs-panel.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { LogLine } from "@/lib/types";
|
||||
|
||||
const LEVELS = ["DEBUG", "INFO", "WARN", "ERROR"] as const;
|
||||
|
||||
const levelColor: Record<string, string> = {
|
||||
DEBUG: "text-zinc-500",
|
||||
INFO: "text-zinc-300",
|
||||
WARN: "text-yellow-400",
|
||||
ERROR: "text-red-400",
|
||||
};
|
||||
|
||||
interface ServerLogsPanelProps {
|
||||
lines: LogLine[];
|
||||
connected: boolean;
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export function ServerLogsPanel({ lines, connected, onClear }: ServerLogsPanelProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const [levelFilter, setLevelFilter] = useState<Set<string>>(
|
||||
new Set(["DEBUG", "INFO", "WARN", "ERROR"]),
|
||||
);
|
||||
|
||||
const filtered = lines.filter((l) => levelFilter.has(l.level.toUpperCase()));
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoScroll) return;
|
||||
scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
|
||||
}, [filtered.length, autoScroll]);
|
||||
|
||||
const toggleLevel = (level: string) => {
|
||||
setLevelFilter((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(level)) next.delete(level);
|
||||
else next.add(level);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
|
||||
setAutoScroll(atBottom);
|
||||
};
|
||||
|
||||
const fmtTime = (ts: string) => {
|
||||
if (!ts) return "";
|
||||
try {
|
||||
return new Date(ts).toLocaleTimeString(undefined, { hour12: false });
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 border-b border-zinc-800 px-4 py-2.5">
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-violet-400">
|
||||
Server Logs
|
||||
</span>
|
||||
<span
|
||||
className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${
|
||||
connected
|
||||
? "bg-green-900/40 text-green-400"
|
||||
: "bg-zinc-800 text-zinc-500"
|
||||
}`}
|
||||
>
|
||||
{connected ? "● live" : "○ disconnected"}
|
||||
</span>
|
||||
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
{LEVELS.map((lvl) => (
|
||||
<button
|
||||
key={lvl}
|
||||
onClick={() => toggleLevel(lvl)}
|
||||
className={`rounded px-2 py-0.5 text-[10px] font-medium transition-opacity ${
|
||||
levelFilter.has(lvl) ? "opacity-100" : "opacity-30"
|
||||
} ${levelColor[lvl] ?? "text-zinc-400"}`}
|
||||
>
|
||||
{lvl}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => {
|
||||
onClear();
|
||||
setAutoScroll(true);
|
||||
}}
|
||||
className="ml-2 rounded px-2 py-0.5 text-[10px] text-zinc-500 hover:text-zinc-300"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Log lines */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
className="flex-1 overflow-y-auto bg-zinc-950 px-4 py-2 font-mono text-[11px] leading-relaxed"
|
||||
>
|
||||
{filtered.length === 0 ? (
|
||||
<p className="mt-8 text-center text-zinc-600">
|
||||
{connected ? "Waiting for log events…" : "Connecting to server…"}
|
||||
</p>
|
||||
) : (
|
||||
filtered.map((line, i) => (
|
||||
<div key={i} className="flex gap-3">
|
||||
<span className="shrink-0 text-zinc-600">{fmtTime(line.timestamp)}</span>
|
||||
<span
|
||||
className={`w-10 shrink-0 font-semibold ${levelColor[line.level?.toUpperCase()] ?? "text-zinc-400"}`}
|
||||
>
|
||||
{line.level?.toUpperCase()}
|
||||
</span>
|
||||
<span className="shrink-0 text-zinc-500">{line.target}</span>
|
||||
<span className="text-zinc-200">{line.message}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div className="text-violet-400">{connected && lines.length > 0 ? "▋" : ""}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
k-tv-frontend/app/(main)/admin/page.tsx
Normal file
58
k-tv-frontend/app/(main)/admin/page.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuthContext } from "@/context/auth-context";
|
||||
import { useActivityLog, useServerLogs } from "@/hooks/use-admin";
|
||||
import { ServerLogsPanel } from "./components/server-logs-panel";
|
||||
import { ActivityLogPanel } from "./components/activity-log-panel";
|
||||
|
||||
export default function AdminPage() {
|
||||
const { token, isLoaded } = useAuthContext();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded && !token) {
|
||||
router.replace("/login");
|
||||
}
|
||||
}, [isLoaded, token, router]);
|
||||
|
||||
const { lines, connected } = useServerLogs(token);
|
||||
const [localLines, setLocalLines] = useState(lines);
|
||||
|
||||
// Sync external lines into local state so Clear can reset without clearing the hook
|
||||
useEffect(() => {
|
||||
setLocalLines(lines);
|
||||
}, [lines]);
|
||||
|
||||
const { data: events = [], isLoading } = useActivityLog(token);
|
||||
|
||||
if (!isLoaded || !token) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
{/* Page header */}
|
||||
<div className="flex items-center gap-3 border-b border-zinc-800 px-6 py-4">
|
||||
<h1 className="text-base font-semibold text-zinc-100">Admin</h1>
|
||||
<span className="text-xs text-zinc-500">System monitoring & logs</span>
|
||||
</div>
|
||||
|
||||
{/* Two-column layout */}
|
||||
<div className="flex min-h-0 flex-1 overflow-hidden">
|
||||
{/* Left: server logs */}
|
||||
<div className="flex min-w-0 flex-1 flex-col overflow-hidden border-r border-zinc-800">
|
||||
<ServerLogsPanel
|
||||
lines={localLines}
|
||||
connected={connected}
|
||||
onClear={() => setLocalLines([])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right: activity log */}
|
||||
<div className="flex w-80 shrink-0 flex-col overflow-hidden">
|
||||
<ActivityLogPanel events={events} isLoading={isLoading} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user