akanealw/Charon
1
0
Fork 0
Code Issues Pull Requests Actions 14 Packages Projects Releases Wiki Activity

chore: clean git cache

Browse Source
This commit is contained in:
GitHub Actions
2026-01-02 00:59:57 +00:00
parent 9a05e2f927
commit aae55a8ae9
289 changed files with 0 additions and 62352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
frontend/src/components/UptimeWidget.tsx
View File

@@ -1,136 +0,0 @@
import { useQuery } from '@tanstack/react-query'
import { Link } from 'react-router-dom'
import { Activity, CheckCircle2, XCircle, AlertCircle, ArrowRight } from 'lucide-react'
import { getMonitors } from '../api/uptime'
import { Card, CardHeader, CardContent, Badge, Skeleton } from './ui'
export default function UptimeWidget() {
const { data: monitors, isLoading } = useQuery({
queryKey: ['monitors'],
queryFn: getMonitors,
refetchInterval: 30000,
})
const upCount = monitors?.filter(m => m.status === 'up').length || 0
const downCount = monitors?.filter(m => m.status === 'down').length || 0
const totalCount = monitors?.length || 0
const allUp = totalCount > 0 && downCount === 0
const hasDown = downCount > 0
if (isLoading) {
return (
<Card>
<CardHeader className="pb-2">
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-5 rounded" />
<Skeleton className="h-4 w-24" />
</div>
</CardHeader>
<CardContent className="space-y-3">
<Skeleton className="h-6 w-48" />
<div className="flex gap-4">
<Skeleton className="h-4 w-16" />
<Skeleton className="h-4 w-20" />
</div>
<div className="flex gap-1">
{Array.from({ length: 10 }).map((_, i) => (
<Skeleton key={i} className="h-3 flex-1 rounded-sm" />
))}
</div>
</CardContent>
</Card>
)
}
return (
<Link to="/uptime" className="block group">
<Card variant="interactive" className="h-full">
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="rounded-lg bg-brand-500/10 p-2 text-brand-500">
<Activity className="h-5 w-5" />
</div>
<span className="text-sm font-medium text-content-secondary">Uptime Status</span>
</div>
{hasDown && (
<Badge variant="error" size="sm" className="animate-pulse">
Issues
</Badge>
)}
</div>
</CardHeader>
<CardContent className="space-y-4">
{totalCount === 0 ? (
<p className="text-content-muted text-sm">No monitors configured</p>
) : (
<>
{/* Status indicator */}
<div className="flex items-center gap-2">
{allUp ? (
<>
<CheckCircle2 className="h-6 w-6 text-success" />
<span className="text-lg font-bold text-success">All Systems Operational</span>
</>
) : hasDown ? (
<>
<XCircle className="h-6 w-6 text-error" />
<span className="text-lg font-bold text-error">
{downCount} {downCount === 1 ? 'Site' : 'Sites'} Down
</span>
</>
) : (
<>
<AlertCircle className="h-6 w-6 text-warning" />
<span className="text-lg font-bold text-warning">Unknown Status</span>
</>
)}
</div>
{/* Quick stats */}
<div className="flex gap-4 text-sm">
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 rounded-full bg-success"></span>
<span className="text-content-secondary">{upCount} up</span>
</div>
{downCount > 0 && (
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 rounded-full bg-error"></span>
<span className="text-content-secondary">{downCount} down</span>
</div>
)}
<div className="text-content-muted">
{totalCount} total
</div>
</div>
{/* Mini status bars */}
{monitors && monitors.length > 0 && (
<div className="flex gap-1">
{monitors.slice(0, 20).map((monitor) => (
<div
key={monitor.id}
className={`flex-1 h-2.5 rounded-sm transition-colors duration-fast ${
monitor.status === 'up' ? 'bg-success' : 'bg-error'
}`}
title={`${monitor.name}: ${monitor.status.toUpperCase()}`}
/>
))}
{monitors.length > 20 && (
<div className="text-xs text-content-muted ml-1">+{monitors.length - 20}</div>
)}
</div>
)}
</>
)}
<div className="flex items-center gap-1 text-xs text-content-muted group-hover:text-brand-400 transition-colors duration-fast">
<span>View detailed status</span>
<ArrowRight className="h-3 w-3" />
</div>
</CardContent>
</Card>
</Link>
)
}