Add status bar provider (#11066)

web/src/hooks/use-deep-memo.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+import { isEqual } from "lodash";
+
+export default function useDeepMemo<T>(value: T) {
+  const ref = useRef<T | undefined>(undefined);
+
+  if (!isEqual(ref.current, value)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}

web/src/hooks/use-stats.ts

@@ -7,78 +7,82 @@ import {
 import { FrigateStats, PotentialProblem } from "@/types/stats";
 import { useMemo } from "react";
 import useSWR from "swr";
+import useDeepMemo from "./use-deep-memo";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 export default function useStats(stats: FrigateStats | undefined) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  const memoizedStats = useDeepMemo(stats);
+
   const potentialProblems = useMemo<PotentialProblem[]>(() => {
     const problems: PotentialProblem[] = [];
 
-    if (!stats) {
+    if (!memoizedStats) {
       return problems;
     }
 
     // if frigate has just started
     // don't look for issues
-    if (stats.service.uptime < 120) {
+    if (memoizedStats.service.uptime < 120) {
       return problems;
     }
 
     // check detectors for high inference speeds
-    Object.entries(stats["detectors"]).forEach(([key, det]) => {
+    Object.entries(memoizedStats["detectors"]).forEach(([key, det]) => {
       if (det["inference_speed"] > InferenceThreshold.error) {
         problems.push({
-          text: `${key} is very slow (${det["inference_speed"]} ms)`,
+          text: `${capitalizeFirstLetter(key)} is very slow (${det["inference_speed"]} ms)`,
           color: "text-danger",
         });
       } else if (det["inference_speed"] > InferenceThreshold.warning) {
         problems.push({
-          text: `${key} is slow (${det["inference_speed"]} ms)`,
+          text: `${capitalizeFirstLetter(key)} is slow (${det["inference_speed"]} ms)`,
           color: "text-orange-400",
         });
       }
     });
 
     // check for offline cameras
-    Object.entries(stats["cameras"]).forEach(([name, cam]) => {
+    Object.entries(memoizedStats["cameras"]).forEach(([name, cam]) => {
       if (!config) {
         return;
       }
 
       if (config.cameras[name].enabled && cam["camera_fps"] == 0) {
         problems.push({
-          text: `${name.replaceAll("_", " ")} is offline`,
+          text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`,
           color: "text-danger",
         });
       }
     });
 
     // check camera cpu usages
-    Object.entries(stats["cameras"]).forEach(([name, cam]) => {
+    Object.entries(memoizedStats["cameras"]).forEach(([name, cam]) => {
       const ffmpegAvg = parseFloat(
-        stats["cpu_usages"][cam["ffmpeg_pid"]]?.cpu_average,
+        memoizedStats["cpu_usages"][cam["ffmpeg_pid"]]?.cpu_average,
       );
       const detectAvg = parseFloat(
-        stats["cpu_usages"][cam["pid"]]?.cpu_average,
+        memoizedStats["cpu_usages"][cam["pid"]]?.cpu_average,
       );
 
       if (!isNaN(ffmpegAvg) && ffmpegAvg >= CameraFfmpegThreshold.error) {
         problems.push({
-          text: `${name.replaceAll("_", " ")} has high FFMPEG CPU usage (${ffmpegAvg}%)`,
+          text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} has high FFMPEG CPU usage (${ffmpegAvg}%)`,
           color: "text-danger",
         });
       }
 
       if (!isNaN(detectAvg) && detectAvg >= CameraDetectThreshold.error) {
         problems.push({
-          text: `${name.replaceAll("_", " ")} has high detect CPU usage (${detectAvg}%)`,
+          text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} has high detect CPU usage (${detectAvg}%)`,
           color: "text-danger",
         });
       }
     });
 
     return problems;
-  }, [config, stats]);
+  }, [config, memoizedStats]);
 
   return { potentialProblems };
 }