371 lines
11 KiB
TypeScript
371 lines
11 KiB
TypeScript
import { useState, type FormEvent } from "react";
|
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import * as api from "@/lib/api";
|
|
import { formatMicros, formatTime } from "@/lib/format";
|
|
import { queriesInfiniteQuery } from "@/lib/queries";
|
|
import type { QueriesFilter, QueryRow } from "@/lib/types";
|
|
import { qtypeName } from "./qtype";
|
|
import Select from "@/ui/Select";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
|
|
const DARK = "@media (prefers-color-scheme: dark)";
|
|
|
|
const STATUS_OPTIONS = [
|
|
{ value: "any", label: "All" },
|
|
{ value: "blocked", label: "Blocked only" },
|
|
{ value: "allowed", label: "Allowed only" },
|
|
];
|
|
|
|
const styles = stylex.create({
|
|
heading: {
|
|
fontSize: "1.5rem",
|
|
lineHeight: "2rem",
|
|
fontWeight: 600,
|
|
},
|
|
/** One column on a phone, two from `sm`, five from `lg`, as before. */
|
|
filterGrid: {
|
|
marginTop: "1rem",
|
|
display: "grid",
|
|
gap: "0.75rem",
|
|
gridTemplateColumns: {
|
|
default: "repeat(1, minmax(0, 1fr))",
|
|
"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
|
|
"@media (min-width: 1024px)": "repeat(5, minmax(0, 1fr))",
|
|
},
|
|
},
|
|
filterLabel: {
|
|
display: "block",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
filterInput: {
|
|
marginTop: "0.25rem",
|
|
width: "100%",
|
|
},
|
|
buttonRow: {
|
|
display: "flex",
|
|
alignItems: "flex-end",
|
|
gap: "0.5rem",
|
|
gridColumn: {
|
|
default: null,
|
|
"@media (min-width: 640px)": "span 2 / span 2",
|
|
"@media (min-width: 1024px)": "span 5 / span 5",
|
|
},
|
|
},
|
|
toolbarButton: {
|
|
fontWeight: 500,
|
|
},
|
|
note: {
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
},
|
|
empty: {
|
|
marginTop: "1.5rem",
|
|
color: colors.textMuted,
|
|
},
|
|
tableWrap: {
|
|
marginTop: "1rem",
|
|
overflowX: "auto",
|
|
borderRadius: "0.25rem",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.border,
|
|
},
|
|
table: {
|
|
width: "100%",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
/** The header tint is a shade off the ground in each scheme, not a token role. */
|
|
head: {
|
|
backgroundColor: { default: "oklch(98.5% 0 none)", [DARK]: "oklch(21% 0.006 285.885)" },
|
|
textAlign: "left",
|
|
},
|
|
th: {
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.5rem",
|
|
fontWeight: 500,
|
|
color: colors.textSecondary,
|
|
},
|
|
/** `divide-y`: a hairline between rows, so the first row carries none. */
|
|
row: {
|
|
borderTopWidth: { default: 1, ":first-child": 0 },
|
|
borderTopStyle: "solid",
|
|
borderTopColor: colors.border,
|
|
},
|
|
cell: {
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.5rem",
|
|
},
|
|
nowrap: {
|
|
whiteSpace: "nowrap",
|
|
},
|
|
breakAll: {
|
|
wordBreak: "break-all",
|
|
},
|
|
small: {
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
},
|
|
muted: {
|
|
color: colors.textMuted,
|
|
},
|
|
blockedWrap: {
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "0.375rem",
|
|
},
|
|
blockedBadge: {
|
|
borderRadius: "0.25rem",
|
|
paddingInline: "0.375rem",
|
|
paddingBlock: "0.125rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
fontWeight: 500,
|
|
backgroundColor: { default: "oklch(93.6% 0.032 17.717)", [DARK]: "oklch(39.6% 0.141 25.723)" },
|
|
color: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(88.5% 0.062 18.334)" },
|
|
},
|
|
footer: {
|
|
marginTop: "0.75rem",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.75rem",
|
|
},
|
|
moreError: {
|
|
marginTop: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.dangerText,
|
|
},
|
|
});
|
|
|
|
function errorMessage(error: unknown): string {
|
|
return error instanceof Error ? error.message : String(error);
|
|
}
|
|
|
|
function datetimeLocalToUnix(value: string): number | undefined {
|
|
if (value === "") return undefined;
|
|
const ms = new Date(value).getTime();
|
|
return Number.isFinite(ms) ? Math.floor(ms / 1000) : undefined;
|
|
}
|
|
|
|
export function BlockedCell({ row }: { row: Pick<QueryRow, "blocked" | "block_reason"> }) {
|
|
if (!row.blocked) return <span {...stylex.props(styles.muted)}>—</span>;
|
|
return (
|
|
<span {...stylex.props(styles.blockedWrap)}>
|
|
<span {...stylex.props(styles.blockedBadge)}>Blocked</span>
|
|
{row.block_reason !== "" && <span {...stylex.props(styles.small, styles.muted)}>{row.block_reason}</span>}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function QueryCells({ row }: { row: Omit<QueryRow, "id"> }) {
|
|
return (
|
|
<>
|
|
<td {...stylex.props(styles.cell, styles.nowrap, styles.muted)}>{formatTime(row.ts)}</td>
|
|
<td {...stylex.props(styles.cell, styles.small, styles.breakAll, shared.mono)}>{row.domain}</td>
|
|
<td {...stylex.props(styles.cell, styles.small, styles.nowrap, shared.mono)}>{row.client_ip}</td>
|
|
<td {...stylex.props(styles.cell, styles.nowrap)}>{qtypeName(row.qtype)}</td>
|
|
<td {...stylex.props(styles.cell)}>
|
|
<BlockedCell row={row} />
|
|
</td>
|
|
<td {...stylex.props(styles.cell, styles.nowrap, shared.tabularNums)}>
|
|
{row.response_time_us === null ? "—" : formatMicros(row.response_time_us)}
|
|
</td>
|
|
<td {...stylex.props(styles.cell, styles.nowrap)}>
|
|
{row.cache_hit === null ? "—" : row.cache_hit ? "hit" : "miss"}
|
|
</td>
|
|
<td {...stylex.props(styles.cell, styles.small, styles.breakAll, shared.mono)}>
|
|
{row.upstream === "" ? "—" : row.upstream}
|
|
</td>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function QueryTableHead() {
|
|
return (
|
|
<thead {...stylex.props(styles.head)}>
|
|
<tr>
|
|
<th {...stylex.props(styles.th)}>Time</th>
|
|
<th {...stylex.props(styles.th)}>Domain</th>
|
|
<th {...stylex.props(styles.th)}>Client</th>
|
|
<th {...stylex.props(styles.th)}>Type</th>
|
|
<th {...stylex.props(styles.th)}>Status</th>
|
|
<th {...stylex.props(styles.th)}>Response</th>
|
|
<th {...stylex.props(styles.th)}>Cache</th>
|
|
<th {...stylex.props(styles.th)}>Upstream</th>
|
|
</tr>
|
|
</thead>
|
|
);
|
|
}
|
|
|
|
export default function QueryLogPage() {
|
|
const [domain, setDomain] = useState("");
|
|
const [client, setClient] = useState("");
|
|
const [blocked, setBlocked] = useState("any");
|
|
const [since, setSince] = useState("");
|
|
const [until, setUntil] = useState("");
|
|
|
|
const [applied, setApplied] = useState<QueriesFilter>({});
|
|
|
|
const base = useInfiniteQuery(queriesInfiniteQuery(applied));
|
|
|
|
const pages = base.data?.pages ?? [];
|
|
const rows: QueryRow[] = pages.flatMap((page) => page.queries);
|
|
const filterActive = Object.keys(applied).length > 0;
|
|
// `base.hasNextPage` reads the query state, which is empty while placeholder
|
|
// data stands in for a filter change; derive the cursor from what is on
|
|
// screen so the button keeps its place instead of flashing "end of log".
|
|
const lastPage = pages[pages.length - 1];
|
|
const hasMore = lastPage !== undefined && lastPage.next_before !== null;
|
|
// A 401 is already redirecting via the cache-level handleUnauthorized.
|
|
const isUnauthorized = base.error instanceof api.ApiError && base.error.status === 401;
|
|
const moreError = base.isFetchNextPageError && !isUnauthorized ? errorMessage(base.error) : null;
|
|
|
|
function applyFilters(event: FormEvent) {
|
|
event.preventDefault();
|
|
const filter: QueriesFilter = {};
|
|
if (domain.trim() !== "") filter.domain = domain.trim();
|
|
if (client.trim() !== "") filter.client = client.trim();
|
|
if (blocked === "blocked") filter.blocked = true;
|
|
if (blocked === "allowed") filter.blocked = false;
|
|
const sinceTs = datetimeLocalToUnix(since);
|
|
if (sinceTs !== undefined) filter.since = sinceTs;
|
|
const untilTs = datetimeLocalToUnix(until);
|
|
if (untilTs !== undefined) filter.until = untilTs;
|
|
setApplied(filter);
|
|
}
|
|
|
|
function clearFilters() {
|
|
setDomain("");
|
|
setClient("");
|
|
setBlocked("any");
|
|
setSince("");
|
|
setUntil("");
|
|
setApplied({});
|
|
}
|
|
|
|
function loadMore() {
|
|
if (!hasMore || base.isFetchingNextPage || base.isPlaceholderData) return;
|
|
void base.fetchNextPage();
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h1 {...stylex.props(styles.heading)}>Query Log</h1>
|
|
|
|
<form onSubmit={applyFilters} {...stylex.props(styles.filterGrid)}>
|
|
<label {...stylex.props(styles.filterLabel)}>
|
|
Domain contains
|
|
<input
|
|
type="text"
|
|
value={domain}
|
|
onChange={(event) => setDomain(event.target.value)}
|
|
{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
|
|
/>
|
|
</label>
|
|
<label {...stylex.props(styles.filterLabel)}>
|
|
Client (exact)
|
|
<input
|
|
type="text"
|
|
value={client}
|
|
onChange={(event) => setClient(event.target.value)}
|
|
{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
|
|
/>
|
|
</label>
|
|
<Select
|
|
variant="compactField"
|
|
label="Status"
|
|
value={blocked}
|
|
onChange={setBlocked}
|
|
options={STATUS_OPTIONS}
|
|
/>
|
|
<label {...stylex.props(styles.filterLabel)}>
|
|
Since
|
|
<input
|
|
type="datetime-local"
|
|
value={since}
|
|
onChange={(event) => setSince(event.target.value)}
|
|
{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
|
|
/>
|
|
</label>
|
|
<label {...stylex.props(styles.filterLabel)}>
|
|
Until
|
|
<input
|
|
type="datetime-local"
|
|
value={until}
|
|
onChange={(event) => setUntil(event.target.value)}
|
|
{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
|
|
/>
|
|
</label>
|
|
<div {...stylex.props(styles.buttonRow)}>
|
|
<button type="submit" {...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}>
|
|
Apply filters
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={clearFilters}
|
|
{...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}
|
|
>
|
|
Clear
|
|
</button>
|
|
{base.isFetching && (
|
|
<span {...stylex.props(styles.note)} role="status">
|
|
Loading…
|
|
</span>
|
|
)}
|
|
</div>
|
|
</form>
|
|
|
|
{base.data === undefined ? (
|
|
<p {...stylex.props(styles.empty, shared.pulse)} role="status">
|
|
Loading query log…
|
|
</p>
|
|
) : rows.length === 0 ? (
|
|
<p {...stylex.props(styles.empty)}>
|
|
{filterActive ? "No queries match the current filters." : "No queries logged yet."}
|
|
</p>
|
|
) : (
|
|
<>
|
|
<div {...stylex.props(styles.tableWrap)}>
|
|
<table {...stylex.props(styles.table)}>
|
|
<QueryTableHead />
|
|
<tbody>
|
|
{rows.map((row) => (
|
|
<tr key={row.id} {...stylex.props(styles.row)}>
|
|
<QueryCells row={row} />
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div {...stylex.props(styles.footer)}>
|
|
<p {...stylex.props(styles.note)}>
|
|
Showing {rows.length} {rows.length === 1 ? "query" : "queries"}
|
|
{hasMore ? "" : " — end of log"}
|
|
</p>
|
|
{hasMore && (
|
|
<button
|
|
type="button"
|
|
onClick={loadMore}
|
|
disabled={base.isFetchingNextPage || base.isPlaceholderData}
|
|
{...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}
|
|
>
|
|
{base.isFetchingNextPage ? "Loading…" : "Load more"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{moreError !== null && (
|
|
<p role="alert" {...stylex.props(styles.moreError)}>
|
|
Failed to load more: {moreError}
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|