mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-29 22:06:38 +08:00
ryan
336 lines
11 KiB
TypeScript
336 lines
11 KiB
TypeScript
/*
|
|
Copyright 2026 Arctel.net
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
"use client"
|
|
|
|
import {useCallback, useEffect, useRef, useState} from "react"
|
|
import {toast} from "sonner"
|
|
import {ArrowDown, ChevronUp, Loader2, Pause, Play} from "lucide-react"
|
|
|
|
import {AdminService} from "@/lib/services"
|
|
import {ErrorInline} from "@/components/layout/error"
|
|
import {LoadingStateWithBorder} from "@/components/layout/loading"
|
|
import {Badge} from "@/components/ui/badge"
|
|
import {Button} from "@/components/ui/button"
|
|
|
|
interface LogEntry {
|
|
index: number
|
|
data: string
|
|
}
|
|
|
|
// Distance (px) from bottom to treat as "at bottom"
|
|
const BOTTOM_THRESHOLD = 40
|
|
|
|
function getApiBaseUrl(): string {
|
|
if (typeof window !== "undefined") {
|
|
// If NEXT_PUBLIC_WAVELET_BACKEND_URL is set, use it. Otherwise, use origin.
|
|
const base = process.env.NEXT_PUBLIC_WAVELET_BACKEND_URL || ""
|
|
if (base.startsWith("http")) return base
|
|
|
|
// Relative URL fallback
|
|
const proto = window.location.protocol
|
|
const host = window.location.host
|
|
return `${proto}//${host}${base}`
|
|
}
|
|
return process.env.NEXT_PUBLIC_WAVELET_BACKEND_URL || ""
|
|
}
|
|
|
|
function buildWsUrl(): string {
|
|
const base = getApiBaseUrl()
|
|
const wsBase = base.replace(/^http/, "ws")
|
|
return `${wsBase}/api/v1/admin/logs/ws`
|
|
}
|
|
|
|
function parseLogLevel(line: string): "debug" | "info" | "warn" | "error" | "unknown" {
|
|
const lower = line.toLowerCase()
|
|
if (lower.includes("\"level\":\"error\"") || lower.includes("level=error")) return "error"
|
|
if (lower.includes("\"level\":\"warn\"") || lower.includes("level=warn")) return "warn"
|
|
if (lower.includes("\"level\":\"debug\"") || lower.includes("level=debug")) return "debug"
|
|
if (lower.includes("\"level\":\"info\"") || lower.includes("level=info")) return "info"
|
|
return "unknown"
|
|
}
|
|
|
|
export function AppLogs() {
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<Error | null>(null)
|
|
|
|
const [logs, setLogs] = useState<LogEntry[]>([])
|
|
const [hasMore, setHasMore] = useState(false)
|
|
const [nextCursor, setNextCursor] = useState(0)
|
|
const [loadingMore, setLoadingMore] = useState(false)
|
|
|
|
const [connected, setConnected] = useState(false)
|
|
const [paused, setPaused] = useState(false)
|
|
|
|
// autoScroll = true → new logs auto-scroll to bottom
|
|
const [autoScroll, setAutoScroll] = useState(true)
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const wsRef = useRef<WebSocket | null>(null)
|
|
const pausedRef = useRef(paused)
|
|
const autoScrollRef = useRef(autoScroll)
|
|
const isUserScrolling = useRef(false)
|
|
|
|
useEffect(() => { pausedRef.current = paused }, [paused])
|
|
useEffect(() => { autoScrollRef.current = autoScroll }, [autoScroll])
|
|
|
|
// ---- Scroll detection ------------------------------------------------
|
|
const handleScroll = useCallback(() => {
|
|
const el = containerRef.current
|
|
if (!el) return
|
|
|
|
if (!isUserScrolling.current) return
|
|
|
|
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD
|
|
if (atBottom && !autoScrollRef.current) {
|
|
setAutoScroll(true)
|
|
} else if (!atBottom && autoScrollRef.current) {
|
|
setAutoScroll(false)
|
|
}
|
|
}, [])
|
|
|
|
const handleWheel = useCallback(() => { isUserScrolling.current = true }, [])
|
|
const handleTouchStart = useCallback(() => { isUserScrolling.current = true }, [])
|
|
|
|
useEffect(() => {
|
|
const el = containerRef.current
|
|
if (!el) return
|
|
|
|
let timer: ReturnType<typeof setTimeout>
|
|
const onScrollEnd = () => {
|
|
clearTimeout(timer)
|
|
timer = setTimeout(() => { isUserScrolling.current = false }, 150)
|
|
}
|
|
el.addEventListener("scroll", onScrollEnd, { passive: true })
|
|
return () => {
|
|
el.removeEventListener("scroll", onScrollEnd)
|
|
clearTimeout(timer)
|
|
}
|
|
}, [])
|
|
|
|
// ---- Auto-scroll to bottom when new logs arrive ----------------------
|
|
useEffect(() => {
|
|
if (!autoScroll || !containerRef.current) return
|
|
isUserScrolling.current = false
|
|
const el = containerRef.current
|
|
requestAnimationFrame(() => {
|
|
el.scrollTop = el.scrollHeight
|
|
})
|
|
}, [logs, autoScroll])
|
|
|
|
// ---- Data fetching ---------------------------------------------------
|
|
const fetchLogs = useCallback(async (cursor: number = 0) => {
|
|
try {
|
|
return await AdminService.getLogs(cursor)
|
|
} catch (err) {
|
|
throw err instanceof Error ? err : new Error("获取日志失败")
|
|
}
|
|
}, [])
|
|
|
|
const loadHistory = useCallback(async (cursor: number = 0) => {
|
|
const isInitial = cursor === 0
|
|
if (isInitial) {
|
|
setLoading(true)
|
|
setError(null)
|
|
} else {
|
|
setLoadingMore(true)
|
|
}
|
|
|
|
try {
|
|
const data = await fetchLogs(cursor)
|
|
if (isInitial) {
|
|
setLogs(data.lines || [])
|
|
} else {
|
|
setLogs(prev => [...(data.lines || []), ...prev])
|
|
|
|
requestAnimationFrame(() => {
|
|
const el = containerRef.current
|
|
if (!el) return
|
|
const newCount = (data.lines || []).length
|
|
const lineH = 20
|
|
isUserScrolling.current = false
|
|
el.scrollTop = el.scrollTop + newCount * lineH
|
|
})
|
|
}
|
|
setHasMore(data.has_more)
|
|
setNextCursor(data.next_cursor)
|
|
} catch (err) {
|
|
if (isInitial) {
|
|
setError(err instanceof Error ? err : new Error("获取日志失败"))
|
|
} else {
|
|
toast.error("加载更早日志失败")
|
|
}
|
|
} finally {
|
|
if (isInitial) setLoading(false)
|
|
else setLoadingMore(false)
|
|
}
|
|
}, [fetchLogs])
|
|
|
|
// ---- WebSocket -------------------------------------------------------
|
|
const connectWs = useCallback(() => {
|
|
if (wsRef.current) wsRef.current.close()
|
|
|
|
const ws = new WebSocket(buildWsUrl())
|
|
wsRef.current = ws
|
|
|
|
ws.onopen = () => { setConnected(true) }
|
|
|
|
ws.onmessage = (event) => {
|
|
if (pausedRef.current) return
|
|
try {
|
|
const msg = JSON.parse(event.data)
|
|
if (msg.type === "log" && msg.data) {
|
|
const entry: LogEntry = msg.data
|
|
setLogs(prev => {
|
|
const next = [...prev, entry]
|
|
return next.length > 2000 ? next.slice(-2000) : next
|
|
})
|
|
}
|
|
} catch { /* ignore */ }
|
|
}
|
|
|
|
ws.onclose = () => { setConnected(false); wsRef.current = null }
|
|
ws.onerror = () => { setConnected(false) }
|
|
}, [])
|
|
|
|
// ---- Initialize ------------------------------------------------------
|
|
useEffect(() => {
|
|
loadHistory(0).then(() => connectWs())
|
|
return () => {
|
|
wsRef.current?.close()
|
|
wsRef.current = null
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
// ---- Actions ---------------------------------------------------------
|
|
const scrollToBottom = useCallback(() => {
|
|
setAutoScroll(true)
|
|
requestAnimationFrame(() => {
|
|
if (containerRef.current) {
|
|
containerRef.current.scrollTop = containerRef.current.scrollHeight
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
const togglePause = useCallback(() => setPaused(p => !p), [])
|
|
const reconnect = useCallback(() => connectWs(), [connectWs])
|
|
const handleLoadMore = useCallback(() => {
|
|
if (nextCursor > 0) loadHistory(nextCursor)
|
|
}, [nextCursor, loadHistory])
|
|
|
|
// ---- Render ----------------------------------------------------------
|
|
if (loading) return <LoadingStateWithBorder />
|
|
if (error) return <ErrorInline error={error} onRetry={() => loadHistory(0)} />
|
|
|
|
return (
|
|
<div className="flex flex-col h-full relative">
|
|
{/* Sub Header / Control Bar */}
|
|
<div className="flex items-center justify-between pb-3 border-b border-border/40 mb-3">
|
|
<div className="text-sm text-muted-foreground font-medium">
|
|
系统后台实时输出的运行日志 (最多缓存 2000 行)
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant={connected ? "secondary" : "destructive"} className="h-6">
|
|
{connected ? "已连接" : "断开连接"}
|
|
</Badge>
|
|
{connected && (
|
|
<Button variant="outline" size="sm" onClick={togglePause} className="h-8">
|
|
{paused
|
|
? <><Play className="size-3.5 mr-1.5" />恢复</>
|
|
: <><Pause className="size-3.5 mr-1.5" />暂停</>
|
|
}
|
|
</Button>
|
|
)}
|
|
{!connected && (
|
|
<Button variant="outline" size="sm" onClick={reconnect} className="h-8">
|
|
重新连接
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Log viewer — fixed height, scrollable */}
|
|
<div
|
|
ref={containerRef}
|
|
onScroll={handleScroll}
|
|
onWheel={handleWheel}
|
|
onTouchStart={handleTouchStart}
|
|
className="h-[calc(100vh-270px)] overflow-y-auto overflow-x-hidden rounded-md border border-border/50 bg-[#0d1117] font-mono text-[13px] leading-5 relative"
|
|
>
|
|
{/* Load older logs */}
|
|
{hasMore && (
|
|
<div className="sticky top-0 z-10 flex justify-center py-1.5 bg-[#0d1117]/90 backdrop-blur-sm">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleLoadMore}
|
|
disabled={loadingMore}
|
|
className="text-muted-foreground hover:text-foreground h-7 text-xs"
|
|
>
|
|
{loadingMore
|
|
? <><Loader2 className="size-3 mr-1.5 animate-spin" />加载中...</>
|
|
: <><ChevronUp className="size-3 mr-1.5" />加载更早日志</>
|
|
}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Log lines */}
|
|
<div className="px-3 py-2">
|
|
{logs.length === 0 ? (
|
|
<div className="text-center text-gray-500 py-8">暂无日志</div>
|
|
) : (
|
|
logs.map((entry) => {
|
|
const level = parseLogLevel(entry.data)
|
|
const color = level === "error"
|
|
? "text-red-400"
|
|
: level === "warn"
|
|
? "text-yellow-400"
|
|
: level === "debug"
|
|
? "text-gray-500"
|
|
: "text-gray-300"
|
|
return (
|
|
<div
|
|
key={entry.index}
|
|
className={`${color} whitespace-pre-wrap break-all hover:bg-white/5`}
|
|
>
|
|
{entry.data}
|
|
</div>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating "back to latest" button */}
|
|
{!autoScroll && (
|
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={scrollToBottom}
|
|
className="shadow-lg bg-background/80 backdrop-blur-sm border-border/50"
|
|
>
|
|
<ArrowDown className="size-3.5 mr-1.5" />
|
|
回到最新
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|