Agent Zero
779 lines
26 KiB
TypeScript
779 lines
26 KiB
TypeScript
import { asError } from '@/utils/errorTypes';
|
|
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
useAutomations,
|
|
useCreateAutomation,
|
|
useUpdateAutomation,
|
|
useDeleteAutomation,
|
|
useExecuteAutomation,
|
|
useDryRunAutomation,
|
|
useAutomationRuns,
|
|
useAutomationVersions,
|
|
useRestoreAutomationVersion,
|
|
} from '@/api/automation';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Modal } from '@/components/ui/Modal';
|
|
import { Select } from '@/components/ui/Select';
|
|
import { EmptyState } from '@/components/ui/EmptyState';
|
|
import { Skeleton } from '@/components/ui/Skeleton';
|
|
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
|
|
import { useToast } from '@/components/ui/Toast';
|
|
import type { AutomationDefinition, AutomationCondition, AutomationAction } from '@/types/automation';
|
|
import {
|
|
Plus,
|
|
Play,
|
|
RotateCcw,
|
|
History,
|
|
GitBranch,
|
|
Trash2,
|
|
Settings2,
|
|
Workflow,
|
|
Clock,
|
|
Zap,
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Loader2,
|
|
} from 'lucide-react';
|
|
|
|
const triggerTypeOptions = [
|
|
{ value: 'event', label: 'Event' },
|
|
{ value: 'schedule', label: 'Schedule' },
|
|
{ value: 'manual', label: 'Manual' },
|
|
];
|
|
|
|
const actionTypeOptions = [
|
|
{ value: 'api_call', label: 'API Call' },
|
|
{ value: 'notification', label: 'Notification' },
|
|
{ value: 'workflow_start', label: 'Workflow Start' },
|
|
];
|
|
|
|
const conditionOperatorOptions = [
|
|
{ value: 'equals', label: 'Equals' },
|
|
{ value: 'not_equals', label: 'Not Equals' },
|
|
{ value: 'contains', label: 'Contains' },
|
|
{ value: 'greater_than', label: 'Greater Than' },
|
|
{ value: 'less_than', label: 'Less Than' },
|
|
];
|
|
|
|
function statusBadgeVariant(status: string): 'success' | 'warning' | 'danger' | 'secondary' {
|
|
switch (status) {
|
|
case 'active': return 'success';
|
|
case 'inactive': return 'warning';
|
|
default: return 'secondary';
|
|
}
|
|
}
|
|
|
|
function runStatusBadgeVariant(status: string): 'success' | 'warning' | 'danger' | 'info' {
|
|
switch (status) {
|
|
case 'completed': return 'success';
|
|
case 'running': return 'info';
|
|
case 'failed': return 'danger';
|
|
case 'cancelled': return 'warning';
|
|
default: return 'warning';
|
|
}
|
|
}
|
|
|
|
function triggerIcon(type: string) {
|
|
switch (type) {
|
|
case 'event': return <Zap className="h-4 w-4" />;
|
|
case 'schedule': return <Clock className="h-4 w-4" />;
|
|
default: return <Play className="h-4 w-4" />;
|
|
}
|
|
}
|
|
|
|
interface AutomationFormData {
|
|
name: string;
|
|
description: string;
|
|
trigger_type: 'event' | 'schedule' | 'manual';
|
|
trigger_config: Record<string, string>;
|
|
conditions: AutomationCondition[];
|
|
actions: AutomationAction[];
|
|
active: boolean;
|
|
dry_run: boolean;
|
|
}
|
|
|
|
const emptyForm: AutomationFormData = {
|
|
name: '',
|
|
description: '',
|
|
trigger_type: 'manual',
|
|
trigger_config: {},
|
|
conditions: [],
|
|
actions: [],
|
|
active: true,
|
|
dry_run: false,
|
|
};
|
|
|
|
function AutomationForm({
|
|
initial,
|
|
onSave,
|
|
onCancel,
|
|
isSaving,
|
|
}: {
|
|
initial?: AutomationDefinition;
|
|
onSave: (data: Partial<AutomationDefinition>) => void;
|
|
onCancel: () => void;
|
|
isSaving: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [form, setForm] = useState<AutomationFormData>(() => {
|
|
if (initial) {
|
|
return {
|
|
name: initial.name,
|
|
description: initial.description || '',
|
|
trigger_type: initial.trigger_type,
|
|
trigger_config: (initial.trigger_config as Record<string, string>) || {},
|
|
conditions: initial.conditions || [],
|
|
actions: initial.actions || [],
|
|
active: initial.active,
|
|
dry_run: initial.dry_run,
|
|
};
|
|
}
|
|
return { ...emptyForm };
|
|
});
|
|
|
|
const updateField = <K extends keyof AutomationFormData>(key: K, value: AutomationFormData[K]) => {
|
|
setForm((prev) => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
const addCondition = () => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
conditions: [...prev.conditions, { field: '', operator: 'equals', value: '' }],
|
|
}));
|
|
};
|
|
|
|
const updateCondition = (index: number, field: keyof AutomationCondition, value: string) => {
|
|
setForm((prev) => {
|
|
const conditions = [...prev.conditions];
|
|
conditions[index] = { ...conditions[index], [field]: value };
|
|
return { ...prev, conditions };
|
|
});
|
|
};
|
|
|
|
const removeCondition = (index: number) => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
conditions: prev.conditions.filter((_, i) => i !== index),
|
|
}));
|
|
};
|
|
|
|
const addAction = () => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
actions: [...prev.actions, { type: 'api_call', config: {} }],
|
|
}));
|
|
};
|
|
|
|
const updateAction = (index: number, field: 'type' | 'config', value: string | Record<string, unknown>) => {
|
|
setForm((prev) => {
|
|
const actions = [...prev.actions];
|
|
if (field === 'type') {
|
|
actions[index] = { ...actions[index], type: value as 'api_call' | 'notification' | 'workflow_start' };
|
|
} else {
|
|
actions[index] = { ...actions[index], config: value as Record<string, unknown> };
|
|
}
|
|
return { ...prev, actions };
|
|
});
|
|
};
|
|
|
|
const removeAction = (index: number) => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
actions: prev.actions.filter((_, i) => i !== index),
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSave({
|
|
name: form.name,
|
|
description: form.description || undefined,
|
|
trigger_type: form.trigger_type,
|
|
trigger_config: form.trigger_config,
|
|
conditions: form.conditions,
|
|
actions: form.actions,
|
|
active: form.active,
|
|
dry_run: form.dry_run,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Name & Description */}
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">
|
|
{t('automation.name')} *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={form.name}
|
|
onChange={(e) => updateField('name', e.target.value)}
|
|
required
|
|
className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
placeholder="My Automation"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">
|
|
{t('automation.description')}
|
|
</label>
|
|
<textarea
|
|
value={form.description}
|
|
onChange={(e) => updateField('description', e.target.value)}
|
|
rows={2}
|
|
className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
placeholder="Optional description"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Trigger Type */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">
|
|
{t('automation.triggerType')}
|
|
</label>
|
|
<Select
|
|
options={triggerTypeOptions}
|
|
value={form.trigger_type}
|
|
onChange={(e) => updateField('trigger_type', e.target.value as 'event' | 'schedule' | 'manual')}
|
|
/>
|
|
</div>
|
|
|
|
{/* Trigger Config */}
|
|
{form.trigger_type === 'event' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">
|
|
{t('automation.eventName')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={form.trigger_config.event_name || ''}
|
|
onChange={(e) => updateField('trigger_config', { ...form.trigger_config, event_name: e.target.value })}
|
|
className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
placeholder="contact.created"
|
|
/>
|
|
</div>
|
|
)}
|
|
{form.trigger_type === 'schedule' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">
|
|
{t('automation.cronExpression')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={form.trigger_config.cron || ''}
|
|
onChange={(e) => updateField('trigger_config', { ...form.trigger_config, cron: e.target.value })}
|
|
className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
placeholder="0 9 * * *"
|
|
/>
|
|
<p className="text-xs text-secondary-400 mt-1">Cron expression (e.g. 0 9 * * * for daily at 9am)</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Conditions */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<label className="text-sm font-medium text-secondary-700">
|
|
{t('automation.conditions')}
|
|
</label>
|
|
<Button size="sm" variant="ghost" onClick={addCondition} type="button">
|
|
+ {t('common.add')}
|
|
</Button>
|
|
</div>
|
|
{form.conditions.length === 0 && (
|
|
<p className="text-sm text-secondary-400 italic">{t('automation.noConditions')}</p>
|
|
)}
|
|
{form.conditions.map((cond, i) => (
|
|
<div key={i} className="flex items-center gap-2 mb-2">
|
|
<input
|
|
type="text"
|
|
value={cond.field}
|
|
onChange={(e) => updateCondition(i, 'field', e.target.value)}
|
|
placeholder="Field"
|
|
className="flex-1 rounded-lg border border-secondary-300 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
<Select
|
|
options={conditionOperatorOptions}
|
|
value={cond.operator}
|
|
onChange={(e) => updateCondition(i, 'operator', e.target.value)}
|
|
className="w-32"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={cond.value}
|
|
onChange={(e) => updateCondition(i, 'value', e.target.value)}
|
|
placeholder="Value"
|
|
className="flex-1 rounded-lg border border-secondary-300 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeCondition(i)}
|
|
className="text-danger-500 hover:text-danger-700 p-1"
|
|
aria-label="Remove condition"
|
|
>
|
|
<XCircle className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<label className="text-sm font-medium text-secondary-700">
|
|
{t('automation.actions')}
|
|
</label>
|
|
<Button size="sm" variant="ghost" onClick={addAction} type="button">
|
|
+ {t('common.add')}
|
|
</Button>
|
|
</div>
|
|
{form.actions.length === 0 && (
|
|
<p className="text-sm text-secondary-400 italic">{t('automation.noActions')}</p>
|
|
)}
|
|
{form.actions.map((action, i) => (
|
|
<div key={i} className="flex items-center gap-2 mb-2">
|
|
<Select
|
|
options={actionTypeOptions}
|
|
value={action.type}
|
|
onChange={(e) => updateAction(i, 'type', e.target.value)}
|
|
className="w-40"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={JSON.stringify(action.config)}
|
|
onChange={(e) => {
|
|
try {
|
|
updateAction(i, 'config', JSON.parse(e.target.value));
|
|
} catch {
|
|
// ignore invalid JSON while typing
|
|
}
|
|
}}
|
|
placeholder='{"url": "..."}'
|
|
className="flex-1 rounded-lg border border-secondary-300 px-3 py-1.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeAction(i)}
|
|
className="text-danger-500 hover:text-danger-700 p-1"
|
|
aria-label="Remove action"
|
|
>
|
|
<XCircle className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Toggles */}
|
|
<div className="flex items-center gap-6">
|
|
<label className="flex items-center gap-2 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.active}
|
|
onChange={(e) => updateField('active', e.target.checked)}
|
|
className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
{t('automation.active')}
|
|
</label>
|
|
<label className="flex items-center gap-2 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.dry_run}
|
|
onChange={(e) => updateField('dry_run', e.target.checked)}
|
|
className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
{t('automation.dryRun')}
|
|
</label>
|
|
</div>
|
|
|
|
{/* Buttons */}
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-secondary-200">
|
|
<Button variant="secondary" onClick={onCancel} type="button">
|
|
{t('common.cancel')}
|
|
</Button>
|
|
<Button type="submit" isLoading={isSaving}>
|
|
{initial ? t('common.save') : t('common.create')}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function RunHistoryModal({
|
|
automationId,
|
|
open,
|
|
onClose,
|
|
}: {
|
|
automationId: string;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { data: runs, isLoading } = useAutomationRuns(automationId);
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} title={t('automation.runHistory')} size="lg">
|
|
{isLoading ? (
|
|
<div className="space-y-2">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-12 w-full" />
|
|
))}
|
|
</div>
|
|
) : !runs || runs.length === 0 ? (
|
|
<EmptyState
|
|
title={t('automation.noRuns')}
|
|
description={t('automation.noRunsDesc')}
|
|
icon={<History className="h-8 w-8" />}
|
|
/>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{runs.map((run) => (
|
|
<div
|
|
key={run.id}
|
|
className="flex items-center justify-between p-3 bg-secondary-50 rounded-lg"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Badge variant={runStatusBadgeVariant(run.status)}>
|
|
{run.status}
|
|
</Badge>
|
|
<span className="text-sm text-secondary-600">
|
|
{new Date(run.started_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{run.error && (
|
|
<span className="text-xs text-danger-600 max-w-xs truncate" title={run.error}>
|
|
{run.error}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
function VersionHistoryModal({
|
|
automationId,
|
|
open,
|
|
onClose,
|
|
}: {
|
|
automationId: string;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const toast = useToast();
|
|
const { data: versions, isLoading } = useAutomationVersions(automationId);
|
|
const restoreMutation = useRestoreAutomationVersion();
|
|
|
|
const handleRestore = async (versionId: string) => {
|
|
try {
|
|
await restoreMutation.mutateAsync({ id: automationId, versionId });
|
|
toast.success(t('automation.versionRestored'));
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj.message || t('common.error'));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} title={t('automation.versionHistory')} size="lg">
|
|
{isLoading ? (
|
|
<div className="space-y-2">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-12 w-full" />
|
|
))}
|
|
</div>
|
|
) : !versions || versions.length === 0 ? (
|
|
<EmptyState
|
|
title={t('automation.noVersions')}
|
|
icon={<GitBranch className="h-8 w-8" />}
|
|
/>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{versions.map((ver) => (
|
|
<div
|
|
key={ver.id}
|
|
className="flex items-center justify-between p-3 bg-secondary-50 rounded-lg"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Badge variant="primary">v{ver.version}</Badge>
|
|
<span className="text-sm text-secondary-600">
|
|
{new Date(ver.created_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => handleRestore(ver.id)}
|
|
isLoading={restoreMutation.isPending}
|
|
>
|
|
{t('common.restore')}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export function AutomationDashboardPage() {
|
|
const { t } = useTranslation();
|
|
const toast = useToast();
|
|
const { data: automations, isLoading, isError, refetch } = useAutomations();
|
|
const createMutation = useCreateAutomation();
|
|
const updateMutation = useUpdateAutomation();
|
|
const deleteMutation = useDeleteAutomation();
|
|
const executeMutation = useExecuteAutomation();
|
|
const dryRunMutation = useDryRunAutomation();
|
|
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingAutomation, setEditingAutomation] = useState<AutomationDefinition | undefined>(undefined);
|
|
const [confirmDelete, setConfirmDelete] = useState<AutomationDefinition | null>(null);
|
|
const [runHistoryId, setRunHistoryId] = useState<string | null>(null);
|
|
const [versionHistoryId, setVersionHistoryId] = useState<string | null>(null);
|
|
|
|
const handleSave = async (data: Partial<AutomationDefinition>) => {
|
|
try {
|
|
if (editingAutomation) {
|
|
await updateMutation.mutateAsync({ id: editingAutomation.id, data });
|
|
toast.success(t('automation.updated'));
|
|
} else {
|
|
await createMutation.mutateAsync(data);
|
|
toast.success(t('automation.created'));
|
|
}
|
|
setShowForm(false);
|
|
setEditingAutomation(undefined);
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj.message || t('common.error'));
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirmDelete) return;
|
|
try {
|
|
await deleteMutation.mutateAsync(confirmDelete.id);
|
|
toast.success(t('automation.deleted'));
|
|
setConfirmDelete(null);
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj.message || t('common.error'));
|
|
}
|
|
};
|
|
|
|
const handleExecute = async (id: string) => {
|
|
try {
|
|
await executeMutation.mutateAsync(id);
|
|
toast.success(t('automation.executed'));
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj.message || t('common.error'));
|
|
}
|
|
};
|
|
|
|
const handleDryRun = async (id: string) => {
|
|
try {
|
|
await dryRunMutation.mutateAsync(id);
|
|
toast.success(t('automation.dryRunSuccess'));
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj.message || t('common.error'));
|
|
}
|
|
};
|
|
|
|
const openEdit = (automation: AutomationDefinition) => {
|
|
setEditingAutomation(automation);
|
|
setShowForm(true);
|
|
};
|
|
|
|
const openCreate = () => {
|
|
setEditingAutomation(undefined);
|
|
setShowForm(true);
|
|
};
|
|
|
|
const isSaving = createMutation.isPending || updateMutation.isPending;
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto p-6" data-testid="automation-dashboard">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-secondary-900">{t('automation.title')}</h1>
|
|
<p className="text-sm text-secondary-500 mt-1">{t('automation.subtitle')}</p>
|
|
</div>
|
|
<Button onClick={openCreate} icon={<Plus className="h-4 w-4" />}>
|
|
{t('automation.create')}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Loading */}
|
|
{isLoading && (
|
|
<div className="space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-24 w-full" />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Error */}
|
|
{isError && (
|
|
<Card className="p-6">
|
|
<div className="flex items-center gap-3 text-danger-600">
|
|
<AlertCircle className="h-5 w-5" />
|
|
<span>{t('common.errorLoading')}</span>
|
|
<Button size="sm" variant="secondary" onClick={() => refetch()}>
|
|
{t('common.retry')}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{!isLoading && !isError && (!automations || automations.length === 0) && (
|
|
<EmptyState
|
|
title={t('automation.noAutomations')}
|
|
description={t('automation.noAutomationsDesc')}
|
|
icon={<Workflow className="h-8 w-8" />}
|
|
action={
|
|
<Button onClick={openCreate} icon={<Plus className="h-4 w-4" />}>
|
|
{t('automation.createFirst')}
|
|
</Button>
|
|
}
|
|
/>
|
|
)}
|
|
|
|
{/* Automation List */}
|
|
{!isLoading && !isError && automations && automations.length > 0 && (
|
|
<div className="space-y-4">
|
|
{automations.map((automation) => (
|
|
<Card key={automation.id} className="p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<h3 className="text-lg font-semibold text-secondary-900">{automation.name}</h3>
|
|
<Badge variant={statusBadgeVariant(automation.active ? 'active' : 'inactive')}>
|
|
{automation.active ? t('automation.active') : t('automation.inactive')}
|
|
</Badge>
|
|
<div className="flex items-center gap-1 text-xs text-secondary-400">
|
|
{triggerIcon(automation.trigger_type)}
|
|
<span className="capitalize">{automation.trigger_type}</span>
|
|
</div>
|
|
</div>
|
|
{automation.description && (
|
|
<p className="text-sm text-secondary-500 mb-2">{automation.description}</p>
|
|
)}
|
|
<div className="flex items-center gap-4 text-xs text-secondary-400">
|
|
<span>{automation.conditions?.length || 0} conditions</span>
|
|
<span>{automation.actions?.length || 0} actions</span>
|
|
{automation.dry_run && (
|
|
<Badge variant="warning" dot>{t('automation.dryRun')}</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 ml-4">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => handleExecute(automation.id)}
|
|
isLoading={executeMutation.isPending}
|
|
title={t('automation.execute')}
|
|
>
|
|
<Play className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => handleDryRun(automation.id)}
|
|
isLoading={dryRunMutation.isPending}
|
|
title={t('automation.dryRun')}
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setRunHistoryId(automation.id)}
|
|
title={t('automation.runHistory')}
|
|
>
|
|
<History className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setVersionHistoryId(automation.id)}
|
|
title={t('automation.versionHistory')}
|
|
>
|
|
<GitBranch className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => openEdit(automation)}
|
|
title={t('common.edit')}
|
|
>
|
|
<Settings2 className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setConfirmDelete(automation)}
|
|
title={t('common.delete')}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-danger-500" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Create/Edit Modal */}
|
|
<Modal
|
|
open={showForm}
|
|
onClose={() => { setShowForm(false); setEditingAutomation(undefined); }}
|
|
title={editingAutomation ? t('automation.edit') : t('automation.create')}
|
|
size="lg"
|
|
>
|
|
<AutomationForm
|
|
initial={editingAutomation}
|
|
onSave={handleSave}
|
|
onCancel={() => { setShowForm(false); setEditingAutomation(undefined); }}
|
|
isSaving={isSaving}
|
|
/>
|
|
</Modal>
|
|
|
|
{/* Run History Modal */}
|
|
{runHistoryId && (
|
|
<RunHistoryModal
|
|
automationId={runHistoryId}
|
|
open={!!runHistoryId}
|
|
onClose={() => setRunHistoryId(null)}
|
|
/>
|
|
)}
|
|
|
|
{/* Version History Modal */}
|
|
{versionHistoryId && (
|
|
<VersionHistoryModal
|
|
automationId={versionHistoryId}
|
|
open={!!versionHistoryId}
|
|
onClose={() => setVersionHistoryId(null)}
|
|
/>
|
|
)}
|
|
|
|
{/* Delete Confirmation */}
|
|
<ConfirmDialog
|
|
open={!!confirmDelete}
|
|
onCancel={() => setConfirmDelete(null)}
|
|
onConfirm={handleDelete}
|
|
title={t('automation.deleteConfirmTitle')}
|
|
message={t('automation.deleteConfirmMessage', { name: confirmDelete?.name })}
|
|
confirmLabel={t('common.delete')}
|
|
variant="danger"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|