Automation Part 1

frontend/src/components/Automation/ActivityLog.tsx

@@ -0,0 +1,58 @@
+/**
+ * Activity Log Component
+ * Real-time log viewer for automation runs
+ */
+import React, { useState, useEffect } from 'react';
+import { automationService } from '../../services/automationService';
+
+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 (
+    <div className="bg-white p-4 rounded-lg shadow">
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-xl font-bold">Activity Log</h2>
+        <div className="flex items-center gap-2">
+          <label className="text-sm">Lines:</label>
+          <select
+            value={lines}
+            onChange={(e) => setLines(parseInt(e.target.value))}
+            className="border rounded px-2 py-1 text-sm"
+          >
+            <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 text-green-400 p-4 rounded font-mono text-xs overflow-auto max-h-96">
+        <pre className="whitespace-pre-wrap">{logs || 'No logs available'}</pre>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityLog;