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">
-      {cpuPercent && (
-        <div className="flex items-center text-sm mr-4">
-          <MdCircle
-            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">
+    <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 gap-2">
             <MdCircle
-              className={`w-2 h-2 mr-2 ${
-                gpu < 50
-                  ? "text-green-500"
-                  : gpu < 80
+              className={`size-2 ${
+                cpuPercent < 50
+                  ? "text-success"
+                  : 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>
   );
 }