feat: boot progress setup

Author: asuzuki-jumptrading

index.html

@@ -34,6 +34,12 @@
       as="image"
       href="./src/assets/frankendancer_logo.svg"
     />
+    <link
+      rel="preload"
+      type="image/svg+xml"
+      as="image"
+      href="./src/assets/boot_progress_background.svg"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Firedancer</title>
   </head>

src/api/atoms.ts

@@ -23,6 +23,8 @@ import type {
   BlockEngineUpdate,
   VoteBalance,
   ScheduleStrategy,
+  BootProgress,
+  GossipNetworkStats,
 } from "./types";
 import { rafAtom } from "../atomUtils";
 
@@ -74,8 +76,13 @@ export const liveTilePrimaryMetricAtom = atom<
 
 export const tileTimerAtom = atom<number[] | undefined>(undefined);
 
+export const bootProgressAtom = atom<BootProgress | undefined>(undefined);
 export const startupProgressAtom = atom<StartupProgress | undefined>(undefined);
 
+export const gossipNetworkStatsAtom = atom<GossipNetworkStats | undefined>(
+  undefined,
+);
+
 export const tpsHistoryAtom = atom<TpsHistory | undefined>(undefined);
 
 export const voteStateAtom = atom<VoteState | undefined>(undefined);

src/api/entities.ts

@@ -11,6 +11,10 @@ const epochTopicSchema = z.object({
   topic: z.literal("epoch"),
 });
 
+const gossipTopicSchema = z.object({
+  topic: z.literal("gossip"),
+});
+
 const peersTopicSchema = z.object({
   topic: z.literal("peers"),
 });
@@ -26,6 +30,7 @@ const blockEngineTopicSchema = z.object({
 export const topicSchema = z.discriminatedUnion("topic", [
   summaryTopicSchema,
   epochTopicSchema,
+  gossipTopicSchema,
   peersTopicSchema,
   slotTopicSchema,
   blockEngineTopicSchema,
@@ -71,6 +76,9 @@ export const tileTypeSchema = z.enum([
   "plugin",
   "gui",
   "cswtch",
+  "snaprd",
+  "snapdc",
+  "snapin",
 ]);
 
 export const tileSchema = z.object({
@@ -198,17 +206,17 @@ export const startupProgressSchema = z.object({
   downloading_full_snapshot_elapsed_secs: z.number().nullable(),
   downloading_full_snapshot_remaining_secs: z.number().nullable(),
   downloading_full_snapshot_throughput: z.number().nullable(),
-  downloading_full_snapshot_total_bytes: z.number().nullable(),
-  downloading_full_snapshot_current_bytes: z.number().nullable(),
+  downloading_full_snapshot_total_bytes: z.coerce.number().nullable(),
+  downloading_full_snapshot_current_bytes: z.coerce.number().nullable(),
 
   // downloading incremental snapshot
   downloading_incremental_snapshot_slot: z.number().nullable(),
   downloading_incremental_snapshot_peer: z.string().nullable(),
   downloading_incremental_snapshot_elapsed_secs: z.number().nullable(),
   downloading_incremental_snapshot_remaining_secs: z.number().nullable(),
   downloading_incremental_snapshot_throughput: z.number().nullable(),
-  downloading_incremental_snapshot_total_bytes: z.number().nullable(),
-  downloading_incremental_snapshot_current_bytes: z.number().nullable(),
+  downloading_incremental_snapshot_total_bytes: z.coerce.number().nullable(),
+  downloading_incremental_snapshot_current_bytes: z.coerce.number().nullable(),
 
   // processing ledger
   ledger_slot: z.number().nullable(),
@@ -219,6 +227,148 @@ export const startupProgressSchema = z.object({
   waiting_for_supermajority_stake_percent: z.number().nullable(),
 });
 
+export const bootPhaseSchema = z.enum([
+  "joining_gossip",
+  "loading_full_snapshot",
+  "loading_incr_snapshot",
+  "catching_up",
+  "running",
+]);
+
+export const BootPhaseEnum = bootPhaseSchema.enum;
+
+export const bootProgressSchema = z.object({
+  phase: bootPhaseSchema,
+  total_elapsed: z.number(),
+
+  // joining_gossip
+  joining_gossip_elapsed: z.number().nullable(),
+
+  // loading_full_snapshot
+  loading_full_snapshot_reset_cnt: z.number().nullable().optional(),
+  loading_full_snapshot_slot: z.number().nullable().optional(),
+  loading_full_snapshot_peer: z.string().nullable().optional(),
+  loading_full_snapshot_peer_identity: z.string().nullable().optional(),
+  loading_full_snapshot_total_bytes: z.coerce.number().nullable().optional(),
+  loading_full_snapshot_elapsed: z.number().nullable().optional(),
+  loading_full_snapshot_read_bytes: z.coerce.number().nullable().optional(),
+  loading_full_snapshot_read_throughput: z.number().nullable().optional(),
+  loading_full_snapshot_current_bytes: z.coerce.number().nullable().optional(),
+  loading_full_snapshot_read_remaining: z.number().nullable().optional(),
+  loading_full_snapshot_read_elapsed: z.number().nullable().optional(),
+  loading_full_snapshot_read_path: z.string().nullable().optional(),
+  loading_full_snapshot_decompress_bytes: z.number().nullable().optional(),
+  loading_full_snapshot_decompress_elapsed: z.number().nullable().optional(),
+  loading_full_snapshot_decompress_throughput: z.number().nullable().optional(),
+  loading_full_snapshot_decompress_compressed_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_full_snapshot_decompress_decompressed_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_full_snapshot_decompress_remaining: z.number().nullable().optional(),
+  loading_full_snapshot_insert_bytes: z.coerce.number().nullable().optional(),
+  loading_full_snapshot_insert_throughput: z.number().nullable().optional(),
+  loading_full_snapshot_insert_remaining: z.number().nullable().optional(),
+  loading_full_snapshot_insert_path: z.string().nullable().optional(),
+  loading_full_snapshot_insert_elapsed: z.number().nullable().optional(),
+  loading_full_snapshot_insert_accounts_throughput: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_full_snapshot_insert_accounts_current: z
+    .number()
+    .nullable()
+    .optional(),
+
+  // loading_incremental_snapshot
+  loading_incremental_snapshot_reset_cnt: z.number().nullable().optional(),
+  loading_incremental_snapshot_peer_identity: z.string().nullable().optional(),
+  loading_incremental_snapshot_slot: z.number().nullable().optional(),
+  loading_incremental_snapshot_peer: z.string().nullable().optional(),
+  loading_incremental_snapshot_total_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_elapsed: z.number().nullable().optional(),
+  loading_incremental_snapshot_read_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_read_elapsed: z.number().nullable().optional(),
+  loading_incremental_snapshot_read_throughput: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_read_remaining: z.number().nullable().optional(),
+  loading_incremental_snapshot_read_path: z.string().nullable().optional(),
+  loading_incremental_snapshot_current_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_decompress_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+
+  loading_incremental_snapshot_decompress_elapsed: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_decompress_throughput: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_decompress_compressed_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_decompress_decompressed_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_decompress_remaining: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_insert_bytes: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_insert_elapsed: z.number().nullable().optional(),
+  loading_incremental_snapshot_insert_throughput: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_insert_remaining: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_insert_path: z.string().nullable().optional(),
+  loading_incremental_snapshot_insert_accounts_throughput: z
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_insert_accounts_current: z
+    .number()
+    .nullable()
+    .optional(),
+
+  // catching_up
+  catching_up_elapsed: z.number().nullable().optional(),
+  catching_up_min_turbine_slot: z.number().nullable().optional(),
+  catching_up_max_turbine_slot: z.number().nullable().optional(),
+  catching_up_min_repair_slot: z.number().nullable().optional(),
+  catching_up_max_repair_slot: z.number().nullable().optional(),
+  catching_up_max_replay_slot: z.number().nullable().optional(),
+  catching_up_first_turbine_slot: z.number().nullable().optional(),
+  catching_up_latest_turbine_slot: z.number().nullable().optional(),
+  catching_up_latest_repair_slot: z.number().nullable().optional(),
+  catching_up_latest_replay_slot: z.number().nullable().optional(),
+});
+
 export const slotTransactionsSchema = z.object({
   start_timestamp_nanos: z.coerce.bigint(),
   target_end_timestamp_nanos: z.coerce.bigint(),
@@ -371,6 +521,10 @@ export const summarySchema = z.discriminatedUnion("key", [
     key: z.literal("startup_progress"),
     value: startupProgressSchema,
   }),
+  summaryTopicSchema.extend({
+    key: z.literal("boot_progress"),
+    value: bootProgressSchema,
+  }),
   summaryTopicSchema.extend({
     key: z.literal("tps_history"),
     value: tpsHistorySchema,
@@ -408,6 +562,43 @@ export const epochSchema = z.discriminatedUnion("key", [
   }),
 ]);
 
+const gossipNetworkHealthSchema = z.object({
+  rx_push_pct: z.number().optional(),
+  duplicate_pct: z.number().optional(),
+  bad_pct: z.number().optional(),
+  pull_already_known_pct: z.number().optional(),
+  total_stake: z.coerce.bigint(),
+  total_peers: z.coerce.bigint(),
+  connected_stake: z.coerce.bigint(),
+  connected_peers: z.number(),
+});
+
+const gossipNetworkTrafficSchema = z.object({
+  total_throughput: z.number().optional(),
+  peer_names: z.string().array(),
+  peer_throughputs: z.number().array().optional(),
+});
+
+const gossipStorageUtilSchema = z.object({
+  total_bytes: z.coerce.number(),
+  peer_names: z.string().array(),
+  peer_bytes: z.number().array(),
+});
+
+export const gossipNetworkStatsSchema = z.object({
+  health: gossipNetworkHealthSchema,
+  ingress: gossipNetworkTrafficSchema,
+  egress: gossipNetworkTrafficSchema,
+  storage: gossipStorageUtilSchema,
+});
+
+export const gossipSchema = z.discriminatedUnion("key", [
+  gossipTopicSchema.extend({
+    key: z.literal("network_stats"),
+    value: gossipNetworkStatsSchema,
+  }),
+]);
+
 const peerUpdateGossipSchema = z.object({
   wallclock: z.number(),
   shred_version: z.number(),

src/api/types.ts

@@ -40,6 +40,9 @@ import type {
   slotTransactionsSchema,
   voteBalanceSchema,
   scheduleStrategySchema,
+  bootPhaseSchema,
+  bootProgressSchema,
+  gossipNetworkStatsSchema,
 } from "./entities";
 
 export type Client = z.infer<typeof clientSchema>;
@@ -98,10 +101,14 @@ export type TileType = z.infer<typeof tileTypeSchema>;
 
 export type TileTimer = z.infer<typeof tileTimerSchema>;
 
+export type BootProgress = z.infer<typeof bootProgressSchema>;
+
 export type StartupProgress = z.infer<typeof startupProgressSchema>;
 
 export type StartupPhase = z.infer<typeof startupPhaseSchema>;
 
+export type BootPhase = z.infer<typeof bootPhaseSchema>;
+
 export type TpsHistory = z.infer<typeof tpsHistorySchema>;
 
 export type VoteState = z.infer<typeof voteStateSchema>;
@@ -114,6 +121,8 @@ export type Epoch = z.infer<typeof epochNewSchema>;
 
 export type SlotLevel = z.infer<typeof slotLevelSchema>;
 
+export type GossipNetworkStats = z.infer<typeof gossipNetworkStatsSchema>;
+
 export interface Peer extends z.infer<typeof peerUpdateSchema> {
   removed?: boolean;
 }

src/api/useSetAtomWsData.ts

@@ -20,10 +20,13 @@ import {
   voteStateAtom,
   voteBalanceAtom,
   scheduleStrategyAtom,
+  bootProgressAtom,
+  gossipNetworkStatsAtom,
 } from "./atoms";
 import {
   blockEngineSchema,
   epochSchema,
+  gossipSchema,
   peersSchema,
   slotSchema,
   summarySchema,
@@ -120,6 +123,7 @@ export function useSetAtomWsData() {
     setTileTimer(value);
   }, tileTimerDebounceMs);
 
+  const setBootProgress = useSetAtom(bootProgressAtom);
   const setStartupProgress = useSetAtom(startupProgressAtom);
 
   const setTpsHistory = useSetAtom(tpsHistoryAtom);
@@ -135,6 +139,8 @@ export function useSetAtomWsData() {
 
   const setSlotStatus = useSetAtom(setSlotStatusAtom);
 
+  const setGossipNetworkStats = useSetAtom(gossipNetworkStatsAtom);
+
   const addPeers = useSetAtom(addPeersAtom);
   const updatePeers = useSetAtom(updatePeersAtom);
   const removePeers = useSetAtom(removePeersAtom);
@@ -226,6 +232,10 @@ export function useSetAtomWsData() {
             setDbTileTimer(value);
             break;
           }
+          case "boot_progress": {
+            setBootProgress(value);
+            break;
+          }
           case "startup_progress": {
             setStartupProgress(value);
             break;
@@ -260,6 +270,14 @@ export function useSetAtomWsData() {
             setEpoch(value);
             break;
         }
+      } else if (topic === "gossip") {
+        const { key, value } = gossipSchema.parse(msg);
+        switch (key) {
+          case "network_stats": {
+            setGossipNetworkStats(value);
+            break;
+          }
+        }
       } else if (topic === "peers") {
         const { value } = peersSchema.parse(msg);
         addPeers(value.add);

src/assets/boot_progress_background.svg

@@ -35,6 +35,7 @@ export const clientAtom = atom(() => {
 });
 
 export const containerElAtom = atom<HTMLDivElement | null>();
+export const bootProgressContainerElAtom = atom<HTMLDivElement | null>();
 
 const _epochsAtom = atomWithImmer<Epoch[]>([]);
 export const epochAtom = atom(