salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixees

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-03 08:32:07 +00:00
parent b9774aafa2
commit 291d8cc968
7 changed files with 207 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/Automation/ActivityLog.tsx
View File

@@ -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;

65
frontend/src/components/Automation/RunHistory.tsx
View File

@@ -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;