Redesign logs page (#10853)

* Adjust outline and structure to match designs * More color changes to fit design * Properly parse go2rtc severity * Add ability to filter by clicking item * Implement sheet / drawer for viewing full log * Add toast and filtering * Add links to docs when specific log items are selected * Cleanup log seeking * Use header in layout * Fix mobile menus * Fix safari theme * Hide rings * Theme adjustment
2024-04-07 14:36:08 -06:00
parent b26ceff44d
commit cf2dfd9a54
9 changed files with 449 additions and 119 deletions
--- a/web/src/components/overlay/LogInfoDialog.tsx
+++ b/web/src/components/overlay/LogInfoDialog.tsx
@@ -0,0 +1,129 @@
+import { LogLine } from "@/types/log";
+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;
+  setLogLine: (log: LogLine | undefined) => void;
+};
+export default function LogInfoDialog({
+  logLine,
+  setLogLine,
+}: LogInfoDialogProps) {
+  const Overlay = isDesktop ? Sheet : Drawer;
+  const Content = isDesktop ? SheetContent : DrawerContent;
+
+  const helpfulLinks = useHelpfulLinks(logLine?.content);
+
+  return (
+    <Overlay
+      open={logLine != undefined}
+      onOpenChange={(open) => {
+        if (!open) {
+          setLogLine(undefined);
+        }
+      }}
+    >
+      <Content className={isDesktop ? "" : "max-h-[75dvh] p-2 overflow-hidden"}>
+        {logLine && (
+          <div className="size-full flex flex-col gap-5">
+            <div className="w-min flex flex-col gap-1.5">
+              <div className="text-sm text-primary-foreground/40">Type</div>
+              <LogChip severity={logLine.severity} />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <div className="text-sm text-primary-foreground/40">
+                Timestamp
+              </div>
+              <div className="text-sm">{logLine.dateStamp}</div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <div className="text-sm text-primary-foreground/40">Tag</div>
+              <div className="text-sm">{logLine.section}</div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <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]);
+}