From 68c236dc6aad7962d68702d4a06cd295bf695f8f Mon Sep 17 00:00:00 2001
From: Qiwei Yang <yangqiwei97@gmail.com>
Date: Tue, 22 Oct 2024 19:54:27 +0800
Subject: [PATCH] fix build and minor improvements (#2)

* fix build

* change page title

* show disconnected but added endpoints
---
 app/layout.tsx                     | 26 ++++++++++++-----
 components/dynamic-breadcrumb.tsx  |  1 -
 components/telemetry-dashboard.tsx | 45 ++++++++++++++++++++++--------
 lib/ws.ts                          |  2 +-
 4 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 842105b..b4ee215 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,12 +1,14 @@
+import { Suspense } from "react";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import Link from "next/link";
+import Image from "next/image";
 import { ThemeProvider } from "@/components/theme-provider";
 import { ModeToggle } from "@/components/mode-toggle";
 import { Toaster } from "@/components/ui/sonner";
-import Link from "next/link";
-import Image from "next/image";
-import "./globals.css";
 import { DynamicBreadcrumb } from "@/components/dynamic-breadcrumb";
+import { Loader } from "lucide-react";
+import "./globals.css";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -20,8 +22,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "JAM Dashboard",
+  description: "UI for monitoring, testing and interacting with JAM Nodes.",
 };
 
 export default function RootLayout({
@@ -57,9 +59,19 @@ export default function RootLayout({
             <DynamicBreadcrumb />
           </div>
 
-          <main>{children}</main>
+          <main>
+            <Suspense
+              fallback={
+                <div className="flex justify-center items-center h-64">
+                  <Loader className="w-12 h-12 animate-spin text-gray-600" />
+                </div>
+              }
+            >
+              {children}
+            </Suspense>
+          </main>
 
-          <Toaster />
+          <Toaster richColors />
 
           <footer className="border-t">
             <div className="container flex items-center justify-center h-14">
diff --git a/components/dynamic-breadcrumb.tsx b/components/dynamic-breadcrumb.tsx
index 3a734d9..e20750f 100644
--- a/components/dynamic-breadcrumb.tsx
+++ b/components/dynamic-breadcrumb.tsx
@@ -31,7 +31,6 @@ export function DynamicBreadcrumb() {
           </BreadcrumbLink>
         </BreadcrumbItem>
         {pathSegments.map((segment, index) => {
-          console.log(segment);
           const href = `/${pathSegments.slice(0, index + 1).join("/")}`;
           const isLast = index === pathSegments.length - 1;
           const label = routeLabels[segment] || segment;
diff --git a/components/telemetry-dashboard.tsx b/components/telemetry-dashboard.tsx
index d9e0937..357acde 100644
--- a/components/telemetry-dashboard.tsx
+++ b/components/telemetry-dashboard.tsx
@@ -28,6 +28,7 @@ type NodeInfo = {
   chainHead?: number | null;
   blockHash?: string | null;
   peerCount?: number | null;
+  connected: boolean;
 };
 
 const STORAGE_KEY = "telemetry-endpoints";
@@ -41,8 +42,15 @@ export default function TelemetryDashboard() {
     const loadSavedEndpoints = () => {
       const savedEndpoints = localStorage.getItem(STORAGE_KEY);
       if (savedEndpoints) {
-        const endpoints = JSON.parse(savedEndpoints);
-        endpoints.forEach((endpoint: string) => {
+        const endpoints: string[] = JSON.parse(savedEndpoints);
+        setNodeInfo(
+          endpoints.map((endpoint) => ({
+            endpoint,
+            connected: false,
+          }))
+        );
+
+        endpoints.forEach((endpoint) => {
           connectAndSubscribe(endpoint);
         });
       }
@@ -53,7 +61,6 @@ export default function TelemetryDashboard() {
     return () => {
       nodeInfo.forEach((node) => disconnectFromNode(node.endpoint));
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const updateNodeInfo = useCallback(async (endpoint: string) => {
@@ -63,10 +70,18 @@ export default function TelemetryDashboard() {
         const index = prev.findIndex((node) => node.endpoint === endpoint);
         if (index !== -1) {
           const newNodeInfo = [...prev];
-          newNodeInfo[index] = { endpoint, ...(data as Partial<NodeInfo>) };
+          newNodeInfo[index] = {
+            ...newNodeInfo[index],
+            endpoint,
+            ...(data as Partial<NodeInfo>),
+            connected: true,
+          };
           return newNodeInfo;
         } else {
-          return [...prev, { endpoint, ...(data as Partial<NodeInfo>) }];
+          return [
+            ...prev,
+            { endpoint, ...(data as Partial<NodeInfo>), connected: true },
+          ];
         }
       });
     } catch (error: unknown) {
@@ -78,14 +93,16 @@ export default function TelemetryDashboard() {
     }
   }, []);
 
-  // TODO: use real ws subscription if available
   const connectAndSubscribe = useCallback(
     async (endpoint: string) => {
       try {
         await connectToNode(endpoint);
         updateNodeInfo(endpoint);
-        const interval = setInterval(() => updateNodeInfo(endpoint), 3000);
-        return () => clearInterval(interval);
+        setNodeInfo((prev) =>
+          prev.map((node) =>
+            node.endpoint === endpoint ? { ...node, connected: true } : node
+          )
+        );
       } catch (error: unknown) {
         toast.error(
           `Failed to connect to ${endpoint}: ${
@@ -109,10 +126,13 @@ export default function TelemetryDashboard() {
     }
 
     if (rpcInput && !nodeInfo.some((node) => node.endpoint === rpcInput)) {
+      setNodeInfo((prev) => [
+        ...prev,
+        { endpoint: rpcInput, connected: false },
+      ]); // Add as disconnected
       connectAndSubscribe(rpcInput);
       setRpcInput("");
 
-      // Save to localStorage
       const savedEndpoints = JSON.parse(
         localStorage.getItem(STORAGE_KEY) || "[]"
       );
@@ -125,7 +145,6 @@ export default function TelemetryDashboard() {
     disconnectFromNode(endpoint);
     setNodeInfo((prev) => prev.filter((node) => node.endpoint !== endpoint));
 
-    // Remove from localStorage
     const savedEndpoints = JSON.parse(
       localStorage.getItem(STORAGE_KEY) || "[]"
     );
@@ -194,7 +213,11 @@ export default function TelemetryDashboard() {
               nodeInfo.map((node, index) => (
                 <TableRow
                   key={index}
-                  className="cursor-pointer hover:bg-muted/50"
+                  className={`cursor-pointer hover:bg-muted/50 ${
+                    node.connected
+                      ? ""
+                      : "bg-red-100 dark:bg-red-500 text-black dark:text-white"
+                  }`}
                   onClick={() => handleRowClick(node.endpoint)}
                 >
                   <TableCell className="font-medium truncate max-w-[150px]">
diff --git a/lib/ws.ts b/lib/ws.ts
index 72d7f9b..1ccba07 100644
--- a/lib/ws.ts
+++ b/lib/ws.ts
@@ -95,7 +95,7 @@ export function connectToNode(url: string): Promise<void> {
     };
     ws.onerror = (error) => {
       console.error(`WebSocket error for ${url}:`, error);
-      reject(error);
+      reject(new Error(`WebSocket error`));
     };
 
     ws.onclose = () => {