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 (
-    <>
-      <DynamicBreadcrumb />
+    <LogContextProvider defaultLevel={env.LOG_LEVEL}>
+      <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, {
-    onData(data) {
-      terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);
-      terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
+  clientApi.log.subscribe.useSubscription(
+    {
+      levels: activeLevels,
     },
-    onError(err) {
-      // This makes sense as logging might cause an infinite loop
-      alert(err);
+    {
+      onData(data) {
+        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) {