chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,288 @@
|
||||
import { Form } from "@remix-run/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "~/components/primitives/Buttons";
|
||||
import { FormError } from "~/components/primitives/FormError";
|
||||
import { Header2 } from "~/components/primitives/Headers";
|
||||
import { Input } from "~/components/primitives/Input";
|
||||
import { Label } from "~/components/primitives/Label";
|
||||
import { Paragraph } from "~/components/primitives/Paragraph";
|
||||
import * as Property from "~/components/primitives/PropertyTable";
|
||||
|
||||
// Local shape mirrors the server-side discriminated union just enough for this
|
||||
// view. Decoupled from the .server module so the component stays client-safe.
|
||||
// Duration fields are always suffixed strings — the server's DurationSchema
|
||||
// rejects anything else, so non-string overrides fall back to the default.
|
||||
export type RateLimitConfig =
|
||||
| {
|
||||
type: "tokenBucket";
|
||||
refillRate: number;
|
||||
interval: string;
|
||||
maxTokens: number;
|
||||
}
|
||||
| {
|
||||
type: "fixedWindow" | "slidingWindow";
|
||||
window: string;
|
||||
tokens: number;
|
||||
};
|
||||
|
||||
export type EffectiveRateLimit = {
|
||||
source: "override" | "default";
|
||||
config: RateLimitConfig;
|
||||
};
|
||||
|
||||
export type FieldErrors = Record<string, string[] | undefined> | null;
|
||||
|
||||
// Props shared by every per-domain wrapper (Api / Batch / future ones).
|
||||
export type RateLimitWrapperProps = {
|
||||
effective: EffectiveRateLimit;
|
||||
errors: FieldErrors;
|
||||
savedJustNow: boolean;
|
||||
isSubmitting: boolean;
|
||||
};
|
||||
|
||||
type Props = RateLimitWrapperProps & {
|
||||
title: string;
|
||||
intent: string;
|
||||
};
|
||||
|
||||
export function RateLimitSection({
|
||||
title,
|
||||
intent,
|
||||
effective,
|
||||
errors,
|
||||
savedJustNow,
|
||||
isSubmitting,
|
||||
}: Props) {
|
||||
const hasFieldErrors = !!errors && Object.keys(errors).length > 0;
|
||||
const fieldError = (field: string) =>
|
||||
errors && field in errors ? errors[field]?.[0] : undefined;
|
||||
|
||||
const current = effective.config.type === "tokenBucket" ? effective.config : null;
|
||||
|
||||
const [isEditing, setIsEditing] = useState(hasFieldErrors);
|
||||
const [refillRate, setRefillRate] = useState(current ? String(current.refillRate) : "");
|
||||
const [intervalStr, setIntervalStr] = useState(current ? String(current.interval) : "");
|
||||
const [maxTokens, setMaxTokens] = useState(current ? String(current.maxTokens) : "");
|
||||
|
||||
useEffect(() => {
|
||||
if (hasFieldErrors) setIsEditing(true);
|
||||
}, [hasFieldErrors]);
|
||||
|
||||
useEffect(() => {
|
||||
if (savedJustNow && !hasFieldErrors) setIsEditing(false);
|
||||
}, [savedJustNow, hasFieldErrors]);
|
||||
|
||||
const currentDescription = current
|
||||
? describeRateLimit(
|
||||
current.refillRate,
|
||||
parseDurationToMs(String(current.interval)),
|
||||
current.maxTokens
|
||||
)
|
||||
: null;
|
||||
|
||||
const previewDescription = describeRateLimit(
|
||||
Number(refillRate) || 0,
|
||||
parseDurationToMs(intervalStr),
|
||||
Number(maxTokens) || 0
|
||||
);
|
||||
|
||||
const cancelEdit = () => {
|
||||
setRefillRate(current ? String(current.refillRate) : "");
|
||||
setIntervalStr(current ? String(current.interval) : "");
|
||||
setMaxTokens(current ? String(current.maxTokens) : "");
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="flex flex-col gap-3 rounded-md border border-grid-bright bg-background-bright p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Header2>{title}</Header2>
|
||||
{!isEditing && (
|
||||
<Button
|
||||
variant="tertiary/small"
|
||||
onClick={() => setIsEditing(true)}
|
||||
disabled={isSubmitting || effective.config.type !== "tokenBucket"}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{savedJustNow && (
|
||||
<div className="rounded-md border border-green-600/40 bg-green-600/10 px-3 py-2">
|
||||
<Paragraph variant="small" className="text-green-500">
|
||||
Saved.
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Paragraph variant="small">
|
||||
Status:{" "}
|
||||
{effective.source === "override" ? "Custom override active." : "Using system default."}
|
||||
</Paragraph>
|
||||
|
||||
{!isEditing ? (
|
||||
<>
|
||||
<Property.Table>
|
||||
{effective.config.type === "tokenBucket" ? (
|
||||
currentDescription ? (
|
||||
<>
|
||||
<Property.Item>
|
||||
<Property.Label>Sustained rate</Property.Label>
|
||||
<Property.Value>{currentDescription.sustained}</Property.Value>
|
||||
</Property.Item>
|
||||
<Property.Item>
|
||||
<Property.Label>Burst allowance</Property.Label>
|
||||
<Property.Value>{currentDescription.burst}</Property.Value>
|
||||
</Property.Item>
|
||||
</>
|
||||
) : (
|
||||
<Property.Item>
|
||||
<Property.Value>Invalid interval on the stored config.</Property.Value>
|
||||
</Property.Item>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<Property.Item>
|
||||
<Property.Label>Type</Property.Label>
|
||||
<Property.Value>{effective.config.type}</Property.Value>
|
||||
</Property.Item>
|
||||
<Property.Item>
|
||||
<Property.Label>Window</Property.Label>
|
||||
<Property.Value>{String(effective.config.window)}</Property.Value>
|
||||
</Property.Item>
|
||||
<Property.Item>
|
||||
<Property.Label>Tokens</Property.Label>
|
||||
<Property.Value>{effective.config.tokens.toLocaleString()}</Property.Value>
|
||||
</Property.Item>
|
||||
</>
|
||||
)}
|
||||
</Property.Table>
|
||||
{effective.config.type !== "tokenBucket" && (
|
||||
<Paragraph variant="small" className="text-amber-500">
|
||||
This override is a {effective.config.type} limit and can't be edited from this form.
|
||||
Change it in the database directly.
|
||||
</Paragraph>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Form method="post" className="flex flex-col gap-3 pt-2">
|
||||
<input type="hidden" name="intent" value={intent} />
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<Label>Refill rate (tokens per interval)</Label>
|
||||
<Input
|
||||
name="refillRate"
|
||||
type="number"
|
||||
min={1}
|
||||
value={refillRate}
|
||||
onChange={(e) => setRefillRate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<FormError>{fieldError("refillRate")}</FormError>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<Label>Interval (e.g. 10s, 1m)</Label>
|
||||
<Input
|
||||
name="interval"
|
||||
type="text"
|
||||
value={intervalStr}
|
||||
onChange={(e) => setIntervalStr(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<FormError>{fieldError("interval")}</FormError>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<Label>Max tokens (burst allowance)</Label>
|
||||
<Input
|
||||
name="maxTokens"
|
||||
type="number"
|
||||
min={1}
|
||||
value={maxTokens}
|
||||
onChange={(e) => setMaxTokens(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<FormError>{fieldError("maxTokens")}</FormError>
|
||||
</div>
|
||||
|
||||
<Paragraph variant="small" className="text-text-dimmed">
|
||||
{previewDescription
|
||||
? `Preview: ${previewDescription.sustained} · ${previewDescription.burst}.`
|
||||
: "Preview: enter valid values to see the effective limit."}
|
||||
</Paragraph>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary/medium"
|
||||
disabled={
|
||||
isSubmitting || !refillRate.trim() || !intervalStr.trim() || !maxTokens.trim()
|
||||
}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="tertiary/medium"
|
||||
onClick={cancelEdit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function parseDurationToMs(duration: string): number {
|
||||
const match = duration.trim().match(/^(\d+)\s*(ms|s|m|h|d)$/);
|
||||
if (!match) return 0;
|
||||
const value = parseInt(match[1], 10);
|
||||
switch (match[2]) {
|
||||
case "ms":
|
||||
return value;
|
||||
case "s":
|
||||
return value * 1_000;
|
||||
case "m":
|
||||
return value * 60_000;
|
||||
case "h":
|
||||
return value * 3_600_000;
|
||||
case "d":
|
||||
return value * 86_400_000;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function describeRateLimit(
|
||||
refillRate: number,
|
||||
intervalMs: number,
|
||||
maxTokens: number
|
||||
): { sustained: string; burst: string } | null {
|
||||
if (refillRate <= 0 || intervalMs <= 0 || maxTokens <= 0) return null;
|
||||
const perMin = (refillRate * 60_000) / intervalMs;
|
||||
let sustained: string;
|
||||
if (perMin >= 1) {
|
||||
sustained = `${formatRateValue(perMin)} requests per minute`;
|
||||
} else {
|
||||
const perHour = perMin * 60;
|
||||
if (perHour >= 1) {
|
||||
sustained = `${formatRateValue(perHour)} requests per hour`;
|
||||
} else {
|
||||
const perDay = perHour * 24;
|
||||
sustained = `${formatRateValue(perDay)} requests per day`;
|
||||
}
|
||||
}
|
||||
return {
|
||||
sustained,
|
||||
burst: `${maxTokens.toLocaleString()} request burst allowance`,
|
||||
};
|
||||
}
|
||||
|
||||
function formatRateValue(value: number): string {
|
||||
return value >= 10 ? Math.round(value).toLocaleString() : value.toFixed(1);
|
||||
}
|
||||
Reference in New Issue
Block a user