Add icon to explain in more detail the system stats / storage info (b…

…lakeblackshear#6358) * Add info icon with additional info for each process. * Specify single CPU core * Include storage in tooltips
ntp3phat · May 4, 2023 · ef50af0 · ef50af0
1 parent 02f5773
commit ef50af0
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 9 deletions.
diff --git a/web/src/icons/About.jsx 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="https://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/Storage.jsx b/web/src/routes/Storage.jsx
@@ -5,6 +5,8 @@ import { useWs } from '../api/ws';
 import useSWR from 'swr';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
 import Link from '../components/Link';
+import Button from '../components/Button';
+import { About } from '../icons/About';
 
 const emptyObject = Object.freeze({});
 
@@ -66,9 +68,19 @@ export default function Storage() {
 
  <Fragment>
  <Heading size="lg">Overview</Heading>
- <div data-testid="detectors" className="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <div data-testid="overview-types" className="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
- <div className="text-lg flex justify-between p-4">Data</div>
+ <div className="flex justify-start">
+ <div className="text-lg flex justify-between p-4">Data</div>
+ <Button
+ className="rounded-full"
+ type="text"
+ color="gray"
+ aria-label="Overview of total used storage and total capacity of the drives that hold the recordings and snapshots directories."
+ >
+ <About className="w-5" />
+ </Button>
+ </div>
  <div className="p-2">
  <Table className="w-full">
  <Thead>
@@ -83,7 +95,17 @@ export default function Storage() {
  </div>
  </div>
  <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
- <div className="text-lg flex justify-between p-4">Memory</div>
+ <div className="flex justify-start">
+ <div className="text-lg flex justify-between p-4">Memory</div>
+ <Button
+ className="rounded-full"
+ type="text"
+ color="gray"
+ aria-label="Overview of used and total memory in frigate process."
+ >
+ <About className="w-5" />
+ </Button>
+ </div>
  <div className="p-2">
  <Table className="w-full">
  <Thead>
@@ -110,7 +132,17 @@ export default function Storage() {
  </div>
  </div>
 
- <Heading size="lg">Cameras</Heading>
+ <div className="flex justify-start">
+ <Heading size="lg">Cameras</Heading>
+ <Button
+ className="rounded-full"
+ type="text"
+ color="gray"
+ aria-label="Overview of per-camera storage usage and bandwidth."
+ >
+ <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">
  {Object.entries(storage).map(([name, camera]) => (
  <div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">

diff --git 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({});
 
@@ -208,7 +209,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. CPU % is for a single core."
+ >
+ <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">
@@ -237,8 +250,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>
 
@@ -282,7 +307,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. CPU % is for a single core."
+ >
+ <About className="w-5" />
+ </Button>
+ </div>
  {!cameras ? (
  <ActivityIndicator />
  ) : (
@@ -347,7 +384,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. CPU % is for a single core."
+ >
+ <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">
  {processesNames.map((process) => (
  <div key={process} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">