Skip to content
Sign up

flagon-io/g1t

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