fixees
This commit is contained in:
@@ -4,7 +4,7 @@ Tracks automation runs and configuration
|
||||
"""
|
||||
from django.db import models
|
||||
from django.utils import timezone
|
||||
from igny8_core.modules.system.models import Account, Site
|
||||
from igny8_core.auth.models import Account, Site
|
||||
|
||||
|
||||
class AutomationConfig(models.Model):
|
||||
|
||||
@@ -13,17 +13,17 @@ from celery.result import AsyncResult
|
||||
|
||||
from igny8_core.business.automation.models import AutomationRun, AutomationConfig
|
||||
from igny8_core.business.automation.services.automation_logger import AutomationLogger
|
||||
from igny8_core.modules.system.models import Account, Site
|
||||
from igny8_core.auth.models import Account, Site
|
||||
from igny8_core.modules.planner.models import Keywords, Clusters, ContentIdeas
|
||||
from igny8_core.modules.writer.models import Tasks, Content, Images
|
||||
from igny8_core.business.content.models import AIUsageLog
|
||||
from igny8_core.ai.models import AITaskLog
|
||||
|
||||
# AI Functions
|
||||
from igny8_core.ai.functions.auto_cluster import AutoCluster
|
||||
from igny8_core.ai.functions.generate_ideas import GenerateIdeas
|
||||
from igny8_core.ai.functions.generate_content import GenerateContent
|
||||
from igny8_core.ai.functions.auto_cluster import AutoClusterFunction
|
||||
from igny8_core.ai.functions.generate_ideas import GenerateIdeasFunction
|
||||
from igny8_core.ai.functions.generate_content import GenerateContentFunction
|
||||
from igny8_core.ai.functions.generate_image_prompts import GenerateImagePromptsFunction
|
||||
from igny8_core.ai.functions.generate_images import GenerateImages
|
||||
from igny8_core.ai.functions.generate_images import GenerateImagesFunction
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
@@ -165,7 +165,7 @@ class AutomationService:
|
||||
)
|
||||
|
||||
# Call AI function
|
||||
result = AutoCluster().execute(
|
||||
result = AutoClusterFunction().execute(
|
||||
payload={'ids': batch},
|
||||
account=self.account
|
||||
)
|
||||
@@ -259,7 +259,7 @@ class AutomationService:
|
||||
)
|
||||
|
||||
# Call AI function
|
||||
result = GenerateIdeas().execute(
|
||||
result = GenerateIdeasFunction().execute(
|
||||
payload={'ids': [cluster.id]},
|
||||
account=self.account
|
||||
)
|
||||
@@ -454,7 +454,7 @@ class AutomationService:
|
||||
)
|
||||
|
||||
# Call AI function
|
||||
result = GenerateContent().execute(
|
||||
result = GenerateContentFunction().execute(
|
||||
payload={'ids': [task.id]},
|
||||
account=self.account
|
||||
)
|
||||
@@ -642,7 +642,7 @@ class AutomationService:
|
||||
)
|
||||
|
||||
# Call AI function
|
||||
result = GenerateImages().execute(
|
||||
result = GenerateImagesFunction().execute(
|
||||
payload={'image_ids': [image.id]},
|
||||
account=self.account
|
||||
)
|
||||
@@ -809,7 +809,7 @@ class AutomationService:
|
||||
if not self.run:
|
||||
return 0
|
||||
|
||||
total = AIUsageLog.objects.filter(
|
||||
total = AITaskLog.objects.filter(
|
||||
account=self.account,
|
||||
created_at__gte=self.run.started_at
|
||||
).aggregate(total=Count('id'))['total'] or 0
|
||||
|
||||
@@ -11,7 +11,7 @@ from django.utils import timezone
|
||||
|
||||
from igny8_core.business.automation.models import AutomationConfig, AutomationRun
|
||||
from igny8_core.business.automation.services import AutomationService
|
||||
from igny8_core.modules.system.models import Account, Site
|
||||
from igny8_core.auth.models import Account, Site
|
||||
|
||||
|
||||
class AutomationViewSet(viewsets.ViewSet):
|
||||
|
||||
@@ -54,6 +54,7 @@ INSTALLED_APPS = [
|
||||
'igny8_core.modules.billing.apps.BillingConfig',
|
||||
# 'igny8_core.modules.automation.apps.AutomationConfig', # Removed - automation module disabled
|
||||
# 'igny8_core.business.site_building.apps.SiteBuildingConfig', # REMOVED: SiteBuilder/Blueprint deprecated
|
||||
'igny8_core.business.automation', # AI Automation Pipeline
|
||||
'igny8_core.business.optimization.apps.OptimizationConfig',
|
||||
'igny8_core.business.publishing.apps.PublishingConfig',
|
||||
'igny8_core.business.integration.apps.IntegrationConfig',
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { automationService } from '../../services/automationService';
|
||||
import ComponentCard from '../common/ComponentCard';
|
||||
|
||||
interface ActivityLogProps {
|
||||
runId: string;
|
||||
@@ -31,15 +32,17 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<ComponentCard
|
||||
title="Activity Log"
|
||||
desc="Real-time automation progress and events"
|
||||
>
|
||||
<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>
|
||||
<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 rounded px-2 py-1 text-sm"
|
||||
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>
|
||||
@@ -48,11 +51,14 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-xs overflow-auto max-h-96">
|
||||
<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>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityLog;
|
||||
};
|
||||
|
||||
export default ActivityLog;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { automationService, RunHistoryItem } from '../../services/automationService';
|
||||
import ComponentCard from '../common/ComponentCard';
|
||||
|
||||
interface RunHistoryProps {
|
||||
siteId: number;
|
||||
@@ -31,56 +32,61 @@ const RunHistory: React.FC<RunHistoryProps> = ({ siteId }) => {
|
||||
|
||||
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',
|
||||
completed: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
|
||||
running: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
|
||||
paused: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
|
||||
failed: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
|
||||
};
|
||||
return colors[status] || 'bg-gray-100 text-gray-800';
|
||||
return colors[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-4">Loading history...</div>;
|
||||
return (
|
||||
<ComponentCard title="Run History" desc="Past automation executions">
|
||||
<div className="text-center py-4 text-gray-600 dark:text-gray-400">Loading history...</div>
|
||||
</ComponentCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<h2 className="text-xl font-bold mb-4">Run History</h2>
|
||||
|
||||
<ComponentCard
|
||||
title="Run History"
|
||||
desc="Past automation executions and their results"
|
||||
>
|
||||
{history.length === 0 ? (
|
||||
<div className="text-center text-gray-600 py-8">No automation runs yet</div>
|
||||
<div className="text-center text-gray-600 dark:text-gray-400 py-8">No automation runs yet</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<div className="overflow-x-auto -mx-6">
|
||||
<table className="min-w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800/50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Run ID
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Trigger
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Started
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Completed
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Credits Used
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Stage
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{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>
|
||||
<tr key={run.run_id} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
|
||||
<td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-gray-100">{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(
|
||||
@@ -90,25 +96,28 @@ const RunHistory: React.FC<RunHistoryProps> = ({ siteId }) => {
|
||||
{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">
|
||||
<td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 capitalize">{run.trigger_type}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
||||
{new Date(run.started_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm">
|
||||
<td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
||||
{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>
|
||||
<td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">{run.total_credits_used}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">{run.current_stage}/7</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default RunHistory;
|
||||
};
|
||||
|
||||
export default RunHistory;
|
||||
|
||||
@@ -10,6 +10,11 @@ import StageCard from '../../components/Automation/StageCard';
|
||||
import ActivityLog from '../../components/Automation/ActivityLog';
|
||||
import ConfigModal from '../../components/Automation/ConfigModal';
|
||||
import RunHistory from '../../components/Automation/RunHistory';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import ComponentCard from '../../components/common/ComponentCard';
|
||||
import DebugSiteSelector from '../../components/common/DebugSiteSelector';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { BoltIcon } from '../../icons';
|
||||
|
||||
const STAGE_NAMES = [
|
||||
'Keywords → Clusters',
|
||||
@@ -23,11 +28,12 @@ const STAGE_NAMES = [
|
||||
|
||||
const AutomationPage: React.FC = () => {
|
||||
const { activeSite } = useSiteStore();
|
||||
const { showToast } = useToast();
|
||||
const toast = 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 [lastUpdated, setLastUpdated] = useState<Date>(new Date());
|
||||
const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);
|
||||
|
||||
// Poll for current run updates
|
||||
@@ -59,8 +65,9 @@ const AutomationPage: React.FC = () => {
|
||||
setConfig(configData);
|
||||
setCurrentRun(runData.run);
|
||||
setEstimate(estimateData);
|
||||
setLastUpdated(new Date());
|
||||
} catch (error: any) {
|
||||
showToast('Failed to load automation data', 'error');
|
||||
toast.error('Failed to load automation data');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@@ -83,16 +90,16 @@ const AutomationPage: React.FC = () => {
|
||||
|
||||
// Check credit balance
|
||||
if (estimate && !estimate.sufficient) {
|
||||
showToast(`Insufficient credits. Need ~${estimate.estimated_credits}, you have ${estimate.current_balance}`, 'error');
|
||||
toast.error(`Insufficient credits. Need ~${estimate.estimated_credits}, you have ${estimate.current_balance}`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await automationService.runNow(activeSite.id);
|
||||
showToast('Automation started', 'success');
|
||||
toast.success('Automation started');
|
||||
loadCurrentRun();
|
||||
} catch (error: any) {
|
||||
showToast(error.response?.data?.error || 'Failed to start automation', 'error');
|
||||
toast.error(error.response?.data?.error || 'Failed to start automation');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -101,10 +108,10 @@ const AutomationPage: React.FC = () => {
|
||||
|
||||
try {
|
||||
await automationService.pause(currentRun.run_id);
|
||||
showToast('Automation paused', 'success');
|
||||
toast.success('Automation paused');
|
||||
loadCurrentRun();
|
||||
} catch (error) {
|
||||
showToast('Failed to pause automation', 'error');
|
||||
toast.error('Failed to pause automation');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -113,10 +120,10 @@ const AutomationPage: React.FC = () => {
|
||||
|
||||
try {
|
||||
await automationService.resume(currentRun.run_id);
|
||||
showToast('Automation resumed', 'success');
|
||||
toast.success('Automation resumed');
|
||||
loadCurrentRun();
|
||||
} catch (error) {
|
||||
showToast('Failed to resume automation', 'error');
|
||||
toast.error('Failed to resume automation');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -125,150 +132,180 @@ const AutomationPage: React.FC = () => {
|
||||
|
||||
try {
|
||||
await automationService.updateConfig(activeSite.id, newConfig);
|
||||
showToast('Configuration saved', 'success');
|
||||
toast.success('Configuration saved');
|
||||
setShowConfigModal(false);
|
||||
loadData();
|
||||
} catch (error) {
|
||||
showToast('Failed to save configuration', 'error');
|
||||
toast.error('Failed to save configuration');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="text-xl">Loading automation...</div>
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="text-lg text-gray-600 dark:text-gray-400">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 className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="text-lg text-gray-600 dark:text-gray-400">Please select a site to view automation</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>
|
||||
<>
|
||||
<PageMeta
|
||||
title="AI Automation Pipeline | IGNY8"
|
||||
description="Automated content creation from keywords to published articles"
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Page Header with Site Selector (no sector) */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-purple-600 dark:bg-purple-500 flex-shrink-0">
|
||||
<BoltIcon className="text-white size-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">AI Automation Pipeline</h2>
|
||||
</div>
|
||||
{activeSite && (
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
{lastUpdated && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Last updated: {lastUpdated.toLocaleTimeString()}
|
||||
</p>
|
||||
)}
|
||||
<span className="text-sm text-gray-400 dark:text-gray-600">•</span>
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Site: <span className="text-brand-600 dark:text-brand-400">{activeSite.name}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</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 className="flex items-center gap-3">
|
||||
<DebugSiteSelector />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Bar */}
|
||||
{/* Schedule Status Card */}
|
||||
{config && (
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<ComponentCard
|
||||
title="Schedule & Status"
|
||||
desc="Configure and monitor your automation schedule"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Status</div>
|
||||
<div className="font-semibold">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{config.is_enabled ? (
|
||||
<span className="text-green-600">Enabled</span>
|
||||
<span className="text-green-600 dark:text-green-400">● Enabled</span>
|
||||
) : (
|
||||
<span className="text-gray-600">Disabled</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">○ Disabled</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Schedule</div>
|
||||
<div className="font-semibold capitalize">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Schedule</div>
|
||||
<div className="font-semibold mt-1 capitalize">
|
||||
{config.frequency} at {config.scheduled_time}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Last Run</div>
|
||||
<div className="font-semibold">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Last Run</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{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">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Estimated Credits</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{estimate?.estimated_credits || 0} credits
|
||||
{estimate && !estimate.sufficient && (
|
||||
<span className="text-red-600 ml-2">(Insufficient)</span>
|
||||
<span className="text-red-600 dark:text-red-400 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 className="flex gap-3 mt-6">
|
||||
<Button
|
||||
onClick={() => setShowConfigModal(true)}
|
||||
variant="outline"
|
||||
tone="brand"
|
||||
>
|
||||
Configure
|
||||
</Button>
|
||||
{currentRun?.status === 'running' && (
|
||||
<Button
|
||||
onClick={handlePause}
|
||||
variant="primary"
|
||||
tone="warning"
|
||||
>
|
||||
Pause
|
||||
</Button>
|
||||
)}
|
||||
{currentRun?.status === 'paused' && (
|
||||
<Button
|
||||
onClick={handleResume}
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
>
|
||||
Resume
|
||||
</Button>
|
||||
)}
|
||||
{!currentRun && (
|
||||
<Button
|
||||
onClick={handleRunNow}
|
||||
variant="primary"
|
||||
tone="success"
|
||||
disabled={!config?.is_enabled}
|
||||
>
|
||||
Run Now
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
)}
|
||||
|
||||
{/* Current Run Status */}
|
||||
{currentRun && (
|
||||
<ComponentCard
|
||||
title={`Current Run: ${currentRun.run_id}`}
|
||||
desc="Live automation progress and stage details"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Status</div>
|
||||
<div className="font-semibold capitalize">{currentRun.status}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
|
||||
<div className="font-semibold mt-1 capitalize">{currentRun.status}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Current Stage</div>
|
||||
<div className="font-semibold">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Current Stage</div>
|
||||
<div className="font-semibold mt-1">
|
||||
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">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Started</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{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 className="text-sm text-gray-600 dark:text-gray-400">Credits Used</div>
|
||||
<div className="font-semibold mt-1">{currentRun.total_credits_used}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stage Progress */}
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-7 gap-3 mt-6">
|
||||
{STAGE_NAMES.map((name, index) => (
|
||||
<StageCard
|
||||
key={index}
|
||||
@@ -279,29 +316,27 @@ const AutomationPage: React.FC = () => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ComponentCard>
|
||||
)}
|
||||
|
||||
{/* Activity Log */}
|
||||
{currentRun && (
|
||||
<div className="mb-6">
|
||||
{/* Activity Log */}
|
||||
{currentRun && (
|
||||
<ActivityLog runId={currentRun.run_id} />
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Run History */}
|
||||
<RunHistory siteId={activeSite.id} />
|
||||
{/* Run History */}
|
||||
<RunHistory siteId={activeSite.id} />
|
||||
|
||||
{/* Config Modal */}
|
||||
{showConfigModal && config && (
|
||||
<ConfigModal
|
||||
config={config}
|
||||
onSave={handleSaveConfig}
|
||||
onCancel={() => setShowConfigModal(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* Config Modal */}
|
||||
{showConfigModal && config && (
|
||||
<ConfigModal
|
||||
config={config}
|
||||
onSave={handleSaveConfig}
|
||||
onCancel={() => setShowConfigModal(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user