Add an HTTP API endpoint + UI widgets to stream logs (#49)

* Added JSON logs to Desktop

* Move logging config into librqbit for reuse

* Log printer now available in both Desktop and Web UI

* Fix JS type error

crates/librqbit/webui/src/components/LogStream.tsx

@@ -1,6 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ErrorWithLabel } from "../rqbit-web";
 import { ErrorComponent } from "./ErrorComponent";
+import { Form } from "react-bootstrap";
 
 interface LogStreamProps {
   httpApiBase: string;
@@ -10,6 +17,8 @@ interface LogStreamProps {
 interface Line {
   id: number;
   content: string;
+  parsed: JSONLogLine;
+  show: boolean;
 }
 
 const mergeBuffers = (a1: Uint8Array, a2: Uint8Array): Uint8Array => {
@@ -21,13 +30,13 @@ const mergeBuffers = (a1: Uint8Array, a2: Uint8Array): Uint8Array => {
 
 const streamLogs = (
   httpApiBase: string,
-  addLine: (text: string) => void,
+  addLine: React.MutableRefObject<(text: string) => void>,
   setError: (error: ErrorWithLabel | null) => void
 ): (() => void) => {
   const controller = new AbortController();
   const signal = controller.signal;
 
-  let canceled = true;
+  let canceled = false;
 
   const cancel = () => {
     console.log("cancelling fetch");
@@ -90,7 +99,7 @@ const streamLogs = (
         }
         let lineBytes = buffer.slice(0, newLineIdx);
         let line = new TextDecoder().decode(lineBytes);
-        addLine(line);
+        addLine.current(line);
         buffer = buffer.slice(newLineIdx + 1);
       }
     }
@@ -100,45 +109,125 @@ const streamLogs = (
   return cancel;
 };
 
-const SplitByLevelRegexp = new RegExp(
-  /(.*?) +(INFO|WARN|TRACE|ERROR|DEBUG) +(.*)/
-);
+type Value = string | number | boolean;
 
-const LogLine = ({ line }: { line: string }) => {
-  line.split;
-  const getClassNameByLevel = (level: string) => {
+interface Span {
+  name: string;
+  [key: string]: Value;
+}
+
+interface JSONLogLine {
+  level: string;
+  timestamp: string;
+  fields: {
+    message: string;
+    [key: string]: Value;
+  };
+  target: string;
+  span: Span;
+  spans: Span[];
+}
+
+const EXAMPLE_LOG_JSON: JSONLogLine = {
+  timestamp: "2023-12-08T21:48:13.649165Z",
+  level: "DEBUG",
+  fields: { message: "successfully port forwarded 192.168.0.112:4225" },
+  target: "librqbit_upnp",
+  span: { port: 4225, name: "manage_port" },
+  spans: [
+    { port: 4225, name: "upnp_forward" },
+    {
+      location: "http://192.168.0.1:49152/IGDdevicedesc_brlan0.xml",
+      name: "upnp_endpoint",
+    },
+    { device: "ARRIS TG3492LG", name: "device" },
+    { device: "WANDevice:1", name: "device" },
+    { device: "WANConnectionDevice:1", name: "device" },
+    { url: "/upnp/control/WANIPConnection0", name: "service" },
+    { port: 4225, name: "manage_port" },
+  ],
+};
+
+const LogLine = ({ line }: { line: Line }) => {
+  const parsed = line.parsed;
+
+  const classNameByLevel = (level: string) => {
     switch (level) {
+      case "DEBUG":
+        return "text-primary";
       case "INFO":
         return "text-success";
       case "WARN":
         return "text-warning";
       case "ERROR":
         return "text-danger";
-      case "DEBUG":
-        return "text-primary";
       default:
-        return "text-secondary";
+        return "text-muted";
     }
   };
 
-  const getContent = () => {
-    let match = line.match(SplitByLevelRegexp);
-    if (!match) {
-      return line;
+  const spanFields = (span: Span) => {
+    let fields = Object.entries(span).filter(([name, value]) => name != "name");
+    if (fields.length == 0) {
+      return null;
     }
-    const [beforeLevel, level, afterLevel] = match.slice(1);
     return (
       <>
-        {beforeLevel}
-        <span className={`${getClassNameByLevel(level)} m-2`}>{level}</span>
-        {afterLevel}
+        {"{"}
+        {fields
+          .map(([name, value]) => {
+            return (
+              <span key={name}>
+                {name} = {value}
+              </span>
+            );
+          })
+          .reduce((prev, curr) => (
+            <>
+              {prev}, {curr}
+            </>
+          ))}
+        {"}"}
       </>
     );
   };
 
   return (
-    <p className="font-monospace m-0" style={{ fontSize: "10px" }}>
-      {getContent()}
+    <p
+      hidden={!line.show}
+      className="font-monospace m-0 text-break"
+      style={{ fontSize: "10px" }}
+    >
+      <span className="m-1">{parsed.timestamp}</span>
+      <span className={`m-1 ${classNameByLevel(parsed.level)}`}>
+        {parsed.level}
+      </span>
+
+      <span className="m-1">
+        {parsed.spans?.map((span, i) => (
+          <span key={i}>
+            <span className="fw-bold">{span.name}</span>
+            {spanFields(span)}:
+          </span>
+        ))}
+      </span>
+      <span className="m-1 text-muted">{parsed.target}</span>
+      <span
+        className={`m-1 ${
+          parsed.fields.message.match(/error|fail/g)
+            ? "text-danger"
+            : "text-muted"
+        }`}
+      >
+        {parsed.fields.message}
+        {Object.entries(parsed.fields)
+          .filter(([key, value]) => key != "message")
+          .map(([key, value]) => (
+            <span className="m-1" key={key}>
+              <span className="fst-italic fw-bold">{key}</span>={value}
+            </span>
+          ))}
+      </span>
     </p>
   );
 };
@@ -149,32 +238,72 @@ export const LogStream: React.FC<LogStreamProps> = ({
 }) => {
   const [logLines, setLogLines] = useState<Line[]>([]);
   const [error, setError] = useState<ErrorWithLabel | null>(null);
+  const [filter, setFilter] = useState<string>("");
+  const filterRegex = useRef(new RegExp(""));
+
   const maxL = maxLines ?? 1000;
 
-  const addLine = (text: string) => {
-    setLogLines((logLines: Line[]) => {
-      const nextLineId = logLines.length == 0 ? 0 : logLines[0].id + 1;
+  const addLine = useCallback(
+    (text: string) => {
+      setLogLines((logLines: Line[]) => {
+        const nextLineId = logLines.length == 0 ? 0 : logLines[0].id + 1;
 
-      let newLogLines = [
-        {
-          id: nextLineId,
-          content: text,
-        },
-        ...logLines.slice(0, maxL - 1),
-      ];
-      return newLogLines;
-    });
+        let newLogLines = [
+          {
+            id: nextLineId,
+            content: text,
+            parsed: JSON.parse(text) as JSONLogLine,
+            show: !!text.match(filterRegex.current),
+          },
+          ...logLines.slice(0, maxL - 1),
+        ];
+        return newLogLines;
+      });
+    },
+    [filterRegex.current, maxLines]
+  );
+
+  const addLineRef = useRef(addLine);
+  addLineRef.current = addLine;
+
+  const handleFilterChange = (value: string) => {
+    setFilter(value);
+    try {
+      let regex = new RegExp(value);
+      filterRegex.current = regex;
+      setLogLines((logLines) => {
+        let tmp = [...logLines];
+        for (let line of tmp) {
+          line.show = !!line.content.match(regex);
+        }
+        return tmp;
+      });
+    } catch (e) {}
   };
 
   useEffect(() => {
-    return streamLogs(httpApiBase, addLine, setError);
+    return streamLogs(httpApiBase, addLineRef, setError);
   }, [httpApiBase]);
 
   return (
     <div className="row">
       <ErrorComponent error={error} />
+      <div className="mb-3">
+        Showing last {maxL} logs since this window was opened
+      </div>
+      <Form>
+        <Form.Group className="mb-3">
+          <Form.Control
+            type="text"
+            value={filter}
+            placeholder="Enter filter (regex)"
+            onChange={(e) => handleFilterChange(e.target.value)}
+          />
+        </Form.Group>
+      </Form>
+
       {logLines.map((line) => (
-        <LogLine key={line.id} line={line.content} />
+        <LogLine key={line.id} line={line} />
       ))}
     </div>
   );