add shm frame lifetime calculation and update UI for shared memory metrics

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

@@ -135,7 +135,11 @@
     },
     "shm": {
       "title": "SHM (shared memory) allocation",
-      "warning": "The current SHM size of {{total}}MB is too small. Increase it to at least {{min_shm}}MB."
+      "warning": "The current SHM size of {{total}}MB is too small. Increase it to at least {{min_shm}}MB.",
+      "frameLifetime": {
+        "title": "Frame lifetime",
+        "description": "Each camera has {{frames}} frame slots in shared memory. At the fastest camera's frame rate, each frame is available for approximately {{lifetime}}s before being overwritten."
+      }
     },
     "cameraStorage": {
       "title": "Camera Storage",

web/src/types/stats.ts

@@ -86,6 +86,7 @@ export type StorageStats = {
   used: number;
   mount_type: string;
   min_shm?: number;
+  shm_frame_count?: number;
 };
 
 export type PotentialProblem = {

web/src/views/system/StorageMetrics.tsx

@@ -89,6 +89,35 @@ export default function StorageMetrics({
     timezone,
   );
 
+  const shmFrameLifetime = useMemo(() => {
+    if (!stats || !config) {
+      return undefined;
+    }
+
+    const shmFrameCount = stats.service.storage["/dev/shm"]?.shm_frame_count;
+
+    if (!shmFrameCount || shmFrameCount <= 0) {
+      return undefined;
+    }
+
+    let maxCameraFps = 0;
+
+    for (const [name, camStats] of Object.entries(stats.cameras)) {
+      if (config.cameras[name]?.enabled && camStats.camera_fps > 0) {
+        maxCameraFps = Math.max(maxCameraFps, camStats.camera_fps);
+      }
+    }
+
+    if (maxCameraFps === 0) {
+      return undefined;
+    }
+
+    return {
+      frames: shmFrameCount,
+      lifetime: Math.round((shmFrameCount / maxCameraFps) * 10) / 10,
+    };
+  }, [stats, config]);
+
   if (!cameraStorage || !stats || !totalStorage || !config) {
     return;
   }
@@ -148,6 +177,30 @@ export default function StorageMetrics({
         <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
           <div className="mb-5 flex flex-row items-center justify-between">
             /dev/shm
+            <div className="flex flex-row items-center gap-2">
+              {shmFrameLifetime && (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      className="focus:outline-none"
+                      aria-label={t("storage.shm.frameLifetime.title")}
+                    >
+                      <CiCircleAlert
+                        className="size-5"
+                        aria-label={t("storage.shm.frameLifetime.title")}
+                      />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80">
+                    <div className="space-y-2">
+                      {t("storage.shm.frameLifetime.description", {
+                        frames: shmFrameLifetime.frames,
+                        lifetime: shmFrameLifetime.lifetime,
+                      })}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              )}
               {stats.service.storage["/dev/shm"]["total"] <
                 (stats.service.storage["/dev/shm"]["min_shm"] ?? 0) && (
                 <Popover>
@@ -186,6 +239,7 @@ export default function StorageMetrics({
                 </Popover>
               )}
             </div>
+          </div>
           <StorageGraph
             graphId="general-shared-memory"
             used={stats.service.storage["/dev/shm"]["used"]}