import clsx from 'clsx'; import React, { useMemo, useState } from 'react'; import { useNavigate } from 'react-router'; import { AppRouterOutput } from '../../api/trpc'; import { MonitorHealthBar } from './MonitorHealthBar'; type MonitorType = AppRouterOutput['monitor']['all'][number]; export const MonitorListItem: React.FC<{ monitor: MonitorType; workspaceId: string; selectedMonitorId: string | null; setSelectedMonitorId: (monitorId: string) => void; }> = React.memo((props) => { const { monitor, workspaceId, selectedMonitorId, setSelectedMonitorId } = props; const navigate = useNavigate(); const [beats, setBeats] = useState< ({ value: number; createdAt: string | Date; } | null)[] >([]); const upPercent = useMemo(() => { let up = 0; beats.forEach((b) => { if (!b) { return; } if (b.value >= 0) { up++; } }); return parseFloat(((up / beats.length) * 100).toFixed(1)); }, [beats]); return (
{ navigate(`/monitor/${monitor.id}`); setSelectedMonitorId(monitor.id); }} >
{upPercent}%
{monitor.name}
{/*
{monitor.tags.map((tag) => ( {tag.label} ))}
*/}
); }); MonitorListItem.displayName = 'MonitorListItem';