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

"Cloudflare's bill as read, line by line, what does not add up against g1t's own counts and price book, and the prices themselves: proposals waiting for a decision, every version, the mappings and the guardrails.";

37

if (!report) {

38

return (

<Notice tone="warn">Billing did not answer for costs: {error}</Notice>

</div>

</main>

);

}

return (

<Section

className="mt-6"

id="drift"

title="Drift"

description="Over the last 7 days: counts g1t and Cloudflare disagree on past a mapping's threshold, a bill far from the price book's cost of the same usage, and leaks (cost nothing charges for, or a Cloudflare meter no one mapped)."

58

>

59

{report.drift.length === 0 ? (

60

<p className="text-sm text-muted">Nothing has drifted.</p>

) : (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Product</th>

67

68

69

<th className="px-4 py-2 text-right font-medium">Cloudflare</th>

70

<th className="px-4 py-2 text-right font-medium sm:pr-5">Delta</th>

</tr>

</thead>

<tbody>

{report.drift.map((d) => {

75

const money = d.kind !== "count";

return (

{d.title}

<span className="mt-0.5 block max-w-md text-xs text-faint">{d.detail.replace(`${d.title}: `, "")}</span>

81

</td>

82

83

<Badge tone={d.kind === "leak" ? "danger" : "warn"}>{driftLabel(d.kind)}</Badge>

84

</td>

85

<td className="tabular px-4 py-2.5 text-right">{money ? usd(d.ours) : countLabel(d.ours)}</td>

86

<td className="tabular px-4 py-2.5 text-right">{money ? usd(d.cloudflare) : countLabel(d.cloudflare)}</td>

87

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{percentLabel(d.deltaPercent, { signed: true })}</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</Section>

<Section

className="mt-6"

id="proposals"

title="Price proposals"

101

description={`What the keeper and the reconciler measured. Moves within ${report.settings.autoApplyPercent}% apply themselves${report.settings.autoApply ? "" : " (off now)"}; larger ones wait here. A fall applies at once; a rise after ${report.settings.noticeDays} days' notice, and a monthly meter's from the start of the next month.`}

102

>

103

{report.proposals.length === 0 ? (

104

<p className="text-sm text-muted">No proposals yet.</p>

105

) : (

106

107

{report.proposals.map((p) => (

))}

</ul>

)}

</Section>

<Section

className="mt-6"

title="Price versions"

117

description="Every price as it was and will be. A version never changes once written; each charge records the version it was made at."

>

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Meter</th>

124

125

<th className="px-4 py-2 text-right font-medium">Price</th>

</tr>

</thead>

<tbody>

{report.versions.map((v) => {

132

const cells = versionCells(v);

return (

<span className="font-mono text-xs">{v.meter}</span> <span className="text-faint">v{v.version}</span>

137

{!v.appliedAt && (

138

139

<Badge tone="info">Coming</Badge>

140

</span>

141

)}

142

{cells.note && <span className="block text-xs text-faint">{cells.note}</span>}

143

</td>

144

<td className="tabular px-4 py-2.5 text-right">{cells.cost === "—" ? <span className="text-faint">—</span> : cells.cost}</td>

145

<td className="tabular px-4 py-2.5 text-right">{cells.price}</td>

</td>

{v.reason} · {v.createdBy}

</td>

</tr>

);

})}

</tbody>

</table>

</div>

</Section>

<Section

className="mt-6"

title="Cloudflare's lines"

163

description="Every meter Cloudflare billed or counted in the range, as it named it, and which of g1t's products it is a cost of. Not mapped means no one decided what pays for it."

164

>

165

{report.lines.length === 0 ? (

166

<EmptyState title="No lines yet">The bill is read once a day at 04:17 UTC, or now with “Run the analysis now”.</EmptyState>

) : (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Product / meter</th>

173

<th className="px-4 py-2 text-right font-medium">Quantity</th>

</tr>

</thead>

<tbody>

{report.lines.map((l) => (

{l.product} / {l.meter}

</span>

{l.rawName}

{l.source === "artifacts_events" ? " (Artifacts' own count)" : ""}

</span>

</td>

{countLabel(l.quantity)} <span className="text-xs text-faint">{l.unit}</span>

192

</td>

193

<td className="tabular px-4 py-2.5 text-right">{usd(l.costMicros)}</td>

194

195

{l.bucket ? <span className="text-fg-soft">{l.bucket}</span> : <Badge tone="danger">Not mapped</Badge>}

</td>

</tr>

))}

</tbody>

</table>

</div>

)}

</Section>

<Section

className="mt-6"

id="mappings"

title="Mappings"

description="Which of g1t's products each Cloudflare meter is a cost of. The longest matching meter prefix wins; * is the rest of the product. A price meter is measured from it; an own meter is g1t's count to compare; scaling prices one of g1t's units at as many of Cloudflare's as it took."

>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

<input type="checkbox" name="scaleToOwn" className="accent-(--g1t-accent)" /> Scale to g1t's count

238

</label>

239

240

<Button type="submit">Save mapping</Button>

Remove

</Button>

</div>

</div>

{failed?.section === "mapping" && (

247

248

<Notice tone="error">{failed.error}</Notice>

</div>

)}

</form>

</Section>

<input type="checkbox" name="autoApply" defaultChecked={report.settings.autoApply} className="accent-(--g1t-accent)" /> On

</label>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

{failed?.section === "settings" && (

285

286

<Notice tone="error">{failed.error}</Notice>

287

</div>

288

)}

289

<Button type="submit">Save guardrails</Button>

</div>

</form>

</Section>

</main>

);

}

function ProposalRow({ proposal: p, error }: { proposal: PriceProposal; error: string | null }) {

298

const rise = p.proposedCostMicros > p.currentCostMicros;

299

const outcome = proposalOutcome(p);

300

const statusTone = p.status === "open" ? "warn" : p.status === "rejected" || p.status === "superseded" ? "plain" : "mint";

return (

<span className="font-medium">{p.title}</span> <span className="font-mono text-xs text-faint">{p.meter}</span>

306

</div>

307

308

{p.suspect && <Badge tone="danger">Far off: look first</Badge>}

309

<Badge tone={statusTone}>{p.status}</Badge>

</div>

</div>

Cost {unitDollars(p.currentCostMicros)} → <span className={rise ? "text-warn" : "text-success"}>{unitDollars(p.proposedCostMicros)}</span> per{" "}

314

{p.unit || "unit"} <span className="text-faint">({percentLabel(p.changePercent, { signed: true })})</span>

315

</p>

316

<p className="mt-1 text-xs text-muted">{p.reason}</p>

317

318

From the {p.source}, <When at={p.createdAt} time />

319

{outcome ? ` · ${outcome}` : ""}

320

{p.effectiveAt && p.status !== "superseded" ? (

321

<>

322

{" "}

323

· in force from <When at={p.effectiveAt} time />

324

</>

325

) : null}

326

{p.note ? ` · “${p.note}”` : ""}

327

</p>

328

{p.status === "open" && (

Approve

</Button>

Reject

</Button>

</div>

</form>

)}

{error && (

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

</div>

)}

</li>

);

}

/**

* Cloudflare's current billing cycle, the way its Billable usage page shows

354

* it: each meter's use, what the cycle includes, what is past it and what

355

* that costs, with the total so far and the projection.

356

*/

357

function CycleSection({ report }: { report: CostsReport }) {

358

const cycle = report.cycle;

359

const read = report.billRead ? billReadNote(report.billRead) : null;

360

const unpriced = cycle ? unpricedMeters(cycle.meters) : [];

361

const headline = cycle ? cycleHeadline(cycle) : null;

return (

<Section

className="mt-5"

id="cycle"

title="This billing cycle"

367

description="Cloudflare's usage bill for the cycle so far, meter by meter. Each meter's included amount is the account's, once a cycle; the cost is Cloudflare's own where its lines carry one, else the list price past the included amount (per-million meters in whole millions), on the days the cycle's total passed it. Subscriptions are apart."

368

>

369

{!cycle || !headline ? (

370

<EmptyState title="No cycle read yet">The bill is read once a day at 04:17 UTC, or now with “Run the analysis now”.</EmptyState>

) : (

<>

<span className="font-medium text-fg">{headline.title}</span>

375

<span className="block text-muted">{headline.detail}.</span>

376

</p>

377

{unpriced.length > 0 && (

378

379

380

Used with no list price, so counted at $0 until Cloudflare puts a cost on it or a price is added (src/cycle.rs):{" "}

381

{unpriced.map((m) => `${m.product} / ${m.meter}`).join(", ")}.

</Notice>

</div>

)}

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Meter</th>

390

391

<th className="px-4 py-2 text-right font-medium">Included</th>

392

<th className="px-4 py-2 text-right font-medium">Billable</th>

</tr>

</thead>

<tbody>

{cycle.meters.map((m) => (

{m.rawName}

<span className="block text-xs text-faint">{basisLabel(m.basis)}</span>

402

</td>

403

404

{countLabel(m.quantity)} <span className="text-xs text-faint">{m.unit}</span>

405

</td>

406

<td className="tabular px-4 py-2.5 text-right text-muted">{m.included == null ? "—" : countLabel(m.included)}</td>

407

<td className="tabular px-4 py-2.5 text-right">{countLabel(m.billableQuantity)}</td>

408

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(m.costMicros)}</td>

</tr>

))}

<tr>

Usage so far

</td>

<td className="tabular px-4 py-2.5 text-right font-medium sm:pr-5">{usd(cycle.usageMicros, { cents: true })}</td>

</tr>

</tbody>

</table>

</div>

</>

)}

{read && (

Last read <When at={report.billRead?.readAt ?? null} time />: {read.text}

</p>

)}

</Section>

);

}

function MappingsTable({ report }: { report: CostsReport }) {

return (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Cloudflare</th>

438

<th className="px-4 py-2 font-medium">g1t product</th>

439

<th className="px-4 py-2 font-medium">Price meter</th>

440

<th className="px-4 py-2 font-medium">Own meter</th>

441

<th className="px-4 py-2 text-right font-medium sm:pr-5">Drift at</th>

</tr>

</thead>

<tbody>

{report.mappings.map((m) => (

{m.product} / {m.meter}

450

</span>

451

{m.note && <span className="block text-xs text-faint">{m.note}</span>}

452

</td>

453

<td className="px-4 py-2 text-fg-soft">{m.bucket}</td>

454

<td className="px-4 py-2 font-mono text-xs text-muted">{m.priceMeter ?? "—"}</td>

455

456

{m.ownMeter ?? "—"}

457

{m.scaleToOwn && <span className="block font-sans text-faint">scaled</span>}

458

</td>

459

<td className="tabular px-4 py-2 text-right text-muted sm:pr-5">{m.driftPercent}%</td>

</tr>

))}

</tbody>

</table>

</div>

);

}