feat(logs): add log level selection to tools ui (#3565)

apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Select } from "@mantine/core";
+
+import type { LogLevel } from "@homarr/log/constants";
+import { logLevelConfiguration, logLevels } from "@homarr/log/constants";
+import { useI18n } from "@homarr/translation/client";
+
+import { useLogContext } from "./log-context";
+
+export const LogLevelSelection = () => {
+  const { level, setLevel } = useLogContext();
+  const t = useI18n();
+
+  return (
+    <Select
+      data={logLevels.map((level) => ({
+        value: level,
+        label: `${logLevelConfiguration[level].prefix} ${t(`log.level.option.${level}`)}`,
+      }))}
+      value={level}
+      onChange={(value) => setLevel(value as LogLevel)}
+      checkIconPosition="right"
+    />
+  );
+};

apps/nextjs/src/app/[locale]/manage/tools/logs/log-context.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
+
+import type { LogLevel } from "@homarr/log/constants";
+import { logLevels } from "@homarr/log/constants";
+
+const LogContext = createContext<{
+  level: LogLevel;
+  setLevel: (level: LogLevel) => void;
+  activeLevels: LogLevel[];
+} | null>(null);
+
+interface LogContextProviderProps extends PropsWithChildren {
+  defaultLevel: LogLevel;
+}
+
+export const LogContextProvider = ({ defaultLevel, children }: LogContextProviderProps) => {
+  const [level, setLevel] = useState(defaultLevel);
+  const activeLevels = useMemo(() => logLevels.slice(0, logLevels.indexOf(level) + 1), [level]);
+
+  return <LogContext.Provider value={{ level, setLevel, activeLevels }}>{children}</LogContext.Provider>;
+};
+
+export const useLogContext = () => {
+  const context = useContext(LogContext);
+  if (!context) {
+    throw new Error("useLogContext must be used within a LogContextProvider");
+  }
+  return context;
+};

apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@mantine/core";
+import { Box, Group } from "@mantine/core";
 
 import { getScopedI18n } from "@homarr/translation/server";
 
@@ -7,11 +7,14 @@ import "@xterm/xterm/css/xterm.css";
 import { notFound } from "next/navigation";
 
 import { auth } from "@homarr/auth/next";
+import { env } from "@homarr/log/env";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { fullHeightWithoutHeaderAndFooter } from "~/constants";
 import { createMetaTitle } from "~/metadata";
 import { ClientSideTerminalComponent } from "./client";
+import { LogLevelSelection } from "./level-selection";
+import { LogContextProvider } from "./log-context";
 
 export async function generateMetadata() {
   const session = await auth();
@@ -32,11 +35,14 @@ export default async function LogsManagementPage() {
   }
 
   return (
-    <>
+    <LogContextProvider defaultLevel={env.LOG_LEVEL}>
-      <DynamicBreadcrumb />
+      <Group justify="space-between" align="center" wrap="nowrap">
+        <DynamicBreadcrumb />
+        <LogLevelSelection />
+      </Group>
       <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
         <ClientSideTerminalComponent />
       </Box>
-    </>
+    </LogContextProvider>
   );
 }

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -8,22 +8,29 @@ import { Terminal } from "@xterm/xterm";
 
 import { clientApi } from "@homarr/api/client";
 
+import { useLogContext } from "./log-context";
 import classes from "./terminal.module.css";
 
 export const TerminalComponent = () => {
   const ref = useRef<HTMLDivElement>(null);
+  const { activeLevels } = useLogContext();
 
   const terminalRef = useRef<Terminal>(null);
-  clientApi.log.subscribe.useSubscription(undefined, {
+  clientApi.log.subscribe.useSubscription(
-    onData(data) {
+    {
-      terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);
+      levels: activeLevels,
-      terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
     },
-    onError(err) {
+    {
-      // This makes sense as logging might cause an infinite loop
+      onData(data) {
-      alert(err);
+        terminalRef.current?.writeln(data.message);
+        terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
+      },
+      onError(err) {
+        // This makes sense as logging might cause an infinite loop
+        alert(err);
+      },
     },
-  });
+  );
 
   useEffect(() => {
     if (!ref.current) {

packages/api/src/router/log.ts

@@ -1,22 +1,33 @@
 import { observable } from "@trpc/server/observable";
+import z from "zod";
 
 import { logger } from "@homarr/log";
+import { logLevels } from "@homarr/log/constants";
 import type { LoggerMessage } from "@homarr/redis";
 import { loggingChannel } from "@homarr/redis";
+import { zodEnumFromArray } from "@homarr/validation/enums";
 
 import { createTRPCRouter, permissionRequiredProcedure } from "../trpc";
 
 export const logRouter = createTRPCRouter({
-  subscribe: permissionRequiredProcedure.requiresPermission("other-view-logs").subscription(() => {
+  subscribe: permissionRequiredProcedure
-    return observable<LoggerMessage>((emit) => {
+    .requiresPermission("other-view-logs")
-      const unsubscribe = loggingChannel.subscribe((data) => {
+    .input(
-        emit.next(data);
+      z.object({
-      });
+        levels: z.array(zodEnumFromArray(logLevels)).default(["info"]),
-      logger.info("A tRPC client has connected to the logging procedure");
+      }),
+    )
+    .subscription(({ input }) => {
+      return observable<LoggerMessage>((emit) => {
+        const unsubscribe = loggingChannel.subscribe((data) => {
+          if (!input.levels.includes(data.level)) return;
+          emit.next(data);
+        });
+        logger.info("A tRPC client has connected to the logging procedure");
 
-      return () => {
+        return () => {
-        unsubscribe();
+          unsubscribe();
-      };
+        };
-    });
+      });
-  }),
+    }),
 });

packages/log/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
+    "./constants": "./src/constants.ts",
     "./env": "./src/env.ts"
   },
   "typesVersions": {

packages/log/src/constants.ts

@@ -0,0 +1,17 @@
+export const logLevels = ["error", "warn", "info", "debug"] as const;
+export type LogLevel = (typeof logLevels)[number];
+
+export const logLevelConfiguration = {
+  error: {
+    prefix: "🔴",
+  },
+  warn: {
+    prefix: "🟡",
+  },
+  info: {
+    prefix: "🟢",
+  },
+  debug: {
+    prefix: "🔵",
+  },
+} satisfies Record<LogLevel, { prefix: string }>;

packages/log/src/env.ts

@@ -2,9 +2,11 @@ import { z } from "zod";
 
 import { createEnv } from "@homarr/env";
 
+import { logLevels } from "./constants";
+
 export const env = createEnv({
   server: {
-    LOG_LEVEL: z.enum(["debug", "info", "warn", "error"]).default("info"),
+    LOG_LEVEL: z.enum(logLevels).default("info"),
   },
   experimental__runtimeEnv: process.env,
 });

packages/log/src/index.ts

@@ -24,7 +24,11 @@ const logTransports: Transport[] = [new transports.Console()];
 
 // Only add the Redis transport if we are not in CI
 if (!(Boolean(process.env.CI) || Boolean(process.env.DISABLE_REDIS_LOGS))) {
-  logTransports.push(new RedisTransport());
+  logTransports.push(
+    new RedisTransport({
+      level: "debug",
+    }),
+  );
 }
 
 const logger = winston.createLogger({

packages/log/src/redis-transport.ts

@@ -2,6 +2,9 @@ import { Redis } from "ioredis";
 import superjson from "superjson";
 import Transport from "winston-transport";
 
+const messageSymbol = Symbol.for("message");
+const levelSymbol = Symbol.for("level");
+
 //
 // Inherit from `winston-transport` so you can take advantage
 // of the base functionality and `.exceptions.handle()`.
@@ -12,7 +15,7 @@ export class RedisTransport extends Transport {
   /**
    * Log the info to the Redis channel
    */
-  log(info: { message: string; timestamp: string; level: string }, callback: () => void) {
+  log(info: { [messageSymbol]: string; [levelSymbol]: string }, callback: () => void) {
     setImmediate(() => {
       this.emit("logged", info);
     });
@@ -24,9 +27,8 @@ export class RedisTransport extends Transport {
       .publish(
         "pubSub:logging",
         superjson.stringify({
-          message: info.message,
+          message: info[messageSymbol],
-          timestamp: info.timestamp,
+          level: info[levelSymbol],
-          level: info.level,
         }),
       )
       .then(() => {

packages/redis/src/index.ts

@@ -1,3 +1,5 @@
+import { LogLevel } from "@homarr/log/constants";
+
 import { createListChannel, createQueueChannel, createSubPubChannel } from "./lib/channel";
 
 export {
@@ -27,8 +29,7 @@ export const queueChannel = createQueueChannel<{
 
 export interface LoggerMessage {
   message: string;
-  level: string;
+  level: LogLevel;
-  timestamp: string;
 }
 
 export const loggingChannel = createSubPubChannel<LoggerMessage>("logging");

packages/translation/src/lang/en.json

@@ -4204,5 +4204,15 @@
         }
       }
     }
+  },
+  "log": {
+    "level": {
+      "option": {
+        "debug": "Debug",
+        "info": "Info",
+        "warn": "Warn",
+        "error": "Error"
+      }
+    }
   }
 }