'use client'
import { CheckCircleIcon, ExclamationTriangleIcon, ClockIcon } from '@heroicons/react/24/outline'
interface SystemHealthProps {
data?: {
status: 'healthy' | 'warning' | 'error'
services: Array<{
name: string
status: 'online' | 'offline' | 'degraded'
uptime: string
responseTime?: string
}>
resources: {
cpu: number
memory: number
disk: number
}
}
}
export default function SystemHealth({ data }: SystemHealthProps) {
const mockData = data || {
status: 'healthy' as const,
services: [
{ name: 'GitHub API', status: 'online' as const, uptime: '99.9%', responseTime: '120ms' },
{ name: 'Notion API', status: 'online' as const, uptime: '99.5%', responseTime: '250ms' },
{ name: 'Google Calendar', status: 'degraded' as const, uptime: '98.1%', responseTime: '800ms' },
{ name: 'Slack Bot', status: 'online' as const, uptime: '100%', responseTime: '80ms' },
{ name: 'Database', status: 'online' as const, uptime: '99.8%' },
],
resources: {
cpu: 45,
memory: 68,
disk: 32
}
}
const getStatusIcon = (status: string) => {
switch (status) {
case 'online':
case 'healthy':
return <CheckCircleIcon className="h-5 w-5 text-green-500" />
case 'degraded':
case 'warning':
return <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
case 'offline':
case 'error':
return <ClockIcon className="h-5 w-5 text-red-500" />
default:
return <ClockIcon className="h-5 w-5 text-gray-500" />
}
}
const getStatusColor = (status: string) => {
switch (status) {
case 'online':
return 'text-green-600 bg-green-50'
case 'degraded':
return 'text-yellow-600 bg-yellow-50'
case 'offline':
return 'text-red-600 bg-red-50'
default:
return 'text-gray-600 bg-gray-50'
}
}
return (
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
System Health
</h3>
<div className="flex items-center space-x-2">
{getStatusIcon(mockData.status)}
<span className="text-sm text-gray-600 capitalize">{mockData.status}</span>
</div>
</div>
{/* Services Status */}
<div className="space-y-3 mb-6">
<h4 className="text-sm font-medium text-gray-900">Services</h4>
{mockData.services.map((service, index) => (
<div key={index} className="flex items-center justify-between py-2">
<div className="flex items-center space-x-3">
{getStatusIcon(service.status)}
<span className="text-sm text-gray-900">{service.name}</span>
</div>
<div className="flex items-center space-x-4">
<span className="text-xs text-gray-500">{service.uptime}</span>
{service.responseTime && (
<span className="text-xs text-gray-500">{service.responseTime}</span>
)}
<span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getStatusColor(service.status)}`}>
{service.status}
</span>
</div>
</div>
))}
</div>
{/* Resource Usage */}
<div className="space-y-4">
<h4 className="text-sm font-medium text-gray-900">Resource Usage</h4>
<div className="space-y-3">
<div>
<div className="flex justify-between text-sm text-gray-500 mb-1">
<span>CPU</span>
<span>{mockData.resources.cpu}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full"
style={{ width: `${mockData.resources.cpu}%` }}
></div>
</div>
</div>
<div>
<div className="flex justify-between text-sm text-gray-500 mb-1">
<span>Memory</span>
<span>{mockData.resources.memory}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-green-600 h-2 rounded-full"
style={{ width: `${mockData.resources.memory}%` }}
></div>
</div>
</div>
<div>
<div className="flex justify-between text-sm text-gray-500 mb-1">
<span>Disk</span>
<span>{mockData.resources.disk}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-yellow-600 h-2 rounded-full"
style={{ width: `${mockData.resources.disk}%` }}
></div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
