Files
igny8/frontend/src/components/Automation/ActivityLog.tsx
IGNY8 VPS (Salman) aa8b8a9756 more fixes
2025-12-03 10:29:13 +00:00

62 lines
2.0 KiB
TypeScript

/**
* Activity Log Component
* Real-time log viewer for automation runs
*/
import React, { useState, useEffect } from 'react';
import { automationService } from '../../services/automationService';
import ComponentCard from '../common/ComponentCard';
interface ActivityLogProps {
runId: string;
}
const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
const [logs, setLogs] = useState<string>('');
const [lines, setLines] = useState<number>(100);
useEffect(() => {
loadLogs();
// Poll every 3 seconds
const interval = setInterval(loadLogs, 3000);
return () => clearInterval(interval);
}, [runId, lines]);
const loadLogs = async () => {
try {
const logText = await automationService.getLogs(runId, lines);
setLogs(logText);
} catch (error) {
console.error('Failed to load logs', error);
}
};
return (
<ComponentCard
title="Activity Log"
desc="Real-time automation progress and events"
>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<label className="text-sm text-gray-600 dark:text-gray-400">Lines:</label>
<select
value={lines}
onChange={(e) => setLines(parseInt(e.target.value))}
className="border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
>
<option value={50}>50</option>
<option value={100}>100</option>
<option value={200}>200</option>
<option value={500}>500</option>
</select>
</div>
</div>
<div className="bg-gray-900 dark:bg-gray-950 text-green-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96 border border-gray-700">
<pre className="whitespace-pre-wrap">{logs || 'No logs available'}</pre>
</div>
</ComponentCard>
);
};
export default ActivityLog;