Working usage thingy

src/app/api/server-usage/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+import { HttpStatusCode } from "axios";
+import validate from "../auth/auth";
+import { currentServers, servers } from "../servers/servers";
+
+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 usageData = Array.from({length: 60}).map((_, i) => ({ hour: i, cpu: 0, ram: 0 }));
+var i = 0;
+
+setInterval(() => {
+  if (i > 59) {
+    usageData.shift();
+    usageData.push({
+      hour: i,
+      cpu: average(currentServers, (server) => server.cpu),
+      ram: average(currentServers, (server) => server.memory)
+    });
+  } else {
+    usageData[i] = {
+      hour: i,
+      cpu: average(currentServers, (server) => server.cpu),
+      ram: average(currentServers, (server) => server.memory)
+    };
+    i++;
+  }
+}, 60000);
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  if (!validate(searchParams.get("sessionId")))
+    return NextResponse.json(
+      { message: "Invalid session" },
+      { status: HttpStatusCode.Unauthorized }
+    );
+
+  const peakData = [];
+
+  for (let i = 0; i < 60; i += 6) {
+    const slice = usageData.slice(i, i + 6);
+
+    const maxCpu = Math.max(...slice.map((entry) => entry.cpu));
+    const maxRam = Math.max(...slice.map((entry) => entry.ram));
+
+    peakData.push({
+      hour: slice[0].hour,
+      cpu: maxCpu,
+      ram: maxRam
+    });
+  }
+
+  return NextResponse.json({
+    message: "ok",
+    data: peakData,
+  });
+}

src/app/dashboard/chart.tsx

@@ -46,7 +46,7 @@ export function ChartAreaGradient({
       <CardHeader>
         <CardTitle>CPU & RAM Usage</CardTitle>
         <CardDescription>
-          Showing the average CPU and RAM usage over the last 24 hours.
+          Showing the average CPU and RAM peaks per 6 minutes of 1 hour.
         </CardDescription>
       </CardHeader>
       <CardContent className="p-6 flex-1 overflow-hidden">
@@ -63,7 +63,7 @@ export function ChartAreaGradient({
                 tickLine={false}
                 axisLine={false}
                 tickMargin={8}
-                tickFormatter={(value) => value + "h"}
+                tickFormatter={(value) => value + "m"}
                 height={34}
               />
 

src/app/dashboard/page.tsx

@@ -33,7 +33,7 @@ function average<T>(values: Array<T>, p: (v: T) => number) {
     : 0;
 }
 
-const d = generateHourlyData();
+// const d = generateHourlyData();
 
 export default function Dashboard() {
   const session = useSession();
@@ -48,6 +48,20 @@ export default function Dashboard() {
     storage: 0,
     network: 0,
   });
+  const [usageData, setUsageData] = useState(new Array(24).fill(0));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!session) return;
+      session.getServerUsageData().then((data) => {
+        setUsageData(data.data.data);
+      }).catch((e) => {
+        console.error("Error fetching server usage:", e);
+      });
+    }, 1000);
+    
+    return () => clearInterval(interval);
+  }, [session]);
 
   const getServers = () => {
     if (!session) return;
@@ -135,7 +149,7 @@ export default function Dashboard() {
 
       <div className="w-full flex gap-5 flex-col md:flex-row">
         <div className="h-96 w-full">
-          <ChartAreaGradient chartData={d} />
+          <ChartAreaGradient chartData={usageData} />
         </div>
         <Card className="h-96">
           <CardHeader>

src/lib/session.ts

@@ -37,4 +37,10 @@ export default class Session {
       params: { index, sessionId: this.id },
     });
   }
+
+  public async getServerUsageData() {
+    return await axios.get("/api/server-usage", {
+      params: { sessionId: this.id },
+    });
+  }
 }