dashboard servers

src/app/dashboard/page.tsx

@@ -6,6 +6,13 @@ import { cn } from "@/lib/utils";
 import { CircleCheckBig, Cpu, MemoryStick, TriangleAlert } from "lucide-react";
 import { ChartAreaGradient } from "./chart";
 import { Progress } from "@/components/ui/progress";
+import getSession from "@/hooks/getSession";
+import ServerComponent from "./server";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+import useSession from "@/hooks/useSession";
+import Server from "@/types/server";
 
 export function generateHourlyData() {
   const result = [];
@@ -60,43 +67,133 @@ export function Summary({
   );
 }
 
+function average<T>(values: Array<T>, p: (v: T) => number) {
+  return values.length > 0
+    ? values.reduce((sum, value) => sum + p(value), 0) / values.length
+    : 0;
+}
+
+const d = generateHourlyData();
+
 export default function Dashboard() {
-  // const session = await getSession();
-  const d = generateHourlyData();
+  const session = useSession();
+  const [servers, setServers] = useState<Server[]>([]);
+  const [searchedServers, setSearchedServers] = useState<Server[]>([]);
+  const [serversQuery, setServersQuery] = useState("");
+  const [serverData, setServerData] = useState({
+    online: 0,
+    issues: 0,
+    cpu: 0,
+    memory: 0,
+    storage: 0,
+    network: 0,
+  });
+
+  useEffect(() => {
+    if (!session) return;
+
+    session.getServers().then((servers) => {
+      setServers(servers);
+      setServerData({
+        online: servers.reduce(
+          (sum, server) => (server.status == "online" ? sum + 1 : sum),
+          0
+        ),
+        issues: servers.reduce(
+          (sum, server) => (server.status == "warning" ? sum + 1 : sum),
+          0
+        ),
+        cpu: average(servers, (s) => s.cpu),
+        memory: average(servers, (s) => s.memory),
+        storage: average(servers, (s) => s.storage),
+        network: average(servers, (s) => s.network),
+      });
+    });
+  }, [session]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      let tokens = serversQuery.toLowerCase().split(" ");
+      setSearchedServers(
+        servers.filter((s) =>
+          tokens.some(
+            (t) => s.name.toLowerCase().includes(t) || s.status.includes(t)
+          )
+        )
+      );
+    }, 30);
+
+    return () => clearTimeout(timeout);
+  }, [serversQuery, servers]);
+
   return (
     <div className="w-full flex flex-col gap-5">
       <div className="grid gap-4 w-full grid-cols-2 xl:grid-cols-4">
-        <SummaryCard className="text-chart-3" value="69" icon={CircleCheckBig}>
+        <SummaryCard
+          className="text-chart-3"
+          value={`${serverData.online}`}
+          icon={CircleCheckBig}
+        >
           <span className="hidden sm:inline">Online Servers</span>
           <span className="inline sm:hidden">Online</span>
         </SummaryCard>
-        <SummaryCard className="text-chart-4" value="2" icon={TriangleAlert}>
+        <SummaryCard
+          className="text-chart-4"
+          value={`${serverData.issues}`}
+          icon={TriangleAlert}
+        >
           Issues
         </SummaryCard>
-        <SummaryCard className="text-chart-2" value="52%" icon={Cpu}>
+        <SummaryCard
+          className="text-chart-2"
+          value={`${serverData.cpu}%`}
+          icon={Cpu}
+        >
           <span className="hidden sm:inline">Avg CPU Usage</span>
           <span className="inline sm:hidden">CPU</span>
         </SummaryCard>
-        <SummaryCard className="text-chart-1" value="100%" icon={MemoryStick}>
+        <SummaryCard
+          className="text-chart-1"
+          value={`${serverData.memory}%`}
+          icon={MemoryStick}
+        >
           <span className="hidden sm:inline">Avg Memory Usage</span>
           <span className="inline sm:hidden">Memory</span>
         </SummaryCard>
       </div>
 
-      <div className="w-full h-96 flex gap-5 flex-col md:flex-row">
-        <ChartAreaGradient chartData={d} />
-        <Card>
+      <div className="w-full flex gap-5 flex-col md:flex-row">
+        <div className="h-96 w-full">
+          <ChartAreaGradient chartData={d} />
+        </div>
+        <Card className="h-96">
           <CardHeader>
             <CardTitle>System Overview</CardTitle>
           </CardHeader>
           <CardContent className="flex flex-col gap-6 w-full md:w-96">
-            <Summary value={20}>Average CPU</Summary>
-            <Summary value={69}>Average Memory</Summary>
-            <Summary value={69}>Storage</Summary>
-            <Summary value={69}>Average Network</Summary>
+            <Summary value={serverData.cpu}>Average CPU</Summary>
+            <Summary value={serverData.memory}>Average Memory</Summary>
+            <Summary value={serverData.storage}>Storage</Summary>
+            <Summary value={serverData.network}>Average Network</Summary>
           </CardContent>
         </Card>
       </div>
+
+      <Card>
+        <CardContent className="flex flex-row gap-3">
+          <Input
+            onInput={(e) => setServersQuery(e.currentTarget.value)}
+            placeholder="Search servers by name, location or IP..."
+          />
+          <Button onClick={() => {}}>Search</Button>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {searchedServers.map((s, i) => (
+          <ServerComponent server={s} key={i} />
+        ))}
+      </div>
     </div>
   );
 }