use prebuildlogs instead

components/dashboard/src/components/PrebuildLogs.tsx

@@ -19,7 +19,8 @@ import { getGitpodService } from "../service/service";
 const WorkspaceLogs = React.lazy(() => import("./WorkspaceLogs"));
 
 export interface PrebuildLogsProps {
-    workspaceId?: string;
+    workspaceId: string | undefined;
+    logsEmitter?: EventEmitter;
 }
 
 export default function PrebuildLogs(props: PrebuildLogsProps) {

components/dashboard/src/start/CreateWorkspace.tsx

@@ -5,12 +5,13 @@
  */
 
 import EventEmitter from "events";
-import React, { useEffect, Suspense, useContext, useState } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import {
     CreateWorkspaceMode,
     WorkspaceCreationResult,
     RunningWorkspacePrebuildStarting,
     ContextURL,
+    PrebuildWithStatus,
 } from "@gitpod/gitpod-protocol";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import Modal from "../components/Modal";
@@ -25,8 +26,7 @@ import { watchHeadlessLogs } from "../components/PrebuildLogs";
 import CodeText from "../components/CodeText";
 import FeedbackComponent from "../feedback-form/FeedbackComponent";
 import { isGitpodIo } from "../utils";
-
-const WorkspaceLogs = React.lazy(() => import("../components/WorkspaceLogs"));
+import LogsView from "./LogsView";
 
 export interface CreateWorkspaceProps {
     contextUrl: string;
@@ -462,6 +462,7 @@ interface RunningPrebuildViewProps {
 
 function RunningPrebuildView(props: RunningPrebuildViewProps) {
     const [logsEmitter] = useState(new EventEmitter());
+    const [prebuild, setPrebuild] = useState<PrebuildWithStatus | undefined>();
 
     useEffect(() => {
         const disposables = watchHeadlessLogs(
@@ -480,6 +481,12 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
                         props.onPrebuildSucceeded();
                     }
                 },
+                onPrebuildUpdate(update: PrebuildWithStatus) {
+                    console.log("we have prebuild update? ", update);
+                    if (update.info) {
+                        setPrebuild(update);
+                    }
+                },
             }),
         );
 
@@ -489,18 +496,13 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
     }, []);
 
     return (
-        <StartPage title="Prebuild in Progress">
-            <Suspense fallback={<div />}>
-                <WorkspaceLogs logsEmitter={logsEmitter} />
-            </Suspense>
-            <button
-                className="mt-6 secondary"
-                onClick={() => {
-                    props.onIgnorePrebuild();
-                }}
-            >
-                Don't Wait for Prebuild
-            </button>
-        </StartPage>
+        <LogsView
+            logsEmitter={logsEmitter}
+            workspaceId={props.runningPrebuild.workspaceID}
+            prebuild={prebuild}
+            onIgnorePrebuild={props.onIgnorePrebuild}
+            shouldRunPrebuild={true}
+            isIntermediate={props.runningPrebuild.starting === "running"}
+        />
     );
 }

components/dashboard/src/start/IntermediatePrebuildStatus.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import StatusRunning from "../icons/StatusRunning.svg";
+
+function IntermediatePrebuildStatus() {
+    return (
+        <div className="flex flex-col space-y-1 justify-center text-sm font-semibold">
+            <div>
+                <div className="flex space-x-1 items-center">
+                    <img alt="" className="h-4 w-4" src={StatusRunning} />
+                    <span className="font-medium text-blue-500 uppercase">running</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default IntermediatePrebuildStatus;

components/dashboard/src/start/LogsView.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { Suspense } from "react";
+import EventEmitter from "events";
+import PrebuildLogs from "../components/PrebuildLogs";
+import { StartPage } from "./StartPage";
+import WorkspaceLogs from "../components/WorkspaceLogs";
+import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
+import { PrebuildStatus } from "../projects/Prebuilds";
+import IntermediatePrebuildStatus from "./IntermediatePrebuildStatus";
+
+function LogsView(props: {
+    logsEmitter: EventEmitter;
+    workspaceId?: string;
+    shouldRunPrebuild?: boolean;
+    prebuild?: PrebuildWithStatus | undefined;
+    onIgnorePrebuild?: () => void;
+    isIntermediate?: boolean;
+}) {
+    return (
+        <StartPage title="Prebuild in Progress">
+            <Suspense fallback={<div />}>
+                {props.shouldRunPrebuild ? (
+                    <PrebuildLogs workspaceId={props.workspaceId} />
+                ) : (
+                    <WorkspaceLogs logsEmitter={props.logsEmitter} />
+                )}
+            </Suspense>
+            {props.shouldRunPrebuild && (
+                <div className="flex gap-4">
+                    {props.prebuild && <PrebuildStatus prebuild={props.prebuild} />}
+                    {!props.prebuild && props.isIntermediate && <IntermediatePrebuildStatus />}
+                    <button className="secondary" onClick={() => props.onIgnorePrebuild && props.onIgnorePrebuild()}>
+                        Skip Prebuild
+                    </button>
+                </div>
+            )}
+        </StartPage>
+    );
+}
+
+export default LogsView;

components/dashboard/src/start/StartWorkspace.tsx

@@ -29,6 +29,7 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { StartPage, StartPhase, StartWorkspaceError } from "./StartPage";
 import ConnectToSSHModal from "../workspaces/ConnectToSSHModal";
 import Alert from "../components/Alert";
+import LogsView from "./LogsView";
 const sessionId = v4();
 
 const WorkspaceLogs = React.lazy(() => import("../components/WorkspaceLogs"));
@@ -736,11 +737,5 @@ function HeadlessWorkspaceView(props: { instanceId: string }) {
         };
     }, []);
 
-    return (
-        <StartPage title="Prebuild in Progress">
-            <Suspense fallback={<div />}>
-                <WorkspaceLogs logsEmitter={logsEmitter} />
-            </Suspense>
-        </StartPage>
-    );
+    return <LogsView logsEmitter={logsEmitter} />;
 }