| fe3b509 | | | 1 | import type { Metadata } from "next"; |
| fe3b509 | | | 2 | import Link from "next/link"; |
| fe3b509 | | | 3 | import { groveApiUrl } from "@/lib/utils"; |
| fe3b509 | | | 4 | import { Badge } from "@/app/components/ui/badge"; |
| fe3b509 | | | 5 | import { TimeAgo } from "@/app/components/time-ago"; |
| fe3b509 | | | 6 | import { |
| fe3b509 | | | 7 | formatTriggerType, |
| fe3b509 | | | 8 | getInvocationRunSlug, |
| fe3b509 | | | 9 | getInvocationStatus, |
| fe3b509 | | | 10 | groupByInvocation, |
| fe3b509 | | | 11 | } from "@/lib/canopy-invocations"; |
| 5bcd5db | | | 12 | import { CanopyLiveRefresh } from "@/app/components/canopy-live-refresh"; |
| fe3b509 | | | 13 | |
| fe3b509 | | | 14 | interface Props { |
| fe3b509 | | | 15 | params: Promise<{ owner: string }>; |
| fe3b509 | | | 16 | } |
| fe3b509 | | | 17 | |
| fe3b509 | | | 18 | export async function generateMetadata({ params }: Props): Promise<Metadata> { |
| fe3b509 | | | 19 | const { owner } = await params; |
| fe3b509 | | | 20 | return { title: `${owner} · Canopy` }; |
| fe3b509 | | | 21 | } |
| fe3b509 | | | 22 | |
| fe3b509 | | | 23 | interface Run { |
| fe3b509 | | | 24 | id: number; |
| fe3b509 | | | 25 | pipeline_name: string; |
| fe3b509 | | | 26 | status: string; |
| fe3b509 | | | 27 | trigger_type?: string | null; |
| fe3b509 | | | 28 | commit_id: string | null; |
| fe3b509 | | | 29 | commit_message: string | null; |
| fe3b509 | | | 30 | trigger_ref?: string | null; |
| fe3b509 | | | 31 | started_at?: string | null; |
| fe3b509 | | | 32 | duration_ms?: number | null; |
| fe3b509 | | | 33 | created_at: string; |
| fe3b509 | | | 34 | repo_name: string; |
| fe3b509 | | | 35 | owner_name: string; |
| fe3b509 | | | 36 | } |
| fe3b509 | | | 37 | |
| fe3b509 | | | 38 | const statusLabels: Record<string, string> = { |
| fe3b509 | | | 39 | pending: "Pending", |
| fe3b509 | | | 40 | running: "Running", |
| fe3b509 | | | 41 | passed: "Passed", |
| fe3b509 | | | 42 | failed: "Failed", |
| fe3b509 | | | 43 | cancelled: "Cancelled", |
| fe3b509 | | | 44 | }; |
| fe3b509 | | | 45 | |
| fe3b509 | | | 46 | async function getOwnerRuns(owner: string): Promise<Run[]> { |
| fe3b509 | | | 47 | try { |
| fe3b509 | | | 48 | const res = await fetch( |
| fe3b509 | | | 49 | `${groveApiUrl}/api/canopy/recent-runs?owner=${encodeURIComponent(owner)}&limit=50`, |
| fe3b509 | | | 50 | { cache: "no-store" }, |
| fe3b509 | | | 51 | ); |
| fe3b509 | | | 52 | if (!res.ok) return []; |
| fe3b509 | | | 53 | const data = await res.json(); |
| fe3b509 | | | 54 | return data.runs ?? []; |
| fe3b509 | | | 55 | } catch { |
| fe3b509 | | | 56 | return []; |
| fe3b509 | | | 57 | } |
| fe3b509 | | | 58 | } |
| fe3b509 | | | 59 | |
| fe3b509 | | | 60 | function groupByRepo(runs: Run[]) { |
| fe3b509 | | | 61 | const groups = new Map<string, { owner: string; repo: string; runs: Run[]; newestRunId: number }>(); |
| fe3b509 | | | 62 | const sorted = [...runs].sort((a, b) => b.id - a.id); |
| fe3b509 | | | 63 | for (const run of sorted) { |
| fe3b509 | | | 64 | const key = run.repo_name; |
| fe3b509 | | | 65 | let group = groups.get(key); |
| fe3b509 | | | 66 | if (!group) { |
| fe3b509 | | | 67 | group = { owner: run.owner_name, repo: run.repo_name, runs: [], newestRunId: run.id }; |
| fe3b509 | | | 68 | groups.set(key, group); |
| fe3b509 | | | 69 | } |
| fe3b509 | | | 70 | group.runs.push(run); |
| fe3b509 | | | 71 | } |
| fe3b509 | | | 72 | return Array.from(groups.values()).sort((a, b) => b.newestRunId - a.newestRunId); |
| fe3b509 | | | 73 | } |
| fe3b509 | | | 74 | |
| fe3b509 | | | 75 | export default async function CanopyOwnerPage({ params }: Props) { |
| fe3b509 | | | 76 | const { owner } = await params; |
| fe3b509 | | | 77 | const runs = await getOwnerRuns(owner); |
| fe3b509 | | | 78 | |
| fe3b509 | | | 79 | if (runs.length === 0) { |
| fe3b509 | | | 80 | return ( |
| fe3b509 | | | 81 | <div className="max-w-3xl mx-auto px-4 py-6"> |
| fe3b509 | | | 82 | <p |
| fe3b509 | | | 83 | className="text-sm py-8 text-center" |
| fe3b509 | | | 84 | style={{ color: "var(--text-faint)" }} |
| fe3b509 | | | 85 | > |
| fe3b509 | | | 86 | No builds yet for {owner}. |
| fe3b509 | | | 87 | </p> |
| fe3b509 | | | 88 | </div> |
| fe3b509 | | | 89 | ); |
| fe3b509 | | | 90 | } |
| fe3b509 | | | 91 | |
| fe3b509 | | | 92 | const repos = groupByRepo(runs); |
| fe3b509 | | | 93 | |
| fe3b509 | | | 94 | return ( |
| fe3b509 | | | 95 | <div className="max-w-3xl mx-auto px-4 py-6 flex flex-col gap-6"> |
| 5bcd5db | | | 96 | <CanopyLiveRefresh scope="global" /> |
| fe3b509 | | | 97 | {repos.map((group) => ( |
| fe3b509 | | | 98 | <div key={group.repo}> |
| fe3b509 | | | 99 | <div className="pb-2" style={{ borderBottom: "1px solid var(--divide)" }}> |
| fe3b509 | | | 100 | <Link |
| fe3b509 | | | 101 | href={`/${group.owner}/${group.repo}`} |
| fe3b509 | | | 102 | className="text-sm font-medium hover:underline" |
| fe3b509 | | | 103 | style={{ color: "var(--text-primary)" }} |
| fe3b509 | | | 104 | > |
| fe3b509 | | | 105 | {group.repo} |
| fe3b509 | | | 106 | </Link> |
| fe3b509 | | | 107 | </div> |
| fe3b509 | | | 108 | <div> |
| fe3b509 | | | 109 | {(() => { |
| fe3b509 | | | 110 | const invocations = groupByInvocation(group.runs); |
| fe3b509 | | | 111 | return invocations.slice(0, 5).map((invocation) => { |
| fe3b509 | | | 112 | const title = |
| fe3b509 | | | 113 | invocation.commitMessage || |
| fe3b509 | | | 114 | (invocation.commitId |
| fe3b509 | | | 115 | ? invocation.commitId.substring(0, 8) |
| fe3b509 | | | 116 | : `${formatTriggerType(invocation.triggerType)} build`); |
| fe3b509 | | | 117 | |
| fe3b509 | | | 118 | const summaryStatus = getInvocationStatus(invocation.runs); |
| fe3b509 | | | 119 | const newestRun = invocation.runs[invocation.runs.length - 1]; |
| fe3b509 | | | 120 | const invocationHref = `/${group.owner}/${group.repo}/runs/${getInvocationRunSlug(invocation, invocations)}`; |
| fe3b509 | | | 121 | |
| fe3b509 | | | 122 | return ( |
| fe3b509 | | | 123 | <Link |
| fe3b509 | | | 124 | key={invocation.key} |
| fe3b509 | | | 125 | href={invocationHref} |
| fe3b509 | | | 126 | className="flex items-start gap-2 sm:gap-3 py-2.5 px-1 hover-row" |
| fe3b509 | | | 127 | style={{ borderBottom: "1px solid var(--divide)", textDecoration: "none", color: "inherit" }} |
| fe3b509 | | | 128 | > |
| fe3b509 | | | 129 | <span className="shrink-0 mt-0.5 sm:hidden"> |
| fe3b509 | | | 130 | <Badge variant={summaryStatus} compact> |
| fe3b509 | | | 131 | {(statusLabels[summaryStatus] ?? summaryStatus).charAt(0)} |
| fe3b509 | | | 132 | </Badge> |
| fe3b509 | | | 133 | </span> |
| fe3b509 | | | 134 | <span className="shrink-0 mt-0.5 hidden sm:block"> |
| fe3b509 | | | 135 | <Badge |
| fe3b509 | | | 136 | variant={summaryStatus} |
| fe3b509 | | | 137 | style={{ minWidth: "4rem", textAlign: "center" }} |
| fe3b509 | | | 138 | > |
| fe3b509 | | | 139 | {statusLabels[summaryStatus] ?? summaryStatus} |
| fe3b509 | | | 140 | </Badge> |
| fe3b509 | | | 141 | </span> |
| fe3b509 | | | 142 | <div className="min-w-0 flex-1"> |
| fe3b509 | | | 143 | <div className="text-sm truncate" style={{ color: "var(--text-primary)" }}> |
| fe3b509 | | | 144 | {title} |
| fe3b509 | | | 145 | </div> |
| fe3b509 | | | 146 | <div className="flex items-center gap-2 mt-0.5 text-xs" style={{ color: "var(--text-faint)" }}> |
| fe3b509 | | | 147 | <span>{formatTriggerType(invocation.triggerType)}</span> |
| fe3b509 | | | 148 | {invocation.commitId && ( |
| fe3b509 | | | 149 | <> |
| fe3b509 | | | 150 | <span>·</span> |
| fe3b509 | | | 151 | <span className="font-mono">{invocation.commitId.substring(0, 8)}</span> |
| fe3b509 | | | 152 | </> |
| fe3b509 | | | 153 | )} |
| fe3b509 | | | 154 | <span>·</span> |
| fe3b509 | | | 155 | <span> |
| fe3b509 | | | 156 | {invocation.runs.length} workflow{invocation.runs.length === 1 ? "" : "s"} |
| fe3b509 | | | 157 | </span> |
| fe3b509 | | | 158 | <span className="ml-auto shrink-0"> |
| fe3b509 | | | 159 | <TimeAgo date={newestRun.created_at} /> |
| fe3b509 | | | 160 | </span> |
| fe3b509 | | | 161 | </div> |
| fe3b509 | | | 162 | </div> |
| fe3b509 | | | 163 | </Link> |
| fe3b509 | | | 164 | ); |
| fe3b509 | | | 165 | }); |
| fe3b509 | | | 166 | })()} |
| fe3b509 | | | 167 | </div> |
| fe3b509 | | | 168 | <div className="pt-1.5"> |
| fe3b509 | | | 169 | <Link |
| fe3b509 | | | 170 | href={`/${group.owner}/${group.repo}`} |
| fe3b509 | | | 171 | className="text-xs hover:underline" |
| fe3b509 | | | 172 | style={{ color: "var(--text-muted)" }} |
| fe3b509 | | | 173 | > |
| fe3b509 | | | 174 | View all builds |
| fe3b509 | | | 175 | </Link> |
| fe3b509 | | | 176 | </div> |
| fe3b509 | | | 177 | </div> |
| fe3b509 | | | 178 | ))} |
| fe3b509 | | | 179 | </div> |
| fe3b509 | | | 180 | ); |
| fe3b509 | | | 181 | } |