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,14 +29,17 @@ 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">
+      <div className="h-full flex items-center gap-2">
         {cpuPercent && (
-        <div className="flex items-center text-sm mr-4">
+          <div className="flex items-center text-sm gap-2">
             <MdCircle
-            className={`w-2 h-2 mr-2 ${
+              className={`size-2 ${
                 cpuPercent < 50
-                ? "text-green-500"
+                  ? "text-success"
                   : cpuPercent < 80
                     ? "text-orange-400"
                     : "text-danger"
@@ -65,11 +70,11 @@ export default function Statusbar() {
           const gpu = parseInt(stats.gpu);
 
           return (
-          <div key={gpuTitle} className="flex items-center text-sm">
+            <div key={gpuTitle} className="flex items-center text-sm gap-2">
               <MdCircle
-              className={`w-2 h-2 mr-2 ${
+                className={`size-2 ${
                   gpu < 50
-                  ? "text-green-500"
+                    ? "text-success"
                     : gpu < 80
                       ? "text-orange-400"
                       : "text-danger"
@@ -80,5 +85,14 @@ export default function Statusbar() {
           );
         })}
       </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;
+};