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");
+    });
+  }),
+});