74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
// src/pages/agent-office/components/LogTab.jsx
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { getAgentLogs } from '../../../api';
|
|
|
|
const LEVEL_STYLE = {
|
|
info: { color: '#60a5fa' },
|
|
warning: { color: '#fbbf24' },
|
|
error: { color: '#ef4444' },
|
|
};
|
|
|
|
const SOURCE_STYLE = {
|
|
agent: { color: '#9ca3af', label: 'AGENT' },
|
|
access: { color: '#5eead4', label: 'ACCESS' },
|
|
log: { color: '#a78bfa', label: 'LOG' },
|
|
};
|
|
|
|
function formatTime(iso) {
|
|
if (!iso) return '';
|
|
return new Date(iso).toLocaleTimeString('ko-KR', {
|
|
hour: '2-digit', minute: '2-digit', second: '2-digit',
|
|
});
|
|
}
|
|
|
|
export default function LogTab({ agentId, refreshTrigger }) {
|
|
const [logs, setLogs] = useState([]);
|
|
const scrollRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const fetchLogs = () => {
|
|
getAgentLogs(agentId, 100).then(data => {
|
|
if (cancelled) return;
|
|
setLogs(Array.isArray(data) ? data : (data?.logs || []));
|
|
}).catch(() => {});
|
|
};
|
|
fetchLogs();
|
|
const interval = setInterval(fetchLogs, 5000); // 5초 폴링
|
|
return () => { cancelled = true; clearInterval(interval); };
|
|
}, [agentId, refreshTrigger]);
|
|
|
|
useEffect(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = 0;
|
|
}
|
|
}, [logs]);
|
|
|
|
return (
|
|
<div className="ao-log-tab" ref={scrollRef}>
|
|
{logs.length === 0 && <div className="ao-empty">No logs yet</div>}
|
|
{logs.map((log, i) => {
|
|
const source = log.source || 'agent';
|
|
const sourceMeta = SOURCE_STYLE[source] || SOURCE_STYLE.agent;
|
|
const levelStyle = LEVEL_STYLE[log.level] || LEVEL_STYLE.info;
|
|
const time = formatTime(log.ts || log.created_at);
|
|
return (
|
|
<div key={log.id || `${source}-${i}-${time}`} className="ao-log-item">
|
|
<span className="ao-log-time">{time}</span>
|
|
<span className="ao-log-source" style={{ color: sourceMeta.color }}>
|
|
[{sourceMeta.label}]
|
|
</span>
|
|
<span className="ao-log-level" style={levelStyle}>[{log.level}]</span>
|
|
<span className="ao-log-msg">{log.message}</span>
|
|
{source === 'access' && (
|
|
<span className="ao-log-meta">
|
|
{' '}({log.status} · {log.ms}ms)
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|