103 lines
4.6 KiB
TypeScript
103 lines
4.6 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, Network, Loader2, ExternalLink, CheckCircle2 } from 'lucide-react';
|
|
|
|
export default function AuvikPage() {
|
|
const [status, setStatus] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/integrations/status')
|
|
.then(r => r.json())
|
|
.then(d => setStatus(d.auvik))
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container mx-auto py-4 md:py-8 px-4 space-y-6">
|
|
<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-purple-500/30 bg-purple-500/5">
|
|
<Network className="w-5 h-5 text-purple-500" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">NMS — Auvik</h1>
|
|
<p className="text-sm text-muted-foreground">Network devices, topology, tenant mappings</p>
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto">
|
|
<a href="https://auvikapi.us5.my.auvik.com" target="_blank" rel="noopener noreferrer">
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<ExternalLink className="w-4 h-4" />Open Portal
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs defaultValue="status" className="w-full">
|
|
<TabsList className="grid w-full max-w-xs grid-cols-2">
|
|
<TabsTrigger value="status" className="gap-2">
|
|
<Activity className="h-4 w-4" />Status
|
|
</TabsTrigger>
|
|
<TabsTrigger value="about" className="gap-2">
|
|
<Network className="h-4 w-4" />About
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="status" className="mt-6">
|
|
{!status ? (
|
|
<div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="rounded-lg border p-4 bg-muted/30 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<CheckCircle2 className={`w-5 h-5 ${status.configured ? 'text-green-500' : 'text-muted-foreground'}`} />
|
|
<div>
|
|
<p className="text-sm font-medium">{status.configured ? 'Connected' : 'Not configured'}</p>
|
|
<p className="text-xs text-muted-foreground">{status.apiUrl}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg border p-4 bg-muted/30 text-sm text-muted-foreground">
|
|
Full sync and database integration is planned. Data is currently available on-demand via the Auvik API.
|
|
Use the tenant mappings page to link Auvik tenants to Autotask companies.
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Link href="/auvik-mappings">
|
|
<Button variant="outline" size="sm">Tenant Mappings</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="about" className="mt-6">
|
|
<div className="space-y-4 text-sm text-muted-foreground">
|
|
<div className="rounded-lg border p-4 space-y-2">
|
|
<p className="font-medium text-foreground">API Endpoints Available</p>
|
|
<ul className="space-y-1 list-disc list-inside">
|
|
<li><code className="text-xs bg-muted px-1 rounded">GET /api/auvik/devices</code> — network devices</li>
|
|
<li><code className="text-xs bg-muted px-1 rounded">GET /api/auvik/tenant-mappings</code> — tenant to company mappings</li>
|
|
<li><code className="text-xs bg-muted px-1 rounded">GET /api/auvik/device-config</code> — device configurations</li>
|
|
</ul>
|
|
</div>
|
|
<div className="rounded-lg border p-4 space-y-2">
|
|
<p className="font-medium text-foreground">Authentication</p>
|
|
<p>Basic auth — API user + API key (Base64 encoded)</p>
|
|
<p>Region: US5 (<code className="text-xs bg-muted px-1 rounded">auvikapi.us5.my.auvik.com</code>)</p>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|