feat(guardian-prover-health-check-ui): add node info and fix error (#…

…16772)

packages/guardian-prover-health-check-ui/src/components/GuardianProver/DataPoint.svelte

@@ -15,7 +15,7 @@
 {:else}
 	<div class="f-row justify-between w-full">
 		<div class="font-bold">{headline}</div>
-		<div>{dataPoint}</div>
+		<div class="text-right">{dataPoint}</div>
 	</div>
 {/if}
 

packages/guardian-prover-health-check-ui/src/components/GuardianProver/GuardianProverTableRow.svelte

@@ -96,7 +96,13 @@
 			<div class="font-bold">
 				{guardianProver.name}
 			</div>
-			<div class="text-secondary-content">{shortenAddress(guardianProver.address)}</div>
+			<div class="text-secondary-content">
+				{#if isDesktopOrLarger}
+					{guardianProver.address}
+				{:else}
+					{shortenAddress(guardianProver.address)}
+				{/if}
+			</div>
 		</div>
 		{#if !single && !$loading}
 			<IconFlipper
@@ -110,31 +116,59 @@
 		{/if}
 	</div>
 	<div class="collapse-content bg-grey-10">
-		<div class="{isDesktopOrLarger ? 'f-row' : 'f-col space-y-[5px] py-[16px]'} items-center">
-			<div class="min-w-[150px]" />
+		<div
+			class="{isDesktopOrLarger
+				? 'f-row flex-wrap space-x-[16px]'
+				: 'f-col space-y-[5px] py-[16px]'} items-center"
+		>
+			<div class="min-w-[134px]" />
 
 			<DataPoint
 				headline={$t('overview.table.balance')}
 				dataPoint={truncateDecimal(Number(guardianProver.balance), 3).toString() + ' ETH'}
 			/>
 
 			<DataPoint
-				headline={$t('overview.detail.table.uptime')}
-				dataPoint={truncateDecimal(guardianProver.uptime, 2).toString() + '%'}
+				headline={$t('overview.table.no_blocks_created')}
+				dataPoint="{signedBlocksPerGuardian(guardianProver.id)}/{$signedBlocks.length}"
 			/>
 
 			<DataPoint
-				headline={$t('overview.table.no_blocks_created')}
-				dataPoint="{signedBlocksPerGuardian(guardianProver.id)}/{$signedBlocks.length}"
+				headline={$t('overview.table.latest_l1_block')}
+				dataPoint={guardianProver?.blockInfo?.latestL1BlockNumber.toString()}
 			/>
 
-			<DataPoint headline="L1 Node Version" dataPoint={guardianProver?.nodeInfo?.l1NodeVersion} />
-			<DataPoint headline="L2 Node Version" dataPoint={guardianProver?.nodeInfo?.l2NodeVersion} />
-			<DataPoint headline="Revision" dataPoint={guardianProver?.nodeInfo?.revision} />
+			<DataPoint
+				headline={$t('overview.table.latest_l2_block')}
+				dataPoint={guardianProver?.blockInfo?.latestL2BlockNumber.toString()}
+			/>
+
+			<DataPoint
+				headline={$t('overview.detail.table.uptime')}
+				dataPoint={truncateDecimal(guardianProver.uptime, 2).toString() + '%'}
+			/>
+
+			<DataPoint headline="Revision" dataPoint={guardianProver?.versionInfo?.revision} />
 			<DataPoint
 				headline="Last restart"
 				dataPoint={formatISODateTime(guardianProver?.lastRestart)}
 			/>
+		</div>
+		<div
+			class="{isDesktopOrLarger
+				? 'f-row flex-wrap space-x-[16px]'
+				: 'f-col space-y-[5px] py-[16px]'} items-center"
+		>
+			<div class="min-w-[134px]" />
+
+			<DataPoint
+				headline="L1 Node Version"
+				dataPoint={guardianProver?.versionInfo?.l1NodeVersion}
+			/>
+			<DataPoint
+				headline="L2 Node Version"
+				dataPoint={guardianProver?.versionInfo?.l2NodeVersion}
+			/>
 
 			{#if !single}
 				<div class="f-row md:w-auto w-full justify-end pt-[20px] md:pt-[0]">

packages/guardian-prover-health-check-ui/src/i18n/en.json

@@ -43,9 +43,11 @@
 			"address": "Address",
 			"balance": "Balance",
 			"guardian_prover": "Guardian Prover",
-			"no_blocks_created": "Signed",
+			"latest_l1_block": "Latest L1 Block",
+			"latest_l2_block": "Latest L2 Block",
+			"no_blocks_created": "Signed Blocks",
 			"status": "Status",
-			"view_details": "View details"
+			"view_details": "View Healthchecks"
 		}
 	},
 	"page": {

packages/guardian-prover-health-check-ui/src/lib/api/guardianProverApiCalls.ts

@@ -1,5 +1,17 @@
-import { healthCheckRoute, livenessRoute, mostRecentStartupRoute, uptimeRoute } from '$lib/routes';
-import type { HealthCheck, PageResponse, StartupResponse, UptimeResponse } from '$lib/types';
+import {
+	healthCheckRoute,
+	livenessRoute,
+	mostRecentStartupRoute,
+	nodeInfoRoute,
+	uptimeRoute
+} from '$lib/routes';
+import type {
+	HealthCheck,
+	NodeInfoResponse,
+	PageResponse,
+	StartupResponse,
+	UptimeResponse
+} from '$lib/types';
 import axios from 'axios';
 
 export async function fetchGuardianProverHealthChecksFromApi(
@@ -54,3 +66,11 @@ export async function fetchStartupDataFromApi(baseURL: string, guardianProverId:
 
 	return resp.data;
 }
+
+export async function fetchNodeInfoFromApi(baseURL: string, guardianProverId: number) {
+	const url = `${baseURL}/${nodeInfoRoute}/${guardianProverId}`;
+
+	const resp = await axios.get<NodeInfoResponse>(url);
+
+	return resp.data;
+}

packages/guardian-prover-health-check-ui/src/lib/dataFetcher.ts

@@ -1,11 +1,18 @@
-import { GuardianProverStatus, type Guardian, type NodeInfo, type SignedBlocks } from './types';
+import {
+	GuardianProverStatus,
+	type BlockInfo,
+	type Guardian,
+	type SignedBlocks,
+	type VersionInfo
+} from './types';
 import { fetchSignedBlocksFromApi } from './api/signedBlocksApiCalls';
 import { getGuardianProverIdsPerBlockNumber } from './blocks/getGuardianProverIdsPerBlockNumber';
 import { sortSignedBlocksDescending } from './blocks/sortSignedBlocks';
 import { publicClient } from './wagmi/publicClient';
 import { formatEther, type Address } from 'viem';
 import {
 	fetchLatestGuardianProverHealthCheckFromApi,
+	fetchNodeInfoFromApi,
 	fetchStartupDataFromApi,
 	fetchUptimeFromApi
 } from './api';
@@ -80,14 +87,15 @@ async function initializeGuardians() {
 	const rawGuardians: Guardian[] = Object.entries(guardiansMap).map(([address, name], index) => ({
 		name: name,
 		address: address,
-		id: index,
+		id: index + 1, // add +1 as guardian contract numbers starts at 1
 		latestHealthCheck: null,
 		alive: GuardianProverStatus.UNKNOWN,
 		balance: null,
 		lastRestart: null,
 		uptime: null,
 		nodeInfo: null
 	}));
+
 	guardianProvers.set(rawGuardians);
 }
 
@@ -175,23 +183,40 @@ async function fetchStats(): Promise<void> {
 	const guardians = get(guardianProvers);
 
 	const updatedGuardiansPromises = guardians.map(async (guardian) => {
-		const data = await fetchStartupDataFromApi(
+		const startupDataFetch = fetchStartupDataFromApi(
+			import.meta.env.VITE_GUARDIAN_PROVER_API_URL,
+			guardian.id
+		);
+
+		const nodeInfoFetch = fetchNodeInfoFromApi(
 			import.meta.env.VITE_GUARDIAN_PROVER_API_URL,
 			guardian.id
 		);
-		const info: NodeInfo = {
-			guardianProverAddress: data.guardianProverAddress,
-			guardianProverID: data.guardianProverID,
-			guardianVersion: data.version,
-			l1NodeVersion: data.revision,
-			l2NodeVersion: data.revision,
-			revision: data.revision
+
+		const [startupData, nodeInfo] = await Promise.all([startupDataFetch, nodeInfoFetch]);
+
+		const versions: VersionInfo = {
+			guardianProverAddress: startupData.guardianProverAddress,
+			guardianProverID: startupData.guardianProverID,
+			guardianVersion: nodeInfo.guardianVersion,
+			l1NodeVersion: nodeInfo.l1NodeVersion,
+			l2NodeVersion: nodeInfo.l2NodeVersion,
+			revision: startupData.revision
+		};
+
+		console.log('versions', versions);
+
+		const blockInfo: BlockInfo = {
+			latestL1BlockNumber: nodeInfo.latestL1BlockNumber,
+			latestL2BlockNumber: nodeInfo.latestL2BlockNumber
 		};
 
 		return {
 			...guardian,
-			nodeInfo: info,
-			lastRestart: data.createdAt
+			id: versions.guardianProverID,
+			versionInfo: versions,
+			lastRestart: startupData.createdAt,
+			blockInfo: blockInfo
 		};
 	});
 

packages/guardian-prover-health-check-ui/src/lib/routes.ts

@@ -4,3 +4,4 @@ export const livenessRoute = 'liveness';
 export const signedBlocksRoute = 'signedBlocks';
 export const uptimeRoute = 'uptime';
 export const mostRecentStartupRoute = 'mostRecentStartup';
+export const nodeInfoRoute = 'nodeInfo';

packages/guardian-prover-health-check-ui/src/lib/types.ts

@@ -37,6 +37,18 @@ export type StartupResponse = {
 	createdAt: string;
 };
 
+export type NodeInfoResponse = {
+	guardianProverID: number;
+	guardianProverAddress: string;
+	l1NodeVersion: string;
+	l2NodeVersion: string;
+	revision: string;
+	guardianVersion: string;
+	createdAt: string;
+	latestL1BlockNumber: number;
+	latestL2BlockNumber: number;
+};
+
 export type PageResponse<T> = {
 	items: T[];
 	page: number;
@@ -58,10 +70,16 @@ export type Guardian = {
 	balance?: string;
 	lastRestart?: string;
 	uptime?: number;
-	nodeInfo?: NodeInfo;
+	versionInfo?: VersionInfo;
+	blockInfo?: BlockInfo;
+};
+
+export type BlockInfo = {
+	latestL1BlockNumber: number;
+	latestL2BlockNumber: number;
 };
 
-export type NodeInfo = {
+export type VersionInfo = {
 	guardianProverAddress: string;
 	guardianProverID: number;
 	guardianVersion: string;