diff --git a/ui/app/api/peers/slots/[name]/route.ts b/ui/app/api/peers/slots/[name]/route.ts index 7ba1d943f0..78b3c8615f 100644 --- a/ui/app/api/peers/slots/[name]/route.ts +++ b/ui/app/api/peers/slots/[name]/route.ts @@ -30,30 +30,22 @@ export async function GET( break; } - const lagPoints = await prisma.peer_slot_size.findMany({ - select: { - updated_at: true, - slot_size: true, - }, - where: { - slot_name: context.params.name, - updated_at: { - gte: new Date(Date.now() - forThePastThisMuchTime), - }, - }, - }); + const lagPoints = await prisma.$queryRaw< + { updated_at: Date; slot_size: bigint }[] + >` + select updated_at, slot_size + from peerdb_stats.peer_slot_size + where slot_size is not null + and slot_name = ${context.params.name} + and updated_at > ${new Date(Date.now() - forThePastThisMuchTime)} + order by random() + limit 720 + `; - // convert slot_size to string - const stringedLagPoints: SlotLagPoint[] = lagPoints.map((lagPoint) => { - return { - // human readable - updatedAt: - lagPoint.updated_at.toDateString() + - ' ' + - lagPoint.updated_at.toLocaleTimeString(), - slotSize: lagPoint.slot_size?.toString(), - }; - }); + const slotLagPoints: SlotLagPoint[] = lagPoints.map((lagPoint) => ({ + updatedAt: +lagPoint.updated_at, + slotSize: Number(lagPoint.slot_size) / 1000, + })); - return NextResponse.json(stringedLagPoints); + return NextResponse.json(slotLagPoints); } diff --git a/ui/app/dto/PeersDTO.ts b/ui/app/dto/PeersDTO.ts index 23b0243b4f..bbf5fbccde 100644 --- a/ui/app/dto/PeersDTO.ts +++ b/ui/app/dto/PeersDTO.ts @@ -53,8 +53,8 @@ export type CatalogPeer = { export type PeerSetter = React.Dispatch>; export type SlotLagPoint = { - updatedAt: string; - slotSize?: string; + updatedAt: number; + slotSize: number; }; export type UPublicationsResponse = { diff --git a/ui/app/peers/[peerName]/lagGraph.tsx b/ui/app/peers/[peerName]/lagGraph.tsx index b495aaf6f3..1a491d9bd7 100644 --- a/ui/app/peers/[peerName]/lagGraph.tsx +++ b/ui/app/peers/[peerName]/lagGraph.tsx @@ -5,12 +5,14 @@ import { formatGraphLabel, timeOptions } from '@/app/utils/graph'; import { Label } from '@/lib/Label'; import { ProgressCircle } from '@/lib/ProgressCircle/ProgressCircle'; import { LineChart } from '@tremor/react'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import ReactSelect from 'react-select'; import { useLocalStorage } from 'usehooks-ts'; function LagGraph({ slotNames }: { slotNames: string[] }) { - const [lagPoints, setLagPoints] = useState([]); + const [lagPoints, setLagPoints] = useState< + { time: string; 'Lag in GB': number }[] + >([]); const [defaultSlot, setDefaultSlot] = useLocalStorage('defaultSlot', ''); const [selectedSlot, setSelectedSlot] = useState(defaultSlot); let [timeSince, setTimeSince] = useState('hour'); @@ -25,7 +27,14 @@ function LagGraph({ slotNames }: { slotNames: string[] }) { } ); const points: SlotLagPoint[] = await pointsRes.json(); - setLagPoints(points); + setLagPoints( + points + .sort((x, y) => x.updatedAt - y.updatedAt) + .map((data) => ({ + time: formatGraphLabel(new Date(data.updatedAt!), 'hour'), + 'Lag in GB': data.slotSize, + })) + ); }, [selectedSlot, timeSince]); const handleChange = (val: string) => { @@ -33,17 +42,6 @@ function LagGraph({ slotNames }: { slotNames: string[] }) { setSelectedSlot(val); }; - const graphValues = useMemo(() => { - let lagDataDot = lagPoints.map((point) => [ - point.updatedAt, - point.slotSize, - ]); - return lagDataDot.map((data) => ({ - time: formatGraphLabel(new Date(data[0]!), timeSince), - 'Lag in GB': parseInt(data[1] || '0', 10) / 1000, - })); - }, [lagPoints, timeSince]); - const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); @@ -107,7 +105,7 @@ function LagGraph({ slotNames }: { slotNames: string[] }) {