mokhtar
85b8be50a0
Gates / frontend (push) Successful in 1m57s
Gates / test (push) Successful in 2m34s
Gates / test-aarch64 (push) Successful in 8m9s
Gates / package (push) Successful in 7m14s
Gates / container (push) Successful in 17s
CI / gates (push) Successful in 18m17s
Release / guard (push) Successful in 33s
Gates / test-aarch64 (push) Successful in 7m22s
Gates / container (push) Successful in 11s
Release / gates (push) Successful in 10m35s
Gates / frontend (push) Successful in 2m8s
Gates / test (push) Successful in 2m16s
Gates / package (push) Successful in 44s
Release / publish (push) Successful in 10m4s
The Overview page takes the decided visual language (specs/ui-visual-redesign.md): four centred totals with their Activity links, a smoothed area chart of total and blocked queries with point hover and a tooltip centred beside the point, a stacked client chart in eight distinct hues plus one Other band that is always a series, and a card row with the cache hit rate, the query types as a single-hue ramp ring, and the upstream breakdown. The count axis grows its margin with the widest grouped tick and draws whole-number ticks only. GET /api/overview takes a client parameter; the scoped read uses idx_query_log_ts and the cache keeps scoped slots. The device selector beside the period selector is URL state, so a scoped view is a link, and the tile links carry the scope into Activity. The route reduces a pasted IPv6 scope to the RFC 5952 spelling the logger stores, mapped addresses included, and drops anything that is not an address. A failed device list says so under the selector with a retry. All measured quantities go through admin/src/lib/format.ts: grouped counts, two-decimal percentages, one-decimal rates, durations as the two largest nonzero units. Identifiers, configured values and preset labels render as written; the module header states that scope. A sweep test refuses toFixed, toLocaleString, Intl.NumberFormat and padStart anywhere else. Chrome: one 4px radius from the metrics constants, shared Card with a prominent title and a one-line description on every panel, the settings form sections on the same card with a floated legend, the sidebar grouped into Monitoring and System with a status block (protection, queries per minute on Overview, uptime), keyboard-focusable table scroll wrappers, and the accent darkened to 5.43:1 on its wash. Not built: the spec's ranked-list primitive, which has no consumer and no API rows. Codex reviewed sessions B to D over five rounds (thirty-three findings fixed, thirteen rejected as non-quantities); the owner skipped a sixth round. Claude-Session: https://claude.ai/code/session_01VTgx3a1zz1R78o4K55kkwR
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import * as stylex from "@stylexjs/stylex";
|
|
import { formatTime } from "@/lib/format";
|
|
import type { Coverage } from "@/lib/types";
|
|
import { colors, metrics } from "@/ui/tokens.stylex";
|
|
|
|
const styles = stylex.create({
|
|
notice: {
|
|
marginTop: "0.75rem",
|
|
borderRadius: metrics.radius,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.surfaceHover,
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textSecondary,
|
|
},
|
|
/** The same sentence with no box, for a results footer that already has one. */
|
|
note: {
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
},
|
|
});
|
|
|
|
/**
|
|
* How far back the numbers on this page can reach.
|
|
*
|
|
* Rendered whenever a response says its window is incomplete, which includes
|
|
* the common case of a request with no lower bound at all. The line states the
|
|
* watermark and nothing more: the same incompleteness covers a log retention
|
|
* has pruned and one that simply has not been running long enough, and the
|
|
* response does not say which.
|
|
*
|
|
* `note` is the same sentence without the panel, for a place that already sits
|
|
* under the data it qualifies — a results footer states the reach of the count
|
|
* beside it, where a full-width banner would announce a limit as news.
|
|
*/
|
|
export default function CoverageNotice({
|
|
coverage,
|
|
variant = "banner",
|
|
}: {
|
|
coverage: Coverage;
|
|
variant?: "banner" | "note";
|
|
}) {
|
|
if (coverage.complete) return null;
|
|
return (
|
|
<p role="status" {...stylex.props(variant === "note" ? styles.note : styles.notice)}>
|
|
Query history is available from {formatTime(coverage.available_since)}.
|
|
</p>
|
|
);
|
|
}
|