feat: IT Glue integration, workflow engine, pipelines, Zabbix WAN, notification channels, backup status UI improvements, nav alignment fixes
This commit is contained in:
parent
ed6c4a8b65
commit
19605f82aa
97 changed files with 17080 additions and 304 deletions
|
|
@ -7,283 +7,281 @@ import { Button } from '@/components/ui/button';
|
|||
import { Badge } from '@/components/ui/badge';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Workflow,
|
||||
Bot,
|
||||
Cog,
|
||||
ListFilter,
|
||||
History,
|
||||
FileText,
|
||||
Plus,
|
||||
Settings,
|
||||
Activity,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Clock,
|
||||
Zap,
|
||||
Brain,
|
||||
Activity,
|
||||
Edit,
|
||||
PlayCircle,
|
||||
PauseCircle,
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface ExecutionStats {
|
||||
total: number;
|
||||
completed: number;
|
||||
failed: number;
|
||||
skipped: number;
|
||||
robotic: number;
|
||||
ai: number;
|
||||
hybrid: number;
|
||||
interface TicketWorkflow {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
is_active: boolean;
|
||||
trigger_event: string;
|
||||
sort_order: number;
|
||||
step_count?: number;
|
||||
executions_today?: number;
|
||||
}
|
||||
|
||||
export default function WorkflowDashboardPage() {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
const [stats, setStats] = useState<ExecutionStats>({ total: 0, completed: 0, failed: 0, skipped: 0, robotic: 0, ai: 0, hybrid: 0 });
|
||||
const [recentExecutions, setRecentExecutions] = useState<any[]>([]);
|
||||
export default function WorkflowListPage() {
|
||||
const [globalEnabled, setGlobalEnabled] = useState(false);
|
||||
const [workflows, setWorkflows] = useState<TicketWorkflow[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadDashboard();
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadDashboard = async () => {
|
||||
const loadData = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [settingsRes, execRes] = await Promise.all([
|
||||
const [settingsRes, workflowsRes] = await Promise.all([
|
||||
fetch('/api/workflow/settings'),
|
||||
fetch('/api/workflow/executions?limit=10'),
|
||||
fetch('/api/ticket-workflows'),
|
||||
]);
|
||||
|
||||
if (settingsRes.ok) {
|
||||
const settings = await settingsRes.json();
|
||||
setEnabled(settings.workflow_engine_enabled?.value ?? false);
|
||||
setGlobalEnabled(settings.workflow_engine_enabled?.value ?? false);
|
||||
}
|
||||
|
||||
if (execRes.ok) {
|
||||
const execData = await execRes.json();
|
||||
setRecentExecutions(execData.data || []);
|
||||
|
||||
// Calculate stats from recent executions
|
||||
const all = execData.data || [];
|
||||
setStats({
|
||||
total: execData.total || 0,
|
||||
completed: all.filter((e: any) => e.status === 'completed').length,
|
||||
failed: all.filter((e: any) => e.status === 'failed').length,
|
||||
skipped: all.filter((e: any) => e.status === 'skipped').length,
|
||||
robotic: all.filter((e: any) => e.classification_method === 'robotic').length,
|
||||
ai: all.filter((e: any) => e.classification_method === 'ai').length,
|
||||
hybrid: all.filter((e: any) => e.classification_method === 'hybrid').length,
|
||||
});
|
||||
if (workflowsRes.ok) {
|
||||
const data = await workflowsRes.json();
|
||||
setWorkflows(data.workflows || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load dashboard:', error);
|
||||
console.error('Failed to load workflows:', error);
|
||||
toast.error('Failed to load workflows');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleEngine = async () => {
|
||||
const toggleGlobalEngine = async () => {
|
||||
try {
|
||||
const newValue = !enabled;
|
||||
await fetch('/api/workflow/settings', {
|
||||
const newValue = !globalEnabled;
|
||||
const res = await fetch('/api/workflow/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ workflow_engine_enabled: newValue }),
|
||||
});
|
||||
setEnabled(newValue);
|
||||
|
||||
if (res.ok) {
|
||||
setGlobalEnabled(newValue);
|
||||
toast.success(`Workflow engine ${newValue ? 'enabled' : 'disabled'}`);
|
||||
} else {
|
||||
toast.error('Failed to toggle engine');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle engine:', error);
|
||||
toast.error('Failed to toggle engine');
|
||||
}
|
||||
};
|
||||
|
||||
const navCards = [
|
||||
{
|
||||
title: 'Classification Rules',
|
||||
description: 'Keyword-based rules for ticket classification',
|
||||
href: '/admin/workflow/classification',
|
||||
icon: Bot,
|
||||
color: 'text-blue-500',
|
||||
},
|
||||
{
|
||||
title: 'Filter Rules',
|
||||
description: 'Exclusion/inclusion filters for ticket processing',
|
||||
href: '/admin/workflow/rules',
|
||||
icon: ListFilter,
|
||||
color: 'text-orange-500',
|
||||
},
|
||||
{
|
||||
title: 'AI Templates',
|
||||
description: 'Prompt templates for AI-assisted classification',
|
||||
href: '/admin/workflow/templates',
|
||||
icon: Brain,
|
||||
color: 'text-purple-500',
|
||||
},
|
||||
{
|
||||
title: 'Execution History',
|
||||
description: 'View past workflow executions and results',
|
||||
href: '/admin/workflow/history',
|
||||
icon: History,
|
||||
color: 'text-green-500',
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
description: 'AI providers, thresholds, and delays',
|
||||
href: '/admin/workflow/settings',
|
||||
icon: Settings,
|
||||
color: 'text-gray-500',
|
||||
},
|
||||
];
|
||||
const toggleWorkflow = async (workflowId: number, currentState: boolean) => {
|
||||
try {
|
||||
const newState = !currentState;
|
||||
const res = await fetch(`/api/ticket-workflows/${workflowId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_active: newState }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setWorkflows(prev =>
|
||||
prev.map(w => w.id === workflowId ? { ...w, is_active: newState } : w)
|
||||
);
|
||||
toast.success(`Workflow ${newState ? 'enabled' : 'disabled'}`);
|
||||
} else {
|
||||
toast.error('Failed to toggle workflow');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle workflow:', error);
|
||||
toast.error('Failed to toggle workflow');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/admin/sync">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
<Workflow className="w-6 h-6" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Workflow Engine</h1>
|
||||
<h1 className="text-2xl font-bold">Ticket Workflows</h1>
|
||||
<p className="text-sm text-muted-foreground">Automated ticket triage and classification</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{enabled ? 'Engine Active' : 'Engine Disabled'}
|
||||
</span>
|
||||
<Switch checked={enabled} onCheckedChange={toggleEngine} />
|
||||
<Badge variant={enabled ? 'default' : 'secondary'}>
|
||||
{enabled ? 'ON' : 'OFF'}
|
||||
</Badge>
|
||||
</div>
|
||||
<Link href="/admin/workflow/create">
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Create Workflow
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total Executions</p>
|
||||
<p className="text-2xl font-bold">{stats.total}</p>
|
||||
</div>
|
||||
<Activity className="w-8 h-8 text-muted-foreground/50" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Completed</p>
|
||||
<p className="text-2xl font-bold text-green-600">{stats.completed}</p>
|
||||
</div>
|
||||
<CheckCircle2 className="w-8 h-8 text-green-500/50" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Robotic</p>
|
||||
<p className="text-2xl font-bold text-blue-600">{stats.robotic}</p>
|
||||
</div>
|
||||
<Zap className="w-8 h-8 text-blue-500/50" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">AI/Hybrid</p>
|
||||
<p className="text-2xl font-bold text-purple-600">{stats.ai + stats.hybrid}</p>
|
||||
</div>
|
||||
<Brain className="w-8 h-8 text-purple-500/50" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Navigation Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{navCards.map((card) => (
|
||||
<Link key={card.href} href={card.href}>
|
||||
<Card className="hover:shadow-md transition-shadow cursor-pointer h-full">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<card.icon className={`w-5 h-5 ${card.color}`} />
|
||||
<CardTitle className="text-lg">{card.title}</CardTitle>
|
||||
</div>
|
||||
<CardDescription>{card.description}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Recent Executions */}
|
||||
<Card>
|
||||
{/* Master Control */}
|
||||
<Card className={globalEnabled ? 'border-green-500/50' : 'border-gray-300'}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Recent Executions</CardTitle>
|
||||
<CardDescription>Last 10 workflow runs</CardDescription>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="w-5 h-5" />
|
||||
Master Control
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Emergency kill switch for all ticket workflows
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium">
|
||||
{globalEnabled ? (
|
||||
<span className="text-green-600 flex items-center gap-1">
|
||||
<PlayCircle className="w-4 h-4" /> Enabled
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-gray-600 flex items-center gap-1">
|
||||
<PauseCircle className="w-4 h-4" /> Disabled
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<Switch checked={globalEnabled} onCheckedChange={toggleGlobalEngine} />
|
||||
</div>
|
||||
<Link href="/admin/workflow/history">
|
||||
<Button variant="outline" size="sm">View All</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{recentExecutions.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No executions yet. Workflow engine will process incoming tickets when enabled.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{recentExecutions.map((exec) => (
|
||||
<Link key={exec.id} href={`/admin/workflow/history?id=${exec.id}`}>
|
||||
<div className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer">
|
||||
<div className="flex items-center gap-3">
|
||||
{exec.status === 'completed' && <CheckCircle2 className="w-4 h-4 text-green-500" />}
|
||||
{exec.status === 'failed' && <XCircle className="w-4 h-4 text-red-500" />}
|
||||
{exec.status === 'skipped' && <Clock className="w-4 h-4 text-gray-500" />}
|
||||
{exec.status === 'running' && <Activity className="w-4 h-4 text-blue-500 animate-pulse" />}
|
||||
<div>
|
||||
<span className="font-medium text-sm">
|
||||
{exec.ticket_number ? `Ticket #${exec.ticket_number}` : `Entity ${exec.entity_id}`}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground ml-2">
|
||||
{new Date(exec.created_at).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{exec.branch && (
|
||||
<Badge variant="outline" className="text-xs">{exec.branch}</Badge>
|
||||
)}
|
||||
<Badge variant={
|
||||
exec.classification_method === 'robotic' ? 'default' :
|
||||
exec.classification_method === 'ai' ? 'secondary' : 'outline'
|
||||
} className="text-xs">
|
||||
{exec.classification_method || 'n/a'}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{globalEnabled ? (
|
||||
<>All active workflows will process incoming tickets. Individual workflows can be toggled below.</>
|
||||
) : (
|
||||
<>All workflows are currently disabled. Enable the master switch to allow workflows to run.</>
|
||||
)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Workflow List */}
|
||||
<div className="space-y-4">
|
||||
{isLoading ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center text-muted-foreground">
|
||||
Loading workflows...
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : workflows.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<Workflow className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<p className="text-muted-foreground mb-4">No workflows yet</p>
|
||||
<Link href="/admin/workflow/create">
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Create Your First Workflow
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
workflows.map((workflow) => (
|
||||
<Card
|
||||
key={workflow.id}
|
||||
className={workflow.is_active ? 'border-blue-500/50' : 'border-gray-300'}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<CardTitle className="text-lg">{workflow.name}</CardTitle>
|
||||
<Badge
|
||||
variant={workflow.is_active ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{workflow.is_active ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{workflow.trigger_event}
|
||||
</Badge>
|
||||
{exec.duration_ms && (
|
||||
<span className="text-xs text-muted-foreground">{exec.duration_ms}ms</span>
|
||||
)}
|
||||
</div>
|
||||
<CardDescription className="text-sm">
|
||||
{workflow.description || 'No description'}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 ml-4">
|
||||
<Switch
|
||||
checked={workflow.is_active}
|
||||
onCheckedChange={() => toggleWorkflow(workflow.id, workflow.is_active)}
|
||||
disabled={!globalEnabled}
|
||||
/>
|
||||
<Link href={`/admin/workflow/${workflow.id}`}>
|
||||
<Button variant="outline" size="sm">
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">
|
||||
{workflow.step_count || 0} steps
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
{workflow.executions_today || 0} runs today
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{!globalEnabled && (
|
||||
<Badge variant="outline" className="text-xs text-orange-600">
|
||||
Master switch disabled
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Related</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<Link href="/admin/workflow/classification-rules">
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
Classification Rules
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/admin/workflow/ai-templates">
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
AI Templates
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/admin/workflow/settings">
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
Workflow Settings
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue