From 696d1e686aedd2886dc62e21a60ee615e2a9fa0d Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Sun, 10 Nov 2024 22:12:23 -0800
Subject: [PATCH] dashboard: make log display more resilient

---
 .../src/pocketbase-client/PocketbaseClient.ts |  6 +++---
 .../[instanceId]/logs/LoggingInner.svelte     | 20 ++++++++++++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts b/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts
index e0e6aa44..cb0b830d 100644
--- a/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts
+++ b/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts
@@ -14,10 +14,10 @@ import {
   type DeleteInstanceResult,
   type InstanceFields,
   type InstanceId,
-  type InstanceLogFields,
   PocketBase,
   RestCommands,
   RestMethods,
+  type UntrustedInstanceLogFields,
   type UpdateInstancePayload,
   UpdateInstancePayloadSchema,
   type UpdateInstanceResult,
@@ -245,7 +245,7 @@ export const createPocketbaseClient = (config: PocketbaseClientConfig) => {
 
   const watchInstanceLog = (
     instance: InstanceFields,
-    update: (log: InstanceLogFields) => void,
+    update: (log: UntrustedInstanceLogFields) => void,
     nInitial = 100,
   ): (() => void) => {
     const auth = client.authStore.exportToCookie()
@@ -269,7 +269,7 @@ export const createPocketbaseClient = (config: PocketbaseClientConfig) => {
         }),
         onmessage: (event) => {
           const {} = event
-          const log = JSON.parse(event.data) as InstanceLogFields
+          const log = JSON.parse(event.data) as UntrustedInstanceLogFields
 
           update(log)
         },
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/logs/LoggingInner.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/logs/LoggingInner.svelte
index dd49074e..932fc8ab 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/logs/LoggingInner.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/logs/LoggingInner.svelte
@@ -30,9 +30,11 @@
   // This will take in the log message and return either the message or a string
   const logText = (log: any) => {
     try {
-      return JSON.parse(log.message)
+      const parsed = JSON.parse(log.message)
+      // Split on newlines and join with <br> tags
+      return parsed.split('\n').join('<br>')
     } catch (e) {
-      return log.message
+      return log.message.split('\n').join('<br>')
     }
   }
 
@@ -80,7 +82,15 @@
       logs.set([])
       unwatch = client().watchInstanceLog($instance, (newLog) => {
         logs.update((currentLogs) => {
-          return [...currentLogs, newLog]
+          return [
+            ...currentLogs,
+            {
+              time: `<no time>`,
+              stream: StreamNames.StdOut,
+              message: `<no message>`,
+              ...newLog,
+            },
+          ]
         })
       })
     })
@@ -119,7 +129,7 @@
           <div>
             <span class="mr-1 text-accent">{log.time}</span>
             <span class="mr-1 text-base-content {logColor(log.stream)}"
-              >{logText(log)}</span
+              >{@html logText(log)}</span
             >
           </div>
         </div>
@@ -149,7 +159,7 @@
           <span class="mr-1 text-accent">{log.time}</span>
 
           <span class="mr-1 text-base-content {logColor(log.stream)}"
-            >{logText(log)}</span
+            >{@html logText(log)}</span
           >
         </div>
       </div>