feat(frontend): move stats to a component, fix CPU usage

frontend/src/components/ContainerStats.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { ContainerStats as ContainerStatsType } from "dockerode";
+import { Typography } from "@mui/material";
+
+export default function ContainerStats({ id }: { id: string }) {
+  const [stats, setStats] = useState<ContainerStatsType>();
+
+  useEffect(() => {
+    const sse = new EventSource(`/api/containers/${id}/stats`);
+
+    sse.onmessage = ({ data }) => {
+      const parsed = JSON.parse(data);
+      setStats(parsed);
+    };
+
+    return () => {
+      sse.close();
+    };
+  }, []);
+
+  if (!stats) {
+    return "Fetching container stats...";
+  }
+
+  const CPUPercentage =
+    ((stats.cpu_stats.cpu_usage.total_usage -
+      stats.precpu_stats.cpu_usage.total_usage) /
+      (stats.cpu_stats.system_cpu_usage -
+        stats.precpu_stats.system_cpu_usage)) *
+    stats.cpu_stats.online_cpus *
+    100;
+
+  return (
+    <Typography>CPU Usage: {(CPUPercentage || 0).toFixed(2) + "%"}</Typography>
+  );
+}

frontend/src/pages/containers/[name].tsx

@@ -1,8 +1,8 @@
 import { useLoaderData, useRevalidator } from "react-router";
 import { Container } from "../../types";
 import { Button, ButtonGroup, Paper, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useState } from "react";
-import { ContainerStats } from "dockerode";
+import ContainerStats from "../../components/ContainerStats";
 
 interface Params {
   name: string;
@@ -22,24 +22,6 @@ export default function ContainerPage() {
     return "Container not found";
   }
 
-  const [stats, setStats] = useState<ContainerStats>();
-
-  useEffect(() => {
-    const statsSource = new EventSource(
-      `/api/containers/${container.name}/stats`,
-    );
-
-    statsSource.onmessage = ({ data }) => {
-      const parsed = JSON.parse(data);
-      setStats(parsed);
-    };
-
-    return () => {
-      statsSource.close();
-    };
-  }, []);
-
-  console.log("stats", stats);
   const revalidator = useRevalidator();
   const [isPowerStateLocked, setPowerStateLocked] = useState<boolean>();
 
@@ -69,7 +51,7 @@ export default function ContainerPage() {
           </Button>
         </ButtonGroup>
       </Paper>
-      CPU Usage: {stats?.cpu_stats.cpu_usage.total_usage}
+      <ContainerStats id={container.id} />
     </Paper>
   );