[dashboard] When an image build fails, also print instance.status.conditions.failed in the build logs

Fixes #3693 (comment)

Author: jankeromnes

components/dashboard/src/start/StartWorkspace.tsx

@@ -252,7 +252,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       case "stopped":
         phase = StartPhase.Stopped;
         if (this.state.hasImageBuildLogs) {
-          return <ImageBuildView workspaceId={this.state.workspaceInstance.workspaceId} phase={phase} />;
+          return <ImageBuildView workspaceId={this.state.workspaceInstance.workspaceId} phase={phase} error={error} />;
         }
         if (!isHeadless && this.state.workspaceInstance.status.conditions.timeout) {
           title = 'Timed Out';
@@ -314,7 +314,7 @@ function PendingChangesDropdown(props: { workspaceInstance?: WorkspaceInstance }
   </ContextMenu>;
 }
 
-function ImageBuildView(props: { workspaceId: string, phase?: StartPhase }) {
+function ImageBuildView(props: { workspaceId: string, phase?: StartPhase, error?: StartWorkspaceError }) {
   const logsEmitter = new EventEmitter();
 
   useEffect(() => {
@@ -339,7 +339,7 @@ function ImageBuildView(props: { workspaceId: string, phase?: StartPhase }) {
 
   return <StartPage title="Building Image" phase={props.phase}>
     <Suspense fallback={<div />}>
-      <WorkspaceLogs logsEmitter={logsEmitter}/>
+      <WorkspaceLogs logsEmitter={logsEmitter} errorMessage={props.error?.message} />
     </Suspense>
   </StartPage>;
 }

components/dashboard/src/start/WorkspaceLogs.tsx

@@ -13,6 +13,7 @@ import { DisposableCollection } from '@gitpod/gitpod-protocol';
 
 export interface WorkspaceLogsProps {
   logsEmitter: EventEmitter;
+  errorMessage?: string;
 }
 
 export interface WorkspaceLogsState {
@@ -34,9 +35,7 @@ export default class WorkspaceLogs extends React.Component<WorkspaceLogsProps, W
     if (element === null) {
       return;
     }
-    const theme: ITheme = {
-      // background: '#F5F5F4',
-    };
+    const theme: ITheme = {};
     const options: ITerminalOptions = {
       cursorBlink: false,
       disableStdin: true,
@@ -71,6 +70,12 @@ export default class WorkspaceLogs extends React.Component<WorkspaceLogsProps, W
     });
   }
 
+  componentDidUpdate() {
+    if (this.terminal && this.props.errorMessage) {
+      this.terminal.write('\n' + this.props.errorMessage);
+    }
+  }
+
   componentWillUnmount() {
     this.toDispose.dispose();
   }