mirrors/mcphub
1
0
Fork 0
mirror of https://github.com/samanhappy/mcphub.git synced 2025-12-24 02:39:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: enhance stdio log (#103)

Browse Source
This commit is contained in:
samanhappy
2025-05-17 19:40:34 +08:00
committed by GitHub
parent 298d96d593
commit b15b71f407
3 changed files with 110 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/LogViewer.tsx
View File

@@ -17,7 +17,7 @@ const LogViewer: React.FC<LogViewerProps> = ({ logs, isLoading = false, error =
const [autoScroll, setAutoScroll] = useState(true);
const [filter, setFilter] = useState<string>('');
const [typeFilter, setTypeFilter] = useState<Array<'info' | 'error' | 'warn' | 'debug'>>(['info', 'error', 'warn', 'debug']);
const [sourceFilter, setSourceFilter] = useState<Array<'main' | 'child-process'>>(['main', 'child-process']);
const [sourceFilter, setSourceFilter] = useState<Array<'main' | 'child'>>(['main', 'child']);
// Auto scroll to bottom when new logs come in if autoScroll is enabled
useEffect(() => {
@@ -30,7 +30,7 @@ const LogViewer: React.FC<LogViewerProps> = ({ logs, isLoading = false, error =
const filteredLogs = logs.filter(log => {
const matchesText = filter ? log.message.toLowerCase().includes(filter.toLowerCase()) : true;
const matchesType = typeFilter.includes(log.type);
const matchesSource = sourceFilter.includes(log.source as 'main' | 'child-process');
const matchesSource = sourceFilter.includes(log.source as 'main' | 'child');
return matchesText && matchesType && matchesSource;
});
@@ -48,10 +48,19 @@ const LogViewer: React.FC<LogViewerProps> = ({ logs, isLoading = false, error =
// Get badge color based on log type
const getLogTypeColor = (type: string) => {
switch (type) {
case 'error': return 'bg-red-500';
case 'warn': return 'bg-yellow-500';
case 'debug': return 'bg-purple-500';
default: return 'bg-blue-500';
case 'error': return 'bg-red-400';
case 'warn': return 'bg-yellow-400';
case 'debug': return 'bg-purple-400';
default: return 'bg-blue-400';
}
};
// Get badge color based on log source
const getSourceColor = (source: string) => {
switch (source) {
case 'main': return 'bg-green-400';
case 'child': return 'bg-orange-400';
default: return 'bg-gray-400';
}
};
@@ -92,11 +101,11 @@ const LogViewer: React.FC<LogViewerProps> = ({ logs, isLoading = false, error =
{/* Log source filters */}
<div className="flex gap-1 items-center ml-2">
{(['main', 'child-process'] as const).map(source => (
{(['main', 'child'] as const).map(source => (
<Badge
key={source}
variant={sourceFilter.includes(source) ? 'default' : 'outline'}
className="cursor-pointer"
className={`cursor-pointer ${sourceFilter.includes(source) ? getSourceColor(source) : ''}`}
onClick={() => {
if (sourceFilter.includes(source)) {
setSourceFilter(prev => prev.filter(s => s !== source));
@@ -156,14 +165,17 @@ const LogViewer: React.FC<LogViewerProps> = ({ logs, isLoading = false, error =
<div
key={`${log.timestamp}-${index}`}
className={`py-1 border-b border-gray-100 dark:border-gray-800 ${log.type === 'error' ? 'text-red-500' :
log.type === 'warn' ? 'text-yellow-500' : ''
log.type === 'warn' ? 'text-yellow-500' : ''
}`}
>
<span className="text-gray-400">[{formatTimestamp(log.timestamp)}]</span>
<Badge className={`ml-2 mr-1 ${getLogTypeColor(log.type)}`}>
{log.type}
</Badge>
<Badge variant="outline" className="mr-2">
<Badge
variant="default"
className={`mr-2 ${getSourceColor(log.source)}`}
>
{log.source === 'main' ? t('logs.main') : t('logs.child')}
{log.processId ? ` (${log.processId})` : ''}
</Badge>