add component

components/dashboard/src/components/PrebuildLogs.tsx

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

components/dashboard/src/start/WatchLogsView.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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, useEffect, useState } from "react";
+import EventEmitter from "events";
+import PrebuildLogs, { watchHeadlessLogs } from "../components/PrebuildLogs";
+import { StartPage } from "./StartPage";
+import WorkspaceLogs from "../components/WorkspaceLogs";
+import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
+import { PrebuildStatus } from "../projects/Prebuilds";
+
+function WatchLogsView(props: {
+    instanceId: string;
+    hasPrebuild?: boolean;
+    prebuild?: PrebuildWithStatus | undefined;
+}) {
+    const [logsEmitter] = useState(new EventEmitter());
+
+    useEffect(() => {
+        const disposables = watchHeadlessLogs(
+            props.instanceId,
+            (chunk) => logsEmitter.emit("logs", chunk),
+            async () => {
+                return false;
+            },
+        );
+        return function cleanup() {
+            disposables.dispose();
+        };
+    }, []);
+
+    return (
+        <StartPage title="Prebuild in Progress">
+            <Suspense fallback={<div />}>
+                {props.hasPrebuild ? (
+                    <PrebuildLogs workspaceId={props.instanceId} />
+                ) : (
+                    <WorkspaceLogs logsEmitter={logsEmitter} />
+                )}
+            </Suspense>
+            {props.hasPrebuild && (
+                <div className="flex">
+                    {props.prebuild && <PrebuildStatus prebuild={props.prebuild} />}
+                    <button
+                        className="mt-6 secondary"
+                        onClick={() => {
+                            // props.onIgnorePrebuild();
+                        }}
+                    >
+                        Skip Prebuild
+                    </button>
+                </div>
+            )}
+        </StartPage>
+    );
+}
+
+export default WatchLogsView;