Add better log view

plugin/src/styles.scss

@@ -3,6 +3,26 @@
 	height: 100px;
 }
 
+.log-message {
+	&.DEBUG {
+		color: var(--color-base-50);
+	}
+
+	&.INFO {
+		color: var(--color-base-70);
+	}
+
+	&.WARNING {
+		color: var(--color-yellow-70);
+	}
+
+	&.ERROR {
+		color: var(--color-red-70);
+	}
+
+	font: var(--font-monospace-theme);
+}
+
 .history-card * {
 	margin: 0;
 	padding: 0;

plugin/src/tracing/logger.ts

@@ -10,27 +10,6 @@ export enum LogLevel {
 class LogLine {
 	public timestamp = new Date();
 	public constructor(public level: LogLevel, public message: string) {}
-
-	public toString(): string {
-		return `| ${this.formatLevel()} | ${this.timestamp.getHours()}:${this.timestamp.getMinutes()}:${this.timestamp.getSeconds()} | ${
-			this.message
-		}`;
-	}
-
-	private formatLevel(): string {
-		switch (this.level) {
-			case LogLevel.DEBUG:
-				return "  DEBUG";
-			case LogLevel.INFO:
-				return "   INFO";
-			case LogLevel.WARNING:
-				return "WARNING";
-			case LogLevel.ERROR:
-				return "  ERROR";
-			default:
-				return "UNKNOWN";
-		}
-	}
 }
 
 export class Logger {
@@ -39,6 +18,10 @@ export class Logger {
 	private static instance: Logger | null = null;
 	private readonly messages: LogLine[] = [];
 
+	private readonly onMessageListeners: ((
+		status: LogLine | undefined
+	) => void)[] = [];
+
 	private constructor() {} // eslint-disable-line @typescript-eslint/no-empty-function
 
 	public static getInstance(): Logger {
@@ -49,18 +32,33 @@ export class Logger {
 	}
 
 	public debug(message: string): void {
+		if (process.env.NODE_ENV !== "production") {
+			console.debug(`${message}`);
+		}
 		this.pushMessage(message, LogLevel.DEBUG);
 	}
 
 	public info(message: string): void {
+		if (process.env.NODE_ENV !== "production") {
+			console.info(`${message}`);
+		}
+
 		this.pushMessage(message, LogLevel.INFO);
 	}
 
 	public warn(message: string): void {
+		if (process.env.NODE_ENV !== "production") {
+			console.warn(`${message}`);
+		}
+
 		this.pushMessage(message, LogLevel.WARNING);
 	}
 
 	public error(message: string): void {
+		if (process.env.NODE_ENV !== "production") {
+			console.error(`${message}`);
+		}
+
 		this.pushMessage(message, LogLevel.ERROR);
 		new Notice(message, 5000);
 	}
@@ -71,11 +69,25 @@ export class Logger {
 		);
 	}
 
+	public addOnMessageListener(
+		listener: (message: LogLine | undefined) => void
+	): void {
+		this.onMessageListeners.push(listener);
+	}
+
+	public reset(): void {
+		this.messages.length = 0;
+		this.onMessageListeners.forEach((listener) => listener(undefined));
+	}
+
 	private pushMessage(message: string, level: LogLevel): void {
-		console.log(`[${level}] ${message}`);
+		const logLine = new LogLine(level, message);
-		this.messages.push(new LogLine(level, message));
+		this.messages.push(logLine);
-		if (this.messages.length > Logger.MAX_MESSAGES) {
+
+		while (this.messages.length > Logger.MAX_MESSAGES) {
 			this.messages.shift();
 		}
+
+		this.onMessageListeners.forEach((listener) => listener(logLine));
 	}
 }

plugin/src/views/logs-view.ts

@@ -6,11 +6,10 @@ export class LogsView extends ItemView {
 	public static readonly TYPE = "logs-view";
 	public static readonly ICON = "logs";
 
-	private timer: NodeJS.Timer | null = null;
-
 	public constructor(leaf: WorkspaceLeaf) {
 		super(leaf);
 		this.icon = LogsView.ICON;
+		Logger.getInstance().addOnMessageListener(() => this.updateView());
 	}
 
 	public getViewType(): string {
@@ -22,15 +21,7 @@ export class LogsView extends ItemView {
 	}
 
 	public async onOpen(): Promise<void> {
-		// eslint-disable-next-line @typescript-eslint/no-misused-promises
+		await this.updateView();
-		this.timer = setInterval(async () => this.updateView(), 250);
-	}
-
-	public async onClose(): Promise<void> {
-		if (this.timer) {
-			clearInterval(this.timer);
-			this.timer = null;
-		}
 	}
 
 	private async updateView(): Promise<void> {
@@ -39,11 +30,22 @@ export class LogsView extends ItemView {
 
 		container.createEl("h4", { text: "VaultLink logs" });
 
-		const messages = Logger.getInstance()
+		Logger.getInstance()
 			.getMessages(LogLevel.DEBUG)
-			.map((message) => message.toString())
+			.forEach((message) => {
-			.join("\n");
+				const messageContainer = container.createDiv({
+					cls: ["log-message", message.level],
+				});
+				messageContainer.createEl("span", {
+					text: ` | ${LogsView.formatTimestamp(
+						message.timestamp
+					)} | `,
+				});
+				messageContainer.createEl("span", { text: message.message });
+			});
+	}
 
-		container.createEl("pre", { text: messages });
+	private static formatTimestamp(timestamp: Date): string {
+		return timestamp.toTimeString().split(" ")[0];
 	}
 }