Automation Part 1
This commit is contained in:
IGNY8 VPS (Salman)
58
frontend/src/components/Automation/ActivityLog.tsx
Normal file
58
frontend/src/components/Automation/ActivityLog.tsx
Normal file
@@ -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;
|
||||
237
frontend/src/components/Automation/ConfigModal.tsx
Normal file
237
frontend/src/components/Automation/ConfigModal.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
/**
|
||||
* Config Modal Component
|
||||
* Modal for configuring automation settings
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { AutomationConfig } from '../../services/automationService';
|
||||
|
||||
interface ConfigModalProps {
|
||||
config: AutomationConfig;
|
||||
onSave: (config: Partial<AutomationConfig>) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) => {
|
||||
const [formData, setFormData] = useState<Partial<AutomationConfig>>({
|
||||
is_enabled: config.is_enabled,
|
||||
frequency: config.frequency,
|
||||
scheduled_time: config.scheduled_time,
|
||||
stage_1_batch_size: config.stage_1_batch_size,
|
||||
stage_2_batch_size: config.stage_2_batch_size,
|
||||
stage_3_batch_size: config.stage_3_batch_size,
|
||||
stage_4_batch_size: config.stage_4_batch_size,
|
||||
stage_5_batch_size: config.stage_5_batch_size,
|
||||
stage_6_batch_size: config.stage_6_batch_size,
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-screen overflow-y-auto">
|
||||
<h2 className="text-2xl font-bold mb-4">Automation Configuration</h2>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Enable/Disable */}
|
||||
<div className="mb-4">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.is_enabled || false}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, is_enabled: e.target.checked })
|
||||
}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span className="font-semibold">Enable Automation</span>
|
||||
</label>
|
||||
<p className="text-sm text-gray-600 ml-6">
|
||||
When enabled, automation will run on the configured schedule
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Frequency */}
|
||||
<div className="mb-4">
|
||||
<label className="block font-semibold mb-1">Frequency</label>
|
||||
<select
|
||||
value={formData.frequency || 'daily'}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
frequency: e.target.value as 'daily' | 'weekly' | 'monthly',
|
||||
})
|
||||
}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly (Mondays)</option>
|
||||
<option value="monthly">Monthly (1st of month)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Scheduled Time */}
|
||||
<div className="mb-4">
|
||||
<label className="block font-semibold mb-1">Scheduled Time</label>
|
||||
<input
|
||||
type="time"
|
||||
value={formData.scheduled_time || '02:00'}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, scheduled_time: e.target.value })
|
||||
}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Time of day to run automation (24-hour format)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Batch Sizes */}
|
||||
<div className="mb-4">
|
||||
<h3 className="font-semibold mb-2">Batch Sizes</h3>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
Configure how many items to process in each stage
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 1: Keywords → Clusters
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_1_batch_size || 20}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_1_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={100}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 2: Clusters → Ideas
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_2_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_2_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 3: Ideas → Tasks
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_3_batch_size || 20}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_3_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={100}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 4: Tasks → Content
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_4_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_4_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 5: Content → Image Prompts
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_5_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_5_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 6: Image Prompts → Images
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_6_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_6_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex justify-end gap-2 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Save Configuration
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfigModal;
|
||||
114
frontend/src/components/Automation/RunHistory.tsx
Normal file
114
frontend/src/components/Automation/RunHistory.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* Run History Component
|
||||
* Shows past automation runs
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { automationService, RunHistoryItem } from '../../services/automationService';
|
||||
|
||||
interface RunHistoryProps {
|
||||
siteId: number;
|
||||
}
|
||||
|
||||
const RunHistory: React.FC<RunHistoryProps> = ({ siteId }) => {
|
||||
const [history, setHistory] = useState<RunHistoryItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadHistory();
|
||||
}, [siteId]);
|
||||
|
||||
const loadHistory = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await automationService.getHistory(siteId);
|
||||
setHistory(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load history', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
completed: 'bg-green-100 text-green-800',
|
||||
running: 'bg-blue-100 text-blue-800',
|
||||
paused: 'bg-yellow-100 text-yellow-800',
|
||||
failed: 'bg-red-100 text-red-800',
|
||||
};
|
||||
return colors[status] || 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-4">Loading history...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<h2 className="text-xl font-bold mb-4">Run History</h2>
|
||||
|
||||
{history.length === 0 ? (
|
||||
<div className="text-center text-gray-600 py-8">No automation runs yet</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Run ID
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Trigger
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Started
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Completed
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Credits Used
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Stage
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{history.map((run) => (
|
||||
<tr key={run.run_id} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3 text-sm font-mono">{run.run_id.slice(0, 8)}...</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-semibold ${getStatusBadge(
|
||||
run.status
|
||||
)}`}
|
||||
>
|
||||
{run.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm capitalize">{run.trigger_type}</td>
|
||||
<td className="px-4 py-3 text-sm">
|
||||
{new Date(run.started_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm">
|
||||
{run.completed_at
|
||||
? new Date(run.completed_at).toLocaleString()
|
||||
: '-'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm">{run.total_credits_used}</td>
|
||||
<td className="px-4 py-3 text-sm">{run.current_stage}/7</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RunHistory;
|
||||
58
frontend/src/components/Automation/StageCard.tsx
Normal file
58
frontend/src/components/Automation/StageCard.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Stage Card Component
|
||||
* Shows status and results for each automation stage
|
||||
*/
|
||||
import React from 'react';
|
||||
import { StageResult } from '../../services/automationService';
|
||||
|
||||
interface StageCardProps {
|
||||
stageNumber: number;
|
||||
stageName: string;
|
||||
currentStage: number;
|
||||
result: StageResult | null;
|
||||
}
|
||||
|
||||
const StageCard: React.FC<StageCardProps> = ({
|
||||
stageNumber,
|
||||
stageName,
|
||||
currentStage,
|
||||
result,
|
||||
}) => {
|
||||
const isPending = stageNumber > currentStage;
|
||||
const isActive = stageNumber === currentStage;
|
||||
const isComplete = stageNumber < currentStage || (result !== null && stageNumber <= 7);
|
||||
|
||||
const getStatusColor = () => {
|
||||
if (isActive) return 'border-blue-500 bg-blue-50';
|
||||
if (isComplete) return 'border-green-500 bg-green-50';
|
||||
return 'border-gray-300 bg-gray-50';
|
||||
};
|
||||
|
||||
const getStatusIcon = () => {
|
||||
if (isActive) return '🔄';
|
||||
if (isComplete) return '✅';
|
||||
return '⏳';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`border-2 rounded-lg p-3 ${getStatusColor()}`}>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-sm font-bold">Stage {stageNumber}</div>
|
||||
<div className="text-xl">{getStatusIcon()}</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-700 mb-2">{stageName}</div>
|
||||
{result && (
|
||||
<div className="text-xs space-y-1">
|
||||
{Object.entries(result).map(([key, value]) => (
|
||||
<div key={key} className="flex justify-between">
|
||||
<span className="text-gray-600">{key.replace(/_/g, ' ')}:</span>
|
||||
<span className="font-semibold">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StageCard;
|
||||
Reference in New Issue
Block a user