mirror of
https://github.com/YspCoder/clawgo.git
synced 2026-05-04 09:07:29 +08:00
fix logs
This commit is contained in:
@@ -14,6 +14,7 @@ import Memory from './pages/Memory';
|
||||
import TaskAudit from './pages/TaskAudit';
|
||||
import EKG from './pages/EKG';
|
||||
import Tasks from './pages/Tasks';
|
||||
import LogCodes from './pages/LogCodes';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
@@ -25,6 +26,7 @@ export default function App() {
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="chat" element={<Chat />} />
|
||||
<Route path="logs" element={<Logs />} />
|
||||
<Route path="log-codes" element={<LogCodes />} />
|
||||
<Route path="skills" element={<Skills />} />
|
||||
<Route path="config" element={<Config />} />
|
||||
<Route path="cron" element={<Cron />} />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { LayoutDashboard, MessageSquare, Settings, Clock, Server, Terminal, Zap, FolderOpen, ClipboardList, ListTodo, BrainCircuit } from 'lucide-react';
|
||||
import { LayoutDashboard, MessageSquare, Settings, Clock, Server, Terminal, Zap, FolderOpen, ClipboardList, ListTodo, BrainCircuit, Hash } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
import NavItem from './NavItem';
|
||||
@@ -15,6 +15,7 @@ const Sidebar: React.FC = () => {
|
||||
{ icon: <LayoutDashboard className="w-5 h-5" />, label: t('dashboard'), to: '/' },
|
||||
{ icon: <MessageSquare className="w-5 h-5" />, label: t('chat'), to: '/chat' },
|
||||
{ icon: <Terminal className="w-5 h-5" />, label: t('logs'), to: '/logs' },
|
||||
{ icon: <Hash className="w-5 h-5" />, label: t('logCodes'), to: '/log-codes' },
|
||||
{ icon: <Zap className="w-5 h-5" />, label: t('skills'), to: '/skills' },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -11,6 +11,7 @@ const resources = {
|
||||
cronJobs: 'Cron Jobs',
|
||||
nodes: 'Nodes',
|
||||
logs: 'Real-time Logs',
|
||||
logCodes: 'Log Codes',
|
||||
skills: 'Skills',
|
||||
memory: 'Memory',
|
||||
taskAudit: 'Task Audit',
|
||||
@@ -195,6 +196,7 @@ const resources = {
|
||||
cronJobs: '定时任务',
|
||||
nodes: '节点',
|
||||
logs: '实时日志',
|
||||
logCodes: '日志编号',
|
||||
skills: '技能管理',
|
||||
memory: '记忆文件',
|
||||
taskAudit: '任务审计',
|
||||
|
||||
@@ -64,7 +64,7 @@ const Chat: React.FC = () => {
|
||||
const ur = await fetch(`/webui/api/upload${q}`, { method: 'POST', body: fd });
|
||||
const uj = await ur.json(); media = uj.path || '';
|
||||
} catch (e) {
|
||||
console.error('Upload failed', e);
|
||||
console.error('L0053', e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -103,7 +103,7 @@ const Cron: React.FC = () => {
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch job details', e);
|
||||
console.error('L0068', e);
|
||||
}
|
||||
} else {
|
||||
setEditingCron(null);
|
||||
|
||||
81
webui/src/pages/LogCodes.tsx
Normal file
81
webui/src/pages/LogCodes.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
|
||||
type CodeItem = {
|
||||
code: number;
|
||||
text: string;
|
||||
};
|
||||
|
||||
const LogCodes: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { q } = useAppContext();
|
||||
const [items, setItems] = useState<CodeItem[]>([]);
|
||||
const [kw, setKw] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try {
|
||||
const paths = [`/webui/log-codes.json${q}`, '/log-codes.json'];
|
||||
for (const p of paths) {
|
||||
const r = await fetch(p);
|
||||
if (!r.ok) continue;
|
||||
const j = await r.json();
|
||||
if (Array.isArray(j?.items)) {
|
||||
setItems(j.items);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
setItems([]);
|
||||
}
|
||||
};
|
||||
load();
|
||||
}, [q]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const k = kw.trim().toLowerCase();
|
||||
if (!k) return items;
|
||||
return items.filter((it) => String(it.code).includes(k) || it.text.toLowerCase().includes(k));
|
||||
}, [items, kw]);
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-7xl mx-auto space-y-6">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('logCodes')}</h1>
|
||||
<input
|
||||
value={kw}
|
||||
onChange={(e) => setKw(e.target.value)}
|
||||
placeholder="Search code/text"
|
||||
className="w-72 bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-950 border border-zinc-800 rounded-2xl overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-zinc-900/90 border-b border-zinc-800">
|
||||
<tr className="text-zinc-400">
|
||||
<th className="text-left p-3 font-medium w-40">Code</th>
|
||||
<th className="text-left p-3 font-medium">Template</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map((it) => (
|
||||
<tr key={it.code} className="border-b border-zinc-900 hover:bg-zinc-900/40">
|
||||
<td className="p-3 font-mono text-indigo-300">{it.code}</td>
|
||||
<td className="p-3 text-zinc-200 break-all">{it.text}</td>
|
||||
</tr>
|
||||
))}
|
||||
{filtered.length === 0 && (
|
||||
<tr>
|
||||
<td className="p-6 text-zinc-500" colSpan={2}>No codes</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogCodes;
|
||||
@@ -8,6 +8,7 @@ const Logs: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { q } = useAppContext();
|
||||
const [logs, setLogs] = useState<LogEntry[]>([]);
|
||||
const [codeMap, setCodeMap] = useState<Record<number, string>>({});
|
||||
const [isStreaming, setIsStreaming] = useState(true);
|
||||
const [showRaw, setShowRaw] = useState(false);
|
||||
const logEndRef = useRef<HTMLDivElement>(null);
|
||||
@@ -22,7 +23,7 @@ const Logs: React.FC = () => {
|
||||
setLogs(j.logs.map(normalizeLog));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('load recent logs failed', e);
|
||||
console.error('L0096', e);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -59,11 +60,38 @@ const Logs: React.FC = () => {
|
||||
}
|
||||
} catch (e: any) {
|
||||
if (e.name !== 'AbortError') {
|
||||
console.error('Log stream error:', e);
|
||||
console.error('L0097', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const loadCodeMap = async () => {
|
||||
try {
|
||||
const paths = [`/webui/log-codes.json${q}`, '/log-codes.json'];
|
||||
for (const p of paths) {
|
||||
const r = await fetch(p);
|
||||
if (!r.ok) continue;
|
||||
const j = await r.json();
|
||||
if (Array.isArray(j?.items)) {
|
||||
const m: Record<number, string> = {};
|
||||
j.items.forEach((it: any) => {
|
||||
if (typeof it?.code === 'number' && typeof it?.text === 'string') {
|
||||
m[it.code] = it.text;
|
||||
}
|
||||
});
|
||||
setCodeMap(m);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
setCodeMap({});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadCodeMap();
|
||||
}, [q]);
|
||||
|
||||
useEffect(() => {
|
||||
loadRecent();
|
||||
if (isStreaming) {
|
||||
@@ -84,13 +112,29 @@ const Logs: React.FC = () => {
|
||||
const clearLogs = () => setLogs([]);
|
||||
|
||||
const normalizeLog = (v: any): LogEntry => ({
|
||||
time: typeof v?.time === 'string' && v.time ? v.time : new Date().toISOString(),
|
||||
time: typeof v?.time === 'string' && v.time ? v.time : (typeof v?.timestamp === 'string' && v.timestamp ? v.timestamp : new Date().toISOString()),
|
||||
level: typeof v?.level === 'string' && v.level ? v.level : 'INFO',
|
||||
msg: typeof v?.msg === 'string' ? v.msg : JSON.stringify(v),
|
||||
code: typeof v?.code === 'number' ? v.code : undefined,
|
||||
msg: typeof v?.msg === 'string' ? v.msg : (typeof v?.message === 'string' ? v.message : JSON.stringify(v)),
|
||||
__raw: JSON.stringify(v),
|
||||
...v,
|
||||
});
|
||||
|
||||
const toCode = (v: any): number | undefined => {
|
||||
if (typeof v === 'number' && Number.isFinite(v) && v > 0) return v;
|
||||
if (typeof v === 'string') {
|
||||
if (/^L\d{4}$/.test(v)) return Number(v.slice(1));
|
||||
const n = Number(v);
|
||||
if (Number.isFinite(n) && n > 0) return n;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
const decode = (v: any) => {
|
||||
const c = toCode(v);
|
||||
if (!c) return v;
|
||||
return codeMap[c] || v;
|
||||
};
|
||||
|
||||
const formatTime = (raw: string) => {
|
||||
try {
|
||||
if (!raw) return '--:--:--';
|
||||
@@ -189,16 +233,19 @@ const Logs: React.FC = () => {
|
||||
<tbody>
|
||||
{logs.map((log, i) => {
|
||||
const lvl = (log.level || 'INFO').toUpperCase();
|
||||
const errText = (log as any).error || (lvl === 'ERROR' ? log.msg : '');
|
||||
const message = lvl === 'ERROR' ? ((log as any).message || log.msg || '') : ((log as any).message || log.msg || '');
|
||||
const rawCode = (log as any).code ?? (log as any).message ?? log.msg ?? '';
|
||||
const message = String(decode(rawCode) || '');
|
||||
const errRaw = (log as any).message || (log as any).error || (lvl === 'ERROR' ? rawCode : '');
|
||||
const errText = String(decode(errRaw) || '');
|
||||
const caller = (log as any).caller || (log as any).source || '';
|
||||
const code = toCode(rawCode);
|
||||
return (
|
||||
<tr key={i} className="border-b border-zinc-900 hover:bg-zinc-900/40 align-top">
|
||||
<td className="p-2 text-zinc-500 whitespace-nowrap">{formatTime(log.time)}</td>
|
||||
<td className={`p-2 font-semibold whitespace-nowrap ${getLevelColor(lvl)}`}>{lvl}</td>
|
||||
<td className="p-2 text-zinc-200 break-all">{message}</td>
|
||||
<td className="p-2 text-red-300 break-all">{errText}</td>
|
||||
<td className="p-2 text-zinc-500 break-all">{caller}</td>
|
||||
<td className="p-2 text-zinc-500 break-all">{code ? `${code} | ${caller}` : caller}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -25,7 +25,9 @@ export type Lang = 'en' | 'zh';
|
||||
export type LogEntry = {
|
||||
time: string;
|
||||
level: string;
|
||||
code?: number;
|
||||
msg: string;
|
||||
message?: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user