65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import type { Session } from '../../types'
|
|
|
|
interface ActiveSessionsProps {
|
|
sessions: Session[]
|
|
}
|
|
|
|
export function ActiveSessions({ sessions }: ActiveSessionsProps) {
|
|
const navigate = useNavigate()
|
|
const active = sessions.filter(s => s.status === 'running')
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">
|
|
Active Sessions
|
|
{active.length > 0 && (
|
|
<Badge variant="secondary" className="ml-2 text-xs">
|
|
{active.length}
|
|
</Badge>
|
|
)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{active.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-4">
|
|
No active sessions
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{active.map(s => {
|
|
const pct = s.anomaliesFound > 0
|
|
? Math.min(100, (s.statesVisited / 100) * 100)
|
|
: (s.statesVisited / 50) * 100
|
|
|
|
return (
|
|
<div
|
|
key={s.sessionId}
|
|
className="cursor-pointer hover:bg-accent/50 rounded p-2 transition-colors"
|
|
onClick={() => navigate(`/sessions/${s.sessionId}`)}
|
|
>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-sm font-medium truncate max-w-[200px]">{s.url}</span>
|
|
<span className="text-xs text-muted-foreground ml-2">
|
|
{s.statesVisited} states
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 bg-muted rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-primary rounded-full transition-all"
|
|
style={{ width: `${Math.min(100, pct)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|