| 1 | /** |
| 2 | * The pieces mission control and a project's overview are made of: panels |
| 3 | * with a "View all", what needs the viewer, the week's pulse with its |
| 4 | * sparklines, and a project's deploy history. |
| 5 | */ |
| 6 | import { ArrowRight, Eye, GitMerge, Hand, Rocket, Swords, Terminal, TimerOff, TriangleAlert, UserPlus } from "lucide-react"; |
| 7 | import { type ReactNode, useState } from "react"; |
| 8 | import { Link } from "react-router"; |
| 9 | |
| 10 | import type { DeployStatus } from "@g1t/contracts"; |
| 11 | |
| 12 | import { cn } from "../lib/cn"; |
| 13 | import { type Need, type NeedKind, sparkPoints } from "../lib/mission"; |
| 14 | import { Boundary } from "./boundary"; |
| 15 | import { TimeAgo } from "./ui"; |
| 16 | import { Button } from "./ui/button"; |
| 17 | import { Card } from "./ui/card"; |
| 18 | import { Hint } from "./ui/hint"; |
| 19 | |
| 20 | // --- Panels ------------------------------------------------------------------- |
| 21 | |
| 22 | /** A titled section, with a count and a link to everything it summarises. */ |
| 23 | export function Panel({ |
| 24 | id, |
| 25 | title, |
| 26 | icon, |
| 27 | count, |
| 28 | all, |
| 29 | extra, |
| 30 | children, |
| 31 | className, |
| 32 | what, |
| 33 | }: { |
| 34 | id?: string; |
| 35 | title: ReactNode; |
| 36 | /** What it shows, in a few words, said if it fails to draw; its title when that is text. */ |
| 37 | what?: string; |
| 38 | icon?: ReactNode; |
| 39 | count?: number | null; |
| 40 | all?: { to: string; label?: string } | null; |
| 41 | extra?: ReactNode; |
| 42 | children: ReactNode; |
| 43 | className?: string; |
| 44 | }) { |
| 45 | return ( |
| 46 | <section id={id} className={cn("scroll-mt-20", className)}> |
| 47 | <div className="flex min-h-7 flex-wrap items-center gap-x-3 gap-y-2"> |
| 48 | <h2 className="flex items-center gap-2 text-sm font-semibold tracking-tight"> |
| 49 | {icon && <span className="text-faint">{icon}</span>} |
| 50 | {title} |
| 51 | {count != null && count > 0 && <span className="rounded-full bg-line px-1.5 text-[0.6875rem] font-medium tabular-nums text-muted">{count}</span>} |
| 52 | </h2> |
| 53 | <span className="grow" /> |
| 54 | {extra} |
| 55 | {all && ( |
| 56 | <Link to={all.to} prefetch="intent" className="inline-flex items-center gap-1 text-xs text-muted hover:text-fg"> |
| 57 | {all.label ?? "View all"} |
| 58 | <ArrowRight size={12} /> |
| 59 | </Link> |
| 60 | )} |
| 61 | </div> |
| 62 | <div className="mt-3"> |
| 63 | <Boundary what={what ?? (typeof title === "string" ? title : "This section")}>{children}</Boundary> |
| 64 | </div> |
| 65 | </section> |
| 66 | ); |
| 67 | } |
| 68 | |
| 69 | export { Unavailable } from "./boundary"; |
| 70 | |
| 71 | /** A quiet, dashed empty state with an optional call to action. */ |
| 72 | export function Quiet({ children, action }: { children: ReactNode; action?: ReactNode }) { |
| 73 | return ( |
| 74 | <Card tone="plain" className="flex flex-wrap items-center gap-3 border-dashed px-4 py-5 text-sm text-muted"> |
| 75 | <span className="min-w-0 grow">{children}</span> |
| 76 | {action} |
| 77 | </Card> |
| 78 | ); |
| 79 | } |
| 80 | |
| 81 | // --- Needs you ---------------------------------------------------------------- |
| 82 | |
| 83 | const NEED: Record<NeedKind, { icon: ReactNode; tone: string; label: string }> = { |
| 84 | deploy: { icon: <Rocket size={15} />, tone: "text-danger", label: "Production" }, |
| 85 | invitation: { icon: <UserPlus size={15} />, tone: "text-accent", label: "Invitation" }, |
| 86 | conflict: { icon: <Swords size={15} />, tone: "text-warn", label: "Conflict" }, |
| 87 | stalled: { icon: <Hand size={15} />, tone: "text-warn", label: "Stopped" }, |
| 88 | stuck: { icon: <TimerOff size={15} />, tone: "text-warn", label: "Quiet run" }, |
| 89 | runner: { icon: <TimerOff size={15} />, tone: "text-warn", label: "No runner" }, |
| 90 | review: { icon: <Eye size={15} />, tone: "text-info", label: "Review" }, |
| 91 | checks: { icon: <Terminal size={15} />, tone: "text-danger", label: "Checks" }, |
| 92 | ready: { icon: <GitMerge size={15} />, tone: "text-success", label: "Ready" }, |
| 93 | }; |
| 94 | |
| 95 | /** What is waiting on the viewer, most urgent first, each with its next step. */ |
| 96 | export function NeedsList({ needs, limit = 8 }: { needs: Need[]; limit?: number }) { |
| 97 | const [all, setAll] = useState(false); |
| 98 | const shown = all ? needs : needs.slice(0, limit); |
| 99 | return ( |
| 100 | <> |
| 101 | <Card asChild divided className="overflow-hidden"> |
| 102 | <ul> |
| 103 | {shown.map((need) => { |
| 104 | const look = NEED[need.kind]; |
| 105 | return ( |
| 106 | <li key={need.key} className="flex items-start gap-3 px-4 py-3"> |
| 107 | <Hint label={look.label}> |
| 108 | <span className={cn("mt-0.5 shrink-0", look.tone)}> |
| 109 | {look.icon} |
| 110 | <span className="sr-only">{look.label}</span> |
| 111 | </span> |
| 112 | </Hint> |
| 113 | <span className="min-w-0 grow"> |
| 114 | <Link to={need.to} prefetch="intent" className="block truncate text-sm font-medium hover:text-accent"> |
| 115 | {need.title} |
| 116 | </Link> |
| 117 | <span className="mt-0.5 block text-xs leading-5 text-muted"> |
| 118 | {need.where && <span className="font-mono text-faint">{need.where} · </span>} |
| 119 | {need.detail} |
| 120 | </span> |
| 121 | </span> |
| 122 | <span className="hidden shrink-0 pt-0.5 text-xs text-faint sm:block"> |
| 123 | <TimeAgo at={need.at} /> |
| 124 | </span> |
| 125 | <Link |
| 126 | to={need.to} |
| 127 | prefetch="intent" |
| 128 | className="shrink-0 rounded-md border border-line px-2.5 py-1 text-xs font-medium text-fg/85 transition-colors hover:border-line-strong hover:bg-raised hover:text-fg" |
| 129 | > |
| 130 | {need.action} |
| 131 | </Link> |
| 132 | </li> |
| 133 | ); |
| 134 | })} |
| 135 | </ul> |
| 136 | </Card> |
| 137 | {needs.length > limit && ( |
| 138 | <Button type="button" onClick={() => setAll(!all)} variant="link" size="inline" className="mt-2 text-xs text-muted hover:text-fg font-normal"> |
| 139 | {all ? "Show fewer" : `Show ${needs.length - limit} more`} |
| 140 | </Button> |
| 141 | )} |
| 142 | </> |
| 143 | ); |
| 144 | } |
| 145 | |
| 146 | // --- Pulse -------------------------------------------------------------------- |
| 147 | |
| 148 | const DAY_LABEL = (offset: number) => { |
| 149 | const date = new Date(Date.now() - offset * 86_400_000); |
| 150 | return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" }); |
| 151 | }; |
| 152 | |
| 153 | /** |
| 154 | * A week of one measure as a small line, the last day marked. Each day |
| 155 | * has a hover target that says its value. |
| 156 | */ |
| 157 | export function Sparkline({ |
| 158 | values, |
| 159 | format, |
| 160 | width = 96, |
| 161 | height = 28, |
| 162 | }: { |
| 163 | values: number[]; |
| 164 | format: (value: number) => string; |
| 165 | width?: number; |
| 166 | height?: number; |
| 167 | }) { |
| 168 | const points = sparkPoints(values, width, height, 3); |
| 169 | if (points.length === 0) return null; |
| 170 | const line = points.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join(" "); |
| 171 | const area = `${line} L${points[points.length - 1][0]},${height} L${points[0][0]},${height} Z`; |
| 172 | const [lastX, lastY] = points[points.length - 1]; |
| 173 | const slot = width / values.length; |
| 174 | return ( |
| 175 | <svg |
| 176 | width={width} |
| 177 | height={height} |
| 178 | viewBox={`0 0 ${width} ${height}`} |
| 179 | className="overflow-visible text-accent" |
| 180 | role="img" |
| 181 | aria-label={values.map(format).join(", ")} |
| 182 | > |
| 183 | <path d={area} fill="currentColor" opacity={0.12} /> |
| 184 | <path d={line} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" /> |
| 185 | <circle cx={lastX} cy={lastY} r={3} fill="currentColor" stroke="var(--color-surface)" strokeWidth={2} /> |
| 186 | {values.map((value, index) => ( |
| 187 | <rect key={index} x={index * slot} y={0} width={slot} height={height} fill="transparent" className="hover:fill-fg/5"> |
| 188 | <title>{`${DAY_LABEL(values.length - 1 - index)}: ${format(value)}`}</title> |
| 189 | </rect> |
| 190 | ))} |
| 191 | </svg> |
| 192 | ); |
| 193 | } |
| 194 | |
| 195 | /** One measure of the week: a headline number, what it means, and its line. */ |
| 196 | export function PulseTile({ |
| 197 | label, |
| 198 | value, |
| 199 | hint, |
| 200 | values, |
| 201 | format, |
| 202 | to, |
| 203 | }: { |
| 204 | label: string; |
| 205 | value: string; |
| 206 | hint?: string; |
| 207 | values?: number[]; |
| 208 | format?: (value: number) => string; |
| 209 | to?: string; |
| 210 | }) { |
| 211 | const body = ( |
| 212 | <> |
| 213 | <p className="truncate text-xs text-muted">{label}</p> |
| 214 | <div className="mt-1 flex items-end justify-between gap-2"> |
| 215 | <p className="text-2xl font-semibold tracking-tight tabular-nums">{value}</p> |
| 216 | {values && format && values.some((v) => v > 0) && ( |
| 217 | <span className="mb-1"> |
| 218 | <Sparkline values={values} format={format} width={56} height={22} /> |
| 219 | </span> |
| 220 | )} |
| 221 | </div> |
| 222 | <Hint label={hint}> |
| 223 | <p className="mt-1.5 truncate text-[0.6875rem] text-faint">{hint}</p> |
| 224 | </Hint> |
| 225 | </> |
| 226 | ); |
| 227 | const box = "block rounded-xl border border-line bg-surface p-4 transition-colors"; |
| 228 | return to ? ( |
| 229 | <Link to={to} className={`${box} hover:border-line-strong`}> |
| 230 | {body} |
| 231 | </Link> |
| 232 | ) : ( |
| 233 | <div className={box}>{body}</div> |
| 234 | ); |
| 235 | } |
| 236 | |
| 237 | // --- Deploys ------------------------------------------------------------------ |
| 238 | |
| 239 | const STRIP_TONE: Record<DeployStatus, string> = { |
| 240 | ready: "bg-success", |
| 241 | // Served once, until a newer build or a take-down: it worked. |
| 242 | replaced: "bg-success/45", |
| 243 | down: "bg-line-strong", |
| 244 | failed: "bg-danger", |
| 245 | building: "bg-warn animate-pulse", |
| 246 | queued: "bg-line-strong animate-pulse", |
| 247 | skipped: "bg-line", |
| 248 | }; |
| 249 | |
| 250 | /** The last builds as a row of bars, oldest on the left; each links to its build. */ |
| 251 | export function DeployStrip({ |
| 252 | builds, |
| 253 | base, |
| 254 | slots = 20, |
| 255 | }: { |
| 256 | builds: { id: string; status: DeployStatus; kind: string; commit: string; createdAt: string }[]; |
| 257 | base: string; |
| 258 | slots?: number; |
| 259 | }) { |
| 260 | const shown = builds.slice(0, slots).reverse(); |
| 261 | return ( |
| 262 | <div className="flex h-8 items-end gap-0.75" aria-label="Recent builds, oldest first"> |
| 263 | {Array.from({ length: slots - shown.length }, (_, i) => ( |
| 264 | <span key={`empty-${i}`} className="h-2 flex-1 rounded-sm bg-line/60" /> |
| 265 | ))} |
| 266 | {shown.map((build) => { |
| 267 | const about = `${build.kind === "production" ? "Production" : "Preview"} · ${build.commit.slice(0, 7)} · ${build.status} · ${new Date(build.createdAt).toLocaleString("en-US")}`; |
| 268 | return ( |
| 269 | <Hint key={build.id} label={about}> |
| 270 | <Link |
| 271 | to={`${base}/deployments/${build.id}`} |
| 272 | aria-label={about} |
| 273 | className={cn("flex-1 rounded-sm transition-opacity hover:opacity-80", STRIP_TONE[build.status], build.kind === "production" ? "h-8" : "h-5")} |
| 274 | /> |
| 275 | </Hint> |
| 276 | ); |
| 277 | })} |
| 278 | </div> |
| 279 | ); |
| 280 | } |
| 281 | |
| 282 | /** A small meter for a share, 0 to 1. */ |
| 283 | export function Meter({ value, tone = "bg-success" }: { value: number | null; tone?: string }) { |
| 284 | return ( |
| 285 | <span className="block h-1.5 w-full overflow-hidden rounded-full bg-line"> |
| 286 | {value != null && <span className={cn("block h-full rounded-full", tone)} style={{ width: `${Math.round(value * 100)}%` }} />} |
| 287 | </span> |
| 288 | ); |
| 289 | } |
| 290 | |
| 291 | export function percent(value: number | null): string { |
| 292 | return value == null ? "—" : `${Math.round(value * 100)}%`; |
| 293 | } |