mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-07 16:16:37 +08:00
clickhouse 日志采集
This commit is contained in:
ryan
@@ -1,334 +1,69 @@
|
||||
/*
|
||||
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, Terminal} from "lucide-react"
|
||||
import {Activity, BarChart3, Terminal} 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
|
||||
}
|
||||
|
||||
function getApiBaseUrl(): string {
|
||||
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"
|
||||
}
|
||||
|
||||
// Distance (px) from bottom to treat as "at bottom" — keeps auto-scroll
|
||||
// active even when the user's last row is a few pixels shy of the edge.
|
||||
const BOTTOM_THRESHOLD = 40
|
||||
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
|
||||
import {AppLogs} from "./app-logs"
|
||||
import {AccessLogs} from "./access-logs"
|
||||
import {AccessAnalytics} from "./access-analytics"
|
||||
|
||||
export function SystemLogs() {
|
||||
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
|
||||
// autoScroll = false → user is browsing history, lock scroll position
|
||||
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)
|
||||
|
||||
// Keep refs in sync for use inside callbacks without stale closures
|
||||
useEffect(() => { pausedRef.current = paused }, [paused])
|
||||
useEffect(() => { autoScrollRef.current = autoScroll }, [autoScroll])
|
||||
|
||||
// ---- Scroll detection ------------------------------------------------
|
||||
|
||||
// We distinguish programmatic scrolls (triggered by our own auto-scroll or
|
||||
// load-history offset fixup) from user-initiated scrolls by gating with
|
||||
// the `isUserScrolling` flag. Only a user scroll can toggle `autoScroll`.
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
const el = containerRef.current
|
||||
if (!el) return
|
||||
|
||||
// Ignore programmatic scrolls
|
||||
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)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Mark user-initiated scrolls
|
||||
const handleWheel = useCallback(() => { isUserScrolling.current = true }, [])
|
||||
|
||||
// Touch devices
|
||||
const handleTouchStart = useCallback(() => { isUserScrolling.current = true }, [])
|
||||
|
||||
// After the user stops scrolling, reset the flag so our programmatic
|
||||
// scrolls won't accidentally toggle autoScroll.
|
||||
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 {
|
||||
// Prepend older logs; keep the viewport showing the same content
|
||||
// by restoring the scroll offset after the DOM update.
|
||||
setLogs(prev => [...(data.lines || []), ...prev])
|
||||
|
||||
// Wait for React to render, then compensate scroll position
|
||||
requestAnimationFrame(() => {
|
||||
const el = containerRef.current
|
||||
if (!el) return
|
||||
// The number of new rows prepended × approximate line height
|
||||
const newCount = (data.lines || []).length
|
||||
const lineH = 20 // matches leading-5 ≈ 20px
|
||||
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">
|
||||
<div className="flex flex-col h-full space-y-4 py-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between pb-4 border-b border-border/50">
|
||||
<div className="flex items-center justify-between pb-4 border-b border-border/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="size-5 text-muted-foreground" />
|
||||
<h1 className="text-lg font-semibold">系统日志</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={connected ? "secondary" : "destructive"}>
|
||||
{connected ? "已连接" : "未连接"}
|
||||
</Badge>
|
||||
{connected && (
|
||||
<Button variant="outline" size="sm" onClick={togglePause}>
|
||||
{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}>
|
||||
重连
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Log viewer — fixed height, scrollable */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
onScroll={handleScroll}
|
||||
onWheel={handleWheel}
|
||||
onTouchStart={handleTouchStart}
|
||||
className="mt-3 h-[calc(100vh-220px)] 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>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">系统日志</h1>
|
||||
</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-24 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"
|
||||
>
|
||||
<ArrowDown className="size-3.5 mr-1.5" />
|
||||
回到最新
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{/* Tabs Layout */}
|
||||
<Tabs defaultValue="analytics" className="w-full flex-grow flex flex-col gap-2">
|
||||
<TabsList className="mb-2 w-full sm:w-auto">
|
||||
<TabsTrigger value="analytics" className="flex items-center gap-1.5 px-4">
|
||||
<BarChart3 className="size-3.5" />
|
||||
访问分析
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="access" className="flex items-center gap-1.5 px-4">
|
||||
<Activity className="size-3.5" />
|
||||
用户访问日志 (ClickHouse)
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="app" className="flex items-center gap-1.5 px-4">
|
||||
<Terminal className="size-3.5" />
|
||||
应用运行日志 (Console)
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="analytics" className="mt-0 outline-none flex-1">
|
||||
<AccessAnalytics />
|
||||
</TabsContent>
|
||||
<TabsContent value="access" className="mt-0 outline-none flex-1">
|
||||
<AccessLogs />
|
||||
</TabsContent>
|
||||
<TabsContent value="app" className="mt-0 outline-none flex-1">
|
||||
<AppLogs />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user