224 lines
9.1 KiB
TypeScript
224 lines
9.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import Link from 'next/link';
|
|
import { ArrowLeft, Plus, Trash2, Zap, RefreshCw, Send, Globe } from 'lucide-react';
|
|
import {
|
|
listSubscriptions,
|
|
createSubscription,
|
|
deleteSubscription,
|
|
testWebhook,
|
|
getEventTypes,
|
|
type WebhookSubscription,
|
|
type EventType,
|
|
} from '@/lib/webhook-client';
|
|
|
|
export default function WebhooksPage() {
|
|
const [subs, setSubs] = useState<WebhookSubscription[]>([]);
|
|
const [eventTypes, setEventTypes] = useState<EventType[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [newUrl, setNewUrl] = useState('');
|
|
const [newEvents, setNewEvents] = useState<string[]>([]);
|
|
const [newDesc, setNewDesc] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [subsData, typesData] = await Promise.all([listSubscriptions(), getEventTypes()]);
|
|
setSubs(subsData);
|
|
setEventTypes(typesData.eventTypes);
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Failed to load');
|
|
}
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
useEffect(() => { loadData(); }, [loadData]);
|
|
|
|
const handleCreate = async () => {
|
|
if (!newUrl.trim() || newEvents.length === 0) {
|
|
setError('URL and at least one event type are required');
|
|
return;
|
|
}
|
|
try {
|
|
await createSubscription({ url: newUrl.trim(), events: newEvents, description: newDesc.trim() || undefined });
|
|
setShowCreate(false);
|
|
setNewUrl('');
|
|
setNewEvents([]);
|
|
setNewDesc('');
|
|
loadData();
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Failed to create');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
try {
|
|
await deleteSubscription(id);
|
|
loadData();
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Failed to delete');
|
|
}
|
|
};
|
|
|
|
const handleTest = async (id: string) => {
|
|
try {
|
|
await testWebhook(id);
|
|
setError(null);
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Test failed');
|
|
}
|
|
};
|
|
|
|
const toggleEvent = (type: string) => {
|
|
setNewEvents(prev => prev.includes(type) ? prev.filter(t => t !== type) : [...prev, type]);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen" style={{ backgroundColor: 'var(--cm-bg-canvas)' }}>
|
|
<div className="max-w-2xl mx-auto px-4 py-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Link href="/settings" className="p-2 rounded-lg" style={{ color: 'var(--cm-text-secondary)' }} aria-label="Back to settings">
|
|
<ArrowLeft size={20} />
|
|
</Link>
|
|
<div className="flex-1">
|
|
<h1 className="text-xl font-bold" style={{ color: 'var(--cm-text-primary)' }}>Webhooks</h1>
|
|
<p className="text-xs" style={{ color: 'var(--cm-text-tertiary)' }}>Integrate ChronoMind with external services</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCreate(!showCreate)}
|
|
aria-label="Add webhook"
|
|
className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer"
|
|
style={{ backgroundColor: 'var(--cm-accent)', color: 'var(--cm-white)' }}
|
|
>
|
|
<Plus size={14} /> Add
|
|
</button>
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="rounded-lg p-3 mb-4 text-sm" style={{ backgroundColor: 'var(--cm-critical-10)', color: 'var(--cm-danger)' }} role="alert">
|
|
{error}
|
|
<button onClick={() => setError(null)} className="ml-2 underline cursor-pointer" aria-label="Dismiss error">dismiss</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create form */}
|
|
{showCreate && (
|
|
<div className="rounded-xl border p-4 mb-4" style={{ backgroundColor: 'var(--cm-surface-card)', borderColor: 'var(--cm-border)' }}>
|
|
<h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--cm-text-primary)' }}>New Webhook</h3>
|
|
<input
|
|
type="url"
|
|
value={newUrl}
|
|
onChange={e => setNewUrl(e.target.value)}
|
|
placeholder="https://example.com/webhook"
|
|
className="w-full px-3 py-2 rounded-lg text-sm mb-3"
|
|
style={{ backgroundColor: 'var(--cm-surface-muted)', color: 'var(--cm-text-primary)', border: '1px solid var(--cm-border)' }}
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={newDesc}
|
|
onChange={e => setNewDesc(e.target.value)}
|
|
placeholder="Description (optional)"
|
|
className="w-full px-3 py-2 rounded-lg text-sm mb-3"
|
|
style={{ backgroundColor: 'var(--cm-surface-muted)', color: 'var(--cm-text-primary)', border: '1px solid var(--cm-border)' }}
|
|
/>
|
|
<p className="text-xs font-medium mb-2" style={{ color: 'var(--cm-text-secondary)' }}>Events</p>
|
|
<div className="flex flex-wrap gap-2 mb-3">
|
|
{eventTypes.map(et => (
|
|
<button
|
|
key={et.type}
|
|
onClick={() => toggleEvent(et.type)}
|
|
className="px-2 py-1 rounded text-[10px] font-medium cursor-pointer"
|
|
style={{
|
|
backgroundColor: newEvents.includes(et.type) ? 'var(--cm-accent)' : 'var(--cm-surface-muted)',
|
|
color: newEvents.includes(et.type) ? 'var(--cm-white)' : 'var(--cm-text-secondary)',
|
|
}}
|
|
>
|
|
{et.type}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={handleCreate}
|
|
className="w-full py-2 rounded-lg text-sm font-medium cursor-pointer"
|
|
style={{ backgroundColor: 'var(--cm-accent)', color: 'var(--cm-white)' }}
|
|
>
|
|
Create Webhook
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Subscriptions list */}
|
|
{loading ? (
|
|
<div className="text-center py-12">
|
|
<RefreshCw size={24} className="animate-spin mx-auto mb-2" style={{ color: 'var(--cm-text-tertiary)' }} />
|
|
</div>
|
|
) : subs.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<Globe size={32} style={{ color: 'var(--cm-text-tertiary)' }} className="mx-auto mb-3" />
|
|
<p className="text-sm" style={{ color: 'var(--cm-text-secondary)' }}>No webhooks configured.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{subs.map(sub => (
|
|
<div
|
|
key={sub.id}
|
|
className="rounded-xl border p-4"
|
|
style={{ backgroundColor: 'var(--cm-surface-card)', borderColor: 'var(--cm-border)' }}
|
|
>
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Zap size={14} style={{ color: sub.active ? 'var(--cm-gentle)' : 'var(--cm-text-tertiary)' }} />
|
|
<span className="text-sm font-medium truncate" style={{ color: 'var(--cm-text-primary)' }}>
|
|
{sub.url}
|
|
</span>
|
|
</div>
|
|
{sub.description && (
|
|
<p className="text-xs" style={{ color: 'var(--cm-text-secondary)' }}>{sub.description}</p>
|
|
)}
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{sub.events.map(evt => (
|
|
<span key={evt} className="px-1.5 py-0.5 rounded text-[10px]" style={{ backgroundColor: 'var(--cm-surface-muted)', color: 'var(--cm-text-tertiary)' }}>
|
|
{evt}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between mt-3">
|
|
<span className="text-[10px]" style={{ color: 'var(--cm-text-tertiary)' }}>
|
|
{sub.consecutiveFailures > 0 ? `${sub.consecutiveFailures} failures` : 'Healthy'}
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handleTest(sub.id)}
|
|
aria-label="Send test webhook"
|
|
className="flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer"
|
|
style={{ color: 'var(--cm-accent)' }}
|
|
>
|
|
<Send size={12} /> Test
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(sub.id)}
|
|
aria-label="Delete webhook"
|
|
className="flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer"
|
|
style={{ color: 'var(--cm-danger)' }}
|
|
>
|
|
<Trash2 size={12} /> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|