Skip to content

Commit 6721143

Browse files
Laurie T. Malauroboquat
Laurie T. Malau
authored and
roboquat
committed
Disallow actions in prebuilds page
1 parent b1642ac commit 6721143

File tree

2 files changed

+83
-100
lines changed

2 files changed

+83
-100
lines changed

‎components/dashboard/src/projects/Prebuilds.tsx

Lines changed: 66 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useContext, useEffect, useState } from "react";
1010
import { useLocation, useRouteMatch } from "react-router";
1111
import Header from "../components/Header";
1212
import DropDown, { DropDownEntry } from "../components/DropDown";
13-
import { ItemsList, Item, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
13+
import { ItemsList, Item, ItemField } from "../components/ItemsList";
1414
import Spinner from "../icons/Spinner.svg";
1515
import StatusDone from "../icons/StatusDone.svg";
1616
import StatusFailed from "../icons/StatusFailed.svg";
@@ -19,7 +19,6 @@ import StatusPaused from "../icons/StatusPaused.svg";
1919
import StatusRunning from "../icons/StatusRunning.svg";
2020
import { getGitpodService } from "../service/service";
2121
import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
22-
import { ContextMenuEntry } from "../components/ContextMenu";
2322
import { shortCommitMessage } from "./render-utils";
2423
import { Link } from "react-router-dom";
2524
import { Disposable } from "vscode-jsonrpc";
@@ -104,27 +103,6 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
104103
}
105104
}, [prebuilds]);
106105

107-
const prebuildContextMenu = (p: PrebuildWithStatus) => {
108-
const isFailed = p.status === "aborted" || p.status === "timeout" || p.status === "failed" || !!p.error;
109-
const isRunning = p.status === "building";
110-
const entries: ContextMenuEntry[] = [];
111-
if (isFailed) {
112-
entries.push({
113-
title: `Rerun Prebuild (${p.info.branch})`,
114-
onClick: () => triggerPrebuild(p.info.branch),
115-
separator: isRunning,
116-
});
117-
}
118-
if (isRunning) {
119-
entries.push({
120-
title: "Cancel Prebuild",
121-
customFontStyle: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300",
122-
onClick: () => cancelPrebuild(p.info.id),
123-
});
124-
}
125-
return entries;
126-
};
127-
128106
const statusFilterEntries = () => {
129107
const entries: DropDownEntry[] = [];
130108
entries.push({
@@ -168,13 +146,6 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
168146
getGitpodService().server.triggerPrebuild(project.id, branchName);
169147
};
170148

171-
const cancelPrebuild = (prebuildId: string) => {
172-
if (!project) {
173-
return;
174-
}
175-
getGitpodService().server.cancelPrebuild(project.id, prebuildId);
176-
};
177-
178149
const formatDate = (date: string | undefined) => {
179150
return date ? moment(date).fromNow() : "";
180151
};
@@ -218,14 +189,14 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
218189
)}
219190
</div>
220191
<ItemsList className="mt-2">
221-
<Item header={true} className="grid grid-cols-3">
222-
<ItemField className="my-auto">
192+
<Item header={true}>
193+
<ItemField className="my-auto w-5/12">
223194
<span>Prebuild</span>
224195
</ItemField>
225-
<ItemField className="my-auto">
196+
<ItemField className="my-auto w-5/12">
226197
<span>Commit</span>
227198
</ItemField>
228-
<ItemField className="my-auto">
199+
<ItemField className="my-auto w-3/12">
229200
<span>Branch</span>
230201
</ItemField>
231202
</Item>
@@ -239,74 +210,73 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
239210
.filter(filter)
240211
.sort(prebuildSorter)
241212
.map((p, index) => (
242-
<Item key={`prebuild-${p.info.id}`} className="grid grid-cols-3">
243-
<ItemField
244-
className={`flex items-center my-auto ${
245-
props.isAdminDashboard ? "pointer-events-none" : ""
246-
}`}
247-
>
248-
<Link
249-
to={`/${!!team ? "t/" + team.slug : "projects"}/${projectSlug}/${p.info.id}`}
250-
className="cursor-pointer"
213+
<Link
214+
to={`/${!!team ? "t/" + team.slug : "projects"}/${projectSlug}/${p.info.id}`}
215+
className="cursor-pointer"
216+
>
217+
<Item key={`prebuild-${p.info.id}`}>
218+
<ItemField
219+
className={`flex items-center my-auto w-5/12 ${
220+
props.isAdminDashboard ? "pointer-events-none" : ""
221+
}`}
251222
>
252-
<div className="text-base text-gray-900 dark:text-gray-50 font-medium uppercase mb-1">
253-
<div className="inline-block align-text-bottom mr-2 w-4 h-4">
254-
{prebuildStatusIcon(p)}
223+
<div>
224+
<div className="text-base text-gray-900 dark:text-gray-50 font-medium uppercase mb-1">
225+
<div className="inline-block align-text-bottom mr-2 w-4 h-4">
226+
{prebuildStatusIcon(p)}
227+
</div>
228+
{prebuildStatusLabel(p)}
255229
</div>
256-
{prebuildStatusLabel(p)}
230+
<p>
231+
{p.info.startedByAvatar && (
232+
<img
233+
className="rounded-full w-4 h-4 inline-block align-text-bottom mr-2"
234+
src={p.info.startedByAvatar || ""}
235+
alt={p.info.startedBy}
236+
/>
237+
)}
238+
Triggered {formatDate(p.info.startedAt)}
239+
</p>
240+
</div>
241+
</ItemField>
242+
<ItemField className="flex items-center my-auto w-5/12">
243+
<div className="truncate">
244+
<a href={p.info.changeUrl} className="cursor-pointer">
245+
<div
246+
className="text-base text-gray-500 dark:text-gray-50 font-medium mb-1 truncate"
247+
title={shortCommitMessage(p.info.changeTitle)}
248+
>
249+
{shortCommitMessage(p.info.changeTitle)}
250+
</div>
251+
</a>
252+
<p>
253+
{p.info.changeAuthorAvatar && (
254+
<img
255+
className="rounded-full w-4 h-4 inline-block align-text-bottom mr-2 overflow-hidden"
256+
src={p.info.changeAuthorAvatar || ""}
257+
alt={p.info.changeAuthor}
258+
/>
259+
)}
260+
Authored {formatDate(p.info.changeDate)} ·{" "}
261+
{p.info.changeHash?.substring(0, 8)}
262+
</p>
257263
</div>
258-
<p>
259-
{p.info.startedByAvatar && (
260-
<img
261-
className="rounded-full w-4 h-4 inline-block align-text-bottom mr-2"
262-
src={p.info.startedByAvatar || ""}
263-
alt={p.info.startedBy}
264-
/>
265-
)}
266-
Triggered {formatDate(p.info.startedAt)}
267-
</p>
268-
</Link>
269-
</ItemField>
270-
<ItemField className="flex items-center my-auto">
271-
<div className="truncate">
264+
</ItemField>
265+
<ItemField className="flex w-3/12">
272266
<a href={p.info.changeUrl} className="cursor-pointer">
273-
<div
274-
className="text-base text-gray-500 dark:text-gray-50 font-medium mb-1 truncate"
275-
title={shortCommitMessage(p.info.changeTitle)}
276-
>
277-
{shortCommitMessage(p.info.changeTitle)}
267+
<div className="flex space-x-2 truncate">
268+
<span
269+
className="font-medium text-gray-500 dark:text-gray-50 truncate"
270+
title={p.info.branch}
271+
>
272+
{p.info.branch}
273+
</span>
278274
</div>
279275
</a>
280-
<p>
281-
{p.info.changeAuthorAvatar && (
282-
<img
283-
className="rounded-full w-4 h-4 inline-block align-text-bottom mr-2 overflow-hidden"
284-
src={p.info.changeAuthorAvatar || ""}
285-
alt={p.info.changeAuthor}
286-
/>
287-
)}
288-
Authored {formatDate(p.info.changeDate)} ·{" "}
289-
{p.info.changeHash?.substring(0, 8)}
290-
</p>
291-
</div>
292-
</ItemField>
293-
<ItemField className="flex">
294-
<a href={p.info.changeUrl} className="cursor-pointer">
295-
<div className="flex space-x-2 truncate">
296-
<span
297-
className="font-medium text-gray-500 dark:text-gray-50 truncate"
298-
title={p.info.branch}
299-
>
300-
{p.info.branch}
301-
</span>
302-
</div>
303-
</a>
304-
<span className="flex-grow" />
305-
{!props.isAdminDashboard && (
306-
<ItemFieldContextMenu menuEntries={prebuildContextMenu(p)} />
307-
)}
308-
</ItemField>
309-
</Item>
276+
<span className="flex-grow" />
277+
</ItemField>
278+
</Item>
279+
</Link>
310280
))}
311281
</ItemsList>
312282
{!isLoadingPrebuilds && prebuilds.length === 0 && (

‎components/dashboard/src/projects/Project.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import moment from "moment";
88
import { PrebuildWithStatus, Project } from "@gitpod/gitpod-protocol";
99
import { useContext, useEffect, useState } from "react";
10-
import { useLocation, useRouteMatch } from "react-router";
10+
import { useHistory, useLocation, useRouteMatch } from "react-router";
1111
import Header from "../components/Header";
1212
import { ItemsList, Item, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
1313
import { getGitpodService, gitpodHostUrl } from "../service/service";
@@ -21,6 +21,7 @@ import { openAuthorizeWindow } from "../provider-utils";
2121

2222
export default function () {
2323
const location = useLocation();
24+
const history = useHistory();
2425

2526
const { teams } = useContext(TeamsContext);
2627
const team = getCurrentTeam(location, teams);
@@ -30,6 +31,7 @@ export default function () {
3031

3132
const [project, setProject] = useState<Project | undefined>();
3233

34+
const [isLoading, setIsLoading] = useState<boolean>(false);
3335
const [isLoadingBranches, setIsLoadingBranches] = useState<boolean>(false);
3436
const [branches, setBranches] = useState<Project.BranchDetails[]>([]);
3537
const [lastPrebuilds, setLastPrebuilds] = useState<Map<string, PrebuildWithStatus | undefined>>(new Map());
@@ -158,11 +160,17 @@ export default function () {
158160
return true;
159161
};
160162

161-
const triggerPrebuild = (branch: Project.BranchDetails) => {
163+
const triggerPrebuild = async (branch: Project.BranchDetails) => {
162164
if (!project) {
163165
return;
164166
}
165-
getGitpodService().server.triggerPrebuild(project.id, branch.name);
167+
try {
168+
setIsLoading(true);
169+
const prebuildResult = await getGitpodService().server.triggerPrebuild(project.id, branch.name);
170+
history.push(`/${!!team ? "t/" + team.slug : "projects"}/${projectSlug}/${prebuildResult.prebuildId}`);
171+
} finally {
172+
setIsLoading(false);
173+
}
166174
};
167175

168176
const cancelPrebuild = (prebuildId: string) => {
@@ -233,7 +241,11 @@ export default function () {
233241
/>
234242
</div>
235243
<div className="flex-1" />
236-
<div className="py-3 pl-3"></div>
244+
{isLoading && (
245+
<div className="flex justify-center w-1/12">
246+
<img alt="" className="h-4 w-4 animate-spin" src={Spinner} />
247+
</div>
248+
)}
237249
</div>
238250
<ItemsList className="mt-2">
239251
<Item header={true} className="grid grid-cols-3">
@@ -362,6 +374,7 @@ export default function () {
362374
</>
363375
)}
364376
</div>
377+
<div></div>
365378
</>
366379
);
367380
}

0 commit comments

Comments
 (0)