From 9b9062b276608018a28798e1dde92981d8ac820d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philip=20Dub=C3=A9?= <serprex@users.noreply.github.com>
Date: Mon, 28 Oct 2024 21:52:13 +0000
Subject: [PATCH] slot lag graph: also have lsn graph (#2199)

Unfortunately we aren't tracking latest wal so no line to show how far behind confirmed is from latest
---
 flow/cmd/peer_data.go                | 15 +++++++++----
 protos/route.proto                   |  7 ++++--
 ui/app/peers/[peerName]/lagGraph.tsx | 32 ++++++++++++++++++++++------
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/flow/cmd/peer_data.go b/flow/cmd/peer_data.go
index e069ce6a97..9faf61c394 100644
--- a/flow/cmd/peer_data.go
+++ b/flow/cmd/peer_data.go
@@ -361,7 +361,8 @@ func (h *FlowRequestHandler) GetSlotLagHistory(
 	ctx context.Context,
 	req *protos.GetSlotLagHistoryRequest,
 ) (*protos.GetSlotLagHistoryResponse, error) {
-	rows, err := h.pool.Query(ctx, `select updated_at, slot_size
+	rows, err := h.pool.Query(ctx, `select updated_at, slot_size,
+			coalesce(redo_lsn,''), coalesce(restart_lsn,''), coalesce(confirmed_flush_lsn,'')
 		from peerdb_stats.peer_slot_size
 		where slot_size is not null
 			and peer_name = $1
@@ -374,12 +375,18 @@ func (h *FlowRequestHandler) GetSlotLagHistory(
 	points, err := pgx.CollectRows(rows, func(row pgx.CollectableRow) (*protos.SlotLagPoint, error) {
 		var updatedAt time.Time
 		var slotSize int64
-		if err := row.Scan(&updatedAt, &slotSize); err != nil {
+		var redoLSN string
+		var restartLSN string
+		var confirmedFlushLSN string
+		if err := row.Scan(&updatedAt, &slotSize, &redoLSN, &restartLSN, &confirmedFlushLSN); err != nil {
 			return nil, err
 		}
 		return &protos.SlotLagPoint{
-			UpdatedAt: float64(updatedAt.UnixMilli()),
-			SlotSize:  float64(slotSize) / 1000.0,
+			Time:         float64(updatedAt.UnixMilli()),
+			Size:         float64(slotSize) / 1000.0,
+			RedoLSN:      redoLSN,
+			RestartLSN:   restartLSN,
+			ConfirmedLSN: confirmedFlushLSN,
 		}, nil
 	})
 	if err != nil {
diff --git a/protos/route.proto b/protos/route.proto
index 008a1e398d..9b85da6f47 100644
--- a/protos/route.proto
+++ b/protos/route.proto
@@ -263,8 +263,11 @@ message SlotInfo {
 }
 
 message SlotLagPoint {
-  double updated_at = 1;
-  double slot_size = 2;
+  double time = 1;
+  double size = 2;
+  string redo_lSN = 3;
+  string restart_lSN = 4;
+  string confirmed_lSN = 5;
 }
 message GetSlotLagHistoryRequest {
   string peer_name = 1;
diff --git a/ui/app/peers/[peerName]/lagGraph.tsx b/ui/app/peers/[peerName]/lagGraph.tsx
index f919433b20..7107b7d809 100644
--- a/ui/app/peers/[peerName]/lagGraph.tsx
+++ b/ui/app/peers/[peerName]/lagGraph.tsx
@@ -18,6 +18,14 @@ type LagGraphProps = {
   peerName: string;
 };
 
+function parseLSN(lsn: string): number {
+  if (!lsn) return 0;
+  const [lsn1, lsn2] = lsn.split('/');
+  return Number(
+    (BigInt(parseInt(lsn1)) << BigInt(32)) | BigInt(parseInt(lsn2))
+  );
+}
+
 export default function LagGraph({ peerName }: LagGraphProps) {
   const [slotNames, setSlotNames] = useState<string[]>([]);
   const [mounted, setMounted] = useState(false);
@@ -30,9 +38,10 @@ export default function LagGraph({ peerName }: LagGraphProps) {
   );
   const [selectedSlot, setSelectedSlot] = useState<string>(defaultSlot);
   const [loading, setLoading] = useState(false);
-  let [timeSince, setTimeSince] = useState<TimeAggregateTypes>(
+  const [timeSince, setTimeSince] = useState<TimeAggregateTypes>(
     TimeAggregateTypes.HOUR
   );
+  const [showLsn, setShowLsn] = useState(false);
 
   const fetchSlotNames = useCallback(async () => {
     const slots = await getSlotData(peerName);
@@ -58,10 +67,13 @@ export default function LagGraph({ peerName }: LagGraphProps) {
       const points: GetSlotLagHistoryResponse = await pointsRes.json();
       setLagPoints(
         points.data
-          .sort((x, y) => x.updatedAt - y.updatedAt)
+          .sort((x, y) => x.time - y.time)
           .map((data) => ({
-            time: moment(data.updatedAt).format('MMM Do HH:mm'),
-            'Lag in GB': data.slotSize,
+            time: moment(data.time).format('MMM Do HH:mm'),
+            'Lag in GB': data.size,
+            redoLSN: parseLSN(data.redoLSN),
+            restartLSN: parseLSN(data.restartLSN),
+            confirmedLSN: parseLSN(data.confirmedLSN),
           }))
       );
     }
@@ -121,7 +133,11 @@ export default function LagGraph({ peerName }: LagGraphProps) {
           }
           theme={SelectTheme}
         />
-
+        <input
+          type='button'
+          value={showLsn ? 'Show LSN' : 'Show Lag'}
+          onClick={() => setShowLsn((val) => !val)}
+        />
         <ReactSelect
           id={timeSince}
           placeholder='Select a timeframe'
@@ -140,8 +156,10 @@ export default function LagGraph({ peerName }: LagGraphProps) {
         <LineChart
           index='time'
           data={lagPoints}
-          categories={['Lag in GB']}
-          colors={['rose']}
+          categories={
+            showLsn ? ['redoLSN', 'restartLSN', 'confirmedLSN'] : ['Lag in GB']
+          }
+          colors={showLsn ? ['maroon', 'red', 'lime'] : ['rose']}
           showXAxis={false}
         />
       )}