47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
import { Node } from '@/types/monitoring';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { StatusIndicator } from './StatusIndicator';
|
|
import { ServiceCard } from './ServiceCard';
|
|
import { Server, Clock } from 'lucide-react';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
import { fr } from 'date-fns/locale';
|
|
|
|
interface NodeCardProps {
|
|
node: Node;
|
|
}
|
|
|
|
export function NodeCard({ node }: NodeCardProps) {
|
|
return (
|
|
<div className="space-y-3 sm:space-y-4 animate-fade-in">
|
|
<Card className="glass-card border-l-4 border-l-primary">
|
|
<CardHeader className="pb-2 sm:pb-3 p-3 sm:p-6">
|
|
<div className="flex items-start sm:items-center justify-between gap-2">
|
|
<div className="flex items-center gap-2 sm:gap-3 min-w-0">
|
|
<div className="p-1.5 sm:p-2 rounded-lg bg-primary/10 flex-shrink-0">
|
|
<Server className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<CardTitle className="text-base sm:text-lg font-semibold truncate">{node.name}</CardTitle>
|
|
<p className="text-xs sm:text-sm text-muted-foreground font-mono truncate">{node.address}</p>
|
|
</div>
|
|
</div>
|
|
<StatusIndicator status={node.status} showLabel size="lg" className="flex-shrink-0" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-3 sm:p-6 pt-0 sm:pt-0">
|
|
<div className="flex items-center gap-2 text-[10px] sm:text-xs text-muted-foreground">
|
|
<Clock className="w-3 h-3 flex-shrink-0" />
|
|
<span className="truncate">Dernière connexion: {formatDistanceToNow(node.lastSeen, { addSuffix: true, locale: fr })}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-3 sm:gap-4 grid-cols-1 md:grid-cols-2">
|
|
{node.services.map((service) => (
|
|
<ServiceCard key={service.id} service={service} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|