380 lines
18 KiB
TypeScript
380 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
import { RefreshCw, CheckCircle2, XCircle, AlertTriangle, Clock, Loader2, ChevronRight } from 'lucide-react';
|
|
|
|
interface IntegrationCard {
|
|
id: string;
|
|
category: string;
|
|
product: string;
|
|
description: string;
|
|
href: string;
|
|
logo: string;
|
|
color: string;
|
|
}
|
|
|
|
const INTEGRATIONS: IntegrationCard[] = [
|
|
{ id: 'autotask', category: 'PSA', product: 'Autotask', description: 'Tickets, companies, contacts, time entries, configuration items', href: '/admin/sync/autotask', logo: '/logos/autotask.ico', color: 'red' },
|
|
{ id: 'itglue', category: 'Documentation', product: 'IT Glue', description: 'Organizations, configurations, contacts, passwords, flexible assets, documents, domains', href: '/admin/sync/itglue', logo: '/logos/itglue.ico', color: 'blue' },
|
|
{ id: 'veeam', category: 'Backup', product: 'Veeam VSPC', description: 'Agent jobs, backup jobs, protected workloads, compliance', href: '/admin/sync/veeam', logo: '/logos/veeam.ico', color: 'green' },
|
|
{ id: 'datto-rmm', category: 'RMM', product: 'Datto RMM', description: 'Device monitoring, alerts, patch management, remote access', href: '/admin/sync/datto-rmm', logo: '/logos/datto-rmm.ico', color: 'orange' },
|
|
{ id: 'auvik', category: 'NMS', product: 'Auvik', description: 'Network devices, topology, tenant mappings', href: '/admin/sync/auvik', logo: '/logos/auvik.ico', color: 'purple' },
|
|
{ id: 'addigy', category: 'Apple RMM', product: 'Addigy', description: 'macOS/iOS device management, policies, compliance', href: '/admin/sync/addigy', logo: '/logos/addigy.ico', color: 'gray' },
|
|
{ id: 'sentinelone', category: 'EDR/AV', product: 'SentinelOne', description: 'Endpoint agents, threat detections, site coverage, AV health', href: '/admin/sync/sentinelone', logo: '/logos/sentinelone.ico', color: 'purple' },
|
|
{ id: 'mimecast', category: 'Email Security', product: 'Mimecast', description: 'Message tracking logs, threat events, SIEM data, 120-day retention', href: '/admin/sync/mimecast', logo: '/logos/mimecast.ico', color: 'blue' },
|
|
];
|
|
|
|
const COLOR_MAP: Record<string, { bg: string; border: string }> = {
|
|
red: { bg: 'bg-red-500/5', border: 'border-red-500/20' },
|
|
green: { bg: 'bg-green-500/5', border: 'border-green-500/20' },
|
|
blue: { bg: 'bg-blue-500/5', border: 'border-blue-500/20' },
|
|
orange: { bg: 'bg-orange-500/5', border: 'border-orange-500/20' },
|
|
purple: { bg: 'bg-purple-500/5', border: 'border-purple-500/20' },
|
|
gray: { bg: 'bg-muted/20', border: 'border-border' },
|
|
};
|
|
|
|
function fmtDate(d: string | null) {
|
|
if (!d) return 'Never';
|
|
const date = new Date(d);
|
|
const diff = Date.now() - date.getTime();
|
|
const mins = Math.floor(diff / 60000);
|
|
if (mins < 1) return 'Just now';
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}h ago`;
|
|
return `${Math.floor(hrs / 24)}d ago`;
|
|
}
|
|
|
|
export default function SyncOverviewPage() {
|
|
const [status, setStatus] = useState<any>(null);
|
|
const [autotaskSync, setAutotaskSync] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const [itglueSyncData, setItglueSyncData] = useState<any>(null);
|
|
const [s1SyncData, setS1SyncData] = useState<any>(null);
|
|
|
|
const [mimecastData, setMimecastData] = useState<any>(null);
|
|
|
|
const fetchAll = async () => {
|
|
try {
|
|
const [intRes, atRes, itgRes, s1Res, mcRes] = await Promise.all([
|
|
fetch('/api/integrations/status'),
|
|
fetch('/api/sync/last-sync'),
|
|
fetch('/api/itglue/sync'),
|
|
fetch('/api/sentinelone/sync'),
|
|
fetch('/api/mimecast/status'),
|
|
]);
|
|
if (intRes.ok) setStatus(await intRes.json());
|
|
if (atRes.ok) {
|
|
const d = await atRes.json();
|
|
setAutotaskSync(d.lastSync || {});
|
|
}
|
|
if (itgRes.ok) setItglueSyncData(await itgRes.json());
|
|
if (s1Res.ok) setS1SyncData(await s1Res.json());
|
|
if (mcRes.ok) setMimecastData(await mcRes.json());
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { fetchAll(); }, []);
|
|
|
|
const getAutotaskSummary = () => {
|
|
if (!autotaskSync) return null;
|
|
const entries = Object.values(autotaskSync) as any[];
|
|
if (!entries.length) return null;
|
|
const latest = entries.reduce((a: any, b: any) =>
|
|
new Date(a.completed_at) > new Date(b.completed_at) ? a : b
|
|
);
|
|
const failed = entries.filter((e: any) => e.status === 'failed').length;
|
|
return { lastSync: latest.completed_at, failed, total: entries.length };
|
|
};
|
|
|
|
const atSummary = getAutotaskSummary();
|
|
|
|
const getSummary = (id: string) => {
|
|
if (!status) return null;
|
|
if (id === 'autotask') return atSummary;
|
|
if (id === 'veeam') {
|
|
const v = status.veeam;
|
|
if (!v) return null;
|
|
const aj = v.agentJobs ?? {};
|
|
const bj = v.backupJobs ?? {};
|
|
return {
|
|
lastSync: v.lastSync,
|
|
failed: (aj.failed ?? 0) + (bj.failed ?? 0),
|
|
warning: (aj.warning ?? 0) + (bj.warning ?? 0),
|
|
running: aj.running ?? 0,
|
|
total: (aj.total ?? 0) + (bj.total ?? 0),
|
|
};
|
|
}
|
|
if (id === 'datto-rmm') {
|
|
const d = status.dattoRmm;
|
|
if (!d) return null;
|
|
return {
|
|
lastSync: d.lastSync,
|
|
sites: d.sites ?? 0,
|
|
devices: d.devices?.total ?? 0,
|
|
online: d.devices?.online ?? 0,
|
|
offline: d.devices?.offline ?? 0,
|
|
openAlerts: d.openAlerts?.total ?? 0,
|
|
critical: d.openAlerts?.critical ?? 0,
|
|
};
|
|
}
|
|
if (id === 'itglue') {
|
|
if (!itglueSyncData) return null;
|
|
const h = itglueSyncData.history?.[0];
|
|
const c = itglueSyncData.counts ?? {};
|
|
return {
|
|
lastSync: h?.completed_at ?? null,
|
|
organizations: Number(c.organizations ?? 0),
|
|
configurations: Number(c.configurations ?? 0),
|
|
totalUpserted: h?.total_upserted ?? 0,
|
|
status: h?.status ?? null,
|
|
};
|
|
}
|
|
if (id === 'sentinelone') {
|
|
if (!s1SyncData) return null;
|
|
const h = s1SyncData.history?.[0];
|
|
const c = s1SyncData.counts ?? {};
|
|
return {
|
|
lastSync: h?.completed_at ?? null,
|
|
status: h?.status ?? null,
|
|
sites: Number(c.sites ?? 0),
|
|
agents: Number(c.agents ?? 0),
|
|
infected: Number(c.infected ?? 0),
|
|
threats: Number(c.threats ?? 0),
|
|
};
|
|
}
|
|
if (id === 'auvik') return { lastSync: status.auvik?.lastSync, configured: status.auvik?.configured };
|
|
if (id === 'addigy') return { lastSync: status.addigy?.lastSync, configured: status.addigy?.configured };
|
|
if (id === 'mimecast') {
|
|
if (!mimecastData) return null;
|
|
const s = mimecastData.stats ?? {};
|
|
return {
|
|
lastSync: s.lastSync ?? null,
|
|
connected: mimecastData.connected ?? false,
|
|
messages: s.messages ?? 0,
|
|
threats: s.threats ?? 0,
|
|
};
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const getStatusIcon = (id: string, summary: any) => {
|
|
if (!summary) return <Clock className="w-4 h-4 text-muted-foreground" />;
|
|
if (id === 'veeam') {
|
|
if (summary.failed > 0) return <XCircle className="w-4 h-4 text-red-500" />;
|
|
if (summary.warning > 0 || summary.running > 0) return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
}
|
|
if (id === 'autotask') {
|
|
if (summary.failed > 0) return <XCircle className="w-4 h-4 text-red-500" />;
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
}
|
|
if (id === 'datto-rmm') {
|
|
if (summary.critical > 0) return <XCircle className="w-4 h-4 text-red-500" />;
|
|
if (summary.openAlerts > 0) return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
}
|
|
if (id === 'itglue') {
|
|
if (!summary.lastSync) return <Clock className="w-4 h-4 text-muted-foreground" />;
|
|
if (summary.status === 'failed') return <XCircle className="w-4 h-4 text-red-500" />;
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
}
|
|
if (id === 'sentinelone') {
|
|
if (!summary.lastSync) return <Clock className="w-4 h-4 text-muted-foreground" />;
|
|
if (summary.infected > 0) return <AlertTriangle className="w-4 h-4 text-red-500" />;
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
}
|
|
if (id === 'mimecast') {
|
|
if (!summary.connected) return <Clock className="w-4 h-4 text-muted-foreground" />;
|
|
if ((summary as any).threats > 0) return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
}
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto py-4 md:py-8 px-4 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl md:text-3xl font-bold">Integrations & Sync</h1>
|
|
<p className="text-sm text-muted-foreground mt-0.5">Manage data sync across all connected platforms</p>
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={fetchAll} className="gap-2">
|
|
<RefreshCw className="w-4 h-4" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 items-stretch">
|
|
{INTEGRATIONS.map((intg) => {
|
|
const colors = COLOR_MAP[intg.color];
|
|
const summary = getSummary(intg.id);
|
|
return (
|
|
<Link key={intg.id} href={intg.href} className="flex">
|
|
<div className={`flex flex-col w-full rounded-xl border ${colors.border} ${colors.bg} p-5 hover:shadow-md transition-all cursor-pointer group`}>
|
|
|
|
{/* Header: logo + names + chevron */}
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<img src={intg.logo} alt={intg.product} className="w-10 h-10 shrink-0 rounded-lg object-contain" />
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground leading-none mb-1">
|
|
{intg.category}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-bold text-base leading-tight">{intg.product}</span>
|
|
{summary && getStatusIcon(intg.id, summary)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors shrink-0 mt-1" />
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p className="text-xs text-muted-foreground leading-relaxed mb-4">{intg.description}</p>
|
|
|
|
{/* Stats — pushed to bottom */}
|
|
<div className="mt-auto pt-3 border-t border-border/50 space-y-1.5 text-xs text-muted-foreground">
|
|
{intg.id === 'autotask' && summary && (
|
|
<>
|
|
<div className="flex justify-between">
|
|
<span>Last sync</span>
|
|
<span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Entities tracked</span>
|
|
<span className="font-medium text-foreground">{summary.total}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
{intg.id === 'veeam' && summary && (
|
|
<>
|
|
<div className="flex justify-between">
|
|
<span>Last sync</span>
|
|
<span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Total jobs</span>
|
|
<span className="font-medium text-foreground">{summary.total}</span>
|
|
</div>
|
|
{(summary as any).failed > 0 && (
|
|
<div className="flex justify-between text-red-600">
|
|
<span>Failed</span><span className="font-medium">{(summary as any).failed}</span>
|
|
</div>
|
|
)}
|
|
{(summary as any).running > 0 && (
|
|
<div className="flex justify-between text-blue-600">
|
|
<span>Running (stalled?)</span><span className="font-medium">{(summary as any).running}</span>
|
|
</div>
|
|
)}
|
|
{(summary as any).warning > 0 && (
|
|
<div className="flex justify-between text-yellow-700">
|
|
<span>Warning</span><span className="font-medium">{(summary as any).warning}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{intg.id === 'datto-rmm' && summary && (
|
|
<>
|
|
<div className="flex justify-between">
|
|
<span>Last sync</span>
|
|
<span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Sites / Devices</span>
|
|
<span className="font-medium text-foreground">{(summary as any).sites} / {(summary as any).devices}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Online / Offline</span>
|
|
<span className="font-medium text-foreground">{(summary as any).online} / {(summary as any).offline}</span>
|
|
</div>
|
|
{(summary as any).openAlerts > 0 && (
|
|
<div className={`flex justify-between ${(summary as any).critical > 0 ? 'text-red-600' : 'text-yellow-700'}`}>
|
|
<span>Open alerts</span>
|
|
<span className="font-medium">{(summary as any).openAlerts}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{intg.id === 'itglue' && summary && (
|
|
<>
|
|
<div className="flex justify-between">
|
|
<span>Last sync</span>
|
|
<span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Organizations</span>
|
|
<span className="font-medium text-foreground">{(summary as any).organizations?.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Configurations</span>
|
|
<span className="font-medium text-foreground">{(summary as any).configurations?.toLocaleString()}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
{intg.id === 'sentinelone' && summary && (
|
|
<>
|
|
<div className="flex justify-between">
|
|
<span>Last sync</span>
|
|
<span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Sites / Agents</span>
|
|
<span className="font-medium text-foreground">{(summary as any).sites} / {(summary as any).agents?.toLocaleString()}</span>
|
|
</div>
|
|
{(summary as any).infected > 0 && (
|
|
<div className="flex justify-between text-red-600">
|
|
<span>Infected</span>
|
|
<span className="font-medium">{(summary as any).infected}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{intg.id === 'mimecast' && summary && (
|
|
<>
|
|
<div className="flex justify-between">
|
|
<span>Last sync</span>
|
|
<span className="font-medium text-foreground">{fmtDate((summary as any).lastSync)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Messages</span>
|
|
<span className="font-medium text-foreground">{((summary as any).messages ?? 0).toLocaleString()}</span>
|
|
</div>
|
|
{(summary as any).threats > 0 && (
|
|
<div className="flex justify-between text-yellow-700">
|
|
<span>Threat events</span>
|
|
<span className="font-medium">{(summary as any).threats}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{(intg.id === 'auvik' || intg.id === 'addigy') && (
|
|
<div className="flex justify-between">
|
|
<span>Status</span>
|
|
<span className={`font-medium ${(summary as any)?.configured ? 'text-green-600' : 'text-muted-foreground'}`}>
|
|
{(summary as any)?.configured ? 'Connected' : 'Not configured'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|