line graph for lag

ui/app/api/peers/slots/[name]/route.ts

@@ -0,0 +1,34 @@
+import { SlotLagPoint } from '@/app/dto/PeersDTO';
+import prisma from '@/app/utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(
+  request: NextRequest,
+  context: { params: { name: string } }
+) {
+  const lagPoints = await prisma.peer_slot_size.findMany({
+    select: {
+      updated_at: true,
+      slot_size: true,
+      wal_status: true,
+    },
+    where: {
+      slot_name: context.params.name,
+    },
+  });
+
+  // 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(),
+      walStatus: lagPoint.wal_status,
+    };
+  });
+
+  return NextResponse.json(stringedLagPoints);
+}

ui/app/dto/PeersDTO.ts

@@ -49,3 +49,9 @@ export type CatalogPeer = {
   options: Buffer;
 };
 export type PeerSetter = React.Dispatch<React.SetStateAction<PeerConfig>>;
+
+export type SlotLagPoint = {
+  updatedAt: string;
+  slotSize?: string;
+  walStatus: string | null;
+};

ui/app/peers/[peerName]/lagGraph.tsx

@@ -0,0 +1,78 @@
+'use client';
+import { SlotLagPoint } from '@/app/dto/PeersDTO';
+import { Label } from '@/lib/Label';
+import { ProgressCircle } from '@/lib/ProgressCircle/ProgressCircle';
+import { LineChart } from '@tremor/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<SlotLagPoint[]>([]);
+  const [defaultSlot, setDefaultSlot] = useLocalStorage('defaultSlot', '');
+  const [selectedSlot, setSelectedSlot] = useState<string>(defaultSlot);
+  const fetchLagPoints = useCallback(async () => {
+    if (selectedSlot == '') {
+      return;
+    }
+    const pointsRes = await fetch(`/api/peers/slots/${selectedSlot}`, {
+      cache: 'no-store',
+    });
+    const points: SlotLagPoint[] = await pointsRes.json();
+    setLagPoints(points);
+  }, [selectedSlot]);
+
+  const handleChange = (val: string) => {
+    setDefaultSlot(val);
+    setSelectedSlot(val);
+  };
+
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    fetchLagPoints();
+  }, [fetchLagPoints]);
+
+  if (!mounted) {
+    return (
+      <Label>
+        <ProgressCircle variant='determinate_progress_circle' />
+      </Label>
+    );
+  }
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: '1rem',
+        marginBottom: '2rem',
+      }}
+    >
+      <ReactSelect
+        className='w-1/4'
+        placeholder='Select a replication slot'
+        options={slotNames.map((slotName) => ({
+          label: slotName,
+          value: slotName,
+        }))}
+        onChange={(val, _) => val && handleChange(val.value)}
+        defaultValue={{ value: selectedSlot, label: selectedSlot }}
+      />
+      <LineChart
+        index='time'
+        data={lagPoints.map((point) => ({
+          time: point.updatedAt,
+          'Lag in MB': point.slotSize,
+          Status: point.walStatus,
+        }))}
+        categories={['Lag in MB', 'Status']}
+        colors={['rose', 'green']}
+      />
+    </div>
+  );
+}
+
+export default LagGraph;

ui/app/peers/[peerName]/page.tsx

@@ -2,6 +2,7 @@ import ReloadButton from '@/components/ReloadButton';
 import { PeerSlotResponse, PeerStatResponse } from '@/grpc_generated/route';
 import { Label } from '@/lib/Label';
 import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
+import LagGraph from './lagGraph';
 import Link from 'next/link';
 import SlotTable from './slottable';
 import StatTable from './stattable';
@@ -71,6 +72,7 @@ const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
           }}
         >
           <SlotTable data={slots} />
+          <LagGraph slotNames={slots.map((slot) => slot.slotName)} />
           <StatTable data={stats} />
         </div>
       ) : (