refactor(serverlist): refactored to also show uptime and other info about the server

frontend/src/lib/querys/admin/getServers.ts

@@ -3,7 +3,7 @@ import axios from "axios";
 
 export function getServers() {
 	return queryOptions({
-		queryKey: ["getModules"],
+		queryKey: ["getServers"],
 		queryFn: () => fetchSession(),
 		staleTime: 5000,
 		refetchOnWindowFocus: true,

frontend/src/lib/querys/serverStats.ts

@@ -5,13 +5,13 @@ export function getServerStats() {
 	return queryOptions({
 		queryKey: ["getServerStats"],
 		queryFn: () => fetchSession(),
-		staleTime: 5000,
+		staleTime: 2 * 60 * 1000,
 		refetchOnWindowFocus: true,
 	});
 }
 
 const fetchSession = async () => {
-	const { data } = await axios.get(`/lst/api/system/stats`);
+	const { data } = await axios.get(`/lst/api/system/allservers/stats`);
 
 	return data;
 };

frontend/src/routes/_app/_adminLayout/admin/servers.tsx

@@ -15,6 +15,7 @@ import React, { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
 	TableBody,
@@ -24,6 +25,7 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import { getServers } from "@/lib/querys/admin/getServers";
+import { getServerStats } from "@/lib/querys/serverStats";
 
 type ServerData = {
 	name: string;
@@ -34,6 +36,7 @@ type ServerData = {
 	build: string;
 	pendingUpdateFile: string;
 	lastUpdate: Date;
+	memoryUsage: string;
 };
 
 const updateServerItem = async (
@@ -58,14 +61,18 @@ export const Route = createFileRoute("/_app/_adminLayout/admin/servers")({
 
 function RouteComponent() {
 	const { data, isLoading, refetch } = useQuery(getServers());
-	// const {
-	// 	data: stats,
-	// 	isLoading: loadingStats,
-	// 	refetch: statsRefetch,
-	// } = useQuery(getServerStats());
+	const { data: stats = [], isLoading: loadingStats } = useQuery(
+		getServerStats(),
+	);
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const columnHelper = createColumnHelper<ServerData>();
 
+	const statsMap = React.useMemo(() => {
+		const map = new Map<string, any>();
+		stats.forEach((stat: any) => map.set(stat.plantToken, stat));
+		return map;
+	}, [stats]);
+
 	const updateServer = useMutation({
 		mutationFn: ({
 			token,
@@ -197,15 +204,81 @@ function RouteComponent() {
 			},
 		}),
 
-		// columnHelper.accessor("uptime", {
-		// 	header: () => {
-		// 		return <span className="flex flex-row gap-2">UpTime</span>;
-		// 	},
-		// 	cell: ({ row }) => {
-		// 		//console.log(data);
-		// 		return <span>{data?.uptime ?? "--"}</span>;
-		// 	},
-		// }),
+		columnHelper.accessor("uptime", {
+			header: () => {
+				return <span className="flex flex-row gap-2">UpTime</span>;
+			},
+			cell: ({ row }) => {
+				const statsRow = statsMap.get(row.original.plantToken);
+
+				if (loadingStats) {
+					// use Skeleton from shadcn/ui (or any placeholder)
+					return <Skeleton className="h-4 w-16" />;
+				}
+				console.log(statsMap);
+				return <span>{statsRow ? `${statsRow.uptime.toFixed(2)}` : "--"}</span>;
+			},
+		}),
+		columnHelper.accessor("lastUpdate", {
+			header: () => {
+				return <span className="flex flex-row gap-2">Last Updated</span>;
+			},
+			cell: ({ row }) => {
+				const statsRow = statsMap.get(row.original.plantToken);
+
+				if (loadingStats) {
+					// use Skeleton from shadcn/ui (or any placeholder)
+					return <Skeleton className="h-4 w-16" />;
+				}
+				console.log(statsMap);
+				return <span>{statsRow ? `${statsRow.lastUpdate}` : "--"}</span>;
+			},
+		}),
+		columnHelper.accessor("build", {
+			header: () => {
+				return <span className="flex flex-row gap-2">Build Number</span>;
+			},
+			cell: ({ row }) => {
+				const statsRow = statsMap.get(row.original.plantToken);
+
+				if (loadingStats) {
+					// use Skeleton from shadcn/ui (or any placeholder)
+					return <Skeleton className="h-4 w-16" />;
+				}
+				console.log(statsMap);
+				return <span>{statsRow ? `${statsRow.build}` : "--"}</span>;
+			},
+		}),
+		columnHelper.accessor("pendingUpdateFile", {
+			header: () => {
+				return <span className="flex flex-row gap-2">Pending Update</span>;
+			},
+			cell: ({ row }) => {
+				const statsRow = statsMap.get(row.original.plantToken);
+
+				if (loadingStats) {
+					// use Skeleton from shadcn/ui (or any placeholder)
+					return <Skeleton className="h-4 w-16" />;
+				}
+				console.log(statsMap);
+				return <span>{statsRow ? `${statsRow.pendingUpdateFile}` : "--"}</span>;
+			},
+		}),
+		columnHelper.accessor("memoryUsage", {
+			header: () => {
+				return <span className="flex flex-row gap-2">Memory Usage</span>;
+			},
+			cell: ({ row }) => {
+				const statsRow = statsMap.get(row.original.plantToken);
+
+				if (loadingStats) {
+					// use Skeleton from shadcn/ui (or any placeholder)
+					return <Skeleton className="h-4 w-16" />;
+				}
+				//console.log(statsMap);
+				return <span>{statsRow ? `${statsRow.memoryUsage}` : "--"}</span>;
+			},
+		}),
 	];
 
 	const table = useReactTable({