[public-api] migrate PrebuildService

Author: akosyakov

components/dashboard/src/components/PrebuildLogs.tsx

@@ -11,12 +11,12 @@ import {
     WorkspaceImageBuild,
     HEADLESS_LOG_STREAM_STATUS_CODE_REGEX,
     Disposable,
-    PrebuildWithStatus,
 } from "@gitpod/gitpod-protocol";
 import { getGitpodService } from "../service/service";
 import { PrebuildStatus } from "../projects/Prebuilds";
-import { converter, workspaceClient } from "../service/public-api";
+import { converter, prebuildClient, watchPrebuild, workspaceClient } from "../service/public-api";
 import { GetWorkspaceRequest, WorkspacePhase_Phase } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
+import { Prebuild, PrebuildPhase_Phase } from "@gitpod/public-api/lib/gitpod/v1/prebuild_pb";
 
 const WorkspaceLogs = React.lazy(() => import("./WorkspaceLogs"));
 
@@ -37,15 +37,19 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
     >();
     const [error, setError] = useState<Error | undefined>();
     const [logsEmitter] = useState(new EventEmitter());
-    const [prebuild, setPrebuild] = useState<PrebuildWithStatus | undefined>();
+    const [prebuild, setPrebuild] = useState<Prebuild | undefined>();
 
     const handlePrebuildUpdate = useCallback(
-        (prebuild: PrebuildWithStatus) => {
-            if (prebuild.info.buildWorkspaceId === props.workspaceId) {
+        (prebuild: Prebuild) => {
+            if (prebuild.buildWorkspaceId === props.workspaceId) {
                 setPrebuild(prebuild);
 
                 // In case the Prebuild got "aborted" or "time(d)out" we want to user to proceed anyway
-                if (props.onIgnorePrebuild && (prebuild.status === "aborted" || prebuild.status === "timeout")) {
+                if (
+                    props.onIgnorePrebuild &&
+                    (prebuild.status?.phase?.name === PrebuildPhase_Phase.ABORTED ||
+                        prebuild.status?.phase?.name === PrebuildPhase_Phase.TIMEOUT)
+                ) {
                     props.onIgnorePrebuild();
                 }
                 // TODO(gpl) We likely want to move the "happy path" logic (for status "available")
@@ -78,20 +82,6 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
                 setError(err);
             }
 
-            // Try get hold of a recent Prebuild
-            try {
-                const pbws = await getGitpodService().server.findPrebuildByWorkspaceID(props.workspaceId);
-                if (pbws) {
-                    const foundPrebuild = await getGitpodService().server.getPrebuild(pbws.id);
-                    if (foundPrebuild) {
-                        handlePrebuildUpdate(foundPrebuild);
-                    }
-                }
-            } catch (err) {
-                console.error(err);
-                setError(err);
-            }
-
             // Register for future updates
             disposables.push(
                 getGitpodService().registerClient({
@@ -112,13 +102,31 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
                         }
                         logsEmitter.emit("logs", content.text);
                     },
-                    onPrebuildUpdate(update: PrebuildWithStatus) {
-                        if (update.info) {
-                            handlePrebuildUpdate(update);
-                        }
-                    },
                 }),
             );
+
+            try {
+                const response = await prebuildClient.listPrebuilds({ buildWorkspaceId: props.workspaceId });
+                const prebuild = response.prebuilds[0];
+                if (prebuild) {
+                    handlePrebuildUpdate(prebuild);
+                    disposables.push(
+                        Disposable.create(() =>
+                            watchPrebuild(
+                                {
+                                    prebuildIds: [prebuild.id],
+                                },
+                                handlePrebuildUpdate,
+                            ),
+                        ),
+                    );
+                } else {
+                    setError(new Error("Prebuild not found"));
+                }
+            } catch (err) {
+                console.error(err);
+                setError(err);
+            }
         })();
         return function cleanup() {
             disposables.dispose();

components/dashboard/src/data/prebuilds/latest-project-prebuild-query.ts

@@ -4,27 +4,34 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
 import { useQuery } from "@tanstack/react-query";
-import { getGitpodService } from "../../service/service";
-
-export type LatestProjectPrebuildQueryResult = PrebuildWithStatus;
+import { prebuildClient } from "../../service/public-api";
+import { Prebuild } from "@gitpod/public-api/lib/gitpod/v1/prebuild_pb";
+import { ApplicationError, ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 
 type Args = {
     projectId: string;
 };
 export const useLatestProjectPrebuildQuery = ({ projectId }: Args) => {
-    return useQuery<LatestProjectPrebuildQueryResult>({
+    return useQuery<Prebuild | null>({
         queryKey: getLatestProjectPrebuildQueryKey(projectId),
         // Prevent bursting for latest project prebuilds too frequently
         staleTime: 1000 * 60 * 1, // 1 minute
         queryFn: async () => {
-            const latestPrebuilds = await getGitpodService().server.findPrebuilds({
-                projectId,
-                latest: true,
-            });
-
-            return latestPrebuilds[0] || null;
+            try {
+                const response = await prebuildClient.listPrebuilds({
+                    configurationId: projectId,
+                    pagination: {
+                        pageSize: 1,
+                    },
+                });
+                return response.prebuilds[0];
+            } catch (e) {
+                if (ApplicationError.hasErrorCode(e) && e.code === ErrorCodes.NOT_FOUND) {
+                    return null;
+                }
+                throw e;
+            }
         },
     });
 };

components/dashboard/src/projects/Prebuild.tsx

@@ -4,90 +4,67 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
 import dayjs from "dayjs";
 import { useEffect, useMemo, useState } from "react";
 import { Redirect, useHistory, useParams } from "react-router";
 import Header from "../components/Header";
 import PrebuildLogs from "../components/PrebuildLogs";
 import { Subheading } from "../components/typography/headings";
 import Spinner from "../icons/Spinner.svg";
-import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { useCurrentProject } from "./project-context";
 import { shortCommitMessage } from "./render-utils";
+import { prebuildClient, watchPrebuild } from "../service/public-api";
+import { Prebuild, PrebuildPhase_Phase } from "@gitpod/public-api/lib/gitpod/v1/prebuild_pb";
 
 export default function PrebuildPage() {
     const history = useHistory();
     const { project, loading } = useCurrentProject();
 
     const { prebuildId } = useParams<{ prebuildId: string }>();
 
-    const [prebuild, setPrebuild] = useState<PrebuildWithStatus | undefined>();
+    const [prebuild, setPrebuild] = useState<Prebuild | undefined>();
     const [isRerunningPrebuild, setIsRerunningPrebuild] = useState<boolean>(false);
     const [isCancellingPrebuild, setIsCancellingPrebuild] = useState<boolean>(false);
 
     useEffect(() => {
         if (!project || !prebuildId) {
             return;
         }
-        (async () => {
-            const prebuilds = await getGitpodService().server.findPrebuilds({
-                projectId: project.id,
-                prebuildId,
-            });
-            setPrebuild(prebuilds[0]);
-        })();
-
-        return getGitpodService().registerClient({
-            onPrebuildUpdate(update: PrebuildWithStatus) {
-                if (update.info.id !== prebuildId) {
-                    return;
-                }
-
-                setPrebuild(update);
-            },
-        }).dispose;
+        return watchPrebuild({ prebuildIds: [prebuildId] }, (prebuild) => setPrebuild(prebuild));
     }, [prebuildId, project]);
 
     const title = useMemo(() => {
         if (!prebuild) {
             return "unknown prebuild";
         }
-        return prebuild.info.branch;
+        return prebuild.ref;
     }, [prebuild]);
 
     const renderSubtitle = () => {
         if (!prebuild) {
             return "";
         }
-        const startedByAvatar = prebuild.info.startedByAvatar && (
-            <img
-                className="rounded-full w-4 h-4 inline-block align-text-bottom mr-2"
-                src={prebuild.info.startedByAvatar || ""}
-                alt={prebuild.info.startedBy}
-            />
-        );
         return (
             <div className="flex">
                 <div className="my-auto">
-                    <Subheading>
-                        {startedByAvatar}Triggered {dayjs(prebuild.info.startedAt).fromNow()}
-                    </Subheading>
+                    <Subheading>Triggered {dayjs(prebuild.status?.startTime?.toDate()).fromNow()}</Subheading>
                 </div>
                 <p className="mx-2 my-auto">·</p>
                 <div className="my-auto">
-                    <p className="text-gray-500 dark:text-gray-50">{shortCommitMessage(prebuild.info.changeTitle)}</p>
+                    <p className="text-gray-500 dark:text-gray-50">
+                        {shortCommitMessage(prebuild.commit?.message || "")}
+                    </p>
                 </div>
-                {!!prebuild.info.basedOnPrebuildId && (
+                {!!prebuild.basedOnPrebuildId && (
                     <>
                         <p className="mx-2 my-auto">·</p>
                         <div className="my-auto">
                             <p className="text-gray-500 dark:text-gray-50">
                                 Incremental Prebuild (
                                 <a
                                     className="gp-link"
-                                    title={prebuild.info.basedOnPrebuildId}
-                                    href={`./${prebuild.info.basedOnPrebuildId}`}
+                                    title={prebuild.basedOnPrebuildId}
+                                    href={`./${prebuild.basedOnPrebuildId}`}
                                 >
                                     base
                                 </a>
@@ -106,7 +83,10 @@ export default function PrebuildPage() {
         }
         try {
             setIsRerunningPrebuild(true);
-            await getGitpodService().server.triggerPrebuild(prebuild.info.projectId, prebuild.info.branch);
+            await prebuildClient.startPrebuild({
+                configurationId: prebuild.configurationId,
+                gitRef: prebuild.ref,
+            });
             // TODO: Open a Prebuilds page that's specific to `prebuild.info.branch`?
             if (project) {
                 history.push(`/projects/${project.id}/prebuilds`);
@@ -124,7 +104,9 @@ export default function PrebuildPage() {
         }
         try {
             setIsCancellingPrebuild(true);
-            await getGitpodService().server.cancelPrebuild(prebuild.info.projectId, prebuild.info.id);
+            await prebuildClient.cancelPrebuild({
+                prebuildId: prebuild.id,
+            });
         } catch (error) {
             console.error("Could not cancel prebuild", error);
         } finally {
@@ -140,8 +122,10 @@ export default function PrebuildPage() {
         <>
             <Header title={title} subtitle={renderSubtitle()} />
             <div className="app-container mt-8">
-                <PrebuildLogs workspaceId={prebuild?.info?.buildWorkspaceId}>
-                    {["building", "queued"].includes(prebuild?.status || "") ? (
+                <PrebuildLogs workspaceId={prebuild?.buildWorkspaceId}>
+                    {[PrebuildPhase_Phase.BUILDING, PrebuildPhase_Phase.QUEUED].includes(
+                        prebuild?.status?.phase?.name || PrebuildPhase_Phase.UNSPECIFIED,
+                    ) ? (
                         <button
                             className="danger flex items-center space-x-2"
                             disabled={isCancellingPrebuild}
@@ -162,20 +146,8 @@ export default function PrebuildPage() {
                                 {isRerunningPrebuild && (
                                     <img alt="" className="h-4 w-4 animate-spin filter brightness-150" src={Spinner} />
                                 )}
-                                <span>Rerun Prebuild ({prebuild?.info.branch})</span>
+                                <span>Rerun Prebuild ({prebuild?.ref})</span>
                             </button>
-                            {prebuild?.status === "available" ? (
-                                <a
-                                    className="my-auto"
-                                    href={gitpodHostUrl
-                                        .withContext(`open-prebuild/${prebuild?.info.id}/${prebuild?.info.changeUrl}`)
-                                        .toString()}
-                                >
-                                    <button>New Workspace (with this prebuild)</button>
-                                </a>
-                            ) : (
-                                <button disabled={true}>New Workspace (with this prebuild)</button>
-                            )}
                         </>
                     )}
                 </PrebuildLogs>