Fix hanging "Prebuild in Progress" page

components/dashboard/src/start/CreateWorkspace.tsx

@@ -461,40 +461,29 @@ interface RunningPrebuildViewProps {
 }
 
 function RunningPrebuildView(props: RunningPrebuildViewProps) {
-    const logsEmitter = new EventEmitter();
-    let pollTimeout: NodeJS.Timeout | undefined;
-    let prebuildDoneTriggered: boolean = false;
+    const [logsEmitter] = useState(new EventEmitter());
 
     useEffect(() => {
-        const checkIsPrebuildDone = async (): Promise<boolean> => {
-            if (prebuildDoneTriggered) {
-                console.debug("prebuild done already triggered, doing nothing");
-                return true;
-            }
-
-            const done = await getGitpodService().server.isPrebuildDone(props.runningPrebuild.prebuildID);
-            if (done) {
-                // note: this treats "done" as "available" which is not equivalent.
-                // This works because the backend ignores prebuilds which are not "available", and happily starts a workspace as if there was no prebuild at all.
-                prebuildDoneTriggered = true;
-                props.onPrebuildSucceeded();
-                return true;
-            }
-            return false;
-        };
-        const pollIsPrebuildDone = async () => {
-            clearTimeout(pollTimeout!);
-            await checkIsPrebuildDone();
-            pollTimeout = setTimeout(pollIsPrebuildDone, 10000);
-        };
-
         const disposables = watchHeadlessLogs(
             props.runningPrebuild.instanceID,
             (chunk) => logsEmitter.emit("logs", chunk),
-            checkIsPrebuildDone,
+            async () => false,
         );
+
+        disposables.push(
+            getGitpodService().registerClient({
+                onInstanceUpdate: (update) => {
+                    if (update.workspaceId !== props.runningPrebuild.workspaceID) {
+                        return;
+                    }
+                    if (update.status.phase === "stopped") {
+                        props.onPrebuildSucceeded();
+                    }
+                },
+            }),
+        );
+
         return function cleanup() {
-            clearTimeout(pollTimeout!);
             disposables.dispose();
         };
     }, []);
@@ -507,7 +496,6 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
             <button
                 className="mt-6 secondary"
                 onClick={() => {
-                    clearTimeout(pollTimeout!);
                     props.onIgnorePrebuild();
                 }}
             >

components/dashboard/src/start/StartWorkspace.tsx

@@ -19,7 +19,7 @@ import { IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import EventEmitter from "events";
 import * as queryString from "query-string";
-import React, { Suspense, useEffect } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { v4 } from "uuid";
 import Arrow from "../components/Arrow";
 import ContextMenu from "../components/ContextMenu";
@@ -131,7 +131,13 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
         }
 
         try {
-            this.toDispose.push(getGitpodService().registerClient(this));
+            this.toDispose.push(
+                getGitpodService().registerClient({
+                    notifyDidOpenConnection: () => this.fetchWorkspaceInfo(undefined),
+                    onInstanceUpdate: (workspaceInstance: WorkspaceInstance) =>
+                        this.onInstanceUpdate(workspaceInstance),
+                }),
+            );
         } catch (error) {
             console.error(error);
             this.setState({ error });
@@ -297,10 +303,6 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
         this.setState({ ideOptions });
     }
 
-    notifyDidOpenConnection() {
-        this.fetchWorkspaceInfo(undefined);
-    }
-
     async onInstanceUpdate(workspaceInstance: WorkspaceInstance) {
         if (workspaceInstance.workspaceId !== this.props.workspaceId) {
             return;
@@ -661,19 +663,20 @@ interface ImageBuildViewProps {
 }
 
 function ImageBuildView(props: ImageBuildViewProps) {
-    const logsEmitter = new EventEmitter();
+    const [logsEmitter] = useState(new EventEmitter());
 
     useEffect(() => {
         let registered = false;
         const watchBuild = () => {
             if (registered) {
                 return;
             }
+            registered = true;
 
             getGitpodService()
                 .server.watchWorkspaceImageBuildLogs(props.workspaceId)
-                .then(() => (registered = true))
                 .catch((err) => {
+                    registered = false;
                     if (err?.code === ErrorCodes.HEADLESS_LOG_NOT_YET_AVAILABLE) {
                         // wait, and then retry
                         setTimeout(watchBuild, 5000);
@@ -718,7 +721,7 @@ function ImageBuildView(props: ImageBuildViewProps) {
 }
 
 function HeadlessWorkspaceView(props: { instanceId: string }) {
-    const logsEmitter = new EventEmitter();
+    const [logsEmitter] = useState(new EventEmitter());
 
     useEffect(() => {
         const disposables = watchHeadlessLogs(

components/gitpod-protocol/src/protocol.ts

@@ -754,7 +754,9 @@ export interface PrebuiltWorkspace {
 
 export namespace PrebuiltWorkspace {
     export function isDone(pws: PrebuiltWorkspace) {
-        return pws.state === "available" || pws.state === "timeout" || pws.state === "aborted";
+        return (
+            pws.state === "available" || pws.state === "timeout" || pws.state === "aborted" || pws.state === "failed"
+        );
     }
 
     export function isAvailable(pws: PrebuiltWorkspace) {