periodic monitoring data updates from the server API.

app/api/servers/monitoring/route.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from "next/server"
+import { prisma } from "@/lib/prisma";
+
+
+export async function GET() {
+  try {
+    const servers = await prisma.server.findMany({
+      select: {
+        id: true,
+        online: true,
+        cpuUsage: true,
+        ramUsage: true,
+        diskUsage: true,
+      }
+    });
+
+    const monitoringData = servers.map((server: {
+      id: number;
+      online: boolean;
+      cpuUsage: string | null;
+      ramUsage: string | null;
+      diskUsage: string | null;
+    }) => ({
+      id: server.id,
+      online: server.online,
+      cpuUsage: server.cpuUsage ? parseInt(server.cpuUsage) : 0,
+      ramUsage: server.ramUsage ? parseInt(server.ramUsage) : 0,
+      diskUsage: server.diskUsage ? parseInt(server.diskUsage) : 0
+    }));
+
+    return NextResponse.json(monitoringData)
+  } catch (error) {
+    return new NextResponse("Internal Error", { status: 500 })
+  }
+} 

app/dashboard/servers/Servers.tsx

@@ -87,6 +87,14 @@ interface GetServersResponse {
   maxPage: number
 }
 
+interface MonitoringData {
+  id: number
+  online: boolean
+  cpuUsage: number
+  ramUsage: number
+  diskUsage: number
+}
+
 export default function Dashboard() {
   const [host, setHost] = useState<boolean>(false)
   const [hostServer, setHostServer] = useState<number>(0)
@@ -134,6 +142,8 @@ export default function Dashboard() {
   const [hostServers, setHostServers] = useState<Server[]>([])
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
 
+  const [monitoringInterval, setMonitoringInterval] = useState<NodeJS.Timeout | null>(null);
+
   useEffect(() => {
     const savedLayout = Cookies.get("layoutPreference-servers")
     const layout_bool = savedLayout === "grid"
@@ -378,6 +388,44 @@ export default function Dashboard() {
     }, 0)
   }
 
+  const updateMonitoringData = async () => {
+    try {
+      const response = await axios.get<MonitoringData[]>("/api/servers/monitoring");
+      const monitoringData = response.data;
+
+      setServers(prevServers => 
+        prevServers.map(server => {
+          const serverMonitoring = monitoringData.find(m => m.id === server.id);
+          if (serverMonitoring) {
+            return {
+              ...server,
+              online: serverMonitoring.online,
+              cpuUsage: serverMonitoring.cpuUsage,
+              ramUsage: serverMonitoring.ramUsage,
+              diskUsage: serverMonitoring.diskUsage
+            };
+          }
+          return server;
+        })
+      );
+    } catch (error) {
+      console.error("Error updating monitoring data:", error);
+    }
+  };
+
+  // Set up monitoring interval
+  useEffect(() => {
+    updateMonitoringData();
+    const interval = setInterval(updateMonitoringData, 5000);
+    setMonitoringInterval(interval);
+
+    return () => {
+      if (monitoringInterval) {
+        clearInterval(monitoringInterval);
+      }
+    };
+  }, []);
+
   return (
     <SidebarProvider>
       <AppSidebar />

package-lock.json

@@ -7433,6 +7433,21 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.0.tgz",
+      "integrity": "sha512-vHUQS4YVGJPmpjn7r5lEZuMhK5UQBNBRSB+iGDvJjaNk649pTIcRluDWNb9siunyLLiu/LDPHfvxBtNamyuLTw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }