Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp
345 linesCodeBlameRaw
1import { ArrowLeft, ChevronRight, ExternalLink, FileText, GitBranch, GitCommitHorizontal, Workflow } from "lucide-react";
2import type { ReactNode } from "react";
3import { Link, data } from "react-router";
4
5import type { Deployment, DeploymentDetail, DeploymentStatus } from "@g1t/contracts";
6
7import type { Route } from "./+types/deployment";
8import { page } from "../../lib/meta";
9import { isFailed, part } from "../../lib/partial";
10import { Boundary, Unavailable } from "../../components/boundary";
11import { TimeAgo } from "../../components/ui";
12import { Badge } from "../../components/ui/badge";
13import { Card } from "../../components/ui/card";
14import { DeployLink, host } from "../../components/deploy";
15import { DeploymentStateBadge, DeploymentStateIcon, STATE_TONE, sourceLabel } from "../../components/deployments-panel";
16import { deployments } from "../../lib/services.server";
17import { getViewer } from "../../lib/session.server";
18import { requireRepo } from "../../lib/access.server";
19import { STATE_WORD, buildError, environmentLabel, hasPayload, isNewestStatus, isPageBuild, shortSha } from "../../lib/deployments";
20
21export function meta({ params, ...args }: Route.MetaArgs) {
22 return page(args, { title: `Deployment · ${params.owner}/${params.repo} · g1t` });
23}
24
25export async function loader({ params, context }: Route.LoaderArgs) {
26 const viewer = getViewer(context);
27 const { repo } = await requireRepo(context, params, "read");
28 const path = { namespace: repo.namespace, name: repo.name };
29 // A g1t.page build also has its build log and warnings, for the workspace's members.
30 const [found, build] = await Promise.all([
31 part(deployments.repoDeployment(path, params.id, viewer), "Its deployment record"),
32 isPageBuild(params.id) ? part(deployments.get({ workspace: params.owner, slug: params.repo }, params.id, viewer), "The build") : null,
33 ]);
34 const deployment = !isFailed(found) && found.ok ? found.value : null;
35 const pageBuild = build && !isFailed(build) && build.ok ? build.value : null;
36 if (!deployment && !pageBuild) {
37 // Either one heads the page. With neither, a read that failed is not
38 // the deployment missing: say it could not be loaded rather than 404.
39 if (isFailed(found) || isFailed(build)) {
40 throw data("The deployment could not be loaded just now. Try again in a moment.", { status: 503 });
41 }
42 throw data(null, { status: 404 });
43 }
44 return {
45 deployment,
46 // A failed record under a build is said beside the build's heading; a
47 // failed build under a record, in its details' place.
48 recordFailed: isFailed(found),
49 build: isFailed(build) ? build : pageBuild,
50 };
51}
52
53/** A g1t.page build's status in words. */
54const BUILD_WORDS = {
55 queued: "Waiting for a sandbox",
56 building: "Building",
57 ready: "Live",
58 replaced: "Replaced by a newer build",
59 down: "Taken down",
60 failed: "Failed",
61 skipped: "Skipped",
62} as const;
63
64export default function DeploymentPage({ loaderData, params }: Route.ComponentProps) {
65 const { deployment, recordFailed } = loaderData;
66 const build = isFailed(loaderData.build) ? null : loaderData.build;
67 const base = `/${params.owner}/${params.repo}`;
68 return (
69 <div>
70 <Link to={`${base}/deployments`} className="inline-flex items-center gap-1 text-sm text-muted hover:text-fg">
71 <ArrowLeft size={14} />
72 Deployments
73 </Link>
74 {deployment ? <Reported deployment={deployment} base={base} /> : build && <BuildHeading build={build} base={base} />}
75 {!deployment && recordFailed && (
76 <div className="mt-3">
77 <Unavailable what="Its deployment record" compact />
78 </div>
79 )}
80 {isFailed(loaderData.build) ? (
81 <section className="mt-8">
82 <h2 className="text-sm font-semibold">Build on g1t.page</h2>
83 <div className="mt-3">
84 <Unavailable what="The build and its log" />
85 </div>
86 </section>
87 ) : (
88 build && (
89 <Boundary what="The build">
90 <BuildDetails build={build} />
91 </Boundary>
92 )
93 )}
94 </div>
95 );
96}
97
98function Reported({ deployment, base }: { deployment: DeploymentDetail; base: string }) {
99 const url = deployment.environment_url;
100 const environmentTo = `${base}/deployments?environment=${encodeURIComponent(deployment.environment)}#history`;
101 return (
102 <>
103 <header className="mt-3 flex flex-wrap items-start justify-between gap-4">
104 <div className="min-w-0">
105 <h1 className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xl font-semibold tracking-tight">
106 <Link to={environmentTo} className="hover:text-accent">
107 {environmentLabel(deployment.environment)}
108 </Link>
109 {deployment.number != null && (
110 <Link to={`${base}/pull/${deployment.number}`} className="text-base font-normal text-muted hover:underline">
111 #{deployment.number}
112 </Link>
113 )}
114 <DeploymentStateBadge state={deployment.state} size={16} className="text-sm" />
115 </h1>
116 <p className="mt-1 text-sm text-muted">
117 {deployment.task === "deploy" ? "Deployment" : <span className="font-mono">{deployment.task}</span>} of{" "}
118 <span className="font-mono text-fg-soft">{deployment.ref}</span> by{" "}
119 <span className="text-fg-soft">{deployment.creator}</span> via {sourceLabel(deployment.source)},{" "}
120 <TimeAgo at={deployment.created_at} />
121 </p>
122 </div>
123 {url && (
124 <DeployLink
125 href={url}
126 className="inline-flex max-w-full items-center gap-1.5 rounded-md bg-accent px-3.5 py-2 text-sm font-medium text-bg hover:bg-accent-hover"
127 >
128 <span className="truncate">{host(url)}</span>
129 <ExternalLink size={14} className="shrink-0" />
130 </DeployLink>
131 )}
132 </header>
133
134 {deployment.description && (
135 <p className="mt-4 max-w-3xl text-sm text-fg-soft wrap-anywhere">{deployment.description}</p>
136 )}
137
138 <Card asChild tone="plain" className="mt-6 grid grid-cols-1 gap-px overflow-hidden bg-line text-sm sm:grid-cols-2 lg:grid-cols-4">
139 <dl>
140 <Fact label="Environment">
141 <Link to={environmentTo} className="hover:text-accent">
142 {environmentLabel(deployment.environment)}
143 </Link>
144 {deployment.production_environment && deployment.environment !== "production" && <Badge tone="accent">Production</Badge>}
145 {deployment.transient_environment && <Badge>Transient</Badge>}
146 </Fact>
147 <Fact label="Commit">
148 <Link to={`${base}/commit/${deployment.sha}`} className="inline-flex items-center gap-1 font-mono hover:text-accent">
149 <GitCommitHorizontal size={13} className="text-faint" />
150 {shortSha(deployment.sha)}
151 </Link>
152 <span className="inline-flex min-w-0 items-center gap-1 font-mono text-muted">
153 <GitBranch size={12} className="shrink-0 text-faint" />
154 <span className="truncate">{deployment.ref}</span>
155 </span>
156 </Fact>
157 <Fact label="Made by">
158 <span className="truncate">{deployment.creator}</span>
159 <span className="text-muted">
160 via{" "}
161 {deployment.source === "actions" && deployment.run_url ? (
162 <Link to={deployment.run_url} className="text-fg-soft hover:text-accent hover:underline">
163 {sourceLabel(deployment.source)}
164 </Link>
165 ) : (
166 sourceLabel(deployment.source)
167 )}
168 </span>
169 </Fact>
170 <Fact label="Updated">
171 <TimeAgo at={deployment.updated_at} />
172 <span className="text-muted">
173 created <TimeAgo at={deployment.created_at} />
174 </span>
175 </Fact>
176 </dl>
177 </Card>
178
179 {(deployment.log_url || deployment.run_url) && (
180 <p className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-sm">
181 {deployment.run_url && deployment.source === "actions" && (
182 <Link to={deployment.run_url} className="inline-flex items-center gap-1.5 text-muted hover:text-fg">
183 <Workflow size={14} className="text-faint" />
184 Workflow run
185 </Link>
186 )}
187 {deployment.log_url && !isPageBuild(deployment.id) && (
188 <a href={deployment.log_url} className="inline-flex items-center gap-1.5 text-muted hover:text-fg">
189 <FileText size={14} className="text-faint" />
190 Log
191 <ExternalLink size={12} className="text-faint" />
192 </a>
193 )}
194 </p>
195 )}
196
197 <section aria-labelledby="statuses" className="mt-8">
198 <h2 id="statuses" className="text-sm font-semibold">
199 Statuses <span className="font-normal text-faint">{deployment.statuses.length}</span>
200 </h2>
201 {deployment.statuses.length === 0 ? (
202 <p className="mt-3 text-sm text-muted">No statuses yet.</p>
203 ) : (
204 <ol className="mt-4">
205 {deployment.statuses.map((status, index) => (
206 <StatusItem
207 key={status.id}
208 status={status}
209 last={index === deployment.statuses.length - 1}
210 over={!isNewestStatus(deployment.statuses, index)}
211 />
212 ))}
213 </ol>
214 )}
215 </section>
216
217 {hasPayload(deployment.payload) && (
218 <Card asChild className="group mt-8">
219 <details>
220 <summary className="flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-semibold [&::-webkit-details-marker]:hidden">
221 <ChevronRight size={14} className="text-faint transition-transform group-open:rotate-90" />
222 Payload
223 <span className="font-normal text-faint">{Object.keys(deployment.payload).length} keys</span>
224 </summary>
225 <pre className="max-h-[60vh] overflow-auto border-t border-line p-4 font-mono text-xs leading-relaxed text-muted whitespace-pre-wrap wrap-anywhere">
226 {JSON.stringify(deployment.payload, null, 2)}
227 </pre>
228 </details>
229 </Card>
230 )}
231 </>
232 );
233}
234
235function Fact({ label, children }: { label: string; children: ReactNode }) {
236 return (
237 <div className="min-w-0 bg-surface px-4 py-3">
238 <dt className="text-[0.6875rem] text-faint">{label}</dt>
239 <dd className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">{children}</dd>
240 </div>
241 );
242}
243
244/** One status on the timeline, oldest at the top, with a line down to the next. */
245function StatusItem({ status, last, over }: { status: DeploymentStatus; last: boolean; over: boolean }) {
246 return (
247 <li className="relative flex gap-3 pb-5 last:pb-0">
248 {!last && <span aria-hidden="true" className="absolute top-6 bottom-1 left-2.25 w-px bg-line" />}
249 <span className="relative mt-0.5 flex size-4.75 shrink-0 items-center justify-center bg-bg">
250 <DeploymentStateIcon state={status.state} size={18} over={over} />
251 </span>
252 <div className="min-w-0 grow">
253 <p className="flex flex-wrap items-baseline gap-x-2 text-sm">
254 <span className={`font-medium ${over && status.state === "in_progress" ? "text-muted" : STATE_TONE[status.state]}`}>{STATE_WORD[status.state]}</span>
255 <span className="text-xs text-faint">
256 {status.creator} ·{" "}
257 <TimeAgo at={status.created_at} />
258 </span>
259 </p>
260 {status.description && <p className="mt-0.5 text-sm text-muted wrap-anywhere">{status.description}</p>}
261 {(status.environment_url || status.log_url) && (
262 <p className="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs">
263 {status.environment_url && (
264 <DeployLink href={status.environment_url} className="inline-flex min-w-0 items-center gap-1 font-mono text-accent hover:underline">
265 <span className="truncate">{host(status.environment_url)}</span>
266 <ExternalLink size={11} className="shrink-0" />
267 </DeployLink>
268 )}
269 {status.log_url && (
270 <a href={status.log_url} className="inline-flex items-center gap-1 text-muted hover:text-fg">
271 <FileText size={11} />
272 Log
273 </a>
274 )}
275 </p>
276 )}
277 </div>
278 </li>
279 );
280}
281
282/** A g1t.page build with no deployment record to head it: its own heading, as before. */
283function BuildHeading({ build, base }: { build: Deployment; base: string }) {
284 return (
285 <>
286 <h1 className="mt-3 text-xl font-semibold tracking-tight">
287 {build.kind === "production" ? (
288 "Production"
289 ) : (
290 <>
291 Preview of <span className="font-mono">{build.branch}</span>
292 {build.number != null && (
293 <Link to={`${base}/pull/${build.number}`} className="ml-2 text-base font-normal text-muted hover:underline">
294 #{build.number}
295 </Link>
296 )}
297 </>
298 )}
299 <span className="ml-3 font-mono text-sm font-normal text-faint">{build.commit.slice(0, 12)}</span>
300 </h1>
301 <p className="mt-1 text-sm text-muted">
302 {BUILD_WORDS[build.status]} · started <TimeAgo at={build.createdAt} /> by {build.createdBy}
303 </p>
304 {build.status === "ready" && (
305 <DeployLink href={build.url} className="mt-3 inline-flex items-center gap-1.5 font-mono text-sm text-accent hover:underline">
306 {host(build.url)}
307 <ExternalLink size={12} />
308 </DeployLink>
309 )}
310 </>
311 );
312}
313
314/** What only a g1t.page build has: why it failed, its warnings, and its build log. */
315function BuildDetails({ build }: { build: Deployment & { log: string | null } }) {
316 const error = buildError(build);
317 return (
318 <section aria-labelledby="build" className="mt-8">
319 <h2 id="build" className="flex flex-wrap items-baseline gap-x-2 text-sm font-semibold">
320 Build on g1t.page
321 <span className="text-xs font-normal text-muted">
322 {BUILD_WORDS[build.status]}
323 {build.buildSeconds != null && ` · built in ${build.buildSeconds} s`}
324 </span>
325 </h2>
326 {error && (
327 <p className="mt-3 rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-sm wrap-anywhere">{error}</p>
328 )}
329 {build.warnings.length > 0 && (
330 <ul className="mt-3 space-y-1 rounded-lg border border-warn/30 bg-warn/5 px-4 py-3 text-sm">
331 {build.warnings.map((warning) => (
332 <li key={warning}>{warning}</li>
333 ))}
334 </ul>
335 )}
336 <h3 className="mt-5 text-sm font-medium text-muted">Build log</h3>
337 {/* Long lines wrap, so a narrow screen shows the whole log without scrolling sideways. */}
338 <Card asChild tone="bg" className="mt-3 max-h-[70vh] overflow-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed text-muted wrap-anywhere">
339 <pre>
340 {build.log || (build.status === "queued" || build.status === "building" ? "The log appears when the build finishes." : "No log.")}
341 </pre>
342 </Card>
343 </section>
344 );
345}