use logsview

components/dashboard/src/start/CreateWorkspace.tsx

@@ -5,7 +5,7 @@
  */
 
 import EventEmitter from "events";
-import React, { useEffect, Suspense, useContext, useState } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import {
     CreateWorkspaceMode,
     WorkspaceCreationResult,
@@ -22,12 +22,11 @@ import StartWorkspace, { parseProps } from "./StartWorkspace";
 import { openAuthorizeWindow } from "../provider-utils";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { SelectAccountModal } from "../settings/SelectAccountModal";
-import PrebuildLogs, { watchHeadlessLogs } from "../components/PrebuildLogs";
+import { watchHeadlessLogs } from "../components/PrebuildLogs";
 import CodeText from "../components/CodeText";
 import FeedbackComponent from "../feedback-form/FeedbackComponent";
 import { isGitpodIo } from "../utils";
-import { PrebuildStatus } from "../projects/Prebuilds";
-import IntermediatePrebuildStatus from "./IntermediatePrebuildStatus";
+import LogsView from "./LogsView";
 
 export interface CreateWorkspaceProps {
     contextUrl: string;
@@ -502,22 +501,13 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
     }, []);
 
     return (
-        <StartPage title="Prebuild in Progress">
-            <Suspense fallback={<div />}>
-                <PrebuildLogs workspaceId={props.runningPrebuild.workspaceID} />
-            </Suspense>
-            <div className="flex">
-                {prebuild && <PrebuildStatus prebuild={prebuild} />}
-                {!prebuild && props.runningPrebuild.starting && <IntermediatePrebuildStatus />}
-                <button
-                    className="mt-6 secondary"
-                    onClick={() => {
-                        props.onIgnorePrebuild();
-                    }}
-                >
-                    Skip Prebuild
-                </button>
-            </div>
-        </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

@@ -11,8 +11,8 @@ function IntermediatePrebuildStatus() {
         <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>;
+                    <img alt="" className="h-4 w-4" src={StatusRunning} />
+                    <span className="font-medium text-blue-500 uppercase">running</span>
                 </div>
             </div>
         </div>

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} />;
 }