Automation Part 1
This commit is contained in:
IGNY8 VPS (Salman)
@@ -35,6 +35,9 @@ const Images = lazy(() => import("./pages/Writer/Images"));
|
||||
const Review = lazy(() => import("./pages/Writer/Review"));
|
||||
const Published = lazy(() => import("./pages/Writer/Published"));
|
||||
|
||||
// Automation Module - Lazy loaded
|
||||
const AutomationPage = lazy(() => import("./pages/Automation/AutomationPage"));
|
||||
|
||||
// Linker Module - Lazy loaded
|
||||
const LinkerDashboard = lazy(() => import("./pages/Linker/Dashboard"));
|
||||
const LinkerContentList = lazy(() => import("./pages/Linker/ContentList"));
|
||||
@@ -249,6 +252,12 @@ export default function App() {
|
||||
</Suspense>
|
||||
} />
|
||||
|
||||
{/* Automation Module */}
|
||||
<Route path="/automation" element={
|
||||
<Suspense fallback={null}>
|
||||
<AutomationPage />
|
||||
</Suspense>
|
||||
} />
|
||||
|
||||
{/* Linker Module - Redirect dashboard to content */}
|
||||
<Route path="/linker" element={<Navigate to="/linker/content" replace />} />
|
||||
|
||||
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;
|
||||
@@ -125,6 +125,15 @@ const AppSidebar: React.FC = () => {
|
||||
});
|
||||
}
|
||||
|
||||
// Add Automation (always available if Writer is enabled)
|
||||
if (moduleEnabled('writer')) {
|
||||
workflowItems.push({
|
||||
icon: <BoltIcon />,
|
||||
name: "Automation",
|
||||
path: "/automation",
|
||||
});
|
||||
}
|
||||
|
||||
// Add Linker if enabled (single item, no dropdown)
|
||||
if (moduleEnabled('linker')) {
|
||||
workflowItems.push({
|
||||
|
||||
308
frontend/src/pages/Automation/AutomationPage.tsx
Normal file
308
frontend/src/pages/Automation/AutomationPage.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
/**
|
||||
* Automation Dashboard Page
|
||||
* Main page for managing AI automation pipeline
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { useSiteStore } from '../../store/siteStore';
|
||||
import { automationService, AutomationRun, AutomationConfig } from '../../services/automationService';
|
||||
import StageCard from '../../components/Automation/StageCard';
|
||||
import ActivityLog from '../../components/Automation/ActivityLog';
|
||||
import ConfigModal from '../../components/Automation/ConfigModal';
|
||||
import RunHistory from '../../components/Automation/RunHistory';
|
||||
|
||||
const STAGE_NAMES = [
|
||||
'Keywords → Clusters',
|
||||
'Clusters → Ideas',
|
||||
'Ideas → Tasks',
|
||||
'Tasks → Content',
|
||||
'Content → Image Prompts',
|
||||
'Image Prompts → Images',
|
||||
'Manual Review Gate',
|
||||
];
|
||||
|
||||
const AutomationPage: React.FC = () => {
|
||||
const { activeSite } = useSiteStore();
|
||||
const { showToast } = useToast();
|
||||
const [config, setConfig] = useState<AutomationConfig | null>(null);
|
||||
const [currentRun, setCurrentRun] = useState<AutomationRun | null>(null);
|
||||
const [showConfigModal, setShowConfigModal] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);
|
||||
|
||||
// Poll for current run updates
|
||||
useEffect(() => {
|
||||
if (!activeSite) return;
|
||||
|
||||
loadData();
|
||||
|
||||
// Poll every 5 seconds when run is active
|
||||
const interval = setInterval(() => {
|
||||
if (currentRun && (currentRun.status === 'running' || currentRun.status === 'paused')) {
|
||||
loadCurrentRun();
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [activeSite, currentRun?.status]);
|
||||
|
||||
const loadData = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const [configData, runData, estimateData] = await Promise.all([
|
||||
automationService.getConfig(activeSite.id),
|
||||
automationService.getCurrentRun(activeSite.id),
|
||||
automationService.estimate(activeSite.id),
|
||||
]);
|
||||
setConfig(configData);
|
||||
setCurrentRun(runData.run);
|
||||
setEstimate(estimateData);
|
||||
} catch (error: any) {
|
||||
showToast('Failed to load automation data', 'error');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadCurrentRun = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
const data = await automationService.getCurrentRun(activeSite.id);
|
||||
setCurrentRun(data.run);
|
||||
} catch (error) {
|
||||
console.error('Failed to poll current run', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRunNow = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
// Check credit balance
|
||||
if (estimate && !estimate.sufficient) {
|
||||
showToast(`Insufficient credits. Need ~${estimate.estimated_credits}, you have ${estimate.current_balance}`, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await automationService.runNow(activeSite.id);
|
||||
showToast('Automation started', 'success');
|
||||
loadCurrentRun();
|
||||
} catch (error: any) {
|
||||
showToast(error.response?.data?.error || 'Failed to start automation', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handlePause = async () => {
|
||||
if (!currentRun) return;
|
||||
|
||||
try {
|
||||
await automationService.pause(currentRun.run_id);
|
||||
showToast('Automation paused', 'success');
|
||||
loadCurrentRun();
|
||||
} catch (error) {
|
||||
showToast('Failed to pause automation', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleResume = async () => {
|
||||
if (!currentRun) return;
|
||||
|
||||
try {
|
||||
await automationService.resume(currentRun.run_id);
|
||||
showToast('Automation resumed', 'success');
|
||||
loadCurrentRun();
|
||||
} catch (error) {
|
||||
showToast('Failed to resume automation', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveConfig = async (newConfig: Partial<AutomationConfig>) => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
await automationService.updateConfig(activeSite.id, newConfig);
|
||||
showToast('Configuration saved', 'success');
|
||||
setShowConfigModal(false);
|
||||
loadData();
|
||||
} catch (error) {
|
||||
showToast('Failed to save configuration', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="text-xl">Loading automation...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!activeSite) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="text-xl">Please select a site</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">AI Automation Pipeline</h1>
|
||||
<p className="text-gray-600 mt-1">
|
||||
Automated content creation from keywords to published articles
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowConfigModal(true)}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
|
||||
>
|
||||
Configure
|
||||
</button>
|
||||
{currentRun?.status === 'running' && (
|
||||
<button
|
||||
onClick={handlePause}
|
||||
className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
|
||||
>
|
||||
Pause
|
||||
</button>
|
||||
)}
|
||||
{currentRun?.status === 'paused' && (
|
||||
<button
|
||||
onClick={handleResume}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Resume
|
||||
</button>
|
||||
)}
|
||||
{!currentRun && (
|
||||
<button
|
||||
onClick={handleRunNow}
|
||||
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
|
||||
disabled={!config?.is_enabled}
|
||||
>
|
||||
Run Now
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Bar */}
|
||||
{config && (
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Status</div>
|
||||
<div className="font-semibold">
|
||||
{config.is_enabled ? (
|
||||
<span className="text-green-600">Enabled</span>
|
||||
) : (
|
||||
<span className="text-gray-600">Disabled</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Schedule</div>
|
||||
<div className="font-semibold capitalize">
|
||||
{config.frequency} at {config.scheduled_time}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Last Run</div>
|
||||
<div className="font-semibold">
|
||||
{config.last_run_at
|
||||
? new Date(config.last_run_at).toLocaleString()
|
||||
: 'Never'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Estimated Credits</div>
|
||||
<div className="font-semibold">
|
||||
{estimate?.estimated_credits || 0} credits
|
||||
{estimate && !estimate.sufficient && (
|
||||
<span className="text-red-600 ml-2">(Insufficient)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current Run Status */}
|
||||
{currentRun && (
|
||||
<div className="mb-6">
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<h2 className="text-xl font-bold mb-4">
|
||||
Current Run: {currentRun.run_id}
|
||||
</h2>
|
||||
<div className="grid grid-cols-4 gap-4 mb-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Status</div>
|
||||
<div className="font-semibold capitalize">{currentRun.status}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Current Stage</div>
|
||||
<div className="font-semibold">
|
||||
Stage {currentRun.current_stage}: {STAGE_NAMES[currentRun.current_stage - 1]}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Started</div>
|
||||
<div className="font-semibold">
|
||||
{new Date(currentRun.started_at).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Credits Used</div>
|
||||
<div className="font-semibold">{currentRun.total_credits_used}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stage Progress */}
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{STAGE_NAMES.map((name, index) => (
|
||||
<StageCard
|
||||
key={index}
|
||||
stageNumber={index + 1}
|
||||
stageName={name}
|
||||
currentStage={currentRun.current_stage}
|
||||
result={currentRun[`stage_${index + 1}_result` as keyof AutomationRun] as any}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activity Log */}
|
||||
{currentRun && (
|
||||
<div className="mb-6">
|
||||
<ActivityLog runId={currentRun.run_id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Run History */}
|
||||
<RunHistory siteId={activeSite.id} />
|
||||
|
||||
{/* Config Modal */}
|
||||
{showConfigModal && config && (
|
||||
<ConfigModal
|
||||
config={config}
|
||||
onSave={handleSaveConfig}
|
||||
onCancel={() => setShowConfigModal(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutomationPage;
|
||||
144
frontend/src/services/automationService.ts
Normal file
144
frontend/src/services/automationService.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* Automation API Service
|
||||
*/
|
||||
import { fetchAPI } from './api';
|
||||
|
||||
export interface AutomationConfig {
|
||||
is_enabled: boolean;
|
||||
frequency: 'daily' | 'weekly' | 'monthly';
|
||||
scheduled_time: string;
|
||||
stage_1_batch_size: number;
|
||||
stage_2_batch_size: number;
|
||||
stage_3_batch_size: number;
|
||||
stage_4_batch_size: number;
|
||||
stage_5_batch_size: number;
|
||||
stage_6_batch_size: number;
|
||||
last_run_at: string | null;
|
||||
next_run_at: string | null;
|
||||
}
|
||||
|
||||
export interface StageResult {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface AutomationRun {
|
||||
run_id: string;
|
||||
status: 'running' | 'paused' | 'completed' | 'failed';
|
||||
current_stage: number;
|
||||
trigger_type: 'manual' | 'scheduled';
|
||||
started_at: string;
|
||||
total_credits_used: number;
|
||||
stage_1_result: StageResult | null;
|
||||
stage_2_result: StageResult | null;
|
||||
stage_3_result: StageResult | null;
|
||||
stage_4_result: StageResult | null;
|
||||
stage_5_result: StageResult | null;
|
||||
stage_6_result: StageResult | null;
|
||||
stage_7_result: StageResult | null;
|
||||
}
|
||||
|
||||
export interface RunHistoryItem {
|
||||
run_id: string;
|
||||
status: string;
|
||||
trigger_type: string;
|
||||
started_at: string;
|
||||
completed_at: string | null;
|
||||
total_credits_used: number;
|
||||
current_stage: number;
|
||||
}
|
||||
|
||||
function buildUrl(endpoint: string, params?: Record<string, any>): string {
|
||||
let url = `/v1/automation${endpoint}`;
|
||||
if (params) {
|
||||
const query = new URLSearchParams(
|
||||
Object.entries(params)
|
||||
.filter(([, v]) => v != null)
|
||||
.map(([k, v]) => [k, String(v)])
|
||||
);
|
||||
const queryStr = query.toString();
|
||||
if (queryStr) {
|
||||
url += `?${queryStr}`;
|
||||
}
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
export const automationService = {
|
||||
/**
|
||||
* Get automation configuration for site
|
||||
*/
|
||||
getConfig: async (siteId: number): Promise<AutomationConfig> => {
|
||||
return fetchAPI(buildUrl('/config/', { site_id: siteId }));
|
||||
},
|
||||
|
||||
/**
|
||||
* Update automation configuration
|
||||
*/
|
||||
updateConfig: async (siteId: number, config: Partial<AutomationConfig>): Promise<void> => {
|
||||
await fetchAPI(buildUrl('/update_config/', { site_id: siteId }), {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(config),
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Trigger automation run now
|
||||
*/
|
||||
runNow: async (siteId: number): Promise<{ run_id: string; message: string }> => {
|
||||
return fetchAPI(buildUrl('/run_now/', { site_id: siteId }), {
|
||||
method: 'POST',
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Get current automation run status
|
||||
*/
|
||||
getCurrentRun: async (siteId: number): Promise<{ run: AutomationRun | null }> => {
|
||||
return fetchAPI(buildUrl('/current_run/', { site_id: siteId }));
|
||||
},
|
||||
|
||||
/**
|
||||
* Pause automation run
|
||||
*/
|
||||
pause: async (runId: string): Promise<void> => {
|
||||
await fetchAPI(buildUrl('/pause/', { run_id: runId }), {
|
||||
method: 'POST',
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Resume paused automation run
|
||||
*/
|
||||
resume: async (runId: string): Promise<void> => {
|
||||
await fetchAPI(buildUrl('/resume/', { run_id: runId }), {
|
||||
method: 'POST',
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Get automation run history
|
||||
*/
|
||||
getHistory: async (siteId: number): Promise<RunHistoryItem[]> => {
|
||||
const response = await fetchAPI(buildUrl('/history/', { site_id: siteId }));
|
||||
return response.runs;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get automation run logs
|
||||
*/
|
||||
getLogs: async (runId: string, lines: number = 100): Promise<string> => {
|
||||
const response = await fetchAPI(buildUrl('/logs/', { run_id: runId, lines }));
|
||||
return response.log;
|
||||
},
|
||||
|
||||
/**
|
||||
* Estimate credits needed
|
||||
*/
|
||||
estimate: async (siteId: number): Promise<{
|
||||
estimated_credits: number;
|
||||
current_balance: number;
|
||||
sufficient: boolean;
|
||||
}> => {
|
||||
return fetchAPI(buildUrl('/estimate/', { site_id: siteId }));
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user