254 lines
8.3 KiB
TypeScript
254 lines
8.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { monitorAPI } from '@/lib/api'
|
|
import { isAuthenticated, clearAuth } from '@/lib/auth'
|
|
|
|
export default function DashboardPage() {
|
|
const router = useRouter()
|
|
const [showAddForm, setShowAddForm] = useState(false)
|
|
const [newMonitor, setNewMonitor] = useState({
|
|
url: '',
|
|
name: '',
|
|
frequency: 60,
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!isAuthenticated()) {
|
|
router.push('/login')
|
|
}
|
|
}, [router])
|
|
|
|
const { data, isLoading, refetch } = useQuery({
|
|
queryKey: ['monitors'],
|
|
queryFn: async () => {
|
|
const response = await monitorAPI.list()
|
|
return response.monitors
|
|
},
|
|
})
|
|
|
|
const handleLogout = () => {
|
|
clearAuth()
|
|
router.push('/login')
|
|
}
|
|
|
|
const handleAddMonitor = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
try {
|
|
await monitorAPI.create(newMonitor)
|
|
setNewMonitor({ url: '', name: '', frequency: 60 })
|
|
setShowAddForm(false)
|
|
refetch()
|
|
} catch (err) {
|
|
console.error('Failed to create monitor:', err)
|
|
}
|
|
}
|
|
|
|
const handleCheckNow = async (id: string) => {
|
|
try {
|
|
await monitorAPI.check(id)
|
|
alert('Check triggered! Results will appear shortly.')
|
|
setTimeout(() => refetch(), 2000)
|
|
} catch (err) {
|
|
console.error('Failed to trigger check:', err)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Are you sure you want to delete this monitor?')) return
|
|
|
|
try {
|
|
await monitorAPI.delete(id)
|
|
refetch()
|
|
} catch (err) {
|
|
console.error('Failed to delete monitor:', err)
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center">
|
|
<p>Loading...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const monitors = data || []
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Header */}
|
|
<header className="border-b bg-white">
|
|
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">Website Monitor</h1>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="rounded-md border px-4 py-2 text-sm hover:bg-gray-50"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold">Your Monitors</h2>
|
|
<p className="text-sm text-gray-600">
|
|
{monitors.length} monitor{monitors.length !== 1 ? 's' : ''} active
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowAddForm(true)}
|
|
className="rounded-md bg-primary px-4 py-2 text-white hover:bg-primary/90"
|
|
>
|
|
+ Add Monitor
|
|
</button>
|
|
</div>
|
|
|
|
{/* Add Monitor Form */}
|
|
{showAddForm && (
|
|
<div className="mb-6 rounded-lg bg-white p-6 shadow">
|
|
<h3 className="mb-4 text-lg font-semibold">Add New Monitor</h3>
|
|
<form onSubmit={handleAddMonitor} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={newMonitor.url}
|
|
onChange={(e) =>
|
|
setNewMonitor({ ...newMonitor, url: e.target.value })
|
|
}
|
|
placeholder="https://example.com"
|
|
required
|
|
className="mt-1 block w-full rounded-md border px-3 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Name (optional)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newMonitor.name}
|
|
onChange={(e) =>
|
|
setNewMonitor({ ...newMonitor, name: e.target.value })
|
|
}
|
|
placeholder="My Monitor"
|
|
className="mt-1 block w-full rounded-md border px-3 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Check Frequency (minutes)
|
|
</label>
|
|
<select
|
|
value={newMonitor.frequency}
|
|
onChange={(e) =>
|
|
setNewMonitor({
|
|
...newMonitor,
|
|
frequency: parseInt(e.target.value),
|
|
})
|
|
}
|
|
className="mt-1 block w-full rounded-md border px-3 py-2"
|
|
>
|
|
<option value={5}>Every 5 minutes</option>
|
|
<option value={30}>Every 30 minutes</option>
|
|
<option value={60}>Every hour</option>
|
|
<option value={360}>Every 6 hours</option>
|
|
<option value={1440}>Every 24 hours</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="submit"
|
|
className="rounded-md bg-primary px-4 py-2 text-white hover:bg-primary/90"
|
|
>
|
|
Create Monitor
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAddForm(false)}
|
|
className="rounded-md border px-4 py-2 hover:bg-gray-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* Monitors List */}
|
|
{monitors.length === 0 ? (
|
|
<div className="rounded-lg bg-white p-12 text-center shadow">
|
|
<p className="mb-4 text-gray-600">No monitors yet</p>
|
|
<button
|
|
onClick={() => setShowAddForm(true)}
|
|
className="rounded-md bg-primary px-4 py-2 text-white hover:bg-primary/90"
|
|
>
|
|
Create Your First Monitor
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{monitors.map((monitor: any) => (
|
|
<div
|
|
key={monitor.id}
|
|
className="rounded-lg bg-white p-6 shadow hover:shadow-md"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold">{monitor.name}</h3>
|
|
<p className="text-sm text-gray-600 break-all">{monitor.url}</p>
|
|
<div className="mt-2 flex gap-4 text-xs text-gray-500">
|
|
<span>Every {monitor.frequency} min</span>
|
|
<span className="capitalize">Status: {monitor.status}</span>
|
|
{monitor.last_checked_at && (
|
|
<span>
|
|
Last checked:{' '}
|
|
{new Date(monitor.last_checked_at).toLocaleString()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handleCheckNow(monitor.id)}
|
|
className="rounded-md border px-3 py-1 text-sm hover:bg-gray-50"
|
|
>
|
|
Check Now
|
|
</button>
|
|
<button
|
|
onClick={() => router.push(`/monitors/${monitor.id}`)}
|
|
className="rounded-md border px-3 py-1 text-sm hover:bg-gray-50"
|
|
>
|
|
History
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(monitor.id)}
|
|
className="rounded-md border border-red-200 px-3 py-1 text-sm text-red-600 hover:bg-red-50"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|