46 lines
1.4 KiB
JavaScript
46 lines
1.4 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' }
|
|
};
|
|
|
|
export default function LogTab({ agentId, refreshTrigger }) {
|
|
const [logs, setLogs] = useState([]);
|
|
const scrollRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
getAgentLogs(agentId, 50).then(data => {
|
|
if (!cancelled) setLogs(data || []);
|
|
});
|
|
return () => { cancelled = true; };
|
|
}, [agentId, refreshTrigger]);
|
|
|
|
useEffect(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
|
}
|
|
}, [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 style = LEVEL_STYLE[log.level] || LEVEL_STYLE.info;
|
|
const time = new Date(log.created_at).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
return (
|
|
<div key={log.id || i} className="ao-log-item">
|
|
<span className="ao-log-time">{time}</span>
|
|
<span className="ao-log-level" style={style}>[{log.level}]</span>
|
|
<span className="ao-log-msg">{log.message}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|