WIP: Normalize prebuild logs view status

wip

fix

fix

something working

components/dashboard/src/components/PrebuildLogs.tsx

@@ -7,42 +7,60 @@
 import EventEmitter from "events";
 import React, { Suspense, useEffect, useState } from "react";
 import {
-    Workspace,
     WorkspaceInstance,
     DisposableCollection,
     WorkspaceImageBuild,
     HEADLESS_LOG_STREAM_STATUS_CODE_REGEX,
+    PrebuildWithStatus,
 } from "@gitpod/gitpod-protocol";
 import { getGitpodService } from "../service/service";
 
 const WorkspaceLogs = React.lazy(() => import("./WorkspaceLogs"));
 
 export interface PrebuildLogsProps {
+    prebuildId?: string;
+    projectId?: string;
     workspaceId?: string;
+    // Deprecated. InstanceUpdates are outside of the area of responsiblity for PrebuildLogs and should be handled by the parent component.
     onInstanceUpdate?: (instance: WorkspaceInstance) => void;
 }
 
 export default function PrebuildLogs(props: PrebuildLogsProps) {
-    const [workspace, setWorkspace] = useState<Workspace | undefined>();
     const [workspaceInstance, setWorkspaceInstance] = useState<WorkspaceInstance | undefined>();
     const [error, setError] = useState<Error | undefined>();
     const [logsEmitter] = useState(new EventEmitter());
+    const [prebuild, setPrebuild] = useState<PrebuildWithStatus | undefined>();
 
     useEffect(() => {
         const disposables = new DisposableCollection();
         setWorkspaceInstance(undefined);
         (async () => {
-            if (!props.workspaceId) {
+            if (!props.workspaceId || !props.prebuildId || !props.projectId) {
                 return;
             }
             try {
                 const info = await getGitpodService().server.getWorkspace(props.workspaceId);
                 if (info.latestInstance) {
-                    setWorkspace(info.workspace);
                     setWorkspaceInstance(info.latestInstance);
                 }
+
+                if (props.prebuildId && props.projectId) {
+                    const prebuilds = await getGitpodService().server.findPrebuilds({
+                        prebuildId: props.prebuildId,
+                        projectId: props.projectId,
+                    });
+                    setPrebuild(prebuilds[0]);
+                }
+
                 disposables.push(
                     getGitpodService().registerClient({
+                        onPrebuildUpdate(update: PrebuildWithStatus) {
+                            const projectID = update.info.projectId;
+                            const workspaceID = update.info.buildWorkspaceId;
+                            if (projectID === props.projectId && workspaceID === props.workspaceId) {
+                                setPrebuild(update);
+                            }
+                        },
                         onInstanceUpdate: (instance) => {
                             if (props.workspaceId === instance.workspaceId) {
                                 setWorkspaceInstance(instance);
@@ -69,6 +87,8 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
                             async () => workspaceInstance?.status.phase === "stopped",
                         ),
                     );
+                } else {
+                    await getGitpodService().server.watchWorkspaceImageBuildLogs(props.workspaceId);
                 }
             } catch (err) {
                 console.error(err);
@@ -78,22 +98,33 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
         return function cleanUp() {
             disposables.dispose();
         };
-    }, [props.workspaceId]);
+    }, [props.workspaceId, props.projectId, props.prebuildId]);
 
+    // Exists only due to usage of props.onInstanceUpdate.
     useEffect(() => {
         if (props.onInstanceUpdate && workspaceInstance) {
             props.onInstanceUpdate(workspaceInstance);
         }
-        switch (workspaceInstance?.status.phase) {
-            // Preparing means that we haven't actually started the workspace instance just yet, but rather
-            // are still preparing for launch. This means we're building the Docker image for the workspace.
-            case "preparing":
-            case "stopped":
-                getGitpodService().server.watchWorkspaceImageBuildLogs(workspace!.id);
-                break;
-        }
     }, [props.workspaceId, workspaceInstance?.status.phase]);
 
+    useEffect(() => {
+        if (!prebuild) {
+            return;
+        }
+
+        switch (prebuild.status) {
+            case "timeout":
+                setError(new Error(`Prebuild timed out: ${prebuild.error}`));
+                return;
+            case "failed":
+                setError(new Error(`Prebuild failed to execute tasks defined in gitpod.yml: ${prebuild.error}`));
+                return;
+            case "aborted":
+                setError(new Error(`Prebuild was aborted or rate limited: ${prebuild.error}`));
+                return;
+        }
+    }, [prebuild?.status]);
+
     return (
         <Suspense fallback={<div />}>
             <WorkspaceLogs classes="h-full w-full" logsEmitter={logsEmitter} errorMessage={error?.message} />

components/dashboard/src/projects/ConfigureProject.tsx

@@ -341,7 +341,12 @@ export default function () {
                 <div className="flex-1 h-96 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 flex flex-col">
                     <div className="flex-grow flex">
                         {startPrebuildResult ? (
-                            <PrebuildLogs workspaceId={startPrebuildResult.wsid} onInstanceUpdate={onInstanceUpdate} />
+                            <PrebuildLogs
+                                projectId={project?.id}
+                                prebuildId={startPrebuildResult.prebuildId}
+                                workspaceId={startPrebuildResult.wsid}
+                                onInstanceUpdate={onInstanceUpdate}
+                            />
                         ) : (
                             !prebuildWasTriggered && (
                                 <div className="flex-grow flex flex-col items-center justify-center">

components/dashboard/src/projects/Prebuild.tsx

@@ -162,6 +162,8 @@ export default function () {
                 <div className="rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-800 flex flex-col">
                     <div className="h-96 flex">
                         <PrebuildLogs
+                            prebuildId={prebuild?.info?.id}
+                            projectId={prebuild?.info?.projectId}
                             workspaceId={prebuild?.info?.buildWorkspaceId}
                             onInstanceUpdate={onInstanceUpdate}
                         />