69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import React, { useRef, useEffect, useMemo } from 'react';
|
|
import { LogEntry } from '../types';
|
|
import { Terminal, Trash2, Info } from 'lucide-react';
|
|
|
|
interface SystemLogPanelProps {
|
|
logs: LogEntry[];
|
|
onClear: () => void;
|
|
}
|
|
|
|
const SystemLogPanel: React.FC<SystemLogPanelProps> = ({ logs, onClear }) => {
|
|
const logContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const reversedLogs = useMemo(() => [...logs].reverse(), [logs]);
|
|
|
|
// Force scroll to top
|
|
useEffect(() => {
|
|
if (logContainerRef.current) {
|
|
logContainerRef.current.scrollTop = 0;
|
|
}
|
|
}, [reversedLogs]);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-gray-900 border-t border-gray-700 overflow-hidden relative">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-3 py-1.5 bg-gray-800 border-b border-gray-700 shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<div className="font-bold text-xs text-gray-300 flex items-center gap-1.5">
|
|
<Info size={12} className="text-gray-400" /> SYSTEM LOG
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onClear}
|
|
title="Clear Logs"
|
|
className="p-1 text-gray-500 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
|
|
>
|
|
<Trash2 size={12} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Log Body */}
|
|
<div
|
|
ref={logContainerRef}
|
|
className="flex-1 overflow-auto p-2 font-mono text-[10px] space-y-0.5 leading-tight bg-gray-900"
|
|
>
|
|
{reversedLogs.length === 0 && (
|
|
<div className="h-full flex flex-col items-center justify-center text-gray-700 space-y-1">
|
|
<span className="text-[9px]">No System Activity</span>
|
|
</div>
|
|
)}
|
|
|
|
{reversedLogs.map((log, index) => (
|
|
<div key={log.id} className="flex gap-2 whitespace-nowrap opacity-90 hover:opacity-100 hover:bg-gray-800/50 py-[1px] border-b border-gray-800/30 last:border-0 items-center">
|
|
<span className="text-gray-600 select-none min-w-[20px] text-right text-[9px]">{index + 1}</span>
|
|
<span className="text-gray-500 select-none min-w-[45px] text-[9px]">{log.timestamp}</span>
|
|
<span className={`flex-1
|
|
${log.type === 'ERROR' ? 'text-red-400 font-bold' : 'text-gray-300'}
|
|
${log.type === 'INFO' ? 'text-gray-400' : ''}
|
|
`}>
|
|
{log.message}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SystemLogPanel; |