Skip to content
Sign up

flagon-io/g1t

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