61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { ServiceStatus } from '@/types/monitoring';
|
|
import { cn } from '@/lib/utils';
|
|
import { CheckCircle2, AlertTriangle, XCircle, HelpCircle } from 'lucide-react';
|
|
|
|
interface OverallStatusProps {
|
|
status: ServiceStatus;
|
|
totalServices: number;
|
|
operationalServices: number;
|
|
}
|
|
|
|
const statusConfig = {
|
|
operational: {
|
|
icon: CheckCircle2,
|
|
title: 'Tous les systèmes sont opérationnels',
|
|
bgClass: 'bg-success/10 border-success/30',
|
|
iconClass: 'text-success',
|
|
},
|
|
degraded: {
|
|
icon: AlertTriangle,
|
|
title: 'Certains systèmes sont dégradés',
|
|
bgClass: 'bg-warning/10 border-warning/30',
|
|
iconClass: 'text-warning',
|
|
},
|
|
down: {
|
|
icon: XCircle,
|
|
title: 'Incident majeur en cours',
|
|
bgClass: 'bg-destructive/10 border-destructive/30',
|
|
iconClass: 'text-destructive',
|
|
},
|
|
unknown: {
|
|
icon: HelpCircle,
|
|
title: 'Status inconnu',
|
|
bgClass: 'bg-muted border-muted-foreground/20',
|
|
iconClass: 'text-muted-foreground',
|
|
},
|
|
};
|
|
|
|
export function OverallStatus({ status, totalServices, operationalServices }: OverallStatusProps) {
|
|
const config = statusConfig[status];
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<div className={cn(
|
|
'p-4 sm:p-6 rounded-xl border-2 animate-fade-in',
|
|
config.bgClass,
|
|
)}>
|
|
<div className="flex items-center gap-3 sm:gap-4">
|
|
<div className={cn('p-2 sm:p-3 rounded-full flex-shrink-0', config.bgClass)}>
|
|
<Icon className={cn('w-6 h-6 sm:w-8 sm:h-8', config.iconClass)} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h2 className="text-base sm:text-xl font-bold leading-tight">{config.title}</h2>
|
|
<p className="text-sm sm:text-base text-muted-foreground">
|
|
{operationalServices}/{totalServices} services opérationnels
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|