| 1 | import { CalendarClock, ChevronRight, ExternalLink, Mail, Siren } from "lucide-react"; |
| 2 | import { Link } from "react-router"; |
| 3 | |
| 4 | import type { AdminIncident, AdminMaintenance } from "@g1t/contracts"; |
| 5 | |
| 6 | import type { Route } from "./+types/incidents"; |
| 7 | import { ImpactBadge, MaintenanceBadge, PhaseBadge, SeverityBadge } from "~/components/incidents"; |
| 8 | import { Button, ButtonLink, EmptyState, Input, Notice, PageHeader, Select, Stat, When } from "~/components/ui"; |
| 9 | import { |
| 10 | INCIDENT_SEVERITIES, |
| 11 | TABS, |
| 12 | duration, |
| 13 | filterIncidents, |
| 14 | incidentsHref, |
| 15 | maintenanceList, |
| 16 | median, |
| 17 | parseFilters, |
| 18 | secondsBetween, |
| 19 | tabCounts, |
| 20 | } from "~/lib/incidents"; |
| 21 | import { statusAdmin } from "~/lib/services.server"; |
| 22 | import { settle } from "~/lib/settle"; |
| 23 | import { requireStaff } from "~/lib/staff"; |
| 24 | |
| 25 | export const meta: Route.MetaFunction = () => [{ title: "Incidents · sudo" }, { name: "robots", content: "noindex, nofollow" }]; |
| 26 | |
| 27 | const STATUS_PAGE = "https://status.g1t.sh/"; |
| 28 | |
| 29 | export async function loader({ request, context }: Route.LoaderArgs) { |
| 30 | requireStaff(context); |
| 31 | const filters = parseFilters(new URL(request.url).searchParams); |
| 32 | const [board, components] = await Promise.all([settle(statusAdmin.board()), settle(statusAdmin.components())]); |
| 33 | return { |
| 34 | filters, |
| 35 | board: board.ok ? board.value : null, |
| 36 | components: components.ok ? components.value : [], |
| 37 | error: board.ok ? null : board.error, |
| 38 | now: new Date().toISOString(), |
| 39 | }; |
| 40 | } |
| 41 | |
| 42 | function IncidentRow({ incident, names, now }: { incident: AdminIncident; names: Map<string, string>; now: string }) { |
| 43 | const affected = incident.components.filter((c) => c.impact !== "operational"); |
| 44 | const open = incident.resolved_at == null; |
| 45 | return ( |
| 46 | <li> |
| 47 | <Link to={`/incidents/${incident.id}`} className="group flex flex-col gap-2 px-4 py-3.5 hover:bg-raised/40 sm:flex-row sm:items-start sm:gap-4 sm:px-5"> |
| 48 | <div className="flex shrink-0 items-center gap-2 sm:w-20 sm:pt-0.5"> |
| 49 | <SeverityBadge severity={incident.severity} /> |
| 50 | </div> |
| 51 | <div className="min-w-0 grow"> |
| 52 | <div className="flex flex-wrap items-center gap-2"> |
| 53 | <p className="font-medium group-hover:text-fg">{incident.title}</p> |
| 54 | <PhaseBadge incident={incident} /> |
| 55 | {incident.source === "detected" && <span className="text-xs text-faint">Detected by the checks</span>} |
| 56 | </div> |
| 57 | <div className="mt-1.5 flex flex-wrap gap-1.5"> |
| 58 | {affected.map((c) => ( |
| 59 | <span key={c.key} className="inline-flex items-center gap-1.5 text-xs text-muted"> |
| 60 | {names.get(c.key) ?? c.key} <ImpactBadge impact={c.impact} /> |
| 61 | </span> |
| 62 | ))} |
| 63 | </div> |
| 64 | <p className="mt-1.5 text-xs text-faint"> |
| 65 | Started <When at={incident.started_at} time /> |
| 66 | {incident.commander && ( |
| 67 | <> |
| 68 | {" "} |
| 69 | · IC <span className="font-mono">{incident.commander}</span> |
| 70 | </> |
| 71 | )} |
| 72 | {incident.followups_open + incident.followups_done > 0 && ( |
| 73 | <> |
| 74 | {" "} |
| 75 | · follow-ups {incident.followups_done}/{incident.followups_open + incident.followups_done} |
| 76 | </> |
| 77 | )} |
| 78 | </p> |
| 79 | </div> |
| 80 | <div className="flex shrink-0 items-center gap-3 text-right sm:block"> |
| 81 | <p className={`tabular text-sm font-medium ${open ? "text-warn" : "text-fg-soft"}`}> |
| 82 | {open ? duration(secondsBetween(incident.started_at, now)) : duration(incident.durations.to_resolve)} |
| 83 | </p> |
| 84 | <p className="text-xs text-faint">{open ? "open" : incident.visibility === "dismissed" ? "dismissed" : "to resolve"}</p> |
| 85 | </div> |
| 86 | <ChevronRight size={16} aria-hidden="true" className="hidden shrink-0 self-center text-faint group-hover:text-muted sm:block" /> |
| 87 | </Link> |
| 88 | </li> |
| 89 | ); |
| 90 | } |
| 91 | |
| 92 | function MaintenanceRow({ m, names }: { m: AdminMaintenance; names: Map<string, string> }) { |
| 93 | return ( |
| 94 | <li> |
| 95 | <Link |
| 96 | to={`/incidents/maintenance/${m.id}`} |
| 97 | className="group flex flex-col gap-2 px-4 py-3.5 hover:bg-raised/40 sm:flex-row sm:items-start sm:gap-4 sm:px-5" |
| 98 | > |
| 99 | <CalendarClock size={16} aria-hidden="true" className="hidden shrink-0 text-faint sm:mt-0.5 sm:block" /> |
| 100 | <div className="min-w-0 grow"> |
| 101 | <div className="flex flex-wrap items-center gap-2"> |
| 102 | <p className="font-medium">{m.title}</p> |
| 103 | <MaintenanceBadge state={m.state} /> |
| 104 | </div> |
| 105 | <p className="mt-1 text-xs text-muted">{m.components.map((k) => names.get(k) ?? k).join(", ")}</p> |
| 106 | <p className="mt-1 text-xs text-faint"> |
| 107 | <When at={m.starts_at} time /> to <When at={m.ends_at} time /> · {duration(secondsBetween(m.starts_at, m.ends_at))} |
| 108 | </p> |
| 109 | </div> |
| 110 | <ChevronRight size={16} aria-hidden="true" className="hidden shrink-0 self-center text-faint group-hover:text-muted sm:block" /> |
| 111 | </Link> |
| 112 | </li> |
| 113 | ); |
| 114 | } |
| 115 | |
| 116 | export default function Incidents({ loaderData }: Route.ComponentProps) { |
| 117 | const { filters, board, components, error, now } = loaderData; |
| 118 | const names = new Map(components.map((c) => [c.key, c.name])); |
| 119 | const incidents = board?.incidents ?? []; |
| 120 | const maintenance = board?.maintenance ?? []; |
| 121 | const counts = tabCounts(incidents, maintenance); |
| 122 | const shown = filterIncidents(incidents, filters); |
| 123 | const shownMaintenance = maintenanceList(maintenance, filters.component); |
| 124 | const recent = incidents.filter((i) => i.visibility === "public" && i.resolved_at && secondsBetween(i.resolved_at, now) < 90 * 86400); |
| 125 | const filtered = filters.severity != null || filters.component != null || filters.q !== ""; |
| 126 | |
| 127 | return ( |
| 128 | <main className="mx-auto max-w-6xl px-4 py-8 sm:py-10"> |
| 129 | <PageHeader |
| 130 | title="Incidents" |
| 131 | description="Declare, run and close incidents, schedule maintenance, and publish postmortems. What is public appears on status.g1t.sh within 30 seconds." |
| 132 | actions={ |
| 133 | <div className="flex flex-wrap items-center gap-2"> |
| 134 | <ButtonLink to="/incidents/new" variant="lavender"> |
| 135 | <Siren size={15} aria-hidden="true" /> |
| 136 | Declare incident |
| 137 | </ButtonLink> |
| 138 | <ButtonLink to="/incidents/maintenance/new" variant="quiet"> |
| 139 | <CalendarClock size={15} aria-hidden="true" /> |
| 140 | Schedule maintenance |
| 141 | </ButtonLink> |
| 142 | <a href={STATUS_PAGE} className="inline-flex items-center gap-1.5 rounded-md px-2 py-2 text-sm text-muted hover:text-fg"> |
| 143 | status.g1t.sh <ExternalLink size={13} aria-hidden="true" /> |
| 144 | </a> |
| 145 | </div> |
| 146 | } |
| 147 | /> |
| 148 | |
| 149 | {error && ( |
| 150 | <div className="mt-5"> |
| 151 | <Notice tone="warn">The status worker did not answer: {error}</Notice> |
| 152 | </div> |
| 153 | )} |
| 154 | |
| 155 | <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4"> |
| 156 | <Stat |
| 157 | label="Open" |
| 158 | value={counts.open} |
| 159 | tone={counts.open ? "danger" : "mint"} |
| 160 | hint={counts.drafts ? `${counts.drafts} draft${counts.drafts === 1 ? "" : "s"} waiting` : "No drafts waiting"} |
| 161 | /> |
| 162 | <Stat label="Maintenance ahead" value={counts.maintenance} hint="Scheduled or under way" /> |
| 163 | <Stat |
| 164 | label="Median time to resolve" |
| 165 | value={duration(median(recent.map((i) => i.durations.to_resolve)))} |
| 166 | hint={`${recent.length} public incident${recent.length === 1 ? "" : "s"}, 90 days`} |
| 167 | /> |
| 168 | <Stat label="Email subscribers" value={board?.subscribers ?? "—"} hint={board && !board.email ? "Email is off: feeds only" : "Confirmed addresses"} /> |
| 169 | </div> |
| 170 | |
| 171 | <nav aria-label="Incident lists" className="mt-6 flex gap-1 overflow-x-auto border-b border-line"> |
| 172 | {TABS.map((tab) => { |
| 173 | const current = filters.tab === tab.value; |
| 174 | return ( |
| 175 | <Link |
| 176 | key={tab.value} |
| 177 | to={incidentsHref({ ...filters, tab: tab.value })} |
| 178 | aria-current={current ? "page" : undefined} |
| 179 | className={`-mb-px flex shrink-0 items-center gap-2 border-b-2 px-3 py-2 text-sm whitespace-nowrap ${ |
| 180 | current ? "border-accent font-medium text-fg" : "border-transparent text-muted hover:text-fg" |
| 181 | }`} |
| 182 | > |
| 183 | {tab.label} |
| 184 | <span |
| 185 | className={`tabular rounded-full px-1.5 text-xs ${counts[tab.value] && tab.value !== "resolved" ? "bg-accent/15 text-accent" : "text-faint"}`} |
| 186 | > |
| 187 | {counts[tab.value]} |
| 188 | </span> |
| 189 | </Link> |
| 190 | ); |
| 191 | })} |
| 192 | </nav> |
| 193 | |
| 194 | <form method="get" action="/incidents" className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center"> |
| 195 | {filters.tab !== "open" && <input type="hidden" name="tab" value={filters.tab} />} |
| 196 | <Input name="q" type="search" defaultValue={filters.q} placeholder="Search titles" aria-label="Search titles" className="sm:w-64" /> |
| 197 | {filters.tab !== "maintenance" && ( |
| 198 | <Select name="severity" defaultValue={filters.severity ?? ""} aria-label="Severity" className="sm:w-40"> |
| 199 | <option value="">Any severity</option> |
| 200 | {INCIDENT_SEVERITIES.map((s) => ( |
| 201 | <option key={s.value} value={s.value}> |
| 202 | {s.label} |
| 203 | </option> |
| 204 | ))} |
| 205 | </Select> |
| 206 | )} |
| 207 | <Select name="component" defaultValue={filters.component ?? ""} aria-label="Part" className="sm:w-56"> |
| 208 | <option value="">Any part</option> |
| 209 | {components.map((c) => ( |
| 210 | <option key={c.key} value={c.key}> |
| 211 | {c.name} |
| 212 | </option> |
| 213 | ))} |
| 214 | </Select> |
| 215 | <div className="flex items-center gap-2"> |
| 216 | <Button type="submit" variant="quiet" className="py-2"> |
| 217 | Apply |
| 218 | </Button> |
| 219 | {filtered && ( |
| 220 | <Link to={incidentsHref({ tab: filters.tab })} className="px-1 text-xs text-muted underline-offset-4 hover:text-fg hover:underline"> |
| 221 | Clear |
| 222 | </Link> |
| 223 | )} |
| 224 | </div> |
| 225 | </form> |
| 226 | |
| 227 | <div className="mt-4"> |
| 228 | {filters.tab === "maintenance" ? ( |
| 229 | shownMaintenance.length === 0 ? ( |
| 230 | <EmptyState title="No maintenance scheduled"> |
| 231 | <Link to="/incidents/maintenance/new" className="text-accent hover:underline"> |
| 232 | Schedule maintenance |
| 233 | </Link>{" "} |
| 234 | to tell people ahead of planned work. |
| 235 | </EmptyState> |
| 236 | ) : ( |
| 237 | <ul className="divide-y divide-line rounded-lg border border-line bg-surface"> |
| 238 | {shownMaintenance.map((m) => ( |
| 239 | <MaintenanceRow key={m.id} m={m} names={names} /> |
| 240 | ))} |
| 241 | </ul> |
| 242 | ) |
| 243 | ) : shown.length === 0 ? ( |
| 244 | <EmptyState |
| 245 | title={ |
| 246 | filtered |
| 247 | ? "Nothing matches" |
| 248 | : filters.tab === "open" |
| 249 | ? "Nothing is open" |
| 250 | : filters.tab === "drafts" |
| 251 | ? "No drafts" |
| 252 | : "No resolved incidents in the last 180 days" |
| 253 | } |
| 254 | > |
| 255 | {filtered |
| 256 | ? "Try another severity or part, or clear the filters." |
| 257 | : filters.tab === "open" |
| 258 | ? "The status page shows only its own checks." |
| 259 | : filters.tab === "drafts" |
| 260 | ? "When a part fails or is slow on four of five checks in a row, a draft appears here and the alert address gets an email, again after 45 minutes if no one picks it up, then every 6 hours. If no one picks it up and the part stays healthy for 10 minutes, it is dismissed on its own. Restarts during a deploy are not drafted unless they outlast it." |
| 261 | : null} |
| 262 | </EmptyState> |
| 263 | ) : ( |
| 264 | <ul className="divide-y divide-line rounded-lg border border-line bg-surface"> |
| 265 | {shown.map((incident) => ( |
| 266 | <IncidentRow key={incident.id} incident={incident} names={names} now={now} /> |
| 267 | ))} |
| 268 | </ul> |
| 269 | )} |
| 270 | </div> |
| 271 | |
| 272 | {board && !board.email && ( |
| 273 | <p className="mt-4 flex items-center gap-2 text-xs text-faint"> |
| 274 | <Mail size={13} aria-hidden="true" /> |
| 275 | The status worker has no email sender or no STATUS_SECRET, so subscribers cannot sign up; the feeds still carry every update. |
| 276 | </p> |
| 277 | )} |
| 278 | </main> |
| 279 | ); |
| 280 | } |