flagon-io/g1t

public

A running run's or job's time no longer trips hydration: it counts to a different now on the server and in the browser, as TimeAgo already allows

syntaqxcommitted 1d agoParentfd30559Browse files

31	31
32	32		import type { Route } from "./+types/actions-run";
33	33		import { page } from "../../lib/meta";
34		−	import { LogText, Notes, StatusIcon, duration, shortRef, standingWord, useJobLog } from "../../components/actions";
	34	+	import { Duration, LogText, Notes, StatusIcon, shortRef, standingWord, useJobLog } from "../../components/actions";
35	35		import { Markdown } from "../../components/markdown";
36	36		import { Button, ErrorText, SubmitButton, TimeAgo, usePending } from "../../components/ui";
37	37		import { CheckboxOption } from "../../components/ui/checkbox";
⋯
150	150		{matches} {matches === 1 ? "line" : "lines"}
151	151		</span>
152	152		)}
153		−	<span className="ml-auto shrink-0 font-mono text-xs text-faint">{duration(step.startedAt, step.finishedAt)}</span>
	153	+	<Duration className="ml-auto shrink-0 font-mono text-xs text-faint" start={step.startedAt} end={step.finishedAt} />
154	154		</summary>
155	155		<div className="border-t border-line bg-bg/60">
156	156		{text === undefined ? (
⋯
365	365		<h3 className="text-base font-semibold">{job.name}</h3>
366	366		<span className="text-sm text-muted">
367	367		{job.cancelling ? "Cancelling: running its cleanup steps" : standingWord({ ...job, of: "job" })}
368		−	{job.startedAt && ` · ${duration(job.startedAt, job.finishedAt)}`}
	368	+	{job.startedAt && (
	369	+	<>
	370	+	{" · "}
	371	+	<Duration start={job.startedAt} end={job.finishedAt} />
	372	+	</>
	373	+	)}
369	374		</span>
370	375		<span className="ml-auto flex items-center gap-2">
371	376		{rerun}
⋯
776	781		{run.event}
777	782		{run.actor && ` by ${run.actor}`} · <TimeAgo at={run.createdAt} />
778	783		</span>
779		−	{run.startedAt && <span className="font-mono text-xs">{duration(run.startedAt, run.finishedAt)}</span>}
	784	+	{run.startedAt && <Duration className="font-mono text-xs" start={run.startedAt} end={run.finishedAt} />}
780	785		{run.attempt > 1 && attempts.length <= 1 && <span>Attempt {run.attempt}</span>}
781	786		{cancelling && <span className="text-warn">Its jobs are running their cleanup steps</span>}
782	787		{detail.approval?.state === "approved" && detail.approval.approvedBy && <span>Approved by {detail.approval.approvedBy}</span>}
⋯
868	873		>
869	874		<StatusIcon status={job.status} conclusion={job.conclusion} of="job" environment={job.environment} size={14} />
870	875		<span className="min-w-0 truncate">{job.name}</span>
871		−	<span className="ml-auto shrink-0 font-mono text-xs text-faint">{duration(job.startedAt, job.finishedAt)}</span>
	876	+	<Duration className="ml-auto shrink-0 font-mono text-xs text-faint" start={job.startedAt} end={job.finishedAt} />
872	877		</Link>
873	878		))}
874	879		</nav>

83	83		return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
84	84		}
85	85
	86	+	/**
	87	+	* How long something ran, as text. While it is still running the server and
	88	+	* the browser count to a different now, so the text may differ on hydration
	89	+	* (as TimeAgo's does).
	90	+	*/
	91	+	export function Duration({ start, end, className }: { start: string \| null; end: string \| null; className?: string }) {
	92	+	return (
	93	+	<span className={className} suppressHydrationWarning>
	94	+	{duration(start, end)}
	95	+	</span>
	96	+	);
	97	+	}
	98	+
86	99		/** `main` from `refs/heads/main`, `v1.2` from a tag, `#12` for a pull request. */
87	100		export function shortRef(ref: string): string {
88	101		const pull = /^refs\/pull\/(\d+)\//.exec(ref);

231	231		{name}
232	232		{detail && <span className="text-muted"> — {detail}</span>}
233	233		</span>
234		−	{time && <span className="shrink-0 animate-fade-in font-mono text-xs text-faint">{time}</span>}
	234	+	{time && (
	235	+	// A running job's time counts to now, which differs between server and browser.
	236	+	<span className="shrink-0 animate-fade-in font-mono text-xs text-faint" suppressHydrationWarning>
	237	+	{time}
	238	+	</span>
	239	+	)}
235	240		{timing && <SkeletonLine className="w-10 shrink-0 text-xs" />}
236	241		{to && (
237	242		<Link to={to} className="shrink-0 text-xs text-muted hover:text-fg hover:underline">

6	6
7	7		import type { Route } from "./+types/actions";
8	8		import { page } from "../../lib/meta";
9		−	import { Notes, StatusIcon, duration, shortRef } from "../../components/actions";
	9	+	import { Duration, Notes, StatusIcon, shortRef } from "../../components/actions";
10	10		import { AddCiPrompt } from "../../components/add-ci";
11	11		import { Button, ComputeNote, CopyLine, EmptyState, ErrorText, SubmitButton, TimeAgo, usePending } from "../../components/ui";
12	12		import { CheckboxOption } from "../../components/ui/checkbox";
⋯
120	120		</span>
121	121		<span className="w-28 shrink-0 text-right text-xs text-faint">
122	122		<TimeAgo at={run.createdAt} />
123		−	{run.startedAt && <span className="block font-mono">{duration(run.startedAt, run.finishedAt)}</span>}
	123	+	{run.startedAt && <Duration className="block font-mono" start={run.startedAt} end={run.finishedAt} />}
124	124		</span>
125	125		</Link>
126	126		</li>