[server, dashboard] Use workspace log endpoint in frontend

geropl · geropl · commit 71cc5eb8c3da · 2021-06-23T13:53:30.000+02:00
diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -16,6 +16,7 @@ import StartWorkspace from "./StartWorkspace";
 import { openAuthorizeWindow } from "../provider-utils";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { SelectAccountModal } from "../settings/SelectAccountModal";
+import { watchHeadlessLogs } from "./WorkspaceLogs";
 
 const WorkspaceLogs = React.lazy(() => import('./WorkspaceLogs'));
 
@@ -68,27 +69,27 @@ export default class CreateWorkspace extends React.Component<CreateWorkspaceProp
 
   async tryAuthorize(host: string, scopes?: string[]) {
     try {
-        await openAuthorizeWindow({
-            host,
-            scopes,
-            onSuccess: () => {
-              window.location.reload();
-            },
-            onError: (error) => {
-                if (typeof error === "string") {
-                    try {
-                        const payload = JSON.parse(error);
-                        if (SelectAccountPayload.is(payload)) {
-                          this.setState({ selectAccountError: payload });
-                        }
-                    } catch (error) {
-                        console.log(error);
-                    }
-                }
+      await openAuthorizeWindow({
+        host,
+        scopes,
+        onSuccess: () => {
+          window.location.reload();
+        },
+        onError: (error) => {
+          if (typeof error === "string") {
+            try {
+              const payload = JSON.parse(error);
+              if (SelectAccountPayload.is(payload)) {
+                this.setState({ selectAccountError: payload });
+              }
+            } catch (error) {
+              console.log(error);
             }
-        });
+          }
+        }
+      });
     } catch (error) {
-        console.log(error)
+      console.log(error)
     }
   };
 
@@ -100,7 +101,7 @@ export default class CreateWorkspace extends React.Component<CreateWorkspaceProp
             window.location.href = gitpodHostUrl.asAccessControl().toString();
           }} />
         </div>
-    </StartPage>);
+      </StartPage>);
     }
 
     let phase = StartPhase.Checking;
@@ -130,19 +131,19 @@ export default class CreateWorkspace extends React.Component<CreateWorkspaceProp
           // HACK: Hide the error (behind the modal)
           error = undefined;
           phase = StartPhase.Stopped;
-          statusMessage = <LimitReachedPrivateRepoModal/>;
+          statusMessage = <LimitReachedPrivateRepoModal />;
           break;
         case ErrorCodes.TOO_MANY_RUNNING_WORKSPACES:
           // HACK: Hide the error (behind the modal)
           error = undefined;
           phase = StartPhase.Stopped;
-          statusMessage = <LimitReachedParallelWorkspacesModal/>;
+          statusMessage = <LimitReachedParallelWorkspacesModal />;
           break;
         case ErrorCodes.NOT_ENOUGH_CREDIT:
           // HACK: Hide the error (behind the modal)
           error = undefined;
           phase = StartPhase.Stopped;
-          statusMessage = <LimitReachedOutOfHours/>;
+          statusMessage = <LimitReachedOutOfHours />;
           break;
         default:
           statusMessage = <p className="text-base text-gitpod-red w-96">Unknown Error: {JSON.stringify(this.state?.error, null, 2)}</p>;
@@ -156,7 +157,7 @@ export default class CreateWorkspace extends React.Component<CreateWorkspaceProp
     }
 
     else if (result?.existingWorkspaces) {
-      statusMessage = <Modal visible={true} closeable={false} onClose={()=>{}}>
+      statusMessage = <Modal visible={true} closeable={false} onClose={() => { }}>
         <h3>Running Workspaces</h3>
         <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
           <p className="mt-1 mb-2 text-base">You already have running workspaces with the same context. You can open an existing one or open a new workspace.</p>
@@ -203,7 +204,7 @@ export default class CreateWorkspace extends React.Component<CreateWorkspaceProp
 
 function LimitReachedModal(p: { children: React.ReactNode }) {
   const { user } = useContext(UserContext);
-  return <Modal visible={true} closeable={false} onClose={()=>{}}>
+  return <Modal visible={true} closeable={false} onClose={() => { }}>
     <h3 className="flex">
       <span className="flex-grow">Limit Reached</span>
       <img className="rounded-full w-8 h-8" src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
@@ -237,7 +238,7 @@ function LimitReachedOutOfHours() {
 }
 
 function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
-  const [ statusMessage, setStatusMessage ] = useState<React.ReactNode>();
+  const [statusMessage, setStatusMessage] = useState<React.ReactNode>();
   useEffect(() => {
     (async () => {
       const service = getGitpodService();
@@ -250,7 +251,7 @@ function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
       console.log('lastUpdate', lastUpdate);
 
       if ((await service.server.mayAccessPrivateRepo()) === false) {
-        setStatusMessage(<LimitReachedPrivateRepoModal/>);
+        setStatusMessage(<LimitReachedPrivateRepoModal />);
         return;
       }
 
@@ -317,6 +318,7 @@ interface RunningPrebuildViewProps {
   runningPrebuild: {
     prebuildID: string
     workspaceID: string
+    instanceID: string
     starting: RunningWorkspacePrebuildStarting
     sameCluster: boolean
   };
@@ -339,25 +341,11 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
       }
       pollTimeout = setTimeout(pollIsPrebuildDone, 10000);
     };
-    const watchPrebuild = () => {
-      service.server.watchHeadlessWorkspaceLogs(props.runningPrebuild.workspaceID);
-      pollIsPrebuildDone();
-    };
-    watchPrebuild();
-
-    const toDispose = service.registerClient({
-      notifyDidOpenConnection: () => watchPrebuild(),
-      onHeadlessWorkspaceLogs: event => {
-        if (event.workspaceID !== props.runningPrebuild.workspaceID) {
-          return;
-        }
-        logsEmitter.emit('logs', event.text);
-      },
-    });
 
+    const disposables = watchHeadlessLogs(service.server, props.runningPrebuild.instanceID, (chunk) => logsEmitter.emit('logs', chunk), pollIsPrebuildDone);
     return function cleanup() {
       clearTimeout(pollTimeout!);
-      toDispose.dispose();
+      disposables.dispose();
     };
   }, []);
 
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
@@ -7,11 +7,11 @@
 import EventEmitter from "events";
 import React, { useEffect, Suspense } from "react";
 import { DisposableCollection, WorkspaceInstance, WorkspaceImageBuild, Workspace, WithPrebuild } from "@gitpod/gitpod-protocol";
-import { HeadlessLogEvent } from "@gitpod/gitpod-protocol/lib/headless-workspace-log";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import PendingChangesDropdown from "../components/PendingChangesDropdown";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { StartPage, StartPhase, StartWorkspaceError } from "./StartPage";
+import { watchHeadlessLogs } from "./WorkspaceLogs";
 
 const WorkspaceLogs = React.lazy(() => import('./WorkspaceLogs'));
 
@@ -230,7 +230,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       // or as a headless workspace.
       case "running":
         if (isHeadless) {
-          return <HeadlessWorkspaceView workspaceId={this.state.workspaceInstance.workspaceId} />;
+          return <HeadlessWorkspaceView instanceId={this.state.workspaceInstance.id} />;
         }
         phase = StartPhase.Running;
         statusMessage = <p className="text-base text-gray-400">Opening IDE …</p>;
@@ -246,7 +246,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       // Stopping means that the workspace is currently shutting down. It could go to stopped every moment.
       case "stopping":
         if (isHeadless) {
-          return <HeadlessWorkspaceView workspaceId={this.state.workspaceInstance.workspaceId} />;
+          return <HeadlessWorkspaceView instanceId={this.state.workspaceInstance.id} />;
         }
         phase = StartPhase.Stopping;
         statusMessage = <div>
@@ -337,23 +337,14 @@ function ImageBuildView(props: ImageBuildViewProps) {
   </StartPage>;
 }
 
-function HeadlessWorkspaceView(props: { workspaceId: string }) {
+function HeadlessWorkspaceView(props: { instanceId: string }) {
   const logsEmitter = new EventEmitter();
 
   useEffect(() => {
     const service = getGitpodService();
-    const watchHeadlessWorkspace = () => service.server.watchHeadlessWorkspaceLogs(props.workspaceId);;
-    watchHeadlessWorkspace();
-
-    const toDispose = service.registerClient({
-      notifyDidOpenConnection: () => watchHeadlessWorkspace(),
-      onHeadlessWorkspaceLogs(event: HeadlessLogEvent): void {
-        logsEmitter.emit('logs', event.text);
-      },
-    });
-
+    const disposables = watchHeadlessLogs(service.server, props.instanceId, (chunk) => logsEmitter.emit('logs', chunk), () => {});
     return function cleanup() {
-      toDispose.dispose();
+      disposables.dispose();
     };
   }, []);
 
diff --git a/components/dashboard/src/start/WorkspaceLogs.tsx b/components/dashboard/src/start/WorkspaceLogs.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { Terminal, ITerminalOptions, ITheme } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit'
 import 'xterm/css/xterm.css';
-import { DisposableCollection } from '@gitpod/gitpod-protocol';
+import { DisposableCollection, GitpodServer, HEADLESS_LOG_STREAM_STATUS_CODE_REGEX } from '@gitpod/gitpod-protocol';
 
 export interface WorkspaceLogsProps {
   logsEmitter: EventEmitter;
@@ -85,4 +85,83 @@ export default class WorkspaceLogs extends React.Component<WorkspaceLogsProps, W
       <div className="h-full w-full" ref={this.xTermParentRef}></div>
     </div>;
   }
+}
+
+export function watchHeadlessLogs(server: GitpodServer, instanceId: string, onLog: (chunk: string) => void, checkIsDone: () => Promise<void> | void): DisposableCollection {
+  const disposables = new DisposableCollection();
+
+  const startWatchingLogs = async () => {
+    await checkIsDone();
+
+    const retry = async (reason: string, err?: Error) => {
+      console.debug("re-trying headless-logs because: " + reason, err);
+      await new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+      startWatchingLogs().catch(console.error);
+    };
+
+    let response: Response | undefined = undefined;
+    let reader: ReadableStreamDefaultReader<Uint8Array> | undefined = undefined;
+    try {
+      const logSources = await server.getHeadlessLog(instanceId);
+      // TODO(gpl) Only listening on first stream for now
+      const streamIds = Object.keys(logSources.streams);
+      if (streamIds.length < 1) {
+        await retry("no streams");
+        return;
+      }
+
+      const streamUrl = logSources.streams[streamIds[0]];
+      console.log("fetching from streamUrl: " + streamUrl);
+      response = await fetch(streamUrl, {
+        method: 'GET',
+        cache: 'no-cache',
+        credentials: 'include',
+        keepalive: true,
+        headers: {
+          'TE': 'trailers', // necessary to receive stream status code
+        },
+      });
+      reader = response.body?.getReader();
+      if (!reader) {
+        await retry("no reader");
+        return;
+      }
+      disposables.push({ dispose: () => reader?.cancel() });
+
+      const decoder = new TextDecoder('utf-8');
+      let chunk = await reader.read();
+      while (!chunk.done) {
+        const msg = decoder.decode(chunk.value, { stream: true });
+
+        // In an ideal world, we'd use res.addTrailers()/response.trailer here. But despite being introduced with HTTP/1.1 in 1999, trailers are not supported by popular proxies (nginx, for example).
+        // So we resort to this hand-written solution:
+        const matches = msg.match(HEADLESS_LOG_STREAM_STATUS_CODE_REGEX);
+        if (matches) {
+          if (matches.length < 2) {
+            console.debug("error parsing log stream status code. msg: " + msg);
+          } else {
+            const streamStatusCode = matches[1];
+            if (streamStatusCode !== "200") {
+              throw new Error("received status code: " + streamStatusCode);
+            }
+          }
+        } else {
+          onLog(msg);
+        }
+
+        chunk = await reader.read();
+      }
+      reader.cancel()
+
+      await checkIsDone();
+    } catch(err) {
+      reader?.cancel().catch(console.debug);
+      await retry("error while listening to stream", err);
+    }
+  };
+  startWatchingLogs().catch(console.error);
+
+  return disposables;
 }
