Merge pull request #96 from dockersamples/improve-startup-log-output

Improve log output in extension while starting a Labspace

Author: mikesir87

dd-extension/src/DockerContext.jsx

@@ -4,10 +4,12 @@ import {
   useState,
   useEffect,
   useCallback,
+  useMemo,
 } from "react";
 import Spinner from "react-bootstrap/Spinner";
 
 import { parse } from "yaml";
+import { LogProcessor } from "./logProcessor.js";
 
 const CATALOGS = [
   "https://raw.githubusercontent.com/dockersamples/awesome-labspaces/refs/heads/main/catalog.yaml",
@@ -30,6 +32,8 @@ export function DockerContextProvider({ children }) {
   const [launchLog, setLaunchLog] = useState("");
   const [forceRefreshCount, setForceRefreshCount] = useState(0);
 
+  const logProcessor = useMemo(() => new LogProcessor(), []);
+
   useEffect(() => {
     Promise.all(
       CATALOGS.map((url) =>
@@ -92,6 +96,7 @@ export function DockerContextProvider({ children }) {
   const startLabspace = useCallback(
     (location) => {
       console.log(`Starting Labspace with location ${location}`);
+      logProcessor.reset();
       setLaunchLog("");
       setStartingLabspace(location);
 
@@ -110,7 +115,13 @@ export function DockerContextProvider({ children }) {
           stream: {
             onOutput(data) {
               const newData = data.stdout ? data.stdout : data.stderr;
-              setLaunchLog((l) => l + newData);
+              let result;
+              newData.split("\n").forEach((line) => {
+                if (line.trim() === "") return;
+                
+                result = logProcessor.processLine(line.trim());
+              });
+              setLaunchLog(result);
             },
             onClose(exitCode) {
               setHasLabspace(true);

dd-extension/src/logProcessor.js

@@ -0,0 +1,41 @@
+export class LogProcessor {
+  constructor() {
+    this.lines = [];
+    this.identifierToLineMapping = new Map();
+
+    this.downloadPattern = /^(.+?)\s+(Pull|Download|Extracting)/;
+    this.resourceCreationPattern = /(Container|Volume)\s+([a-z0-9-]+)\s+/;
+  }
+
+  reset() {
+    this.lines = [];
+    this.identifierToLineMapping = new Map();
+  }
+
+  processLine(line) {
+    const downloadMatch = line.match(this.downloadPattern);
+      
+    if (downloadMatch) {
+        const identifier = downloadMatch[1].trim();
+
+        if (this.identifierToLineMapping.has(identifier)) {
+            this.lines[this.identifierToLineMapping.get(identifier)] = line;
+        } else {
+            this.identifierToLineMapping.set(identifier, this.lines.length);
+            this.lines.push(line);
+        }
+    } else if (this.resourceCreationPattern.test(line)) {
+        const identifier = line.match(this.resourceCreationPattern)[2];
+        if (this.identifierToLineMapping.has(identifier)) {
+            this.lines[this.identifierToLineMapping.get(identifier)] = line;
+        } else {
+            this.identifierToLineMapping.set(identifier, this.lines.length);
+            this.lines.push(line);
+        }
+    } else {
+        this.lines.push(line);
+    }
+
+    return this.lines.join("\n");
+  }
+}