Add toast and filtering

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] 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/pages/Logs.tsx

@@ -3,10 +3,13 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { LogData, LogLine, LogSeverity } from "@/types/log";
 import copy from "copy-to-clipboard";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { LuCopy } from "react-icons/lu";
 import axios from "axios";
 import LogInfoDialog from "@/components/overlay/LogInfoDialog";
 import { LogChip } from "@/components/indicators/Chip";
+import { LogLevelFilterButton } from "@/components/filter/LogLevelFilter";
+import { FaCopy } from "react-icons/fa6";
+import { Toaster } from "@/components/ui/sonner";
+import { toast } from "sonner";
 
 const logTypes = ["frigate", "go2rtc", "nginx"] as const;
 type LogType = (typeof logTypes)[number];
@@ -204,8 +207,15 @@ function Logs() {
   const handleCopyLogs = useCallback(() => {
     if (logs) {
       copy(logs.join("\n"));
+      toast.success(
+        logRange.start == 0
+          ? "Coplied logs to clipboard"
+          : "Copied visible logs to clipboard",
+      );
+    } else {
+      toast.error("Could not copy logs to clipboard");
     }
-  }, [logs]);
+  }, [logs, logRange]);
 
   // scroll to bottom
 
@@ -300,7 +310,7 @@ function Logs() {
 
   // log filtering
 
-  const [filterSeverity, setFilterSeverity] = useState<LogSeverity>();
+  const [filterSeverity, setFilterSeverity] = useState<LogSeverity[]>();
 
   // log selection
 
@@ -308,6 +318,7 @@ function Logs() {
 
   return (
     <div className="size-full p-2 flex flex-col">
+      <Toaster position="top-center" />
       <LogInfoDialog logLine={selectedLog} setLogLine={setSelectedLog} />
 
       <div className="flex justify-between items-center">
@@ -335,21 +346,28 @@ function Logs() {
             </ToggleGroupItem>
           ))}
         </ToggleGroup>
-        <div>
+        <div className="flex items-center gap-2">
           <Button
             className="flex justify-between items-center gap-2"
             size="sm"
+            variant="secondary"
             onClick={handleCopyLogs}
           >
-            <LuCopy />
-            <div className="hidden md:block">Copy to Clipboard</div>
+            <FaCopy />
+            <div className="hidden md:block text-primary-foreground">
+              Copy to Clipboard
+            </div>
           </Button>
+          <LogLevelFilterButton
+            selectedLabels={filterSeverity}
+            updateLabelFilter={setFilterSeverity}
+          />
         </div>
       </div>
 
       {initialScroll && !endVisible && (
         <Button
-          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-xl bg-accent-foreground text-white bg-gray-400 z-20 p-2"
+          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-md text-primary-foreground bg-secondary-foreground z-20 p-2"
           variant="secondary"
           onClick={() =>
             contentRef.current?.scrollTo({
@@ -364,7 +382,7 @@ function Logs() {
 
       <div
         ref={contentRef}
-        className="w-full h-min my-2 font-mono text-sm sm:py-2 whitespace-pre-wrap overflow-auto no-scrollbar bg-primary border border-secondary rounded-md"
+        className="w-full h-min my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap overflow-auto no-scrollbar bg-primary border border-secondary rounded-md"
       >
         <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:p-2 *:text-sm *:text-primary-foreground/40">
           <div className="p-1 flex items-center capitalize">Type</div>
@@ -385,7 +403,7 @@ function Logs() {
 
             if (logLine) {
               const line = logLines[idx - logRange.start];
-              if (filterSeverity && line.severity != filterSeverity) {
+              if (filterSeverity && !filterSeverity.includes(line.severity)) {
                 return (
                   <div
                     ref={idx == logRange.start + 10 ? startLogRef : undefined}
@@ -401,7 +419,7 @@ function Logs() {
                   }
                   className={initialScroll ? "" : "invisible"}
                   line={line}
-                  onClickSeverity={() => setFilterSeverity(line.severity)}
+                  onClickSeverity={() => setFilterSeverity([line.severity])}
                   onSelect={() => setSelectedLog(line)}
                 />
               );