apps/sudo/app/routes/incident.tsx · flagon-io/g1t

status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas1d ago

1

import { CheckCircle2, Circle, CircleDot, ExternalLink, FileText, Globe, Lock, Radar } from "lucide-react";

2

import { Link, redirect } from "react-router";

3

4

import type { AdminIncidentDetail, IncidentSeverity, IncidentStatus, TimelineEntry } from "@g1t/contracts";

5

6

import type { Route } from "./+types/incident";

7

import { BackLink, ImpactBadge, ImpactPicker, PhaseBadge, SeverityBadge, Timer } from "~/components/incidents";

8

import { Badge, Button, Field, Input, Notice, Section, Select, Textarea, When } from "~/components/ui";

9

import { text } from "~/lib/forms";

10

import {

11

INCIDENT_SEVERITIES,

12

INCIDENT_STATUSES,

13

duration,

14

nextStatus,

15

notifyByDefault,

16

readImpacts,

17

secondsBetween,

18

severityLabel,

19

staffSuggestions,

20

statusLabel,

21

} from "~/lib/incidents";

22

import { staffEmails, statusAdmin } from "~/lib/services.server";

23

import { settle } from "~/lib/settle";

24

import { requireStaff } from "~/lib/staff";

25

26

export const meta: Route.MetaFunction = ({ loaderData }) => [

27

{ title: `${loaderData?.incident?.title ?? "Incident"} · sudo` },

28

{ name: "robots", content: "noindex, nofollow" },

29

];

30

31

/** What the page says after a change, by the code in `?done=`. */

32

const DONE: Record<string, string> = {

33

declared: "Declared and published. status.g1t.sh shows it within 30 seconds.",

34

update: "Update posted. The status page shows it within 30 seconds.",

35

note: "Note added. Only staff see it.",

36

resolved: "Resolved. Write the postmortem while it is fresh.",

37

roles: "Roles saved.",

38

published: "Published to the status page.",

39

dismissed: "Dismissed. It never appeared on the status page.",

40

followup: "Follow-up saved.",

41

};

42

43

export async function loader({ params, request, context }: Route.LoaderArgs) {

44

const staff = requireStaff(context);

45

const [incident, components] = await Promise.all([settle(statusAdmin.incident(params.id)), settle(statusAdmin.components())]);

46

if (incident.ok && !incident.value) throw new Response("No such incident.", { status: 404 });

47

const url = new URL(request.url);

48

const done = url.searchParams.get("declared") ? "declared" : (url.searchParams.get("done") ?? "");

49

const detail = incident.ok ? incident.value : null;

50

return {

51

me: staff.email,

52

incident: detail,

53

components: components.ok ? components.value : [],

54

error: incident.ok ? null : incident.error,

55

done: DONE[done] ?? null,

56

staff: staffSuggestions(staffEmails(), [staff.email, detail?.commander, detail?.communications, ...(detail?.followups.map((f) => f.owner) ?? [])]),

57

now: new Date().toISOString(),

58

};

59

}

60

61

type ActionData = { error: string; intent: string };

62

63

export async function action({ params, request, context }: Route.ActionArgs) {

64

const staff = requireStaff(context);

65

const form = await request.formData();

66

const intent = text(form, "intent");

67

const id = params.id ?? "";

68

const back = (done: string, anchor = "") => redirect(`/incidents/${id}?done=${done}${anchor}`);

69

const failed = (error: string) => ({ error, intent }) satisfies ActionData;

70

const unwrap = async <T,>(call: Promise<{ ok: true; value: T } | { ok: false; error: { message: string } }>) => {

71

const result = await settle(call);

72

if (!result.ok) return { ok: false as const, error: result.error };

73

return result.value.ok ? { ok: true as const, value: result.value.value } : { ok: false as const, error: result.value.error.message };

74

};

75

76

if (intent === "update" || intent === "resolve") {

77

const components = await settle(statusAdmin.components());

78

const keys = components.ok ? components.value.map((c) => c.key) : [];

79

const isPublic = intent === "resolve" || text(form, "visibility") === "public";

80

const status = intent === "resolve" ? "resolved" : (text(form, "status") as IncidentStatus) || null;

81

const r = await unwrap(

82

statusAdmin.update(id, {

83

public: isPublic,

84

message: String(form.get("message") ?? ""),

85

status,

86

severity: (text(form, "severity") as IncidentSeverity) || null,

87

impacts: intent === "resolve" ? [] : readImpacts(form, keys),

88

notify: isPublic && form.get("notify") === "on",

89

by: staff.email,

90

}),

91

);

92

if (!r.ok) return failed(r.error);

93

return back(status === "resolved" ? "resolved" : isPublic ? "update" : "note");

94

}

95

if (intent === "roles") {

96

const r = await unwrap(statusAdmin.roles(id, { commander: text(form, "commander") || null, communications: text(form, "communications") || null, by: staff.email }));

97

return !r.ok ? failed(r.error) : back("roles", "#roles");

98

}

99

if (intent === "publish") {

100

const r = await unwrap(

101

statusAdmin.publish(id, { title: text(form, "title") || null, message: String(form.get("message") ?? ""), notify: form.get("notify") === "on", by: staff.email }),

102

);

103

return !r.ok ? failed(r.error) : back("published");

104

}

105

if (intent === "dismiss") {

106

const r = await unwrap(statusAdmin.dismiss(id, { reason: text(form, "reason"), by: staff.email }));

107

return !r.ok ? failed(r.error) : back("dismissed");

108

}

109

if (intent === "followup_add") {

110

const r = await unwrap(statusAdmin.addFollowUp(id, { title: text(form, "title"), owner: text(form, "owner") || null, by: staff.email }));

111

return !r.ok ? failed(r.error) : back("followup", "#followups");

112

}

113

if (intent === "followup_set") {

114

const r = await unwrap(statusAdmin.setFollowUp(id, text(form, "followup"), { done: text(form, "done") === "1", by: staff.email }));

115

return !r.ok ? failed(r.error) : back("followup", "#followups");

116

}

117

return failed("Unknown action.");

118

}

119

120

const KIND_ICON = { update: Globe, note: Lock, detected: Radar, followup: CheckCircle2, postmortem: FileText } as const;

121

122

function EntryLine({ entry }: { entry: TimelineEntry }) {

123

const who = entry.by === "status" ? "the checks" : entry.by;

124

const meta = (

125

126

127

</span>

128

);

129

if (entry.kind === "update") {

130

return (

131

132

133

134

<span className="text-xs font-semibold text-merged">Public update</span>

135

{entry.status && <Badge tone="lavender">{statusLabel(entry.status)}</Badge>}

136

{meta}

137

{entry.notified != null && <span className="text-xs text-faint">· emailed {entry.notified}</span>}

138

</div>

139

<p className="mt-1.5 text-sm whitespace-pre-line text-fg">{entry.text}</p>

140

</li>

141

);

142

}

143

if (entry.kind === "note") {

144

return (

145

146

147

148

<span className="text-xs font-medium text-muted">Internal note</span>

149

{meta}

150

</div>

151

<p className="mt-1.5 text-sm whitespace-pre-line text-fg-soft">{entry.text}</p>

152

</li>

153

);

154

}

155

const Icon = KIND_ICON[entry.kind as keyof typeof KIND_ICON] ?? CircleDot;

156

const loud = entry.kind === "detected" || entry.kind === "failing";

157

return (

158

159

160

161

<span className={loud ? "text-fg-soft" : ""}>{entry.text}</span> {meta}

162

</p>

163

</li>

164

);

165

}

166

167

function Header({ incident, now }: { incident: AdminIncidentDetail; now: string }) {

168

const open = incident.resolved_at == null;

169

const d = incident.durations;

170

return (

171

<>

172

173

174

175

{incident.source === "detected" && <Badge tone="warn">Detected by the checks</Badge>}

176

{incident.visibility !== "public" && <Badge>Not on the status page</Badge>}

177

</div>

178

<h1 className="mt-2 text-2xl font-semibold tracking-tight break-words">{incident.title}</h1>

179

180

Impact began <When at={incident.started_at} time /> · declared by <span className="font-mono text-xs">{incident.created_by === "status" ? "the checks" : incident.created_by}</span>

181

{incident.commander && (

182

<>

183

{" "}· IC <span className="font-mono text-xs">{incident.commander}</span>

184

</>

185

)}

186

{incident.communications && (

187

<>

188

{" "}· comms <span className="font-mono text-xs">{incident.communications}</span>

189

</>

190

)}

191

</p>

192

<div className="mt-4 grid grid-cols-2 divide-line rounded-lg border border-line bg-surface sm:grid-cols-4 sm:divide-x [&>*:nth-child(-n+2)]:border-b [&>*:nth-child(-n+2)]:border-line sm:[&>*:nth-child(-n+2)]:border-b-0">

193

<Timer

194

label={open ? "Open for" : "Lasted"}

195

value={duration(open ? secondsBetween(incident.started_at, now) : d.to_resolve)}

196

tone={open ? "warn" : "mint"}

197

hint={open ? `${severityLabel(incident.severity)} · ${statusLabel(incident.status)}` : <When at={incident.resolved_at} time />}

198

/>

199

200

<Timer label="To mitigate" value={duration(d.to_mitigate)} hint={incident.mitigated_at ? <When at={incident.mitigated_at} time /> : "At monitoring"} />

201

<Timer label="To resolve" value={duration(d.to_resolve)} hint={incident.resolved_at ? <When at={incident.resolved_at} time /> : "Still open"} />

202

</div>

203

</>

204

);

205

}

206

207

function UpdateForm({ incident, components, error }: { incident: AdminIncidentDetail; components: { key: string; name: string }[]; error: string | null }) {

208

const draft = incident.visibility === "draft";

209

const current = new Map(incident.components.map((c) => [c.key, c.impact]));

210

return (

211

212

213

214

{error && <Notice tone="error">{error}</Notice>}

215

{!draft && (

216

217

218

219

<Globe size={14} aria-hidden="true" /> Public update

220

</label>

221

222

223

<Lock size={14} aria-hidden="true" /> Internal note

224

</label>

225

</fieldset>

226

)}

227

228

229

230

<option value="">Keep: {statusLabel(incident.status)}</option>

231

{INCIDENT_STATUSES.filter((s) => s.value !== incident.status).map((s) => (

232

233

{s.label}

234

{s.value === nextStatus(incident.status) ? " (next)" : ""}

235

</option>

236

))}

237

</Select>

238

</Field>

239

240

241

<option value="">Keep: {severityLabel(incident.severity)}</option>

242

{INCIDENT_SEVERITIES.filter((s) => s.value !== incident.severity).map((s) => (

243

244

{s.label}

245

</option>

246

))}

247

</Select>

248

</Field>

249

</div>

250

251

<summary className="cursor-pointer text-sm text-muted select-none hover:text-fg">Change the parts' impact</summary>

252

253

254

</div>

255

</details>

256

257

258

</Field>

259

260

{!draft ? (

261

262

263

Email subscribers (public updates only)

264

</label>

265

) : (

266

267

)}

268

269

Post

270

</Button>

271

</div>

272

</form>

273

</Section>

274

);

275

}

276

277

export default function Incident({ loaderData, actionData }: Route.ComponentProps) {

278

const { incident, components, error, done, staff, now } = loaderData;

279

const failed = actionData as ActionData | undefined;

280

const errorFor = (intent: string) => (failed?.intent === intent ? failed.error : null);

281

if (!incident) {

282

return (

283

284

<BackLink to="/incidents">Incidents</BackLink>

285

286

<Notice tone="warn">The status worker did not answer: {error}</Notice>

287

</div>

288

</main>

289

);

290

}

291

const names = new Map(components.map((c) => [c.key, c.name]));

292

const open = incident.resolved_at == null;

293

const isPublic = incident.visibility === "public";

294

const affected = incident.components.filter((c) => c.impact !== "operational");

295

const timeline = [...incident.timeline].reverse();

296

297

return (

298

299

<BackLink to={incident.visibility === "draft" ? "/incidents?tab=drafts" : open ? "/incidents" : "/incidents?tab=resolved"}>Incidents</BackLink>

300

301

302

303

{done && <Notice tone="ok">{done}</Notice>}

304

{failed && !["update", "roles", "followup_add", "followup_set", "resolve", "publish", "dismiss"].includes(failed.intent) && <Notice tone="error">{failed.error}</Notice>}

305

</div>

306

307

{incident.visibility === "draft" && (

308

309

<h2 className="font-semibold">This is a draft</h2>

310

311

{incident.source === "detected"

312

? "The checks failed several times in a row and made this. Nobody outside sees it until you publish it. If it was a blip, dismiss it."

313

: "Nobody outside sees it until you publish it."}

314

</p>

315

316

317

318

{errorFor("publish") && <Notice tone="error">{errorFor("publish")}</Notice>}

319

320

321

</Field>

322

323

324

</Field>

325

326

327

328

Email subscribers

329

</label>

330

331

Publish to the status page

332

</Button>

333

</div>

334

</form>

335

336

337

{errorFor("dismiss") && <Notice tone="error">{errorFor("dismiss")}</Notice>}

338

339

340

</Field>

341

342

Dismiss draft

343

</Button>

344

</form>

345

</div>

346

</section>

347

)}

348

349

350

351

{incident.visibility !== "dismissed" && <UpdateForm incident={incident} components={components} error={errorFor("update")} />}

352

353

354

{timeline.map((entry) => (

355

356

))}

357

</ol>

358

</Section>

359

</div>

360

361

362

{open && isPublic && (

363

364

365

366

{errorFor("resolve") && <Notice tone="error">{errorFor("resolve")}</Notice>}

367

368

369

370

Email subscribers

371

</label>

372

373

<CheckCircle2 size={15} aria-hidden="true" /> Resolve incident

374

</Button>

375

</form>

376

</Section>

377

)}

378

379

{!open && isPublic && (

380

381

382

383

384

{incident.postmortem ? "Edit the postmortem" : "Write the postmortem"}

385

</Link>

386

{incident.postmortem_published_at && <Badge tone="mint">Published</Badge>}

387

</div>

388

</Section>

389

)}

390

391

392

{affected.length === 0 ? (

393

<p className="text-sm text-muted">None marked.</p>

394

) : (

395

396

{affected.map((c) => (

397

398

<span className="min-w-0 truncate">{names.get(c.key) ?? c.key}</span>

399

400

</li>

401

))}

402

</ul>

403

)}

404

</Section>

405

406

407

408

409

{errorFor("roles") && <Notice tone="error">{errorFor("roles")}</Notice>}

410

411

412

</Field>

413

414

415

</Field>

416

417

Save roles

418

</Button>

419

</form>

420

</Section>

421

422

423

{errorFor("followup_set") && (

424

425

<Notice tone="error">{errorFor("followup_set")}</Notice>

426

</div>

427

)}

428

{incident.followups.length > 0 && (

429

430

{incident.followups.map((f) => (

431

432

433

434

435

436

<button

437

type="submit"

438

aria-label={f.done_at ? `Mark “${f.title}” not done` : `Mark “${f.title}” done`}

439

className="mt-0.5 shrink-0 rounded text-faint hover:text-merged"

440

>

441

{f.done_at ? <CheckCircle2 size={16} className="text-accent" /> : <Circle size={16} />}

442

</button>

443

444

<span className={f.done_at ? "text-faint line-through" : ""}>{f.title}</span>

445

{f.owner && <span className="block font-mono text-xs text-faint">{f.owner}</span>}

446

</span>

447

</form>

448

</li>

449

))}

450

</ul>

451

)}

452

453

454

{errorFor("followup_add") && <Notice tone="error">{errorFor("followup_add")}</Notice>}

455

456

457

458

459

Add

460

</Button>

461

</div>

462

</form>

463

</Section>

464

465

466

467

{isPublic ? (

468

<li>

469

470

Status page permalink <ExternalLink size={13} aria-hidden="true" />

471

</a>

472

<span className="block truncate font-mono text-xs text-faint">{incident.url}</span>

473

</li>

474

) : (

475

<li className="text-muted">No public page until it is published.</li>

476

)}

477

<li>

478

479

Audit log

480

</Link>

481

</li>

482

</ul>

483

</Section>

484

485

{staff.map((email) => (

486

487

))}

488

</datalist>

489

</aside>

490

</div>

491

</main>

492

);

493

}