Redesign log page to have formatting

web/src/pages/Logs.tsx

@@ -1,21 +1,31 @@
 import { Button } from "@/components/ui/button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { LogLine, LogSeverity } from "@/types/log";
 import copy from "copy-to-clipboard";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { IoIosAlert } from "react-icons/io";
+import { GoAlertFill } from "react-icons/go";
 import { LuCopy } from "react-icons/lu";
 import useSWR from "swr";
 
 const logTypes = ["frigate", "go2rtc", "nginx"] as const;
 type LogType = (typeof logTypes)[number];
 
+const datestamp = /\[[\d\s-:]*]/;
+const severity = /(DEBUG)|(INFO)|(WARNING)|(ERROR)/;
+const section = /[\w.]*/;
+
 function Logs() {
   const [logService, setLogService] = useState<LogType>("frigate");
 
-  const { data: frigateLogs } = useSWR("logs/frigate", {
+  const { data: frigateLogs } = useSWR<string>("logs/frigate", {
     refreshInterval: 1000,
   });
   const { data: go2rtcLogs } = useSWR("logs/go2rtc", { refreshInterval: 1000 });
   const { data: nginxLogs } = useSWR("logs/nginx", { refreshInterval: 1000 });
+
+  // convert to log data
+
   const logs = useMemo(() => {
     if (logService == "frigate") {
       return frigateLogs;
@@ -28,6 +38,54 @@ function Logs() {
     }
   }, [logService, frigateLogs, go2rtcLogs, nginxLogs]);
 
+  const logLines = useMemo<LogLine[]>(() => {
+    if (logService == "frigate") {
+      if (!frigateLogs) {
+        return [];
+      }
+
+      return frigateLogs
+        .split("\n")
+        .map((line) => {
+          const match = datestamp.exec(line);
+
+          if (!match) {
+            return null;
+          }
+
+          const sectionMatch = section.exec(
+            line.substring(match.index + match[0].length).trim(),
+          );
+
+          if (!sectionMatch) {
+            return null;
+          }
+
+          return {
+            dateStamp: match.toString().slice(1, -1),
+            severity: severity
+              .exec(line)
+              ?.at(0)
+              ?.toString()
+              ?.toLowerCase() as LogSeverity,
+            section: sectionMatch.toString(),
+            content: line
+              .substring(line.indexOf(":", match.index + match[0].length) + 2)
+              .trim(),
+          };
+        })
+        .filter((value) => value != null) as LogLine[];
+    } else if (logService == "go2rtc") {
+      return [];
+    } else if (logService == "nginx") {
+      return [];
+    } else {
+      return [];
+    }
+  }, [logService, frigateLogs, go2rtcLogs, nginxLogs]);
+
+  //console.log(`the logs are ${JSON.stringify(logLines)}`);
+
   const handleCopyLogs = useCallback(() => {
     copy(logs);
   }, [logs]);
@@ -104,13 +162,99 @@ function Logs() {
 
       <div
         ref={contentRef}
-        className="w-full h-min my-2 font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap overflow-auto"
+        className="w-full h-min my-2 font-mono text-sm rounded py-4 sm:py-2 whitespace-pre-wrap overflow-auto"
       >
-        {logs}
+        <div className="py-2 sticky top-0 -translate-y-1/4 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 bg-background *:p-2">
+          <div className="p-1 flex items-center capitalize border-y border-l">
+            Severity
+          </div>
+          <div className="col-span-2 sm:col-span-1 flex items-center border-y border-l">
+            Timestamp
+          </div>
+          <div className="col-span-2 flex items-center border-y border-l border-r sm:border-r-0">
+            Tag
+          </div>
+          <div className="col-span-5 sm:col-span-4 md:col-span-8 flex items-center border">
+            Message
+          </div>
+        </div>
+        {logLines.map((log, idx) => (
+          <LogLineData key={idx} offset={idx} line={log} />
+        ))}
         <div ref={endLogRef} />
       </div>
     </div>
   );
 }
 
+type LogLineDataProps = {
+  line: LogLine;
+  offset: number;
+};
+function LogLineData({ line, offset }: LogLineDataProps) {
+  // long log message
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  const contentOverflows = useMemo(() => {
+    if (!contentRef.current) {
+      return false;
+    }
+
+    return contentRef.current.scrollWidth > contentRef.current.clientWidth;
+    // update on ref change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentRef.current]);
+
+  // severity coloring
+
+  const severityClassName = useMemo(() => {
+    switch (line.severity) {
+      case "info":
+        return "text-secondary-foreground rounded-md";
+      case "warning":
+        return "text-yellow-400 rounded-md";
+      case "error":
+        return "text-danger rounded-md";
+    }
+  }, [line]);
+
+  return (
+    <div
+      className={`py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 ${offset % 2 == 0 ? "bg-secondary" : "bg-secondary/80"} border-t border-l`}
+    >
+      <div
+        className={`h-full p-1 flex items-center gap-2 capitalize ${severityClassName}`}
+      >
+        {line.severity == "error" ? (
+          <GoAlertFill className="size-5" />
+        ) : (
+          <IoIosAlert className="size-5" />
+        )}
+        {line.severity}
+      </div>
+      <div className="h-full col-span-2 sm:col-span-1 flex items-center">
+        {line.dateStamp}
+      </div>
+      <div className="h-full col-span-2 flex items-center overflow-hidden text-ellipsis">
+        {line.section}
+      </div>
+      <div className="w-full col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center">
+        <div
+          ref={contentRef}
+          className={`w-[94%] flex items-center" ${expanded ? "" : "overflow-hidden whitespace-nowrap text-ellipsis"}`}
+        >
+          {line.content}
+        </div>
+        {contentOverflows && (
+          <Button className="mr-4" onClick={() => setExpanded(!expanded)}>
+            ...
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export default Logs;

web/src/types/log.ts

@@ -0,0 +1,8 @@
+export type LogSeverity = "info" | "warning" | "error" | "debug";
+
+export type LogLine = {
+  dateStamp: string;
+  severity: LogSeverity;
+  section: string;
+  content: string;
+};