Add an icon and tooltip to explain detector CPU usage metric (#19825)

* Add low shm warning to bottom bar

* change relevant link

web/public/locales/en/views/system.json

@@ -42,6 +42,7 @@
       "inferenceSpeed": "Detector Inference Speed",
       "temperature": "Detector Temperature",
       "cpuUsage": "Detector CPU Usage",
+      "cpuUsageInformation": "CPU used in preparing input and output data to/from detection models. This value does not measure inference usage, even if using a GPU or accelerator.",
       "memoryUsage": "Detector Memory Usage"
     },
     "hardwareInfo": {
@@ -162,7 +163,8 @@
     "reindexingEmbeddings": "Reindexing embeddings ({{processed}}% complete)",
     "cameraIsOffline": "{{camera}} is offline",
     "detectIsSlow": "{{detect}} is slow ({{speed}} ms)",
-    "detectIsVerySlow": "{{detect}} is very slow ({{speed}} ms)"
+    "detectIsVerySlow": "{{detect}} is very slow ({{speed}} ms)",
+    "shmTooLow": "/dev/shm allocation ({{total}} MB) should be increased to at least {{min}} MB."
   },
   "enrichments": {
     "title": "Enrichments",

web/src/hooks/use-stats.ts

@@ -32,6 +32,19 @@ export default function useStats(stats: FrigateStats | undefined) {
       return problems;
     }
 
+    // check shm level
+    const shm = memoizedStats.service.storage["/dev/shm"];
+    if (shm?.total && shm?.min_shm && shm.total < shm.min_shm) {
+      problems.push({
+        text: t("stats.shmTooLow", {
+          total: shm.total,
+          min: shm.min_shm,
+        }),
+        color: "text-danger",
+        relevantLink: "/system#storage",
+      });
+    }
+
     // check detectors for high inference speeds
     Object.entries(memoizedStats["detectors"]).forEach(([key, det]) => {
       if (det["inference_speed"] > InferenceThreshold.error) {

web/src/views/system/GeneralMetrics.tsx

@@ -11,11 +11,17 @@ import {
   InferenceThreshold,
 } from "@/types/graph";
 import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import GPUInfoDialog from "@/components/overlay/GPUInfoDialog";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import { CiCircleAlert } from "react-icons/ci";
 
 type GeneralMetricsProps = {
   lastUpdated: number;
@@ -548,7 +554,27 @@ export default function GeneralMetrics({
           )}
           {statsHistory.length != 0 ? (
             <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
-              <div className="mb-5">{t("general.detector.cpuUsage")}</div>
+              <div className="mb-5 flex flex-row items-center justify-between">
+                {t("general.detector.cpuUsage")}
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      className="focus:outline-none"
+                      aria-label={t("general.detector.cpuUsage")}
+                    >
+                      <CiCircleAlert
+                        className="size-5"
+                        aria-label={t("general.detector.cpuUsage")}
+                      />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80">
+                    <div className="space-y-2">
+                      {t("general.detector.cpuUsageInformation")}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
               {detCpuSeries.map((series) => (
                 <ThresholdBarGraph
                   key={series.name}