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

web/src/components/filter/LogLevelFilter.tsx

@@ -0,0 +1,126 @@
+import { Button } from "../ui/button";
+import { FaFilter } from "react-icons/fa";
+import { isMobile } from "react-device-detect";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { LogSeverity } from "@/types/log";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { DropdownMenuSeparator } from "../ui/dropdown-menu";
+
+type LogLevelFilterButtonProps = {
+  selectedLabels?: LogSeverity[];
+  updateLabelFilter: (labels: LogSeverity[] | undefined) => void;
+};
+export function LogLevelFilterButton({
+  selectedLabels,
+  updateLabelFilter,
+}: LogLevelFilterButtonProps) {
+  const trigger = (
+    <Button size="sm" className="flex items-center gap-2" variant="secondary">
+      <FaFilter className="text-secondary-foreground" />
+      <div className="hidden md:block text-primary-foreground">Filter</div>
+    </Button>
+  );
+  const content = (
+    <GeneralFilterContent
+      selectedLabels={selectedLabels}
+      updateLabelFilter={updateLabelFilter}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[75dvh] p-3 mx-1 overflow-hidden">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent>{content}</PopoverContent>
+    </Popover>
+  );
+}
+
+type GeneralFilterContentProps = {
+  selectedLabels: LogSeverity[] | undefined;
+  updateLabelFilter: (labels: LogSeverity[] | undefined) => void;
+};
+export function GeneralFilterContent({
+  selectedLabels,
+  updateLabelFilter,
+}: GeneralFilterContentProps) {
+  return (
+    <>
+      <div className="h-auto overflow-y-auto overflow-x-hidden">
+        <div className="flex justify-between items-center my-2.5">
+          <Label
+            className="mx-2 text-primary-foreground cursor-pointer"
+            htmlFor="allLabels"
+          >
+            All Logs
+          </Label>
+          <Switch
+            className="ml-1"
+            id="allLabels"
+            checked={selectedLabels == undefined}
+            onCheckedChange={(isChecked) => {
+              if (isChecked) {
+                updateLabelFilter(undefined);
+              }
+            }}
+          />
+        </div>
+        <DropdownMenuSeparator />
+        <div className="my-2.5 flex flex-col gap-2.5">
+          {["debug", "info", "warning", "error"].map((item) => (
+            <div className="flex justify-between items-center">
+              <Label
+                className="w-full mx-2 text-primary-foreground capitalize cursor-pointer"
+                htmlFor={item}
+              >
+                {item.replaceAll("_", " ")}
+              </Label>
+              <Switch
+                key={item}
+                className="ml-1"
+                id={item}
+                checked={selectedLabels?.includes(item as LogSeverity) ?? false}
+                onCheckedChange={(isChecked) => {
+                  if (isChecked) {
+                    const updatedLabels = selectedLabels
+                      ? [...selectedLabels]
+                      : [];
+
+                    updatedLabels.push(item as LogSeverity);
+                    updateLabelFilter(updatedLabels);
+                  } else {
+                    const updatedLabels = selectedLabels
+                      ? [...selectedLabels]
+                      : [];
+
+                    // can not deselect the last item
+                    if (updatedLabels.length > 1) {
+                      updatedLabels.splice(
+                        updatedLabels.indexOf(item as LogSeverity),
+                        1,
+                      );
+                      updateLabelFilter(updatedLabels);
+                    }
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <DropdownMenuSeparator />
+    </>
+  );
+}

web/src/components/filter/ReviewFilterGroup.tsx

@@ -567,7 +567,7 @@ export function GeneralFilterContent({
           {allLabels.map((item) => (
             <div className="flex justify-between items-center">
               <Label
-                className="w-full mx-2 text-secondary-foreground capitalize cursor-pointer"
+                className="w-full mx-2 text-primary-foreground capitalize cursor-pointer"
                 htmlFor={item}
               >
                 {item.replaceAll("_", " ")}
@@ -645,7 +645,7 @@ function ShowMotionOnlyButton({
 
   return (
     <>
-      <div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground h-9 rounded-md px-3 mx-1 cursor-pointer">
+      <div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-primary-foreground h-9 rounded-md px-3 mx-1 cursor-pointer">
         <Switch
           className="ml-1"
           id="collapse-motion"

web/src/components/indicators/Chip.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useRef } from "react";
+import { LogSeverity } from "@/types/log";
+import { ReactNode, useMemo, useRef } from "react";
 import { CSSTransition } from "react-transition-group";
 
 type ChipProps = {
@@ -39,3 +40,35 @@ export default function Chip({
     </CSSTransition>
   );
 }
+
+type LogChipProps = {
+  severity: LogSeverity;
+  onClickSeverity?: () => void;
+};
+export function LogChip({ severity, onClickSeverity }: LogChipProps) {
+  const severityClassName = useMemo(() => {
+    switch (severity) {
+      case "info":
+        return "text-primary-foreground/60 bg-secondary hover:bg-secondary/60";
+      case "warning":
+        return "text-warning-foreground bg-warning hover:bg-warning/80";
+      case "error":
+        return "text-destructive-foreground bg-destructive hover:bg-destructive/80";
+    }
+  }, [severity]);
+
+  return (
+    <div
+      className={`py-[1px] px-1 capitalize text-xs rounded-md ${onClickSeverity ? "cursor-pointer" : ""} ${severityClassName}`}
+      onClick={(e) => {
+        e.stopPropagation();
+
+        if (onClickSeverity) {
+          onClickSeverity();
+        }
+      }}
+    >
+      {severity}
+    </div>
+  );
+}

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]);
+}

web/src/components/settings/GeneralSettings.tsx

@@ -142,7 +142,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
                     className={
                       isDesktop
                         ? "cursor-pointer"
-                        : "p-2 flex items-center text-sm"
+                        : "w-full p-2 flex items-center text-sm"
                     }
                   >
                     <LuActivity className="mr-2 size-4" />
@@ -154,7 +154,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
                     className={
                       isDesktop
                         ? "cursor-pointer"
-                        : "p-2 flex items-center text-sm"
+                        : "w-full p-2 flex items-center text-sm"
                     }
                   >
                     <LuList className="mr-2 size-4" />
@@ -172,7 +172,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
                     className={
                       isDesktop
                         ? "cursor-pointer"
-                        : "p-2 flex items-center text-sm"
+                        : "w-full p-2 flex items-center text-sm"
                     }
                   >
                     <LuSettings className="mr-2 size-4" />
@@ -184,7 +184,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
                     className={
                       isDesktop
                         ? "cursor-pointer"
-                        : "p-2 flex items-center text-sm"
+                        : "w-full p-2 flex items-center text-sm"
                     }
                   >
                     <LuPenSquare className="mr-2 size-4" />