Add links to docs when specific log items are selected

web/src/components/overlay/LogInfoDialog.tsx

@@ -3,6 +3,8 @@ import { isDesktop } from "react-device-detect";
 import { Sheet, SheetContent } from "../ui/sheet";
 import { Drawer, DrawerContent } from "../ui/drawer";
 import { LogChip } from "../indicators/Chip";
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
 
 type LogInfoDialogProps = {
   logLine?: LogLine;
@@ -15,6 +17,8 @@ export default function LogInfoDialog({
   const Overlay = isDesktop ? Sheet : Drawer;
   const Content = isDesktop ? SheetContent : DrawerContent;
 
+  const helpfulLinks = useHelpfulLinks(logLine?.content);
+
   return (
     <Overlay
       open={logLine != undefined}
@@ -45,9 +49,81 @@ export default function LogInfoDialog({
               <div className="text-sm text-primary-foreground/40">Message</div>
               <div className="text-sm">{logLine.content}</div>
             </div>
+            {helpfulLinks.length > 0 && (
+              <div className="flex flex-col gap-1.5">
+                <div className="text-sm text-primary-foreground/40">
+                  Helpful Links
+                </div>
+                {helpfulLinks.map((tip) => (
+                  <Link to={tip.link} target="_blank" rel="noopener noreferrer">
+                    <div className="text-sm text-selected hover:underline">
+                      {tip.text}
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
           </div>
         )}
       </Content>
     </Overlay>
   );
 }
+
+function useHelpfulLinks(content: string | undefined) {
+  return useMemo(() => {
+    if (!content) {
+      return [];
+    }
+
+    const links = [];
+
+    if (/Could not clear [\d.]* currently [\d.]*/.exec(content)) {
+      links.push({
+        link: "https://docs.frigate.video/configuration/record#will-frigate-delete-old-recordings-if-my-storage-runs-out",
+        text: "Frigate Automatic Storage Cleanup",
+      });
+    }
+
+    if (/Did not detect hwaccel/.exec(content)) {
+      links.push({
+        link: "https://docs.frigate.video/configuration/hardware_acceleration",
+        text: "Setup Hardware Acceleration",
+      });
+    }
+
+    if (
+      content.includes(
+        "/usr/lib/x86_64-linux-gnu/dri/iHD_drv_video.so init failed",
+      ) ||
+      content.includes(
+        "/usr/lib/x86_64-linux-gnu/dri/i965_drv_video.so init failed",
+      ) ||
+      content.includes(
+        "/usr/lib/x86_64-linux-gnu/dri/i965_drv_video.so init failed",
+      ) ||
+      content.includes("No VA display found for device /dev/dri/renderD128")
+    ) {
+      links.push({
+        link: "https://docs.frigate.video/configuration/hardware_acceleration",
+        text: "Verify Hardware Acceleration Setup",
+      });
+    }
+
+    if (content.includes("No EdgeTPU was detected")) {
+      links.push({
+        link: "https://docs.frigate.video/troubleshooting/edgetpu",
+        text: "Troubleshoot Coral",
+      });
+    }
+
+    if (content.includes("The current SHM size of")) {
+      links.push({
+        link: "https://docs.frigate.video/frigate/installation/#calculating-required-shm-size",
+        text: "Calculate Correct SHM Size",
+      });
+    }
+
+    return links;
+  }, [content]);
+}