[dashboard] support supervisor frontend server

mustard-mh · jeanp413 · roboquat · commit 659889f09acc · 2023-01-16T15:52:24.000+01:00
Co-authored-by: mustard &lt;mhqnwt@gmail.com&gt;
Co-authored-by: Jean Pierre &lt;jeanp413@hotmail.com&gt;
diff --git a/components/dashboard/src/service/service.tsx b/components/dashboard/src/service/service.tsx
@@ -5,32 +5,24 @@
  */
 
 import {
+    Emitter,
     GitpodClient,
     GitpodServer,
     GitpodServerPath,
     GitpodService,
     GitpodServiceImpl,
+    User,
+    WorkspaceInfo,
 } from "@gitpod/gitpod-protocol";
 import { WebSocketConnectionProvider } from "@gitpod/gitpod-protocol/lib/messaging/browser/connection";
-import { createWindowMessageConnection } from "@gitpod/gitpod-protocol/lib/messaging/browser/window-connection";
-import { JsonRpcProxyFactory } from "@gitpod/gitpod-protocol/lib/messaging/proxy-factory";
 import { GitpodHostUrl } from "@gitpod/gitpod-protocol/lib/util/gitpod-host-url";
 import { log } from "@gitpod/gitpod-protocol/lib/util/logging";
+import { IDEFrontendDashboardService } from "@gitpod/gitpod-protocol/lib/frontend-dashboard-service";
+import { RemoteTrackMessage } from "@gitpod/gitpod-protocol/lib/analytics";
 
 export const gitpodHostUrl = new GitpodHostUrl(window.location.toString());
 
 function createGitpodService<C extends GitpodClient, S extends GitpodServer>() {
-    if (window.top !== window.self && process.env.NODE_ENV === "production") {
-        const connection = createWindowMessageConnection("gitpodServer", window.parent, "*");
-        const factory = new JsonRpcProxyFactory<S>();
-        const proxy = factory.createProxy();
-        factory.listen(connection);
-        return new GitpodServiceImpl<C, S>(proxy, {
-            onReconnect: async () => {
-                await connection.sendRequest("$reconnectServer");
-            },
-        });
-    }
     let host = gitpodHostUrl.asWebsocket().with({ pathname: GitpodServerPath }).withApi();
 
     const connectionProvider = new WebSocketConnectionProvider();
@@ -53,7 +45,7 @@ function createGitpodService<C extends GitpodClient, S extends GitpodServer>() {
     return new GitpodServiceImpl<C, S>(proxy, { onReconnect });
 }
 
-function getGitpodService(): GitpodService {
+export function getGitpodService(): GitpodService {
     const w = window as any;
     const _gp = w._gp || (w._gp = {});
     if (window.location.search.includes("service=mock")) {
@@ -64,4 +56,143 @@ function getGitpodService(): GitpodService {
     return service;
 }
 
-export { getGitpodService };
+let ideFrontendService: IDEFrontendService | undefined;
+export function getIDEFrontendService(workspaceID: string, sessionId: string, service: GitpodService) {
+    if (!ideFrontendService) {
+        ideFrontendService = new IDEFrontendService(workspaceID, sessionId, service, window.parent);
+    }
+    return ideFrontendService;
+}
+
+export class IDEFrontendService implements IDEFrontendDashboardService.IServer {
+    private instanceID: string | undefined;
+    private ideUrl: URL | undefined;
+    private user: User | undefined;
+
+    private latestStatus?: IDEFrontendDashboardService.Status;
+
+    private readonly onDidChangeEmitter = new Emitter<IDEFrontendDashboardService.SetStateData>();
+    readonly onSetState = this.onDidChangeEmitter.event;
+
+    constructor(
+        private workspaceID: string,
+        private sessionId: string,
+        private service: GitpodService,
+        private clientWindow: Window,
+    ) {
+        this.processServerInfo();
+        window.addEventListener("message", (event: MessageEvent) => {
+            if (event.origin !== this.ideUrl?.origin) {
+                return;
+            }
+
+            if (IDEFrontendDashboardService.isTrackEventData(event.data)) {
+                this.trackEvent(event.data.msg);
+            }
+            if (IDEFrontendDashboardService.isHeartbeatEventData(event.data)) {
+                this.activeHeartbeat();
+            }
+            if (IDEFrontendDashboardService.isSetStateEventData(event.data)) {
+                this.onDidChangeEmitter.fire(event.data.state);
+            }
+        });
+        window.addEventListener("unload", () => {
+            if (!this.instanceID) {
+                return;
+            }
+            // send last heartbeat (wasClosed: true)
+            const data = { sessionId: this.sessionId };
+            const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
+            const gitpodHostUrl = new GitpodHostUrl(new URL(window.location.toString()));
+            const url = gitpodHostUrl.withApi({ pathname: `/auth/workspacePageClose/${this.instanceID}` }).toString();
+            navigator.sendBeacon(url, blob);
+        });
+    }
+
+    private async processServerInfo() {
+        this.user = await this.service.server.getLoggedInUser();
+        const workspace = await this.service.server.getWorkspace(this.workspaceID);
+        this.instanceID = workspace.latestInstance?.id;
+        if (this.instanceID) {
+            this.auth();
+        }
+
+        const listener = await this.service.listenToInstance(this.workspaceID);
+        listener.onDidChange(() => {
+            this.ideUrl = listener.info.latestInstance?.ideUrl
+                ? new URL(listener.info.latestInstance?.ideUrl)
+                : undefined;
+            const status = this.getWorkspaceStatus(listener.info);
+            this.latestStatus = status;
+            this.sendStatusUpdate(this.latestStatus);
+            if (this.instanceID !== status.instanceId) {
+                this.instanceID = status.instanceId;
+                this.auth();
+            }
+        });
+    }
+
+    getWorkspaceStatus(workspace: WorkspaceInfo): IDEFrontendDashboardService.Status {
+        return {
+            loggedUserId: this.user!.id,
+            workspaceID: this.workspaceID,
+            instanceId: workspace.latestInstance?.id,
+            ideUrl: workspace.latestInstance?.ideUrl,
+            statusPhase: workspace.latestInstance?.status.phase,
+            workspaceDescription: workspace.workspace.description,
+            workspaceType: workspace.workspace.type,
+        };
+    }
+
+    // implements
+
+    async auth() {
+        if (!this.instanceID) {
+            return;
+        }
+        const url = gitpodHostUrl.asWorkspaceAuth(this.instanceID).toString();
+        await fetch(url, {
+            credentials: "include",
+        });
+    }
+
+    trackEvent(msg: RemoteTrackMessage): void {
+        msg.properties = {
+            ...msg.properties,
+            sessionId: this.sessionId,
+            instanceId: this.latestStatus?.instanceId,
+            workspaceId: this.workspaceID,
+            type: this.latestStatus?.workspaceType,
+        };
+        this.service.server.trackEvent(msg);
+    }
+
+    activeHeartbeat(): void {
+        if (this.instanceID) {
+            this.service.server.sendHeartBeat({ instanceId: this.instanceID });
+        }
+    }
+
+    sendStatusUpdate(status: IDEFrontendDashboardService.Status): void {
+        if (!this.ideUrl) {
+            return;
+        }
+        this.clientWindow.postMessage(
+            {
+                type: "ide-status-update",
+                status,
+            } as IDEFrontendDashboardService.StatusUpdateEventData,
+            this.ideUrl.origin,
+        );
+    }
+
+    relocate(url: string): void {
+        if (!this.ideUrl) {
+            return;
+        }
+        this.clientWindow.postMessage(
+            { type: "ide-relocate", url } as IDEFrontendDashboardService.RelocateEventData,
+            this.ideUrl.origin,
+        );
+    }
+}
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
@@ -25,7 +25,7 @@ import Arrow from "../components/Arrow";
 import ContextMenu from "../components/ContextMenu";
 import PendingChangesDropdown from "../components/PendingChangesDropdown";
 import PrebuildLogs from "../components/PrebuildLogs";
-import { getGitpodService, gitpodHostUrl } from "../service/service";
+import { getGitpodService, gitpodHostUrl, getIDEFrontendService, IDEFrontendService } from "../service/service";
 import { StartPage, StartPhase, StartWorkspaceError } from "./StartPage";
 import ConnectToSSHModal from "../workspaces/ConnectToSSHModal";
 import Alert from "../components/Alert";
@@ -103,6 +103,8 @@ export interface StartWorkspaceState {
 export default class StartWorkspace extends React.Component<StartWorkspaceProps, StartWorkspaceState> {
     static contextType = FeatureFlagContext;
 
+    private ideFrontendService: IDEFrontendService | undefined;
+
     constructor(props: StartWorkspaceProps) {
         super(props);
         this.state = {};
@@ -111,6 +113,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
     private readonly toDispose = new DisposableCollection();
     componentWillMount() {
         if (this.props.runsInIFrame) {
+            // TODO(hw): delete after supervisor deploy
             window.parent.postMessage({ type: "$setSessionId", sessionId }, "*");
             const setStateEventListener = (event: MessageEvent) => {
                 if (
@@ -140,6 +143,23 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
             this.toDispose.push({
                 dispose: () => window.removeEventListener("message", setStateEventListener),
             });
+            // TODO(hw): end of delete
+
+            this.ideFrontendService = getIDEFrontendService(this.props.workspaceId, sessionId, getGitpodService());
+            this.toDispose.push(
+                this.ideFrontendService.onSetState((data) => {
+                    if (data.ideFrontendFailureCause) {
+                        const error = { message: data.ideFrontendFailureCause };
+                        this.setState({ error });
+                    }
+                    if (data.desktopIDE?.link) {
+                        const label = data.desktopIDE.label || "Open Desktop IDE";
+                        const clientID = data.desktopIDE.clientID;
+                        const link = data.desktopIDE?.link;
+                        this.setState({ desktopIde: { link, label, clientID } });
+                    }
+                }),
+            );
         }
 
         try {
@@ -354,7 +374,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
             return;
         }
 
-        if (workspaceInstance.status.phase === "building" || workspaceInstance.status.phase == "preparing") {
+        if (workspaceInstance.status.phase === "building" || workspaceInstance.status.phase === "preparing") {
             this.setState({ hasImageBuildLogs: true });
         }
 
@@ -428,7 +448,10 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
 
     redirectTo(url: string) {
         if (this.props.runsInIFrame) {
+            // TODO(hw): delete after supervisor deploy
             window.parent.postMessage({ type: "relocate", url }, "*");
+            // TODO(hw): end of delete
+            this.ideFrontendService?.relocate(url);
         } else {
             window.location.href = url;
         }
diff --git a/components/gitpod-protocol/src/frontend-dashboard-service.ts b/components/gitpod-protocol/src/frontend-dashboard-service.ts
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023 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 { WorkspaceInstancePhase } from "./workspace-instance";
+import { RemoteTrackMessage } from "./analytics";
+import { Event } from "./util/event";
+
+export namespace IDEFrontendDashboardService {
+    /**
+     * IClient is the client side which is using in supervisor frontend
+     */
+    export interface IClient extends IClientOn, IClientSend {}
+    interface IClientOn {
+        onStatusUpdate: Event<Status>;
+        relocate(url: string): void;
+    }
+    interface IClientSend {
+        trackEvent(msg: RemoteTrackMessage): void;
+        activeHeartbeat(): void;
+        setState(state: SetStateData): void;
+    }
+
+    /**
+     * IServer is the server side which is using in dashboard loading screen
+     */
+    export interface IServer extends IServerOn, IServerSend {
+        auth(): Promise<void>;
+    }
+    interface IServerOn {
+        onSetState: Event<SetStateData>;
+        trackEvent(msg: RemoteTrackMessage): void;
+        activeHeartbeat(): void;
+    }
+    interface IServerSend {
+        sendStatusUpdate(status: Status): void;
+        relocate(url: string): void;
+    }
+
+    export interface Status {
+        workspaceID: string;
+        loggedUserId: string;
+
+        instanceId?: string;
+        ideUrl?: string;
+        statusPhase?: WorkspaceInstancePhase;
+
+        workspaceDescription: string;
+        workspaceType: string;
+    }
+
+    export interface SetStateData {
+        ideFrontendFailureCause?: string;
+        desktopIDE?: {
+            clientID: string;
+            link: string;
+            label?: string;
+        };
+    }
+
+    /**
+     * interface for post message that send status update from dashboard to supervisor
+     */
+    export interface StatusUpdateEventData {
+        type: "ide-status-update";
+        status: Status;
+    }
+
+    export interface HeartbeatEventData {
+        type: "ide-heartbeat";
+    }
+
+    export interface TrackEventData {
+        type: "ide-track-event";
+        msg: RemoteTrackMessage;
+    }
+
+    export interface RelocateEventData {
+        type: "ide-relocate";
+        url: string;
+    }
+
+    export interface SetStateEventData {
+        type: "ide-set-state";
+        state: SetStateData;
+    }
+
+    export function isStatusUpdateEventData(obj: any): obj is StatusUpdateEventData {
+        return obj != null && typeof obj === "object" && obj.type === "ide-status-update";
+    }
+
+    export function isHeartbeatEventData(obj: any): obj is HeartbeatEventData {
+        return obj != null && typeof obj === "object" && obj.type === "ide-heartbeat";
+    }
+
+    export function isTrackEventData(obj: any): obj is TrackEventData {
+        return obj != null && typeof obj === "object" && obj.type === "ide-track-event";
+    }
+
+    export function isRelocateEventData(obj: any): obj is RelocateEventData {
+        return obj != null && typeof obj === "object" && obj.type === "ide-relocate";
+    }
+
+    export function isSetStateEventData(obj: any): obj is SetStateEventData {
+        return obj != null && typeof obj === "object" && obj.type === "ide-set-state";
+    }
+}
diff --git a/components/gitpod-protocol/src/util/gitpod-host-url.ts b/components/gitpod-protocol/src/util/gitpod-host-url.ts
@@ -169,6 +169,11 @@ export class GitpodHostUrl {
             return pathSegs[2];
         }
 
+        const cleanHash = this.url.hash.replace(/^#/, "");
+        if (this.url.pathname == "/start/" && cleanHash.match(workspaceIDRegex)) {
+            return cleanHash;
+        }
+
         return undefined;
     }
 

Original file line number	Diff line number	Diff line change
`@@ -169,6 +169,11 @@ export class GitpodHostUrl {`
`169`	`169`	`return pathSegs[2];`
`170`	`170`	`}`
`171`	`171`
	`172`	`+ const cleanHash = this.url.hash.replace(/^#/, "");`
	`173`	`+ if (this.url.pathname == "/start/" && cleanHash.match(workspaceIDRegex)) {`
	`174`	`+ return cleanHash;`
	`175`	`+ }`
	`176`	`+`
`172`	`177`	`return undefined;`
`173`	`178`	`}`
`174`	`179`