gitea
This commit is contained in:
@@ -1,253 +1,182 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { monitorAPI } from '@/lib/api'
|
||||
import { toast } from 'sonner'
|
||||
import { DashboardLayout } from '@/components/layout/dashboard-layout'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter()
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['monitors'],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.list()
|
||||
return response.monitors
|
||||
},
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<DashboardLayout title="Dashboard" description="Overview of your monitors">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
const monitors = data || []
|
||||
const activeMonitors = monitors.filter((m: any) => m.status === 'active').length
|
||||
const errorMonitors = monitors.filter((m: any) => m.status === 'error').length
|
||||
const recentChanges = monitors.filter((m: any) => m.last_change_at).length
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Dashboard" description="Overview of your monitoring activity">
|
||||
{/* Stats Grid */}
|
||||
<div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
|
||||
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total Monitors</p>
|
||||
<p className="text-2xl font-bold">{monitors.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100">
|
||||
<svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Active</p>
|
||||
<p className="text-2xl font-bold">{activeMonitors}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-red-100">
|
||||
<svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Errors</p>
|
||||
<p className="text-2xl font-bold">{errorMonitors}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
|
||||
<svg className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Recent Changes</p>
|
||||
<p className="text-2xl font-bold">{recentChanges}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="mb-8">
|
||||
<h2 className="mb-4 text-lg font-semibold">Quick Actions</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button onClick={() => router.push('/monitors')}>
|
||||
<svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Add Monitor
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => router.push('/incidents')}>
|
||||
View Incidents
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => router.push('/analytics')}>
|
||||
View Analytics
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Monitors */}
|
||||
<div>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Recent Monitors</h2>
|
||||
<Button variant="ghost" size="sm" onClick={() => router.push('/monitors')}>
|
||||
View All →
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{monitors.length === 0 ? (
|
||||
<Card className="text-center">
|
||||
<CardContent className="py-12">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
||||
<svg className="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold">No monitors yet</h3>
|
||||
<p className="mb-6 text-muted-foreground">
|
||||
Start monitoring your first website
|
||||
</p>
|
||||
<Button onClick={() => router.push('/monitors')}>
|
||||
Create Your First Monitor
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{monitors.slice(0, 5).map((monitor: any) => (
|
||||
<Card key={monitor.id} hover onClick={() => router.push(`/monitors/${monitor.id}`)}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`status-dot ${monitor.status === 'active' ? 'status-dot-success' : monitor.status === 'error' ? 'status-dot-error' : 'status-dot-neutral'}`} />
|
||||
<div>
|
||||
<h3 className="font-medium">{monitor.name || monitor.url}</h3>
|
||||
<p className="text-sm text-muted-foreground truncate max-w-md">{monitor.url}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={monitor.status === 'active' ? 'success' : monitor.status === 'error' ? 'destructive' : 'secondary'}>
|
||||
{monitor.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user