feat: add real time logger page (#276)

* feat: add real time logger

* feat: add subscription for logging

* feat: use timestamp and level in xterm, migrate to new xterm package

* feat: improve design on log page

* fit: remove xterm fit addon

* fix: dispose terminal correctly

* style: format code

* refactor: add jsdoc for redis-transport

* fix: redis connection not possible sometimes

* feat: make terminal full size

* fix: deepsource issues

* fix: lint issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/api/src/root.ts

@@ -1,6 +1,7 @@
 import { appRouter as innerAppRouter } from "./router/app";
 import { boardRouter } from "./router/board";
 import { integrationRouter } from "./router/integration";
+import { logRouter } from "./router/log";
 import { userRouter } from "./router/user";
 import { createTRPCRouter } from "./trpc";
 
@@ -9,6 +10,7 @@ export const appRouter = createTRPCRouter({
   integration: integrationRouter,
   board: boardRouter,
   app: innerAppRouter,
+  log: logRouter,
 });
 
 // export type definition of API

packages/api/src/router/log.ts

@@ -0,0 +1,18 @@
+import { observable } from "@trpc/server/observable";
+
+import { logger } from "@homarr/log";
+import type { LoggerMessage } from "@homarr/redis";
+import { loggingChannel } from "@homarr/redis";
+
+import { createTRPCRouter, publicProcedure } from "../trpc";
+
+export const logRouter = createTRPCRouter({
+  subscribe: publicProcedure.subscription(() => {
+    return observable<LoggerMessage>((emit) => {
+      loggingChannel.subscribe((data) => {
+        emit.next(data);
+      });
+      logger.info("A tRPC client has connected to the logging procedure");
+    });
+  }),
+});

packages/log/package.json

@@ -24,6 +24,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "ioredis": "5.3.2",
+    "superjson": "2.2.1",
     "winston": "3.13.0"
   },
   "devDependencies": {

packages/log/src/index.mjs

@@ -1,5 +1,7 @@
 import winston, { format, transports } from "winston";
 
+import { RedisTransport } from "./redis-transport.mjs";
+
 const logMessageFormat = format.printf(({ level, message, timestamp }) => {
   return `${timestamp} ${level}: ${message}`;
 });
@@ -10,7 +12,7 @@ const logger = winston.createLogger({
     format.timestamp(),
     logMessageFormat,
   ),
-  transports: [new transports.Console()],
+  transports: [new transports.Console(), new RedisTransport()],
 });
 
 export { logger };

packages/log/src/redis-transport.mjs

@@ -0,0 +1,44 @@
+import { Redis } from "ioredis";
+import superjson from "superjson";
+import Transport from "winston-transport";
+
+//
+// Inherit from `winston-transport` so you can take advantage
+// of the base functionality and `.exceptions.handle()`.
+//
+export class RedisTransport extends Transport {
+  /** @type {Redis} */
+  redis;
+
+  /**
+   * Log the info to the Redis channel
+   * @param {{ message: string; timestamp: string; level: string; }} info
+   * @param {() => void} callback
+   */
+  log(info, callback) {
+    setImmediate(() => {
+      this.emit("logged", info);
+    });
+
+    if (!this.redis) {
+      // Is only initialized here because it did not work when initialized in the constructor or outside the class
+      this.redis = new Redis();
+    }
+
+    this.redis
+      .publish(
+        "logging",
+        superjson.stringify({
+          message: info.message,
+          timestamp: info.timestamp,
+          level: info.level,
+        }),
+      )
+      .then(() => {
+        callback();
+      })
+      .catch(() => {
+        // Ignore errors
+      });
+  }
+}

packages/redis/src/index.ts

@@ -36,4 +36,12 @@ const createChannel = <TData>(name: string) => {
   };
 };
 
+export interface LoggerMessage {
+  message: string;
+  level: string;
+  timestamp: string;
+}
+
+export const loggingChannel = createChannel<LoggerMessage>("logging");
+
 export const exampleChannel = createChannel<{ message: string }>("example");

packages/translation/src/lang/en.ts

@@ -620,6 +620,7 @@ export default {
           label: "Tools",
           items: {
             docker: "Docker",
+            logs: "Logs",
           },
         },
         help: {