mokhtar
039eeeda96
the five-field form with its apply button is gone. one row holds a search-shaped domain field and a client ip field that debounce into the url with enter flushing at once, result segments and a time menu that commit instantly, and a clear that appears only when a filter is active without reflowing the row. presets freeze both absolute bounds at click time so a bookmark describes the same investigation later, custom ranges apply atomically through set range with inline validation, and echo queues keep in-flight commits from clobbering newer typing or newer picks. live mode renders no toolbar, the availability banner became a footer note, previous rows stay visible during refetch, and every control carries a 44px hit target.
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 } from "@/ui/tokens.stylex";
|
|
|
|
const styles = stylex.create({
|
|
notice: {
|
|
marginTop: "0.75rem",
|
|
borderRadius: "0.25rem",
|
|
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>
|
|
);
|
|
}
|