From be2dd253c3195f498c82d0725cf25545788a35f8 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Tue, 2 May 2023 19:33:15 -0600
Subject: [PATCH] Add info icon with additional info for each process.

---
 web/src/icons/About.jsx   | 20 +++++++++++++
 web/src/routes/System.jsx | 59 +++++++++++++++++++++++++++++++++++----
 2 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 web/src/icons/About.jsx

diff --git a/web/src/icons/About.jsx b/web/src/icons/About.jsx
new file mode 100644
index 000000000..444ad3227
--- /dev/null
+++ b/web/src/icons/About.jsx
@@ -0,0 +1,20 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function About({ className = '' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${className}`}
+    >
+      <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+    </svg>
+  );
+}
+
+export default memo(About);
+
diff --git a/web/src/routes/System.jsx b/web/src/routes/System.jsx
index 0320e237b..4b282d4e9 100644
--- a/web/src/routes/System.jsx
+++ b/web/src/routes/System.jsx
@@ -11,6 +11,7 @@ import { useState } from 'preact/hooks';
 import Dialog from '../components/Dialog';
 import TimeAgo from '../components/TimeAgo';
 import copy from 'copy-to-clipboard';
+import { About } from '../icons/About';
 
 const emptyObject = Object.freeze({});
 
@@ -206,7 +207,19 @@ export default function System() {
         </div>
       ) : (
         <Fragment>
-          <Heading size="lg">Detectors</Heading>
+          <div className="flex justify-start">
+            <Heading className="self-center" size="lg">
+              Detectors
+            </Heading>
+            <Button
+              className="rounded-full"
+              type="text"
+              color="gray"
+              aria-label="Momentary resource usage of each process that is controlling the object detector. "
+            >
+              <About className="w-5" />
+            </Button>
+          </div>
           <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
             {detectorNames.map((detector) => (
               <div key={detector} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
@@ -235,8 +248,20 @@ export default function System() {
             ))}
           </div>
 
-          <div className="text-lg flex justify-between p-4">
-            <Heading size="lg">GPUs</Heading>
+          <div className="text-lg flex justify-between">
+            <div className="flex justify-start">
+              <Heading className="self-center" size="lg">
+                GPUs
+              </Heading>
+              <Button
+                className="rounded-full"
+                type="text"
+                color="gray"
+                aria-label="Momentary resource usage of each GPU. Intel GPUs do not support memory stats."
+              >
+                <About className="w-5" />
+              </Button>
+            </div>
             <Button onClick={(e) => onHandleVainfo(e)}>vainfo</Button>
           </div>
 
@@ -280,7 +305,19 @@ export default function System() {
             </div>
           )}
 
-          <Heading size="lg">Cameras</Heading>
+          <div className="flex justify-start">
+            <Heading className="self-center" size="lg">
+              Cameras
+            </Heading>
+            <Button
+              className="rounded-full"
+              type="text"
+              color="gray"
+              aria-label="Momentary resource usage of each process interacting with the camera stream."
+            >
+              <About className="w-5" />
+            </Button>
+          </div>
           {!cameras ? (
             <ActivityIndicator />
           ) : (
@@ -345,7 +382,19 @@ export default function System() {
             </div>
           )}
 
-          <Heading size="lg">Other Processes</Heading>
+          <div className="flex justify-start">
+            <Heading className="self-center" size="lg">
+              Other Processes
+            </Heading>
+            <Button
+              className="rounded-full"
+              type="text"
+              color="gray"
+              aria-label="Momentary resource usage for other important processes."
+            >
+              <About className="w-5" />
+            </Button>
+          </div>
           <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
             {['go2rtc', 'recording'].map((process) => (
               <div key={process} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">