29 lines
956 B
TypeScript
29 lines
956 B
TypeScript
import { useEffect, useRef } from 'react';
|
|
import type { LogEntry } from '@stream-control/shared';
|
|
import { formatTime } from '../format';
|
|
|
|
export function LogPanel({ logs }: { logs: LogEntry[] }) {
|
|
const endRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
endRef.current?.scrollIntoView({ block: 'end' });
|
|
}, [logs.length]);
|
|
|
|
return (
|
|
<section className="logs">
|
|
<h3>Journal</h3>
|
|
<div className="log-list">
|
|
{logs.length === 0 && <p className="muted small">Aucun évènement pour le moment.</p>}
|
|
{logs.map((entry) => (
|
|
<div key={entry.id} className={`log-line level-${entry.level}`}>
|
|
<span className="mono small muted">{formatTime(entry.ts)}</span>
|
|
<span className="log-agent">{entry.agentName ?? 'serveur'}</span>
|
|
<span className="log-message">{entry.message}</span>
|
|
</div>
|
|
))}
|
|
<div ref={endRef} />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|