From 1b35af4c0dac220c7635dd471206cb229ede2625 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 24 Sep 2022 18:51:59 -0600
Subject: [PATCH] Add chart for gpu stats

---
 web/src/routes/System.jsx | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/web/src/routes/System.jsx b/web/src/routes/System.jsx
index 964e8f47a..905fb14e0 100644
--- a/web/src/routes/System.jsx
+++ b/web/src/routes/System.jsx
@@ -21,9 +21,17 @@ export default function System() {
   } = useWs('stats');
   const { data: initialStats } = useSWR('stats');
 
-  const { cpu_usages, detectors, service = {}, detection_fps: _, ...cameras } = stats || initialStats || emptyObject;
+  const {
+    cpu_usages,
+    gpu_usages,
+    detectors,
+    service = {},
+    detection_fps: _,
+    ...cameras
+  } = stats || initialStats || emptyObject;
 
   const detectorNames = Object.keys(detectors || emptyObject);
+  const gpuNames = Object.keys(gpu_usages || emptyObject);
   const cameraNames = Object.keys(cameras || emptyObject);
 
   const handleCopyConfig = useCallback(() => {
@@ -125,6 +133,31 @@ export default function System() {
             ))}
           </div>
 
+          <Heading size="lg">GPUs</Heading>
+          <div data-testid="gpus" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
+            {gpuNames.map((gpu) => (
+              <div
+                key={gpu}
+                className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 m-2"
+              >
+                <Table className="w-full">
+                  <Thead>
+                    <Tr>
+                      <Th>Gpu %</Th>
+                      <Th>Memory %</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    <Tr>
+                      <Td>{gpu_usages[gpu]['gpu']}</Td>
+                      <Td>{gpu_usages[gpu]['memory']}</Td>
+                    </Tr>
+                  </Tbody>
+                </Table>
+              </div>
+            ))}
+          </div>
+
           <Heading size="lg">Cameras</Heading>
           <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
             {cameraNames.map((camera) => (