feat(web): added ability to customize logs view (#236)

* enhancement(frontend/logs): added ability to indent messages, hide wrapped text and ability to turn off "scroll to bottom page on new line". addresses #232

* fix: improved "hide wrapped text" feature

web/src/screens/Logs.tsx

@@ -1,33 +1,57 @@
 import { useEffect, useRef, useState } from "react";
-import { APIClient } from "../api/APIClient";
 import { ExclamationIcon } from "@heroicons/react/solid";
 
+import { APIClient } from "../api/APIClient";
+import { Checkbox } from "../components/Checkbox";
+import { classNames } from "../utils";
+import { SettingsContext } from "../utils/Context";
+
 type LogEvent = {
   time: string;
   level: string;
   message: string;
 };
 
+type LogLevel = "TRACE" | "DEBUG" | "INFO" | "ERROR";
+
+const LogColors: Record<LogLevel, string> = {
+  "TRACE": "text-purple-300",
+  "DEBUG": "text-yellow-500",
+  "INFO": "text-green-500",
+  "ERROR": "text-red-500",
+};
+
 export const Logs = () => {
+  const [settings, setSettings] = SettingsContext.use();
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [logs, setLogs] = useState<LogEvent[]>([]);
 
   const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "auto" })
+    messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
   }
 
   useEffect(() => {
-        const es = APIClient.events.logs()
+    const es = APIClient.events.logs();
 
     es.onmessage = (event) => {
-            const d = JSON.parse(event.data) as LogEvent;
+      const newData = JSON.parse(event.data) as LogEvent;
-            setLogs(prevState => ([...prevState, d]));
+      setLogs((prevState) => [...prevState, newData]);
+
+      if (settings.scrollOnNewLog)
         scrollToBottom();
     }
-        return () => {
+
-            es.close();
+    return () => es.close();
-        }
+  }, [setLogs, settings]);
-    }, [setLogs]);
+
+  const onSetValue = (
+    key: "scrollOnNewLog" | "indentLogLines" | "hideWrappedText",
+    newValue: boolean
+  ) => setSettings((prevState) => ({
+    ...prevState,
+    [key]: newValue
+  }));
 
   return (
     <main>
@@ -44,17 +68,57 @@ export const Logs = () => {
         </div>
       </header>
       <div className="max-w-7xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
-                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 py-3 sm:py-4">
+        <div
-                    <div className="overflow-y-auto p-2 rounded-lg min-h-[32rem] lg:min-h-[48rem] min-w-full bg-gray-100 dark:bg-gray-900">
+          className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 pb-3 sm:pb-4"
+        >
+          <Checkbox
+            label="Scroll to bottom on new message"
+            value={settings.scrollOnNewLog}
+            setValue={(newValue) => onSetValue("scrollOnNewLog", newValue)}
+          />
+          <Checkbox
+            label="Indent log lines"
+            description="Indent each log line according to their respective starting position"
+            value={settings.indentLogLines}
+            setValue={(newValue) => onSetValue("indentLogLines", newValue)}
+          />
+          <Checkbox
+            label="Hide wrapped text"
+            description="Hides text that is meant to be wrapped"
+            value={settings.hideWrappedText}
+            setValue={(newValue) => onSetValue("hideWrappedText", newValue)}
+          />
+          <div
+            className="overflow-y-auto p-2 rounded-lg min-h-[32rem] lg:min-h-[48rem] min-w-full bg-gray-100 dark:bg-gray-900"
+          >
             {logs.map((a, idx) => (
-                            <p key={idx}>
+              <div
-                                <span className="font-mono text-gray-500 dark:text-gray-600 mr-2">{a.time}</span>
+                key={idx}
-                                {a.level === "TRACE" && <span className="font-mono font-semibold text-purple-300">{a.level}</span>}
+                className={classNames(
-                                {a.level === "DEBUG" && <span className="font-mono font-semibold text-yellow-500">{a.level}</span>}
+                  settings.indentLogLines ? "grid justify-start grid-flow-col" : "",
-                                {a.level === "INFO" && <span className="font-mono font-semibold text-green-500">{a.level} </span>}
+                  settings.hideWrappedText ? "truncate hover:text-ellipsis hover:whitespace-normal" : "",
-                                {a.level === "ERROR" && <span className="font-mono font-semibold text-red-500">{a.level}</span>}
+                )}
-                                <span className="ml-2 text-black dark:text-gray-300">{a.message}</span>
+              >
-                            </p>
+                <span
+                  className="font-mono text-gray-500 dark:text-gray-600 mr-2 h-full"
+                >
+                  {a.time}
+                </span>
+                {a.level in LogColors ? (
+                  <span
+                    className={classNames(
+                      LogColors[a.level as LogLevel],
+                      "font-mono font-semibold h-full"
+                    )}
+                  >
+                    {a.level}
+                    {' '}
+                  </span>
+                ) : null}
+                <span className="ml-2 text-black dark:text-gray-300">
+                  {a.message}
+                </span>
+              </div>
             ))}
             <div ref={messagesEndRef} />
           </div>

web/src/utils/Context.ts

@@ -46,12 +46,18 @@ export const AuthContext = newRidgeState<AuthInfo>(
 interface SettingsType {
   debug: boolean;
   darkTheme: boolean;
+  scrollOnNewLog: boolean;
+  indentLogLines: boolean;
+  hideWrappedText: boolean;
 }
 
 export const SettingsContext = newRidgeState<SettingsType>(
   {
     debug: false,
-      darkTheme: true
+    darkTheme: true,
+    scrollOnNewLog: false,
+    indentLogLines: false,
+    hideWrappedText: false
   },
   {
     onSet: (new_state) => {
@@ -61,6 +67,7 @@ export const SettingsContext = newRidgeState<SettingsType>(
         } else {
           document.documentElement.classList.remove("dark");
         }
+
         localStorage.setItem("settings", JSON.stringify(new_state));
       } catch (e) {
         console.log("An error occurred while trying to modify the local settings context state.");