435 lines
20 KiB
TypeScript
435 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import {
|
|
ArrowLeft, Activity, History, Calendar, Mail, RefreshCw, Loader2,
|
|
CheckCircle2, XCircle, AlertTriangle, Shield, Inbox, Send,
|
|
Clock, ChevronDown, ChevronRight,
|
|
} from 'lucide-react';
|
|
import SyncScheduler from '@/components/admin/SyncScheduler';
|
|
|
|
function fmtDate(d: string | null | undefined) {
|
|
if (!d) return 'Never';
|
|
return new Date(d).toLocaleString(undefined, {
|
|
month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit',
|
|
});
|
|
}
|
|
|
|
function fmtNum(n: number | null | undefined) {
|
|
if (n == null) return '—';
|
|
return n.toLocaleString();
|
|
}
|
|
|
|
function StatCard({ label, value, sub, icon: Icon, cls }: {
|
|
label: string; value: string | number; sub?: string; icon?: React.ElementType; cls?: string;
|
|
}) {
|
|
return (
|
|
<div className={`rounded-lg border p-4 flex flex-col gap-1 ${cls ?? ''}`}>
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
{Icon && <Icon className="w-3.5 h-3.5" />}{label}
|
|
</div>
|
|
<div className="text-2xl font-bold tabular-nums">{value}</div>
|
|
{sub && <div className="text-xs text-muted-foreground">{sub}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: string }) {
|
|
const cls =
|
|
status === 'delivered' ? 'bg-green-500/15 text-green-700' :
|
|
status === 'rejected' ? 'bg-red-500/15 text-red-600' :
|
|
status === 'held' ? 'bg-yellow-500/15 text-yellow-700' :
|
|
status === 'bounced' ? 'bg-orange-500/15 text-orange-700' :
|
|
status === 'spam' ? 'bg-purple-500/15 text-purple-700' :
|
|
'bg-muted text-muted-foreground';
|
|
return (
|
|
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>
|
|
{status || '—'}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function ThreatBadge({ level }: { level: string }) {
|
|
const cls =
|
|
level === 'high' ? 'bg-red-500/15 text-red-600' :
|
|
level === 'medium' ? 'bg-orange-500/15 text-orange-700' :
|
|
level === 'low' ? 'bg-yellow-500/15 text-yellow-700' :
|
|
'bg-muted text-muted-foreground';
|
|
return (
|
|
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>
|
|
{level || 'info'}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// ── Status Tab ────────────────────────────────────────────────────────────────
|
|
function StatusTab({ data, onSync, syncing }: { data: any; onSync: (t: string) => void; syncing: boolean }) {
|
|
if (!data) return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
|
|
const stats = data.stats ?? {};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Connection banner */}
|
|
<div className="flex items-center justify-between rounded-lg border p-4 bg-muted/30">
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-2">
|
|
{data.connected
|
|
? <CheckCircle2 className="w-4 h-4 text-green-500" />
|
|
: <XCircle className="w-4 h-4 text-red-500" />}
|
|
<p className="text-sm font-medium">
|
|
{data.connected ? `Connected — ${data.accountName ?? 'Mimecast'}` : 'Not connected'}
|
|
</p>
|
|
{data.packageName && (
|
|
<span className="text-xs text-muted-foreground">({data.packageName})</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Last sync: {fmtDate(stats.lastSync)} · Oldest message: {fmtDate(stats.oldestMessage)}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" variant="outline" onClick={() => onSync('incremental')} disabled={syncing || !data.connected}>
|
|
{syncing ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <RefreshCw className="w-4 h-4 mr-1" />}
|
|
Incremental
|
|
</Button>
|
|
<Button size="sm" onClick={() => onSync('full')} disabled={syncing || !data.connected}>
|
|
{syncing ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <RefreshCw className="w-4 h-4 mr-1" />}
|
|
Full Sync (120d)
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{data.error && (
|
|
<div className="rounded-lg border border-red-300 bg-red-50 dark:bg-red-950/20 p-3 text-sm text-red-600">
|
|
{data.error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
<StatCard label="Total Messages" value={fmtNum(stats.messages)} icon={Mail} />
|
|
<StatCard label="Inbound" value={fmtNum(stats.inbound)} icon={Inbox} cls="border-blue-500/20 bg-blue-500/5" />
|
|
<StatCard label="Outbound" value={fmtNum(stats.outbound)} icon={Send} cls="border-green-500/20 bg-green-500/5" />
|
|
<StatCard label="Threat Events" value={fmtNum(stats.threats)} icon={Shield}
|
|
cls={(stats.threats ?? 0) > 0 ? 'border-red-500/20 bg-red-500/5' : ''} />
|
|
<StatCard label="Bodies Stored" value={fmtNum(stats.bodies)} icon={Activity} />
|
|
</div>
|
|
|
|
<div className="rounded-lg border p-4 space-y-2">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Data Retention</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
120-day rolling window. Messages older than 120 days are automatically purged on each sync.
|
|
Message bodies are fetched for delivered inbound messages (up to 500 per sync run).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Messages Tab ──────────────────────────────────────────────────────────────
|
|
function MessagesTab() {
|
|
const [rows, setRows] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [search, setSearch] = useState('');
|
|
const [direction, setDirection] = useState('');
|
|
const [status, setStatus] = useState('');
|
|
const [days, setDays] = useState('7');
|
|
|
|
const load = () => {
|
|
setLoading(true);
|
|
const params = new URLSearchParams({ days, limit: '200' });
|
|
if (search) params.set('search', search);
|
|
if (direction) params.set('direction', direction);
|
|
if (status) params.set('status', status);
|
|
|
|
fetch(`/api/mimecast/messages?${params}`)
|
|
.then(r => r.json())
|
|
.then(d => setRows(d.messages ?? []))
|
|
.catch(() => setRows([]))
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
useEffect(() => { load(); }, [days, direction, status]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Search sender, recipient, subject…"
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
onKeyDown={e => e.key === 'Enter' && load()}
|
|
className="flex-1 min-w-48 border rounded-md px-3 py-1.5 text-sm bg-background"
|
|
/>
|
|
<select value={direction} onChange={e => setDirection(e.target.value)}
|
|
className="border rounded-md px-3 py-1.5 text-sm bg-background">
|
|
<option value="">All directions</option>
|
|
<option value="inbound">Inbound</option>
|
|
<option value="outbound">Outbound</option>
|
|
</select>
|
|
<select value={status} onChange={e => setStatus(e.target.value)}
|
|
className="border rounded-md px-3 py-1.5 text-sm bg-background">
|
|
<option value="">All statuses</option>
|
|
<option value="delivered">Delivered</option>
|
|
<option value="rejected">Rejected</option>
|
|
<option value="held">Held</option>
|
|
<option value="bounced">Bounced</option>
|
|
<option value="spam">Spam</option>
|
|
</select>
|
|
<select value={days} onChange={e => setDays(e.target.value)}
|
|
className="border rounded-md px-3 py-1.5 text-sm bg-background">
|
|
<option value="1">Last 24h</option>
|
|
<option value="7">Last 7 days</option>
|
|
<option value="30">Last 30 days</option>
|
|
<option value="90">Last 90 days</option>
|
|
<option value="120">Last 120 days</option>
|
|
</select>
|
|
<Button size="sm" variant="outline" onClick={load}>
|
|
<RefreshCw className="w-4 h-4 mr-1" />Search
|
|
</Button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : !rows.length ? (
|
|
<div className="text-center py-12 text-sm text-muted-foreground">
|
|
No messages found — run a sync first or adjust filters
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted/50 border-b">
|
|
<tr>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">From</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">To</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Subject</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Direction</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Status</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Sent</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r: any) => (
|
|
<tr key={r.id} className="border-b last:border-0 hover:bg-muted/30">
|
|
<td className="px-4 py-2 text-xs truncate max-w-[180px]" title={r.sender_address}>{r.sender_address ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs truncate max-w-[180px]" title={r.recipient_address}>{r.recipient_address ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs truncate max-w-[200px]" title={r.subject}>{r.subject ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs capitalize text-muted-foreground">{r.direction ?? '—'}</td>
|
|
<td className="px-4 py-2"><StatusBadge status={r.status} /></td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground whitespace-nowrap">{fmtDate(r.sent_datetime)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Threats Tab ───────────────────────────────────────────────────────────────
|
|
function ThreatsTab() {
|
|
const [rows, setRows] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetch('/api/mimecast/threats?limit=200')
|
|
.then(r => r.json())
|
|
.then(d => setRows(d.threats ?? []))
|
|
.catch(() => setRows([]))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
if (loading) return <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>;
|
|
if (!rows.length) return <div className="text-center py-12 text-sm text-muted-foreground">No threat events — run a sync first</div>;
|
|
|
|
return (
|
|
<div className="rounded-lg border overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted/50 border-b">
|
|
<tr>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Type</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Level</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Actor</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Verdict</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">URL / File</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">When</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r: any) => (
|
|
<tr key={r.id} className="border-b last:border-0 hover:bg-muted/30">
|
|
<td className="px-4 py-2 text-xs capitalize">{r.event_type ?? '—'}</td>
|
|
<td className="px-4 py-2"><ThreatBadge level={r.threat_level} /></td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground">{r.actor_email ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground capitalize">{r.verdict ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground truncate max-w-[200px]" title={r.url ?? r.file_name ?? ''}>
|
|
{r.url ?? r.file_name ?? '—'}
|
|
</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground whitespace-nowrap">{fmtDate(r.event_datetime)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── History Tab ───────────────────────────────────────────────────────────────
|
|
function HistoryTab() {
|
|
const [rows, setRows] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetch('/api/sync/history?entityType=mimecast&limit=30')
|
|
.then(r => r.json())
|
|
.then(d => setRows(d.history ?? []))
|
|
.catch(() => setRows([]))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
if (loading) return <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>;
|
|
if (!rows.length) return <div className="text-center py-12 text-sm text-muted-foreground">No sync history yet</div>;
|
|
|
|
return (
|
|
<div className="rounded-lg border overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted/50 border-b">
|
|
<tr>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Type</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Status</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Messages</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Threats</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Started</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Duration</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r: any, i: number) => {
|
|
const dur = r.completed_at && r.started_at
|
|
? new Date(r.completed_at).getTime() - new Date(r.started_at).getTime()
|
|
: null;
|
|
const durStr = dur == null ? '—' : dur < 60000 ? `${Math.round(dur / 1000)}s` : `${Math.floor(dur / 60000)}m ${Math.round((dur % 60000) / 1000)}s`;
|
|
const statusCls = r.status === 'completed' ? 'bg-green-500/15 text-green-700' : r.status === 'failed' ? 'bg-red-500/15 text-red-600' : 'bg-muted text-muted-foreground';
|
|
const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata ?? {});
|
|
|
|
return (
|
|
<tr key={i} className="border-b last:border-0 hover:bg-muted/30">
|
|
<td className="px-4 py-2 capitalize text-xs">{r.sync_type ?? '—'}</td>
|
|
<td className="px-4 py-2">
|
|
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${statusCls}`}>{r.status}</span>
|
|
</td>
|
|
<td className="px-4 py-2 tabular-nums text-xs">{fmtNum(meta.messagesUpserted ?? r.records_added)}</td>
|
|
<td className="px-4 py-2 tabular-nums text-xs">{fmtNum(meta.threatsUpserted)}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground">{fmtDate(r.started_at)}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground">{durStr}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Page ──────────────────────────────────────────────────────────────────────
|
|
export default function MimecastSyncPage() {
|
|
const [statusData, setStatusData] = useState<any>(null);
|
|
const [syncing, setSyncing] = useState(false);
|
|
const [lastResult, setLastResult] = useState<any>(null);
|
|
|
|
const fetchStatus = () => {
|
|
fetch('/api/mimecast/status')
|
|
.then(r => r.json())
|
|
.then(d => setStatusData(d))
|
|
.catch(() => setStatusData({ configured: false, connected: false }));
|
|
};
|
|
|
|
useEffect(() => { fetchStatus(); }, []);
|
|
|
|
const handleSync = async (syncType: string) => {
|
|
setSyncing(true);
|
|
setLastResult(null);
|
|
try {
|
|
const res = await fetch('/api/sync/mimecast', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ syncType }),
|
|
});
|
|
const data = await res.json();
|
|
setLastResult(data);
|
|
fetchStatus();
|
|
} catch (err: any) {
|
|
setLastResult({ error: err.message });
|
|
} finally {
|
|
setSyncing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto py-4 md:py-8 px-4 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/admin/sync">
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<ArrowLeft className="w-4 h-4" />Integrations
|
|
</Button>
|
|
</Link>
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 rounded-lg border border-blue-500/30 bg-blue-500/5">
|
|
<Mail className="w-5 h-5 text-blue-500" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Email Security — Mimecast</h1>
|
|
<p className="text-sm text-muted-foreground">Message logs, threat events, 120-day retention</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Last sync result banner */}
|
|
{lastResult && (
|
|
<div className={`rounded-lg border p-3 text-sm ${lastResult.error ? 'border-red-300 bg-red-50 dark:bg-red-950/20 text-red-600' : 'border-green-300 bg-green-50 dark:bg-green-950/20 text-green-700'}`}>
|
|
{lastResult.error
|
|
? `Sync failed: ${lastResult.error}`
|
|
: `Sync complete — ${fmtNum(lastResult.messagesUpserted)} messages, ${fmtNum(lastResult.threatsUpserted)} threats, ${fmtNum(lastResult.bodiesFetched)} bodies fetched in ${Math.round((lastResult.durationMs ?? 0) / 1000)}s`
|
|
}
|
|
{lastResult.errors?.length > 0 && (
|
|
<div className="mt-1 text-xs opacity-80">{lastResult.errors.slice(0, 3).join(' · ')}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<Tabs defaultValue="status" className="w-full">
|
|
<TabsList className="grid w-full max-w-2xl grid-cols-5">
|
|
<TabsTrigger value="status" className="gap-1.5"><Activity className="h-4 w-4" />Status</TabsTrigger>
|
|
<TabsTrigger value="messages" className="gap-1.5"><Mail className="h-4 w-4" />Messages</TabsTrigger>
|
|
<TabsTrigger value="threats" className="gap-1.5"><Shield className="h-4 w-4" />Threats</TabsTrigger>
|
|
<TabsTrigger value="history" className="gap-1.5"><Clock className="h-4 w-4" />History</TabsTrigger>
|
|
<TabsTrigger value="schedules" className="gap-1.5"><Calendar className="h-4 w-4" />Schedules</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="status" className="mt-6">
|
|
<StatusTab data={statusData} onSync={handleSync} syncing={syncing} />
|
|
</TabsContent>
|
|
<TabsContent value="messages" className="mt-6"><MessagesTab /></TabsContent>
|
|
<TabsContent value="threats" className="mt-6"><ThreatsTab /></TabsContent>
|
|
<TabsContent value="history" className="mt-6"><HistoryTab /></TabsContent>
|
|
<TabsContent value="schedules" className="mt-6"><SyncScheduler /></TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|