Implement alerts when a potential problem is detected (#10734)

* Implement alerts on statusbar when a potential problem is detected

* Add alert to mobile

web/src/components/Statusbar.tsx

@@ -1,6 +1,8 @@
 import { useFrigateStats } from "@/api/ws";
+import useStats from "@/hooks/use-stats";
 import { FrigateStats } from "@/types/stats";
 import { useMemo } from "react";
+import { IoIosWarning } from "react-icons/io";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
@@ -27,58 +29,70 @@ export default function Statusbar() {
     return parseInt(systemCpu);
   }, [stats]);
 
+  const { potentialProblems } = useStats(stats);
+
   return (
-    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground border-t border-secondary-highlight">
+    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-primary z-10 text-secondary-foreground border-t border-secondary-highlight">
-      {cpuPercent && (
+      <div className="h-full flex items-center gap-2">
-        <div className="flex items-center text-sm mr-4">
+        {cpuPercent && (
-          <MdCircle
+          <div className="flex items-center text-sm gap-2">
-            className={`w-2 h-2 mr-2 ${
-              cpuPercent < 50
-                ? "text-green-500"
-                : cpuPercent < 80
-                  ? "text-orange-400"
-                  : "text-danger"
-            }`}
-          />
-          CPU {cpuPercent}%
-        </div>
-      )}
-      {Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => {
-        if (name == "error-gpu") {
-          return;
-        }
-
-        let gpuTitle;
-        switch (name) {
-          case "amd-vaapi":
-            gpuTitle = "AMD GPU";
-            break;
-          case "intel-vaapi":
-          case "intel-qsv":
-            gpuTitle = "Intel GPU";
-            break;
-          default:
-            gpuTitle = name;
-            break;
-        }
-
-        const gpu = parseInt(stats.gpu);
-
-        return (
-          <div key={gpuTitle} className="flex items-center text-sm">
             <MdCircle
-              className={`w-2 h-2 mr-2 ${
+              className={`size-2 ${
-                gpu < 50
+                cpuPercent < 50
-                  ? "text-green-500"
+                  ? "text-success"
-                  : gpu < 80
+                  : cpuPercent < 80
                     ? "text-orange-400"
                     : "text-danger"
               }`}
             />
-            {gpuTitle} {gpu}%
+            CPU {cpuPercent}%
           </div>
-        );
+        )}
-      })}
+        {Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => {
+          if (name == "error-gpu") {
+            return;
+          }
+
+          let gpuTitle;
+          switch (name) {
+            case "amd-vaapi":
+              gpuTitle = "AMD GPU";
+              break;
+            case "intel-vaapi":
+            case "intel-qsv":
+              gpuTitle = "Intel GPU";
+              break;
+            default:
+              gpuTitle = name;
+              break;
+          }
+
+          const gpu = parseInt(stats.gpu);
+
+          return (
+            <div key={gpuTitle} className="flex items-center text-sm gap-2">
+              <MdCircle
+                className={`size-2 ${
+                  gpu < 50
+                    ? "text-success"
+                    : gpu < 80
+                      ? "text-orange-400"
+                      : "text-danger"
+                }`}
+              />
+              {gpuTitle} {gpu}%
+            </div>
+          );
+        })}
+      </div>
+      <div className="h-full flex items-center gap-2">
+        {potentialProblems.map((prob) => (
+          <div className="flex items-center text-sm gap-2 capitalize">
+            <IoIosWarning className={`size-5 ${prob.color}`} />
+            {prob.text}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

web/src/components/navigation/Bottombar.tsx

@@ -1,6 +1,13 @@
 import { navbarLinks } from "@/pages/site-navigation";
 import NavItem from "./NavItem";
 import SettingsNavItems from "../settings/SettingsNavItems";
+import { IoIosWarning } from "react-icons/io";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import useSWR from "swr";
+import { FrigateStats } from "@/types/stats";
+import { useFrigateStats } from "@/api/ws";
+import { useMemo } from "react";
+import useStats from "@/hooks/use-stats";
 
 function Bottombar() {
   return (
@@ -17,10 +24,46 @@ function Bottombar() {
         />
       ))}
       <SettingsNavItems className="flex flex-shrink-0 justify-between gap-4" />
+      <StatusAlertNav />
     </div>
   );
 }
 
-//
+function StatusAlertNav() {
+  const { data: initialStats } = useSWR<FrigateStats>("stats", {
+    revalidateOnFocus: false,
+  });
+  const { payload: latestStats } = useFrigateStats();
+  const stats = useMemo(() => {
+    if (latestStats) {
+      return latestStats;
+    }
+
+    return initialStats;
+  }, [initialStats, latestStats]);
+  const { potentialProblems } = useStats(stats);
+
+  if (!potentialProblems || potentialProblems.length == 0) {
+    return;
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger>
+        <IoIosWarning className="size-5 text-danger" />
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden">
+        <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
+          {potentialProblems.map((prob) => (
+            <div className="w-full flex items-center text-xs gap-2 capitalize">
+              <IoIosWarning className={`size-5 ${prob.color}`} />
+              {prob.text}
+            </div>
+          ))}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
 
 export default Bottombar;

web/src/hooks/use-stats.ts

@@ -0,0 +1,63 @@
+import { FrigateStats, PotentialProblem } from "@/types/stats";
+import { useMemo } from "react";
+
+export default function useStats(stats: FrigateStats | undefined) {
+  const potentialProblems = useMemo<PotentialProblem[]>(() => {
+    const problems: PotentialProblem[] = [];
+
+    if (!stats) {
+      return problems;
+    }
+
+    // check detectors for high inference speeds
+    Object.entries(stats["detectors"]).forEach(([key, det]) => {
+      if (det["inference_speed"] > 100) {
+        problems.push({
+          text: `${key} is very slow (${det["inference_speed"]} ms)`,
+          color: "text-danger",
+        });
+      } else if (det["inference_speed"] > 50) {
+        problems.push({
+          text: `${key} is slow (${det["inference_speed"]} ms)`,
+          color: "text-orange-400",
+        });
+      }
+    });
+
+    // check for offline cameras
+    Object.entries(stats["cameras"]).forEach(([name, cam]) => {
+      if (cam["camera_fps"] == 0) {
+        problems.push({
+          text: `${name.replaceAll("_", " ")} is offline`,
+          color: "text-danger",
+        });
+      }
+    });
+
+    // check camera cpu usages
+    Object.entries(stats["cameras"]).forEach(([name, cam]) => {
+      const ffmpegAvg = parseFloat(
+        stats["cpu_usages"][cam["ffmpeg_pid"]].cpu_average,
+      );
+      const detectAvg = parseFloat(stats["cpu_usages"][cam["pid"]].cpu_average);
+
+      if (!isNaN(ffmpegAvg) && ffmpegAvg >= 20.0) {
+        problems.push({
+          text: `${name.replaceAll("_", " ")} has high FFMPEG CPU usage (${ffmpegAvg}%)`,
+          color: "text-danger",
+        });
+      }
+
+      if (!isNaN(detectAvg) && detectAvg >= 40.0) {
+        problems.push({
+          text: `${name.replaceAll("_", " ")} has high detect CPU usage (${detectAvg}%)`,
+          color: "text-danger",
+        });
+      }
+    });
+
+    return problems;
+  }, [stats]);
+
+  return { potentialProblems };
+}

web/src/types/stats.ts

@@ -58,3 +58,8 @@ export type StorageStats = {
   used: number;
   mount_type: string;
 };
+
+export type PotentialProblem = {
+  text: string;
+  color: string;
+};