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

1

import { type ReactNode } from "react";

2

3

import type { CostsReport, PriceProposal } from "@g1t/contracts";

4

5

import type { Route } from "./+types/costs-bill";

6

import { CostsHeader } from "~/components/costs-header";

7

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

8

import { countLabel, driftLabel, percentLabel, unitDollars } from "~/lib/costs";

9

import { type CostsActionResult, costsAction, costsLoader } from "~/lib/costs-route.server";

10

import { dollarsField, usd } from "~/lib/money";

11

12

export const meta: Route.MetaFunction = () => [{ title: "Bill & pricing · sudo" }, { name: "robots", content: "noindex, nofollow" }];

13

14

export const loader = ({ request, context }: Route.LoaderArgs) => costsLoader(request, context);

15

export const action = ({ request, context }: Route.ActionArgs) => costsAction(request, context);

16

17

/**

18

* Cloudflare's bill as read, what does not add up against it, and the

19

* price book: proposals, versions, mappings and the guardrails on them.

20

*/

21

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

22

const { range, report, error, done } = loaderData;

23

const failed = actionData && "error" in actionData ? (actionData as CostsActionResult) : null;

24

const description =

25

"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.";

if (!report) {

return (

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

</div>

</main>

);

}

return (

<Section

className="mt-5"

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)."

45

>

46

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

47

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

) : (

<thead>

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

54

55

56

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

57

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

</tr>

</thead>

<tbody>

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

62

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>

68

</td>

69

70

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

71

</td>

72

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

73

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

74

<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"

88

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.`}

89

>

90

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

91

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

92

) : (

93

94

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

))}

</ul>

)}

</Section>

<thead>

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

107

108

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

</tr>

</thead>

<tbody>

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

115

116

117

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

118

{!v.appliedAt && (

119

120

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

</span>

)}

</td>

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

125

<td className="tabular px-4 py-2.5 text-right">{unitDollars(v.priceMicros)}</td>

</td>

{v.reason} · {v.createdBy}

</td>

</tr>

))}

</tbody>

</table>

</div>

</Section>

<Section

className="mt-6"

title="Cloudflare's lines"

142

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."

143

>

144

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

145

<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>

152

<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>

171

</td>

172

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

173

<td className="px-4 py-2.5 sm:pr-5">{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-[var(--g1t-merged)]" /> Scale to g1t's count

215

</label>

216

217

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

Remove

</Button>

</div>

</div>

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

224

225

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

</div>

)}

</form>

</Section>

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

</label>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

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

262

263

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

264

</div>

265

)}

266

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

</div>

</form>

</Section>

</main>

);

}

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

275

const rise = p.proposedCostMicros > p.currentCostMicros;

276

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>

282

</div>

283

284

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

285

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

</div>

</div>

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

290