Prebuilds Page #4876

AlexTugarev · 2021-07-20T07:57:58Z

Project Overview

Showing branch details.

Prebuilds

Listing all prebuilds of a project.

This is the first iteration on #4515

Prebuild

To show all details on a prebuild. Currently just including the existing <PrebuildLogs> components. The plan is to restyle it afterwards.

Known Issue

We've no build numbers (yet)

jankeromnes · 2021-07-23T12:42:31Z

Wow, very cool! 🙌 I was able to see a newly triggered prebuild, and then check on its logs. I love it 😍

Thoughts:

It took quite a long time before my prebuild showed up (it did well after finishing). Do you know why there is a long delay between the trigger of a prebuild and it showing up? (Is that db-sync?)
When adding a new project, I'd love to see all the older prebuilds as well. Can't we also surface older prebuilds? (E.g. based on the clone URL).

jankeromnes

This is amazing! 😁 Thanks again for powering through this and displaying prebuilds & their status/logs! 🙏

This is quite a big PR. I've done a quick pass on the code, and left some comments/suggestions/thoughts in-line.

Also, have a fantastic weekend! ☀️

components/dashboard/src/App.tsx

components/dashboard/src/components/PrebuildLogs.tsx

jankeromnes · 2021-07-23T13:37:08Z

components/dashboard/src/icons/CaretUpDown.svg

+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z" fill="#57534E"/>
+</svg>


Request: Please always optimize new SVG files via https://jakearchibald.github.io/svgomg/ (hint: you can paste the SVG text, and then copy the optimized SVG text, without having to mess with files/uploads/downloads)

components/dashboard/src/projects/Prebuild.tsx

components/gitpod-db/src/project-db.ts

jankeromnes · 2021-07-23T14:23:47Z

components/licensor/typescript/ee/src/index.ts

    }

    public validate(): { msg?: string, valid: boolean } {
-        const v = validate(this.instanceID);
-        if (v.valid) {
+        // const v = validate(this.instanceID);


Reminder: Please revert this commit before merging.

components/server/src/auth/resource-access.ts

components/gitpod-protocol/src/gitpod-service.ts

components/gitpod-protocol/src/teams-projects-protocol.ts

AlexTugarev · 2021-07-26T08:30:53Z

@jankeromnes

It took quite a long time before my prebuild showed up (it did well after finishing). Do you know why there is a long delay between the trigger of a prebuild and it showing up? (Is that db-sync?)

Event handling for new prebuilds is not part of this PR. You'd need to reload the page manually to see changes.

When adding a new project, I'd love to see all the older prebuilds as well. Can't we also surface older prebuilds? (E.g. based on the clone URL).

Though technically possible, I'd argue to not pull in this complexity. Having a clear relation between a prebuilt workspace and a project makes the implementation cleaner then dealing with branch mismatches and the like. OTOH we can revisit this when migrating existing app installations, wdyt?

gtsiolis · 2021-07-26T10:33:48Z

/werft run

👍 started the job as gitpod-build-at-prebuild-page.57

components/dashboard/src/projects/Project.tsx

gtsiolis

Great work @AlexTugarev! 🌟 🌟 🌟

Feels so good to see prebuilds on the dashboard! 🧡

Added a few comments below, let me know if anything sounds confusing and feel free to open follow up issues to address smaller issues.

gtsiolis · 2021-07-26T12:23:27Z

components/dashboard/src/App.tsx

@@ -36,6 +36,7 @@ const ConfigureProject = React.lazy(() => import(/* webpackPrefetch: true */ './
 const Projects = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Projects'));
 const Project = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Project'));
 const Prebuilds = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Prebuilds'));
+const Prebuild = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Prebuild'));
 const Settings = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Settings'));


question: We no longer need the Settings tab for this iteration, right? If so, let's remove this here or in a follow up issue.

gtsiolis · 2021-07-26T12:28:31Z

components/dashboard/src/projects/Prebuilds.tsx

                        <div>
-                            <div className="text-base text-gray-900 dark:text-gray-50 font-medium">{moment(p.startedAt).fromNow()}</div>
-                            <p>{p.startedBy}</p>
+                            <div className="text-base text-gray-500 dark:text-gray-50 font-medium mb-1">{shortCommitMessage(p.changeTitle)}</div>


issue: We'll need to truncate this element to avoid breaking the layout like the following:

gtsiolis · 2021-07-26T12:35:32Z

components/dashboard/src/projects/NewProject.tsx

+                                    <div className="flex justify-end">
+                                        <div className="h-full my-auto flex self-center opacity-0 group-hover:opacity-100">
+                                            {!r.inUse ? (
+                                                <button className="primary" onClick={() => setSelectedRepo(r.name)}>Select</button>


issue: Specs for repository selection are being updated and we no longer need the primary button on hover, see #4948. However, this is probably out of the scope these changes. For the secondary option below we can use a tooltip on hover to indicate a projects is already taken. 💡

gtsiolis · 2021-07-26T12:54:38Z

components/dashboard/src/projects/Project.tsx

+                        <ItemField className="flex items-center">
+                            <div>
+                                <div className="text-base text-gray-900 dark:text-gray-50 font-medium mb-1">
+                                    {branchName}


question: Do you think adding a label for the default branch here as seen in the initial specs would help? Currently the entry mysteriously stays on top with no indication to the user on why this happens.

One approach could be to add a label next to the default branch. Alternatively, we could all sort branches, including the default branch, with updated timestamp. Additionally, we could consider adding back the New Workspace primary button on the top of this list near list fitlers. 💭

gtsiolis · 2021-07-26T13:05:05Z

components/dashboard/src/projects/Project.tsx

+                                <div className="text-base text-gray-900 dark:text-gray-50 font-medium mb-1">
+                                    {branchName}
+                                </div>
+                                <p>Updated _ minutes ago</p>


question: Do you think this piece of information is possible to retrieve for GitHub, GitLab, and Bitbucket?

gtsiolis · 2021-07-26T13:51:49Z

components/dashboard/src/projects/Project.tsx

+                        </ItemField>
+                        <ItemField className="flex items-center">
+                            <div className="text-base text-gray-900 dark:text-gray-50 font-medium uppercase mb-1 cursor-pointer" onClick={() => prebuild && openPrebuild(prebuild)}>
+                                {prebuild ? (<><div className="inline-block align-text-bottom mr-2 w-4 h-4">{statusIcon}</div>{status}</>) : (<span>–</span>)}


suggestion: Skipping the hyphen here sounds also ok.

gtsiolis · 2021-07-26T13:53:55Z

components/dashboard/src/projects/Prebuild.tsx

+            </div>
+            <p className="mx-2 my-auto">·</p>
+            <div className="my-auto">
+                <p>{startedByAvatar}Triggered {moment(prebuild.startedAt).fromNow()}</p>


question: Is it expected to see the avatar missing from everywhere?

gtsiolis · 2021-07-26T13:54:58Z

components/dashboard/src/projects/Prebuild.tsx

+        if (!prebuild) {
+            return "unknown prebuild";
+        }
+        return (<h1 className="tracking-tight">{prebuild.branch} <span className="text-gray-200">#{prebuild.branchPrebuildNumber}</span></h1>);


nitpick: Minor color fix. 🖍️

Suggested change

return (<h1 className="tracking-tight">{prebuild.branch} <span className="text-gray-200">#{prebuild.branchPrebuildNumber}</span></h1>);

return (<h1 className="tracking-tight">{prebuild.branch} <span className="text-gray-400">#{prebuild.branchPrebuildNumber}</span></h1>);

gtsiolis · 2021-07-26T13:58:49Z

components/dashboard/src/components/Header.tsx

-    title: string;
-    subtitle: string;
+    title: string | React.ReactElement;
+    subtitle: string | React.ReactElement;
 }

 export default function Header(p: HeaderProps) {
    return <div className="lg:px-28 px-10 border-gray-200 dark:border-gray-800">


issue: We'll need a spacing of 4 below the header here. mayeb this is something we need to add on the header component?

BEFORE AFTER

gtsiolis · 2021-07-26T14:03:07Z

components/dashboard/src/App.tsx

@@ -36,6 +36,7 @@ const ConfigureProject = React.lazy(() => import(/* webpackPrefetch: true */ './
 const Projects = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Projects'));
 const Project = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Project'));
 const Prebuilds = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Prebuilds'));
+const Prebuild = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Prebuild'));


issue: Fetching active branches and prebuilds requires a noticable amount of time, 5 seconds or more. Is there anything we could do in this iteration to make this smoother? If not, let's add a follow up issue for adding a loading indicator in a future iteration. ⏱️

components/server/ee/src/workspace/gitpod-server-impl.ts

svenefftinge

LGTM. I think we can merge this and continue work in smaller steps

roboquat · 2021-07-26T14:22:45Z

LGTM label has been added.

Git tree hash: c38192ab1a8f78d1522a3c24f99166225951bb1f

roboquat · 2021-07-26T14:22:49Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: AlexTugarev, svenefftinge

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [AlexTugarev,svenefftinge]
~~components/dashboard/OWNERS~~ [AlexTugarev,svenefftinge]
~~components/gitpod-db/OWNERS~~ [AlexTugarev,svenefftinge]
~~components/gitpod-protocol/OWNERS~~ [AlexTugarev,svenefftinge]
~~components/licensor/OWNERS~~ [AlexTugarev,svenefftinge]
~~components/server/OWNERS~~ [AlexTugarev,svenefftinge]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

roboquat added the do-not-merge/work-in-progress label Jul 20, 2021

roboquat requested review from corneliusludmann, geropl, jankeromnes and JanKoehnlein July 20, 2021 07:58

roboquat added approved size/XXL labels Jul 20, 2021

AlexTugarev force-pushed the at/prebuild-page branch from e077bbe to 4330626 Compare July 20, 2021 09:14

svenefftinge added the roadmap item: teams & projects label Jul 20, 2021

AlexTugarev force-pushed the at/prebuild-page branch 7 times, most recently from 3226bd6 to dd65274 Compare July 22, 2021 08:39

gtsiolis added the component: dashboard label Jul 22, 2021

AlexTugarev force-pushed the at/prebuild-page branch 2 times, most recently from 9fcde08 to abad47e Compare July 22, 2021 10:33

AlexTugarev requested review from svenefftinge and gtsiolis and removed request for JanKoehnlein, corneliusludmann and geropl July 22, 2021 10:36

AlexTugarev force-pushed the at/prebuild-page branch from abad47e to 29a4941 Compare July 22, 2021 10:44

DO NOT MERGE THIS

ff57fe6

AlexTugarev force-pushed the at/prebuild-page branch 4 times, most recently from ab1474d to cccc3ee Compare July 23, 2021 07:14

jankeromnes added a commit to jankeromnes/gitpod-staging-prebuilds that referenced this pull request Jul 23, 2021

Test gitpod-io/gitpod#4876

f1a88ef

AlexTugarev mentioned this pull request Jul 23, 2021

Figure out Teams & Projects top menu navigation #4622

Closed

jankeromnes reviewed Jul 23, 2021

View reviewed changes

AlexTugarev changed the title ~~WIP Prebuilds Page~~ Prebuilds Page Jul 26, 2021

AlexTugarev marked this pull request as ready for review July 26, 2021 08:57

roboquat removed the do-not-merge/work-in-progress label Jul 26, 2021

svenefftinge reviewed Jul 26, 2021

View reviewed changes

components/dashboard/src/projects/Project.tsx Outdated Show resolved Hide resolved

review comments

e360b04

gtsiolis reviewed Jul 26, 2021

View reviewed changes

This was linked to issues Jul 26, 2021

[Dashboard] Project/Prebuilds Page #4515

Closed

[Dashboard] Project Page (Overview) #4422

Closed

svenefftinge reviewed Jul 26, 2021

View reviewed changes

components/server/ee/src/workspace/gitpod-server-impl.ts Show resolved Hide resolved

svenefftinge approved these changes Jul 26, 2021

View reviewed changes

roboquat assigned svenefftinge Jul 26, 2021

roboquat added the lgtm label Jul 26, 2021

roboquat merged commit d306bac into main Jul 26, 2021

roboquat deleted the at/prebuild-page branch July 26, 2021 14:23

AlexTugarev mentioned this pull request Jul 26, 2021

Revert "DO NOT MERGE THIS" #4957

Merged

gtsiolis mentioned this pull request Jul 26, 2021

Follow up issues for the prebuilds pages #4958

Closed

17 tasks

gtsiolis added the 🧑‍🚀 crew: teams and projects label Jul 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prebuilds Page #4876

Prebuilds Page #4876

AlexTugarev commented Jul 20, 2021 •

edited

Loading

jankeromnes commented Jul 23, 2021 •

edited

Loading

jankeromnes left a comment

jankeromnes Jul 23, 2021

jankeromnes Jul 23, 2021

AlexTugarev commented Jul 26, 2021

gtsiolis commented Jul 26, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

gtsiolis Jul 26, 2021

svenefftinge left a comment

roboquat commented Jul 26, 2021

roboquat commented Jul 26, 2021

	return (<h1 className="tracking-tight">{prebuild.branch} <span className="text-gray-200">#{prebuild.branchPrebuildNumber}</span></h1>);
	return (<h1 className="tracking-tight">{prebuild.branch} <span className="text-gray-400">#{prebuild.branchPrebuildNumber}</span></h1>);

Prebuilds Page #4876

Prebuilds Page #4876

Conversation

AlexTugarev commented Jul 20, 2021 • edited Loading

Project Overview

Prebuilds

Prebuild

Known Issue

jankeromnes commented Jul 23, 2021 • edited Loading

jankeromnes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AlexTugarev commented Jul 26, 2021

gtsiolis commented Jul 26, 2021 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svenefftinge left a comment

Choose a reason for hiding this comment

roboquat commented Jul 26, 2021

roboquat commented Jul 26, 2021

AlexTugarev commented Jul 20, 2021 •

edited

Loading

jankeromnes commented Jul 23, 2021 •

edited

Loading

gtsiolis commented Jul 26, 2021 •

edited by werft-gitpod-dev-com bot

Loading