start working on the frontend side
This commit is contained in:
Warp Agent
190
frontend/src/pages/Dashboard.tsx
Normal file
190
frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Link } from 'react-router-dom'
|
||||
import apiClient from '@/api/client'
|
||||
import { monitoringApi } from '@/api/monitoring'
|
||||
import { storageApi } from '@/api/storage'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Activity, Database, AlertTriangle, HardDrive } from 'lucide-react'
|
||||
import { formatBytes } from '@/lib/format'
|
||||
|
||||
export default function Dashboard() {
|
||||
const { data: health } = useQuery({
|
||||
queryKey: ['health'],
|
||||
queryFn: async () => {
|
||||
const response = await apiClient.get('/health')
|
||||
return response.data
|
||||
},
|
||||
})
|
||||
|
||||
const { data: metrics } = useQuery({
|
||||
queryKey: ['metrics'],
|
||||
queryFn: monitoringApi.getMetrics,
|
||||
})
|
||||
|
||||
const { data: alerts } = useQuery({
|
||||
queryKey: ['alerts', 'dashboard'],
|
||||
queryFn: () => monitoringApi.listAlerts({ is_acknowledged: false, limit: 5 }),
|
||||
})
|
||||
|
||||
const { data: repositories } = useQuery({
|
||||
queryKey: ['storage', 'repositories'],
|
||||
queryFn: storageApi.listRepositories,
|
||||
})
|
||||
|
||||
const unacknowledgedAlerts = alerts?.alerts?.length || 0
|
||||
const totalRepos = repositories?.length || 0
|
||||
const totalStorage = repositories?.reduce((sum, repo) => sum + repo.size_bytes, 0) || 0
|
||||
const usedStorage = repositories?.reduce((sum, repo) => sum + repo.used_bytes, 0) || 0
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Overview of your Calypso backup appliance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* System Health */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Activity className="h-5 w-5 mr-2" />
|
||||
System Health
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{health && (
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span
|
||||
className={`h-4 w-4 rounded-full ${
|
||||
health.status === 'healthy'
|
||||
? 'bg-green-500'
|
||||
: health.status === 'degraded'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-lg font-semibold capitalize">{health.status}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-600">Service: {health.service}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Overview Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Storage Repositories</CardTitle>
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{totalRepos}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatBytes(usedStorage)} / {formatBytes(totalStorage)} used
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Active Alerts</CardTitle>
|
||||
<AlertTriangle className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{unacknowledgedAlerts}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{unacknowledgedAlerts === 0 ? 'All clear' : 'Requires attention'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{metrics && (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">iSCSI Targets</CardTitle>
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{metrics.scst.total_targets}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{metrics.scst.active_sessions} active sessions
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Tasks</CardTitle>
|
||||
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{metrics.tasks.running_tasks}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{metrics.tasks.pending_tasks} pending
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
<CardDescription>Common operations</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Link to="/storage" className="w-full">
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
<Database className="h-4 w-4 mr-2" />
|
||||
Manage Storage
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/alerts" className="w-full">
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
<AlertTriangle className="h-4 w-4 mr-2" />
|
||||
View Alerts
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Alerts */}
|
||||
{alerts && alerts.alerts.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Alerts</CardTitle>
|
||||
<CardDescription>Latest unacknowledged alerts</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{alerts.alerts.slice(0, 3).map((alert) => (
|
||||
<div key={alert.id} className="text-sm">
|
||||
<p className="font-medium">{alert.title}</p>
|
||||
<p className="text-xs text-gray-500">{alert.message}</p>
|
||||
</div>
|
||||
))}
|
||||
{alerts.alerts.length > 3 && (
|
||||
<Link to="/alerts">
|
||||
<Button variant="link" className="p-0 h-auto">
|
||||
View all alerts →
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user