Load logs from stream

coder · BrunoQuaresma · Jun 3, 2022 · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022
commit a9fb43c6c8b4c9e8b42cc5c89e2980749b9e7889
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -72,6 +72,7 @@
     "VMID",
     "weblinks",
     "webrtc",
+    "workspacebuilds",
     "xerrors",
     "xstate",
     "yamux"

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -270,3 +270,19 @@ export const getWorkspaceBuildLogs = async (buildname: string): Promise<TypesGen
   const response = await axios.get<TypesGen.ProvisionerJobLog[]>(`/api/v2/workspacebuilds/${buildname}/logs`)
   return response.data
 }
+
+export const streamWorkspaceBuildLogs = async (buildname: string): Promise<ReadableStreamDefaultReader<string>> => {
+  // Axios does not support HTTP stream in the browser
+  // https://github.com/axios/axios/issues/1474
+  // So we are going to use window.fetch and return a "stream" reader
+  const reader = await window.fetch(`/api/v2/workspacebuilds/${buildname}/logs?follow=true`).then((res) => {
+    if (!res.body) {
+      throw new Error("No body returned from the response")
+    }
+
+    // eslint-disable-next-line compat/compat
+    return res.body.pipeThrough(new TextDecoderStream()).getReader()
+  })
+
+  return reader
+}
diff --git a/site/src/xServices/workspaceBuild/workspaceBuildXService.ts b/site/src/xServices/workspaceBuild/workspaceBuildXService.ts
@@ -9,19 +9,28 @@ type LogsContext = {
   getBuildError?: Error | unknown
   // Logs
   logs?: ProvisionerJobLog[]
-  getBuildLogsError?: Error | unknown
 }
 
+type LogsEvent =
+  | {
+      type: "ADD_LOGS"
+      logs: ProvisionerJobLog[]
+    }
+  | {
+      type: "NO_MORE_LOGS"
+    }
+
 export const workspaceBuildMachine = createMachine(
   {
     id: "workspaceBuildState",
     schema: {
       context: {} as LogsContext,
+      events: {} as LogsEvent,
       services: {} as {
         getWorkspaceBuild: {
           data: WorkspaceBuild
         }
-        getWorkspaceBuildLogs: {
+        getLogs: {
           data: ProvisionerJobLog[]
         }
       },
@@ -50,25 +59,38 @@ export const workspaceBuildMachine = createMachine(
         },
       },
       logs: {
-        initial: "gettingLogs",
+        initial: "gettingExistentLogs",
         states: {
-          gettingLogs: {
-            entry: "clearGetBuildLogsError",
+          gettingExistentLogs: {
             invoke: {
-              src: "getWorkspaceBuildLogs",
+              id: "getLogs",
+              src: "getLogs",
               onDone: {
-                target: "idle",
-                actions: "assignLogs",
-              },
-              onError: {
-                target: "idle",
-                actions: "assignGetBuildLogsError",
+                actions: ["assignLogs"],
+                target: "watchingLogs",
               },
             },
           },
-          idle: {},
+          watchingLogs: {
+            id: "watchingLogs",
+            invoke: {
+              id: "streamWorkspaceBuildLogs",
+              src: "streamWorkspaceBuildLogs",
+            },
+          },
+        },
+        on: {
+          ADD_LOGS: {
+            actions: "addNewLogs",
+          },
+          NO_MORE_LOGS: {
+            target: "loaded",
+          },
         },
       },
+      loaded: {
+        type: "final",
+      },
     },
   },
   {
@@ -87,16 +109,35 @@ export const workspaceBuildMachine = createMachine(
       assignLogs: assign({
         logs: (_, event) => event.data,
       }),
-      assignGetBuildLogsError: assign({
-        getBuildLogsError: (_, event) => event.data,
-      }),
-      clearGetBuildLogsError: assign({
-        getBuildLogsError: (_) => undefined,
+      addNewLogs: assign({
+        logs: (context, event) => {
+          const previousLogs = context.logs ?? []
+          return [...previousLogs, ...event.logs]
+        },
       }),
     },
     services: {
       getWorkspaceBuild: (ctx) => API.getWorkspaceBuild(ctx.buildId),
-      getWorkspaceBuildLogs: (ctx) => API.getWorkspaceBuildLogs(ctx.buildId),
+      getLogs: async (ctx) => API.getWorkspaceBuildLogs(ctx.buildId),
+      streamWorkspaceBuildLogs: (ctx) => async (callback) => {
+        const reader = await API.streamWorkspaceBuildLogs(ctx.buildId)
+
+        // Watching for the stream
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const { value, done } = await reader.read()
+
+          if (done) {
+            callback("NO_MORE_LOGS")
+            break
+          }
+
+          if (value) {
+            const logs = value.split("\n").map((jsonString) => JSON.parse(jsonString) as ProvisionerJobLog)
+            callback({ type: "ADD_LOGS", logs })
+          }
+        }
+      },
     },
   },
 )