feat: Mimecast multi-tenant held mail viewer
- migration 062: mimecast_tenants table (company_id, client_id/secret, account_code) - Seed Wulf (CUSA13A95) + Seubert (CUSA96A181) tenants - MimecastClient.getHeldMessages(): full pagination via meta.pagination.next cursor (API always returns 10/page regardless of pageSize param, totalCount in meta) - getMimecastClientForTenant() factory for per-tenant instantiation - GET /api/mimecast/held?tenantId=&recipient= — fetches all tenants in parallel, merges + sorts by date, returns per-tenant counts + combined messages[] - Held Mail tab on /admin/sync/mimecast (on-demand load, recipient filter, tenant badges, policy filter dropdown, DMARC/impersonation highlighted red)
This commit is contained in:
parent
a98c0daf15
commit
fcdec8e38b
12 changed files with 2208 additions and 27 deletions
|
|
@ -7,7 +7,8 @@ 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,
|
||||
Clock, ChevronDown, ChevronRight, Users, Search, LockKeyhole, UnlockKeyhole,
|
||||
PauseCircle, Building2,
|
||||
} from 'lucide-react';
|
||||
import SyncScheduler from '@/components/admin/SyncScheduler';
|
||||
|
||||
|
|
@ -288,6 +289,117 @@ function ThreatsTab() {
|
|||
);
|
||||
}
|
||||
|
||||
// ── Cloud Users Tab ───────────────────────────────────────────────────────────
|
||||
function CloudUserTab() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [domain, setDomain] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<any>(null);
|
||||
const [showRaw, setShowRaw] = useState(false);
|
||||
|
||||
const handleEmailChange = (v: string) => {
|
||||
setEmail(v);
|
||||
const atIdx = v.indexOf('@');
|
||||
if (atIdx >= 0) setDomain(v.slice(atIdx + 1));
|
||||
};
|
||||
|
||||
const lookup = async () => {
|
||||
if (!email || !domain) return;
|
||||
setLoading(true);
|
||||
setResult(null);
|
||||
setShowRaw(false);
|
||||
try {
|
||||
const params = new URLSearchParams({ emailAddress: email, domain });
|
||||
const res = await fetch(`/api/mimecast/cloud-user?${params}`);
|
||||
setResult(await res.json());
|
||||
} catch (err: any) {
|
||||
setResult({ error: err.message });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const user = result?.user;
|
||||
const lockedOut = user?.lockedOut ?? false;
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-wrap gap-2 items-end">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs text-muted-foreground">Email address</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="user@domain.com"
|
||||
value={email}
|
||||
onChange={e => handleEmailChange(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && lookup()}
|
||||
className="border rounded-md px-3 py-1.5 text-sm bg-background w-72"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs text-muted-foreground">Domain</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="domain.com"
|
||||
value={domain}
|
||||
onChange={e => setDomain(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && lookup()}
|
||||
className="border rounded-md px-3 py-1.5 text-sm bg-background w-48"
|
||||
/>
|
||||
</div>
|
||||
<Button size="sm" onClick={lookup} disabled={loading || !email || !domain}>
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Search className="w-4 h-4 mr-1" />}
|
||||
Look Up
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{result?.error && (
|
||||
<div className="rounded-lg border border-red-300 bg-red-50 dark:bg-red-950/20 p-3 text-sm text-red-600">
|
||||
{result.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && !result.error && !result.found && (
|
||||
<div className="rounded-lg border p-4 text-sm text-muted-foreground">
|
||||
User not found in Mimecast Cloud Gateway.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && (
|
||||
<div className="space-y-3">
|
||||
<div className={`rounded-lg border p-4 flex items-center gap-3 ${lockedOut ? 'border-red-400 bg-red-50 dark:bg-red-950/20' : 'border-green-400 bg-green-50 dark:bg-green-950/20'}`}>
|
||||
{lockedOut
|
||||
? <LockKeyhole className="w-5 h-5 text-red-600 shrink-0" />
|
||||
: <UnlockKeyhole className="w-5 h-5 text-green-600 shrink-0" />}
|
||||
<div>
|
||||
<p className={`font-semibold text-sm ${lockedOut ? 'text-red-700' : 'text-green-700'}`}>
|
||||
{lockedOut ? 'Account Locked Out' : 'Account Active'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{user.name && <span>{user.name} · </span>}
|
||||
{user.emailAddress}
|
||||
{user.status && <span> · Status: {user.status}</span>}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="text-xs text-muted-foreground underline-offset-2 hover:underline"
|
||||
onClick={() => setShowRaw(v => !v)}
|
||||
>
|
||||
{showRaw ? 'Hide' : 'Show'} raw response
|
||||
</button>
|
||||
{showRaw && (
|
||||
<pre className="rounded-lg border bg-muted/30 p-3 text-xs overflow-auto max-h-72">
|
||||
{JSON.stringify(user._raw ?? user, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── History Tab ───────────────────────────────────────────────────────────────
|
||||
function HistoryTab() {
|
||||
const [rows, setRows] = useState<any[]>([]);
|
||||
|
|
@ -346,6 +458,177 @@ function HistoryTab() {
|
|||
);
|
||||
}
|
||||
|
||||
// ── Held Mail Tab ─────────────────────────────────────────────────────────────
|
||||
function HeldMailTab() {
|
||||
const [data, setData] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [recipient, setRecipient] = useState('');
|
||||
const [tenantFilter, setTenantFilter] = useState('');
|
||||
const [policyFilter, setPolicyFilter] = useState('');
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const load = (recipientVal?: string) => {
|
||||
setLoading(true);
|
||||
const params = new URLSearchParams();
|
||||
const r = recipientVal ?? recipient;
|
||||
if (r) params.set('recipient', r);
|
||||
if (tenantFilter) params.set('tenantId', tenantFilter);
|
||||
fetch(`/api/mimecast/held?${params}`)
|
||||
.then(res => res.json())
|
||||
.then(d => { setData(d); setLoaded(true); })
|
||||
.catch(() => setData(null))
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
const messages: any[] = data?.messages ?? [];
|
||||
const filtered = policyFilter
|
||||
? messages.filter(m => m.policyInfo?.toLowerCase().includes(policyFilter.toLowerCase()))
|
||||
: messages;
|
||||
|
||||
const policies = [...new Set(messages.map((m: any) => m.policyInfo).filter(Boolean))].sort();
|
||||
const tenants: any[] = data?.tenants ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Search bar */}
|
||||
<div className="flex flex-wrap gap-2 items-end">
|
||||
<div className="flex-1 min-w-56">
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Recipient email</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="filter by recipient address…"
|
||||
value={recipient}
|
||||
onChange={e => setRecipient(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && load()}
|
||||
className="w-full border rounded-md px-3 py-1.5 text-sm bg-background"
|
||||
/>
|
||||
</div>
|
||||
{tenants.length > 1 && (
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Tenant</label>
|
||||
<select value={tenantFilter} onChange={e => setTenantFilter(e.target.value)}
|
||||
className="border rounded-md px-3 py-1.5 text-sm bg-background">
|
||||
<option value="">All tenants</option>
|
||||
{tenants.map(t => (
|
||||
<option key={t.tenantId} value={String(t.tenantId)}>{t.accountName}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
{loaded && policies.length > 0 && (
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Policy</label>
|
||||
<select value={policyFilter} onChange={e => setPolicyFilter(e.target.value)}
|
||||
className="border rounded-md px-3 py-1.5 text-sm bg-background min-w-48">
|
||||
<option value="">All policies</option>
|
||||
{policies.map(p => <option key={p} value={p}>{p}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<Button onClick={() => load()} disabled={loading} className="gap-2">
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
|
||||
{loaded ? 'Refresh' : 'Load Held Mail'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Tenant summary badges */}
|
||||
{loaded && tenants.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tenants.map(t => (
|
||||
<div key={t.tenantId} className={`flex items-center gap-1.5 rounded-full px-3 py-1 text-xs border ${
|
||||
t.error ? 'border-red-300 bg-red-50 dark:bg-red-950/20 text-red-600' :
|
||||
t.count > 0 ? 'border-yellow-400/40 bg-yellow-500/5 text-yellow-700' :
|
||||
'border-border bg-muted/30 text-muted-foreground'
|
||||
}`}>
|
||||
<Building2 className="w-3 h-3" />
|
||||
<span className="font-medium">{t.accountName}</span>
|
||||
{t.error
|
||||
? <span>error</span>
|
||||
: <span>— {t.count.toLocaleString()}{t.totalCount > t.count ? ` of ${t.totalCount.toLocaleString()}` : ''} held</span>
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loaded && !loading && (
|
||||
<div className="rounded-lg border border-dashed p-12 text-center text-muted-foreground text-sm">
|
||||
Click “Load Held Mail” to fetch held messages across all configured Mimecast tenants.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">Fetching held messages from all tenants…</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loaded && !loading && filtered.length === 0 && (
|
||||
<div className="rounded-lg border p-12 text-center text-muted-foreground text-sm">
|
||||
No held messages found.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loaded && !loading && filtered.length > 0 && (
|
||||
<div className="rounded-lg border overflow-hidden">
|
||||
<div className="px-4 py-2 bg-muted/40 border-b flex items-center justify-between">
|
||||
<span className="text-sm font-medium">
|
||||
{filtered.length.toLocaleString()} held message{filtered.length !== 1 ? 's' : ''}
|
||||
{data?.totalCount > filtered.length ? ` (showing ${filtered.length} of ${data.totalCount.toLocaleString()} total)` : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/30">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-2 font-medium">Date</th>
|
||||
<th className="text-left px-4 py-2 font-medium">To</th>
|
||||
<th className="text-left px-4 py-2 font-medium">From</th>
|
||||
<th className="text-left px-4 py-2 font-medium">Subject</th>
|
||||
<th className="text-left px-4 py-2 font-medium">Policy</th>
|
||||
{tenants.length > 1 && <th className="text-left px-4 py-2 font-medium">Tenant</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{filtered.map((m: any) => (
|
||||
<tr key={m.id} className="hover:bg-muted/20">
|
||||
<td className="px-4 py-2 text-muted-foreground whitespace-nowrap text-xs">
|
||||
{new Date(m.dateReceived).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<div className="text-xs">{m.to}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<div className="font-medium text-xs">{m.fromDisplay || m.from}</div>
|
||||
{m.fromDisplay && <div className="text-xs text-muted-foreground">{m.from}</div>}
|
||||
</td>
|
||||
<td className="px-4 py-2 max-w-xs">
|
||||
<div className="truncate">{m.subject || '(no subject)'}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
|
||||
m.policyInfo?.includes('DMARC') || m.policyInfo?.includes('Impersonation')
|
||||
? 'bg-red-500/10 text-red-600'
|
||||
: 'bg-yellow-500/10 text-yellow-700'
|
||||
}`}>
|
||||
{m.policyInfo || m.reason || '—'}
|
||||
</span>
|
||||
</td>
|
||||
{tenants.length > 1 && (
|
||||
<td className="px-4 py-2 text-xs text-muted-foreground">{m.accountName}</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||
export default function MimecastSyncPage() {
|
||||
const [statusData, setStatusData] = useState<any>(null);
|
||||
|
|
@ -414,21 +697,25 @@ export default function MimecastSyncPage() {
|
|||
)}
|
||||
|
||||
<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 className="grid w-full max-w-4xl grid-cols-7">
|
||||
<TabsTrigger value="status" className="gap-1.5"><Activity className="h-4 w-4" />Status</TabsTrigger>
|
||||
<TabsTrigger value="held" className="gap-1.5"><PauseCircle className="h-4 w-4" />Held Mail</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="cloudusers" className="gap-1.5"><Users className="h-4 w-4" />Cloud Users</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">
|
||||
<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>
|
||||
<TabsContent value="held" className="mt-6"><HeldMailTab /></TabsContent>
|
||||
<TabsContent value="messages" className="mt-6"><MessagesTab /></TabsContent>
|
||||
<TabsContent value="threats" className="mt-6"><ThreatsTab /></TabsContent>
|
||||
<TabsContent value="cloudusers" className="mt-6"><CloudUserTab /></TabsContent>
|
||||
<TabsContent value="history" className="mt-6"><HistoryTab /></TabsContent>
|
||||
<TabsContent value="schedules" className="mt-6"><SyncScheduler /></TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue