465 lines
24 KiB
TypeScript
465 lines
24 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, Shield, RefreshCw, Loader2,
|
|
CheckCircle2, XCircle, AlertTriangle, Clock, Server, HardDrive,
|
|
Bot, Bell, ChevronDown, ChevronRight,
|
|
} from 'lucide-react';
|
|
import SyncScheduler from '@/components/admin/SyncScheduler';
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
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 fmtDur(ms: number) {
|
|
if (ms < 60000) return `${Math.round(ms / 1000)}s`;
|
|
return `${Math.floor(ms / 60000)}m ${Math.round((ms % 60000) / 1000)}s`;
|
|
}
|
|
|
|
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 === 'completed' ? 'bg-green-500/15 text-green-700' :
|
|
status === 'failed' ? 'bg-red-500/15 text-red-600' :
|
|
status === 'started' ? 'bg-blue-500/15 text-blue-700' :
|
|
'bg-yellow-500/15 text-yellow-700';
|
|
return <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>{status}</span>;
|
|
}
|
|
|
|
// ── Status Tab ────────────────────────────────────────────────────────────────
|
|
function VeeamStatusTab({ 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 aj = data.agentJobs ?? {};
|
|
const bj = data.backupJobs ?? {};
|
|
const totalFailed = (aj.failed ?? 0) + (bj.failed ?? 0);
|
|
const totalWarning = (aj.warning ?? 0) + (bj.warning ?? 0);
|
|
const totalRunning = aj.running ?? 0;
|
|
const totalSuccess = (aj.success ?? 0) + (bj.success ?? 0);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between rounded-lg border p-4 bg-muted/30">
|
|
<div className="space-y-0.5">
|
|
<p className="text-sm font-medium">{data.configured ? 'Connected to VSPC' : 'Not configured'}</p>
|
|
<p className="text-xs text-muted-foreground">Last sync: {fmtDate(data.lastSync)}</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" variant="outline" onClick={() => onSync('incremental')} disabled={syncing || !data.configured}>
|
|
{syncing ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
|
|
Incremental
|
|
</Button>
|
|
<Button size="sm" onClick={() => onSync('full')} disabled={syncing || !data.configured}>
|
|
{syncing ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
|
|
Full Sync
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<StatCard label="Organizations" value={data.organizations ?? 0} icon={Server} />
|
|
<StatCard label="Protected Workloads" value={data.protectedWorkloads ?? 0} icon={HardDrive} />
|
|
<StatCard label="Agent Jobs" value={aj.total ?? 0} sub={`${aj.success ?? 0} success`} icon={Shield} />
|
|
<StatCard label="Backup Jobs" value={bj.total ?? 0} sub={`${bj.success ?? 0} success`} icon={Shield} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<StatCard label="Running" value={totalRunning} icon={Clock}
|
|
cls={totalRunning > 0 ? 'border-blue-500/30 bg-blue-500/5' : ''} />
|
|
<StatCard label="Failed" value={totalFailed} icon={XCircle}
|
|
cls={totalFailed > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
|
|
<StatCard label="Warning" value={totalWarning} icon={AlertTriangle}
|
|
cls={totalWarning > 0 ? 'border-yellow-500/30 bg-yellow-500/5' : ''} />
|
|
<StatCard label="Success" value={totalSuccess} icon={CheckCircle2}
|
|
cls="border-green-500/30 bg-green-500/5" />
|
|
</div>
|
|
|
|
{(totalFailed > 0 || totalWarning > 0 || totalRunning > 0) && (
|
|
<div className="rounded-lg border p-4 space-y-2">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Attention Required</p>
|
|
{totalFailed > 0 && <div className="flex items-center gap-2 text-sm text-red-600"><XCircle className="w-4 h-4" />{totalFailed} job{totalFailed !== 1 ? 's' : ''} failed</div>}
|
|
{totalWarning > 0 && <div className="flex items-center gap-2 text-sm text-yellow-700"><AlertTriangle className="w-4 h-4" />{totalWarning} job{totalWarning !== 1 ? 's' : ''} with warnings</div>}
|
|
{totalRunning > 0 && <div className="flex items-center gap-2 text-sm text-blue-600"><Loader2 className="w-4 h-4 animate-spin" />{totalRunning} job{totalRunning !== 1 ? 's' : ''} running</div>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── History Tab ───────────────────────────────────────────────────────────────
|
|
const ENTITY_LABELS: Record<string, string> = {
|
|
organizations: 'Organizations',
|
|
backup_servers: 'Backup Servers',
|
|
repositories: 'Repositories',
|
|
backup_jobs: 'Backup Jobs',
|
|
backup_agent_jobs: 'Agent Jobs',
|
|
protected_workloads:'Protected Workloads',
|
|
backup_agents: 'Agents',
|
|
alarms: 'Alarms',
|
|
};
|
|
|
|
function HistoryRow({ row }: { row: any }) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const dur = row.completed_at && row.started_at
|
|
? new Date(row.completed_at).getTime() - new Date(row.started_at).getTime()
|
|
: null;
|
|
|
|
let entities: Array<{ entity: string; success: boolean; recordsUpserted: number; duration: number; error?: string }> = [];
|
|
try {
|
|
if (row.entity_details) {
|
|
entities = typeof row.entity_details === 'string' ? JSON.parse(row.entity_details) : row.entity_details;
|
|
}
|
|
} catch { /* ignore parse errors */ }
|
|
|
|
return (
|
|
<>
|
|
<tr
|
|
className={`border-b hover:bg-muted/30 ${entities.length > 0 ? 'cursor-pointer' : ''}`}
|
|
onClick={() => entities.length > 0 && setExpanded(e => !e)}
|
|
>
|
|
<td className="px-4 py-2.5">
|
|
<div className="flex items-center gap-1.5">
|
|
{entities.length > 0
|
|
? (expanded
|
|
? <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
|
|
: <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />)
|
|
: <span className="w-3.5" />}
|
|
<span className="capitalize">{row.sync_type}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-2.5"><StatusBadge status={row.status} /></td>
|
|
<td className="px-4 py-2.5 tabular-nums font-medium">{(row.records_added ?? 0).toLocaleString()}</td>
|
|
<td className="px-4 py-2.5 text-muted-foreground text-xs">{fmtDate(row.started_at)}</td>
|
|
<td className="px-4 py-2.5 text-muted-foreground">{dur != null ? fmtDur(dur) : '—'}</td>
|
|
<td className="px-4 py-2.5 text-muted-foreground capitalize">{row.triggered_by ?? '—'}</td>
|
|
</tr>
|
|
{expanded && entities.length > 0 && (
|
|
<tr className="border-b bg-muted/20">
|
|
<td colSpan={6} className="px-8 py-3">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">Entity Breakdown</p>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
{entities.map((e) => (
|
|
<div key={e.entity} className={`rounded border px-3 py-2 text-xs ${e.success ? '' : 'border-red-300 bg-red-50 dark:bg-red-950/20'}`}>
|
|
<div className="font-medium text-foreground">{ENTITY_LABELS[e.entity] ?? e.entity}</div>
|
|
<div className="text-muted-foreground mt-0.5">
|
|
{e.success
|
|
? <><span className="text-green-700 font-semibold">{e.recordsUpserted.toLocaleString()}</span> records · {fmtDur(e.duration)}</>
|
|
: <span className="text-red-600">Failed: {e.error?.substring(0, 60)}</span>}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{row.error_message && (
|
|
<div className="mt-2 text-xs text-red-600 bg-red-50 dark:bg-red-950/20 border border-red-200 rounded px-3 py-2">
|
|
{row.error_message}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function VeeamHistoryTab({ refreshKey }: { refreshKey: number }) {
|
|
const [rows, setRows] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetch('/api/sync/history?entityType=veeam&limit=50')
|
|
.then(r => r.json())
|
|
.then(d => setRows(d.history ?? []))
|
|
.catch(() => setRows([]))
|
|
.finally(() => setLoading(false));
|
|
}, [refreshKey]);
|
|
|
|
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-muted-foreground text-sm">No sync history yet — run a sync to populate</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">Records</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>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Triggered By</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row, i) => <HistoryRow key={i} row={row} />)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Agents Tab ────────────────────────────────────────────────────────────────
|
|
function AgentsTab({ refreshKey }: { refreshKey: number }) {
|
|
const [data, setData] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetch('/api/veeam/agents')
|
|
.then(r => r.json())
|
|
.then(d => setData(d))
|
|
.catch(() => setData(null))
|
|
.finally(() => setLoading(false));
|
|
}, [refreshKey]);
|
|
|
|
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 (!data || !data.agents?.length) return <div className="text-center py-12 text-muted-foreground text-sm">No agent data — run a sync first</div>;
|
|
|
|
const s = data.summary ?? {};
|
|
const agents: any[] = data.agents ?? [];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
<StatCard label="Total Agents" value={s.total ?? 0} icon={Bot} />
|
|
<StatCard label="Active" value={s.active ?? 0} icon={CheckCircle2} cls="border-green-500/30 bg-green-500/5" />
|
|
<StatCard label="Inaccessible" value={s.inaccessible ?? 0} icon={XCircle}
|
|
cls={(s.inaccessible ?? 0) > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
|
|
<StatCard label="Outdated" value={s.outdated ?? 0} icon={AlertTriangle}
|
|
cls={(s.outdated ?? 0) > 0 ? 'border-yellow-500/30 bg-yellow-500/5' : ''} />
|
|
<StatCard label="Win / Linux / Mac" value={`${s.windows ?? 0} / ${s.linux ?? 0} / ${s.mac ?? 0}`} icon={Server} />
|
|
</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">Name</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Organization</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Platform</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">Agent Status</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Version</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Mode</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Jobs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{agents.map((a: any) => (
|
|
<tr key={a.instance_uid} className="border-b last:border-0 hover:bg-muted/30">
|
|
<td className="px-4 py-2 font-medium">{a.name}</td>
|
|
<td className="px-4 py-2 text-muted-foreground text-xs">{a.organization_name ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs">{a.agent_platform ?? '—'}</td>
|
|
<td className="px-4 py-2">
|
|
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
a.status === 'Active' ? 'bg-green-500/15 text-green-700' : 'bg-muted text-muted-foreground'
|
|
}`}>{a.status ?? '—'}</span>
|
|
</td>
|
|
<td className="px-4 py-2">
|
|
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
a.management_agent_status === 'Inaccessible' ? 'bg-red-500/15 text-red-600' :
|
|
a.management_agent_status === 'Accessible' ? 'bg-green-500/15 text-green-700' :
|
|
'bg-muted text-muted-foreground'
|
|
}`}>{a.management_agent_status ?? '—'}</span>
|
|
</td>
|
|
<td className="px-4 py-2 text-xs">
|
|
<span className={a.version_status === 'Outdated' ? 'text-yellow-700 font-medium' : 'text-muted-foreground'}>
|
|
{a.version ?? '—'}
|
|
{a.version_status === 'Outdated' && ' ⚠'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground">{a.operation_mode ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs tabular-nums">
|
|
<span className="text-green-700">{a.success_jobs_count ?? 0}✓</span>
|
|
{(a.running_jobs_count ?? 0) > 0 && <span className="text-blue-600 ml-1">{a.running_jobs_count}▶</span>}
|
|
{(a.total_jobs_count ?? 0) - (a.success_jobs_count ?? 0) - (a.running_jobs_count ?? 0) > 0 && (
|
|
<span className="text-red-600 ml-1">
|
|
{(a.total_jobs_count ?? 0) - (a.success_jobs_count ?? 0) - (a.running_jobs_count ?? 0)}✗
|
|
</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Alarms Tab ────────────────────────────────────────────────────────────────
|
|
function AlarmsTab({ refreshKey }: { refreshKey: number }) {
|
|
const [data, setData] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetch('/api/veeam/alarms')
|
|
.then(r => r.json())
|
|
.then(d => setData(d))
|
|
.catch(() => setData(null))
|
|
.finally(() => setLoading(false));
|
|
}, [refreshKey]);
|
|
|
|
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 (!data || !data.alarms?.length) return <div className="text-center py-12 text-muted-foreground text-sm">No alarm data — run a sync first</div>;
|
|
|
|
const s = data.summary ?? {};
|
|
const alarms: any[] = data.alarms ?? [];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<StatCard label="Total Alarms" value={s.total ?? 0} icon={Bell} />
|
|
<StatCard label="Active" value={s.statusActive ?? 0} icon={XCircle}
|
|
cls={(s.statusActive ?? 0) > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
|
|
<StatCard label="Warning" value={s.statusWarning ?? 0} icon={AlertTriangle}
|
|
cls={(s.statusWarning ?? 0) > 0 ? 'border-yellow-500/30 bg-yellow-500/5' : ''} />
|
|
<StatCard label="Resolved" value={s.statusResolved ?? 0} icon={CheckCircle2}
|
|
cls="border-green-500/30 bg-green-500/5" />
|
|
</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">Object</th>
|
|
<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">Organization</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">Repeats</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Last Activation</th>
|
|
<th className="text-left px-4 py-2 font-medium text-muted-foreground">Message</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{alarms.map((a: any) => (
|
|
<tr key={a.instance_uid} className="border-b last:border-0 hover:bg-muted/30">
|
|
<td className="px-4 py-2 font-medium">{a.object_computer_name || a.object_name || '—'}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground">{a.object_type ?? '—'}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground">{a.organization_name ?? '—'}</td>
|
|
<td className="px-4 py-2">
|
|
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
a.last_activation_status === 'Active' ? 'bg-red-500/15 text-red-600' :
|
|
a.last_activation_status === 'Warning' ? 'bg-yellow-500/15 text-yellow-700' :
|
|
a.last_activation_status === 'Resolved' ? 'bg-green-500/15 text-green-700' :
|
|
'bg-muted text-muted-foreground'
|
|
}`}>{a.last_activation_status ?? '—'}</span>
|
|
</td>
|
|
<td className="px-4 py-2 tabular-nums text-xs">{a.repeat_count ?? 0}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground">{fmtDate(a.last_activation_time)}</td>
|
|
<td className="px-4 py-2 text-xs text-muted-foreground max-w-xs truncate" title={a.last_activation_message ?? ''}>
|
|
{a.last_activation_message?.trim() || '—'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Page ──────────────────────────────────────────────────────────────────────
|
|
export default function VeeamSyncPage() {
|
|
const [status, setStatus] = useState<any>(null);
|
|
const [syncing, setSyncing] = useState(false);
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
|
|
const fetchStatus = async () => {
|
|
const res = await fetch('/api/integrations/status');
|
|
if (res.ok) { const d = await res.json(); setStatus(d.veeam); }
|
|
};
|
|
|
|
useEffect(() => { fetchStatus(); }, [refreshKey]);
|
|
|
|
const handleSync = async (syncType = 'full') => {
|
|
setSyncing(true);
|
|
try {
|
|
await fetch('/api/veeam/sync', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ syncType }),
|
|
headers: { 'Content-Type': 'application/json' },
|
|
});
|
|
const poll = setInterval(async () => {
|
|
try {
|
|
const r = await fetch('/api/veeam/sync');
|
|
if (r.ok) {
|
|
const d = await r.json();
|
|
if (!d.isSyncing) {
|
|
clearInterval(poll);
|
|
setSyncing(false);
|
|
setRefreshKey(k => k + 1);
|
|
}
|
|
}
|
|
} catch { /* keep polling */ }
|
|
}, 4000);
|
|
} catch {
|
|
setSyncing(false);
|
|
}
|
|
};
|
|
|
|
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-green-500/30 bg-green-500/5">
|
|
<Shield className="w-5 h-5 text-green-500" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Backup — Veeam VSPC</h1>
|
|
<p className="text-sm text-muted-foreground">Agent jobs, backup jobs, protected workloads, agents, alarms</p>
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto">
|
|
<Link href="/backup-status">
|
|
<Button variant="outline" size="sm">View Backup Status</Button>
|
|
</Link>
|
|
</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="history" className="gap-1.5"><History className="h-4 w-4" />History</TabsTrigger>
|
|
<TabsTrigger value="agents" className="gap-1.5"><Bot className="h-4 w-4" />Agents</TabsTrigger>
|
|
<TabsTrigger value="alarms" className="gap-1.5"><Bell className="h-4 w-4" />Alarms</TabsTrigger>
|
|
<TabsTrigger value="schedules" className="gap-1.5"><Calendar className="h-4 w-4" />Schedules</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="status" className="mt-6"><VeeamStatusTab data={status} onSync={handleSync} syncing={syncing} /></TabsContent>
|
|
<TabsContent value="history" className="mt-6"><VeeamHistoryTab refreshKey={refreshKey} /></TabsContent>
|
|
<TabsContent value="agents" className="mt-6"><AgentsTab refreshKey={refreshKey} /></TabsContent>
|
|
<TabsContent value="alarms" className="mt-6"><AlarmsTab refreshKey={refreshKey} /></TabsContent>
|
|
<TabsContent value="schedules" className="mt-6"><SyncScheduler /></TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|