feat(web): Phase C.4 webhook management UI + client
This commit is contained in:
saravanakumardb1
parent
573483c20e
commit
2e0ddcfe43
223
web/src/app/webhooks/page.tsx
Normal file
223
web/src/app/webhooks/page.tsx
Normal file
@ -0,0 +1,223 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
78
web/src/lib/webhook-client.ts
Normal file
78
web/src/lib/webhook-client.ts
Normal file
@ -0,0 +1,78 @@
|
||||
/**
|
||||
* Webhook management API client — talks to ChronoMind backend.
|
||||
*/
|
||||
|
||||
import { getBackendBaseURL } from './product-config';
|
||||
|
||||
function getToken(): string | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
return localStorage.getItem('chronomind_access_token');
|
||||
}
|
||||
|
||||
async function apiFetch<T>(path: string, opts?: RequestInit): Promise<T> {
|
||||
const token = getToken();
|
||||
const res = await fetch(`${getBackendBaseURL()}${path}`, {
|
||||
...opts,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...(opts?.headers ?? {}),
|
||||
},
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.text().catch(() => '');
|
||||
throw new Error(`${res.status}: ${body}`);
|
||||
}
|
||||
return res.json() as Promise<T>;
|
||||
}
|
||||
|
||||
// ── Types ──
|
||||
|
||||
export interface WebhookSubscription {
|
||||
id: string;
|
||||
url: string;
|
||||
events: string[];
|
||||
active: boolean;
|
||||
secret: string;
|
||||
description?: string;
|
||||
createdAt: string;
|
||||
consecutiveFailures: number;
|
||||
}
|
||||
|
||||
export interface EventType {
|
||||
type: string;
|
||||
category: string;
|
||||
action: string;
|
||||
}
|
||||
|
||||
// ── API calls ──
|
||||
|
||||
export async function listSubscriptions(): Promise<WebhookSubscription[]> {
|
||||
return apiFetch<WebhookSubscription[]>('/api/webhooks');
|
||||
}
|
||||
|
||||
export async function createSubscription(data: {
|
||||
url: string;
|
||||
events: string[];
|
||||
description?: string;
|
||||
}): Promise<WebhookSubscription> {
|
||||
return apiFetch<WebhookSubscription>('/api/webhooks', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteSubscription(id: string): Promise<void> {
|
||||
await apiFetch<void>(`/api/webhooks/${id}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
export async function testWebhook(subscriptionId: string, eventType?: string): Promise<unknown> {
|
||||
return apiFetch('/api/webhooks/test', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ subscriptionId, eventType }),
|
||||
});
|
||||
}
|
||||
|
||||
export async function getEventTypes(): Promise<{ eventTypes: EventType[] }> {
|
||||
return apiFetch<{ eventTypes: EventType[] }>('/api/webhooks/event-types');
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user