475 lines
21 KiB
TypeScript
475 lines
21 KiB
TypeScript
|
import { useState, useEffect, useRef, useMemo, useCallback, memo } from 'react';
|
||
|
|
import { LogService, LogEntry } from '@esengine/editor-core';
|
||
|
|
import { LogLevel } from '@esengine/ecs-framework';
|
||
|
|
import {
|
||
|
|
Search, Filter, Settings, X, Trash2, ChevronDown,
|
||
|
|
Bug, Info, AlertTriangle, XCircle, AlertCircle, Wifi, Pause, Play
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { JsonViewer } from './JsonViewer';
|
||
|
|
import '../styles/OutputLogPanel.css';
|
||
|
|
|
||
|
|
interface OutputLogPanelProps {
|
||
|
|
logService: LogService;
|
||
|
|
locale?: string;
|
||
|
|
onClose?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const MAX_LOGS = 1000;
|
||
|
|
|
||
|
|
function tryParseJSON(message: string): { isJSON: boolean; parsed?: unknown } {
|
||
|
|
try {
|
||
|
|
const parsed: unknown = JSON.parse(message);
|
||
|
|
return { isJSON: true, parsed };
|
||
|
|
} catch {
|
||
|
|
return { isJSON: false };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatTime(date: Date): string {
|
||
|
|
const hours = date.getHours().toString().padStart(2, '0');
|
||
|
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||
|
|
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||
|
|
const ms = date.getMilliseconds().toString().padStart(3, '0');
|
||
|
|
return `${hours}:${minutes}:${seconds}.${ms}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getLevelIcon(level: LogLevel) {
|
||
|
|
switch (level) {
|
||
|
|
case LogLevel.Debug:
|
||
|
|
return <Bug size={14} />;
|
||
|
|
case LogLevel.Info:
|
||
|
|
return <Info size={14} />;
|
||
|
|
case LogLevel.Warn:
|
||
|
|
return <AlertTriangle size={14} />;
|
||
|
|
case LogLevel.Error:
|
||
|
|
case LogLevel.Fatal:
|
||
|
|
return <XCircle size={14} />;
|
||
|
|
default:
|
||
|
|
return <AlertCircle size={14} />;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getLevelClass(level: LogLevel): string {
|
||
|
|
switch (level) {
|
||
|
|
case LogLevel.Debug:
|
||
|
|
return 'log-entry-debug';
|
||
|
|
case LogLevel.Info:
|
||
|
|
return 'log-entry-info';
|
||
|
|
case LogLevel.Warn:
|
||
|
|
return 'log-entry-warn';
|
||
|
|
case LogLevel.Error:
|
||
|
|
case LogLevel.Fatal:
|
||
|
|
return 'log-entry-error';
|
||
|
|
default:
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const LogEntryItem = memo(({ log, onOpenJsonViewer }: {
|
||
|
|
log: LogEntry;
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
onOpenJsonViewer: (data: any) => void;
|
||
|
|
}) => {
|
||
|
|
const { isJSON, parsed } = useMemo(() => tryParseJSON(log.message), [log.message]);
|
||
|
|
const shouldTruncate = log.message.length > 200;
|
||
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`output-log-entry ${getLevelClass(log.level)} ${log.source === 'remote' ? 'log-entry-remote' : ''}`}>
|
||
|
|
<div className="output-log-entry-icon">
|
||
|
|
{getLevelIcon(log.level)}
|
||
|
|
</div>
|
||
|
|
<div className="output-log-entry-time">
|
||
|
|
{formatTime(log.timestamp)}
|
||
|
|
</div>
|
||
|
|
<div className={`output-log-entry-source ${log.source === 'remote' ? 'source-remote' : ''}`}>
|
||
|
|
[{log.source === 'remote' ? '🌐 Remote' : log.source}]
|
||
|
|
</div>
|
||
|
|
{log.clientId && (
|
||
|
|
<div className="output-log-entry-client" title={`Client: ${log.clientId}`}>
|
||
|
|
{log.clientId}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="output-log-entry-message">
|
||
|
|
<div className="output-log-message-container">
|
||
|
|
<div className="output-log-message-text">
|
||
|
|
{shouldTruncate && !isExpanded ? (
|
||
|
|
<>
|
||
|
|
<span className="output-log-message-preview">
|
||
|
|
{log.message.substring(0, 200)}...
|
||
|
|
</span>
|
||
|
|
<button
|
||
|
|
className="output-log-expand-btn"
|
||
|
|
onClick={() => setIsExpanded(true)}
|
||
|
|
>
|
||
|
|
Show more
|
||
|
|
</button>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<span>{log.message}</span>
|
||
|
|
{shouldTruncate && (
|
||
|
|
<button
|
||
|
|
className="output-log-expand-btn"
|
||
|
|
onClick={() => setIsExpanded(false)}
|
||
|
|
>
|
||
|
|
Show less
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{isJSON && parsed !== undefined && (
|
||
|
|
<button
|
||
|
|
className="output-log-json-btn"
|
||
|
|
onClick={() => onOpenJsonViewer(parsed)}
|
||
|
|
title="Open in JSON Viewer"
|
||
|
|
>
|
||
|
|
JSON
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
LogEntryItem.displayName = 'LogEntryItem';
|
||
|
|
|
||
|
|
export function OutputLogPanel({ logService, locale = 'en', onClose }: OutputLogPanelProps) {
|
||
|
|
const [logs, setLogs] = useState<LogEntry[]>(() => logService.getLogs().slice(-MAX_LOGS));
|
||
|
|
const [searchQuery, setSearchQuery] = useState('');
|
||
|
|
const [levelFilter, setLevelFilter] = useState<Set<LogLevel>>(new Set([
|
||
|
|
LogLevel.Debug,
|
||
|
|
LogLevel.Info,
|
||
|
|
LogLevel.Warn,
|
||
|
|
LogLevel.Error,
|
||
|
|
LogLevel.Fatal
|
||
|
|
]));
|
||
|
|
const [showRemoteOnly, setShowRemoteOnly] = useState(false);
|
||
|
|
const [autoScroll, setAutoScroll] = useState(true);
|
||
|
|
const [showFilterMenu, setShowFilterMenu] = useState(false);
|
||
|
|
const [showSettingsMenu, setShowSettingsMenu] = useState(false);
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
const [jsonViewerData, setJsonViewerData] = useState<any>(null);
|
||
|
|
const [showTimestamp, setShowTimestamp] = useState(true);
|
||
|
|
const [showSource, setShowSource] = useState(true);
|
||
|
|
const logContainerRef = useRef<HTMLDivElement>(null);
|
||
|
|
const filterMenuRef = useRef<HTMLDivElement>(null);
|
||
|
|
const settingsMenuRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const unsubscribe = logService.subscribe((entry) => {
|
||
|
|
setLogs((prev) => {
|
||
|
|
const newLogs = [...prev, entry];
|
||
|
|
return newLogs.length > MAX_LOGS ? newLogs.slice(-MAX_LOGS) : newLogs;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return unsubscribe;
|
||
|
|
}, [logService]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (autoScroll && logContainerRef.current) {
|
||
|
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
|
||
|
|
}
|
||
|
|
}, [logs, autoScroll]);
|
||
|
|
|
||
|
|
// Close menus on outside click
|
||
|
|
useEffect(() => {
|
||
|
|
const handleClickOutside = (e: MouseEvent) => {
|
||
|
|
if (filterMenuRef.current && !filterMenuRef.current.contains(e.target as Node)) {
|
||
|
|
setShowFilterMenu(false);
|
||
|
|
}
|
||
|
|
if (settingsMenuRef.current && !settingsMenuRef.current.contains(e.target as Node)) {
|
||
|
|
setShowSettingsMenu(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
document.addEventListener('mousedown', handleClickOutside);
|
||
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleScroll = useCallback(() => {
|
||
|
|
if (logContainerRef.current) {
|
||
|
|
const { scrollTop, scrollHeight, clientHeight } = logContainerRef.current;
|
||
|
|
const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
|
||
|
|
setAutoScroll(isAtBottom);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleClear = useCallback(() => {
|
||
|
|
logService.clear();
|
||
|
|
setLogs([]);
|
||
|
|
}, [logService]);
|
||
|
|
|
||
|
|
const toggleLevelFilter = useCallback((level: LogLevel) => {
|
||
|
|
setLevelFilter((prev) => {
|
||
|
|
const newFilter = new Set(prev);
|
||
|
|
if (newFilter.has(level)) {
|
||
|
|
newFilter.delete(level);
|
||
|
|
} else {
|
||
|
|
newFilter.add(level);
|
||
|
|
}
|
||
|
|
return newFilter;
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const filteredLogs = useMemo(() => {
|
||
|
|
return logs.filter((log) => {
|
||
|
|
if (!levelFilter.has(log.level)) return false;
|
||
|
|
if (showRemoteOnly && log.source !== 'remote') return false;
|
||
|
|
if (searchQuery) {
|
||
|
|
const query = searchQuery.toLowerCase();
|
||
|
|
if (!log.message.toLowerCase().includes(query) &&
|
||
|
|
!log.source.toLowerCase().includes(query)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
}, [logs, levelFilter, showRemoteOnly, searchQuery]);
|
||
|
|
|
||
|
|
const levelCounts = useMemo(() => ({
|
||
|
|
[LogLevel.Debug]: logs.filter((l) => l.level === LogLevel.Debug).length,
|
||
|
|
[LogLevel.Info]: logs.filter((l) => l.level === LogLevel.Info).length,
|
||
|
|
[LogLevel.Warn]: logs.filter((l) => l.level === LogLevel.Warn).length,
|
||
|
|
[LogLevel.Error]: logs.filter((l) => l.level === LogLevel.Error || l.level === LogLevel.Fatal).length
|
||
|
|
}), [logs]);
|
||
|
|
|
||
|
|
const remoteLogCount = useMemo(() =>
|
||
|
|
logs.filter((l) => l.source === 'remote').length
|
||
|
|
, [logs]);
|
||
|
|
|
||
|
|
const activeFilterCount = useMemo(() => {
|
||
|
|
let count = 0;
|
||
|
|
if (!levelFilter.has(LogLevel.Debug)) count++;
|
||
|
|
if (!levelFilter.has(LogLevel.Info)) count++;
|
||
|
|
if (!levelFilter.has(LogLevel.Warn)) count++;
|
||
|
|
if (!levelFilter.has(LogLevel.Error)) count++;
|
||
|
|
if (showRemoteOnly) count++;
|
||
|
|
return count;
|
||
|
|
}, [levelFilter, showRemoteOnly]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="output-log-panel">
|
||
|
|
{/* Toolbar */}
|
||
|
|
<div className="output-log-toolbar">
|
||
|
|
<div className="output-log-toolbar-left">
|
||
|
|
<div className="output-log-search">
|
||
|
|
<Search size={14} />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder={locale === 'zh' ? '搜索日志...' : 'Search logs...'}
|
||
|
|
value={searchQuery}
|
||
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||
|
|
/>
|
||
|
|
{searchQuery && (
|
||
|
|
<button
|
||
|
|
className="output-log-search-clear"
|
||
|
|
onClick={() => setSearchQuery('')}
|
||
|
|
>
|
||
|
|
<X size={12} />
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="output-log-toolbar-right">
|
||
|
|
{/* Filter Dropdown */}
|
||
|
|
<div className="output-log-dropdown" ref={filterMenuRef}>
|
||
|
|
<button
|
||
|
|
className={`output-log-btn ${showFilterMenu ? 'active' : ''} ${activeFilterCount > 0 ? 'has-filter' : ''}`}
|
||
|
|
onClick={() => {
|
||
|
|
setShowFilterMenu(!showFilterMenu);
|
||
|
|
setShowSettingsMenu(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Filter size={14} />
|
||
|
|
<span>{locale === 'zh' ? '过滤器' : 'Filters'}</span>
|
||
|
|
{activeFilterCount > 0 && (
|
||
|
|
<span className="filter-badge">{activeFilterCount}</span>
|
||
|
|
)}
|
||
|
|
<ChevronDown size={12} />
|
||
|
|
</button>
|
||
|
|
{showFilterMenu && (
|
||
|
|
<div className="output-log-menu">
|
||
|
|
<div className="output-log-menu-header">
|
||
|
|
{locale === 'zh' ? '日志级别' : 'Log Levels'}
|
||
|
|
</div>
|
||
|
|
<label className="output-log-menu-item">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={levelFilter.has(LogLevel.Debug)}
|
||
|
|
onChange={() => toggleLevelFilter(LogLevel.Debug)}
|
||
|
|
/>
|
||
|
|
<Bug size={14} className="level-icon debug" />
|
||
|
|
<span>Debug</span>
|
||
|
|
<span className="level-count">{levelCounts[LogLevel.Debug]}</span>
|
||
|
|
</label>
|
||
|
|
<label className="output-log-menu-item">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={levelFilter.has(LogLevel.Info)}
|
||
|
|
onChange={() => toggleLevelFilter(LogLevel.Info)}
|
||
|
|
/>
|
||
|
|
<Info size={14} className="level-icon info" />
|
||
|
|
<span>Info</span>
|
||
|
|
<span className="level-count">{levelCounts[LogLevel.Info]}</span>
|
||
|
|
</label>
|
||
|
|
<label className="output-log-menu-item">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={levelFilter.has(LogLevel.Warn)}
|
||
|
|
onChange={() => toggleLevelFilter(LogLevel.Warn)}
|
||
|
|
/>
|
||
|
|
<AlertTriangle size={14} className="level-icon warn" />
|
||
|
|
<span>Warning</span>
|
||
|
|
<span className="level-count">{levelCounts[LogLevel.Warn]}</span>
|
||
|
|
</label>
|
||
|
|
<label className="output-log-menu-item">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={levelFilter.has(LogLevel.Error)}
|
||
|
|
onChange={() => toggleLevelFilter(LogLevel.Error)}
|
||
|
|
/>
|
||
|
|
<XCircle size={14} className="level-icon error" />
|
||
|
|
<span>Error</span>
|
||
|
|
<span className="level-count">{levelCounts[LogLevel.Error]}</span>
|
||
|
|
</label>
|
||
|
|
<div className="output-log-menu-divider" />
|
||
|
|
<label className="output-log-menu-item">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={showRemoteOnly}
|
||
|
|
onChange={() => setShowRemoteOnly(!showRemoteOnly)}
|
||
|
|
/>
|
||
|
|
<Wifi size={14} className="level-icon remote" />
|
||
|
|
<span>{locale === 'zh' ? '仅远程日志' : 'Remote Only'}</span>
|
||
|
|
<span className="level-count">{remoteLogCount}</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Auto Scroll Toggle */}
|
||
|
|
<button
|
||
|
|
className={`output-log-icon-btn ${autoScroll ? 'active' : ''}`}
|
||
|
|
onClick={() => setAutoScroll(!autoScroll)}
|
||
|
|
title={autoScroll
|
||
|
|
? (locale === 'zh' ? '暂停自动滚动' : 'Pause auto-scroll')
|
||
|
|
: (locale === 'zh' ? '恢复自动滚动' : 'Resume auto-scroll')
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{autoScroll ? <Pause size={14} /> : <Play size={14} />}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Settings Dropdown */}
|
||
|
|
<div className="output-log-dropdown" ref={settingsMenuRef}>
|
||
|
|
<button
|
||
|
|
className={`output-log-icon-btn ${showSettingsMenu ? 'active' : ''}`}
|
||
|
|
onClick={() => {
|
||
|
|
setShowSettingsMenu(!showSettingsMenu);
|
||
|
|
setShowFilterMenu(false);
|
||
|
|
}}
|
||
|
|
title={locale === 'zh' ? '设置' : 'Settings'}
|
||
|
|
>
|
||
|
|
<Settings size={14} />
|
||
|
|
</button>
|
||
|
|
{showSettingsMenu && (
|
||
|
|
<div className="output-log-menu settings-menu">
|
||
|
|
<div className="output-log-menu-header">
|
||
|
|
{locale === 'zh' ? '显示选项' : 'Display Options'}
|
||
|
|
</div>
|
||
|
|
<label className="output-log-menu-item">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={showTimestamp}
|
||
|
|
onChange={() => setShowTimestamp(!showTimestamp)}
|
||
|
|
/>
|
||
|
|
<span>{locale === 'zh' ? '显示时间戳' : 'Show Timestamp'}</span>
|
||
|
|
</label>
|
||
|
|
<label className="output-log-menu-item">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={showSource}
|
||
|
|
onChange={() => setShowSource(!showSource)}
|
||
|
|
/>
|
||
|
|
<span>{locale === 'zh' ? '显示来源' : 'Show Source'}</span>
|
||
|
|
</label>
|
||
|
|
<div className="output-log-menu-divider" />
|
||
|
|
<button
|
||
|
|
className="output-log-menu-action"
|
||
|
|
onClick={handleClear}
|
||
|
|
>
|
||
|
|
<Trash2 size={14} />
|
||
|
|
<span>{locale === 'zh' ? '清空日志' : 'Clear Logs'}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Close Button */}
|
||
|
|
{onClose && (
|
||
|
|
<button
|
||
|
|
className="output-log-close-btn"
|
||
|
|
onClick={onClose}
|
||
|
|
>
|
||
|
|
<X size={14} />
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Log Content */}
|
||
|
|
<div
|
||
|
|
className={`output-log-content ${!showTimestamp ? 'hide-timestamp' : ''} ${!showSource ? 'hide-source' : ''}`}
|
||
|
|
ref={logContainerRef}
|
||
|
|
onScroll={handleScroll}
|
||
|
|
>
|
||
|
|
{filteredLogs.length === 0 ? (
|
||
|
|
<div className="output-log-empty">
|
||
|
|
<AlertCircle size={32} />
|
||
|
|
<p>{searchQuery
|
||
|
|
? (locale === 'zh' ? '没有匹配的日志' : 'No matching logs')
|
||
|
|
: (locale === 'zh' ? '暂无日志' : 'No logs to display')
|
||
|
|
}</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
filteredLogs.map((log, index) => (
|
||
|
|
<LogEntryItem
|
||
|
|
key={`${log.id}-${index}`}
|
||
|
|
log={log}
|
||
|
|
onOpenJsonViewer={setJsonViewerData}
|
||
|
|
/>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Status Bar */}
|
||
|
|
<div className="output-log-status">
|
||
|
|
<span>{filteredLogs.length} / {logs.length} {locale === 'zh' ? '条日志' : 'logs'}</span>
|
||
|
|
{!autoScroll && (
|
||
|
|
<button
|
||
|
|
className="output-log-scroll-btn"
|
||
|
|
onClick={() => {
|
||
|
|
if (logContainerRef.current) {
|
||
|
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
|
||
|
|
setAutoScroll(true);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
↓ {locale === 'zh' ? '滚动到底部' : 'Scroll to bottom'}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* JSON Viewer Modal */}
|
||
|
|
{jsonViewerData && (
|
||
|
|
<JsonViewer
|
||
|
|
data={jsonViewerData}
|
||
|
|
onClose={() => setJsonViewerData(null)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|