250 lines
8.5 KiB
TypeScript
250 lines
8.5 KiB
TypeScript
/**
|
|
* The seven columns of the Activity table: Time, Domain, Client, Type, Result,
|
|
* Route and Duration.
|
|
*
|
|
* The labels here are the compact forms a scanned table needs. The detail page
|
|
* keeps `provenanceCopy`'s long forms, which spell out the same facts with room
|
|
* for the rcode number and the "answered by" phrasing.
|
|
*
|
|
* The cells render both a stored row and a streamed event, so they know nothing
|
|
* about routes: the caller renders the Domain cell's contents and decides what,
|
|
* if anything, a row opens. A streamed row has no id — the frame precedes its
|
|
* own insert — and only the caller knows whether it has a surface for one.
|
|
*/
|
|
|
|
import type { ReactNode } from "react";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { formatMicros, formatTime } from "@/lib/format";
|
|
import type { RouteKind } from "@/lib/types";
|
|
import { ClientName, type ClientNames } from "@/features/clients/clientNames";
|
|
import { rcodeShortName } from "@/features/provenance/provenanceCopy";
|
|
import { qtypeName } from "@/features/provenance/qtype";
|
|
import type { QuerySummary } from "@/features/provenance/querySummary";
|
|
import FactLine from "@/ui/FactLine";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors, metrics } from "@/ui/tokens.stylex";
|
|
|
|
const DARK = "@media (prefers-color-scheme: dark)";
|
|
|
|
/** Wide enough for an ordinary hostname, narrow enough to leave the six other columns room. */
|
|
const DOMAIN_MAX_WIDTH = "24rem";
|
|
|
|
/**
|
|
* Narrower than the seven columns need with ordinary data, so the table keeps
|
|
* two: Domain, which takes the other columns' facts as lines under the name,
|
|
* and Result. Hiding cells keeps a native table; re-laying its rows out as
|
|
* blocks would put the table semantics at the mercy of each browser engine.
|
|
* The wrapper that scrolls is the container.
|
|
*/
|
|
const COMPACT = "@container (max-width: 50rem)";
|
|
|
|
const styles = stylex.create({
|
|
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,
|
|
},
|
|
cell: {
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.5rem",
|
|
},
|
|
nowrap: {
|
|
whiteSpace: "nowrap",
|
|
},
|
|
breakAll: {
|
|
wordBreak: "break-all",
|
|
},
|
|
domainCell: {
|
|
maxWidth: DOMAIN_MAX_WIDTH,
|
|
},
|
|
wide: {
|
|
display: { default: null, [COMPACT]: "none" },
|
|
},
|
|
/** A name can be one unbroken label as wide as the table; `anywhere` also lowers the cell's minimum width. */
|
|
compact: {
|
|
display: { default: "none", [COMPACT]: "block" },
|
|
marginTop: "0.125rem",
|
|
color: colors.textMuted,
|
|
overflowWrap: "anywhere",
|
|
},
|
|
small: {
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
},
|
|
muted: {
|
|
color: colors.textMuted,
|
|
},
|
|
/**
|
|
* The padding makes the whole row height clickable, and the equal negative
|
|
* margin gives that height back to the row. The clamp lives on the inner
|
|
* span, not here: a padded `-webkit-box` can paint a third clipped line
|
|
* inside its own padding.
|
|
*/
|
|
domainLink: {
|
|
display: "block",
|
|
maxWidth: DOMAIN_MAX_WIDTH,
|
|
paddingBlock: "0.5rem",
|
|
marginBlock: "-0.5rem",
|
|
color: colors.primaryOnSurface,
|
|
textDecorationLine: "none",
|
|
},
|
|
/**
|
|
* A domain is unbounded; the column is not. The clamp counts only the lines
|
|
* of the element that directly holds the text, so every cell wraps its text
|
|
* in this span — a `td` that took `display: -webkit-box` would stop being a
|
|
* table cell.
|
|
*/
|
|
domainClamp: {
|
|
display: "-webkit-box",
|
|
WebkitBoxOrient: "vertical",
|
|
WebkitLineClamp: 2,
|
|
overflow: "hidden",
|
|
},
|
|
/**
|
|
* The badge shape and its weight are the signal; the tint only says which
|
|
* kind of unhappy answer this was. A monochrome or colour-blind reading of
|
|
* the table still separates a blocked or failed row from a plain NOERROR
|
|
* one, which a hue alone would not.
|
|
*/
|
|
badge: {
|
|
display: "inline-block",
|
|
whiteSpace: "nowrap",
|
|
borderRadius: metrics.radius,
|
|
paddingInline: "0.375rem",
|
|
paddingBlock: "0.125rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
fontWeight: 600,
|
|
},
|
|
blockedBadge: {
|
|
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)" },
|
|
},
|
|
faultBadge: {
|
|
backgroundColor: { default: "oklch(96.2% 0.059 95.617)", [DARK]: "oklch(41.4% 0.112 45.904)" },
|
|
color: { default: "oklch(47.3% 0.137 46.201)", [DARK]: "oklch(90.1% 0.076 70.697)" },
|
|
},
|
|
});
|
|
|
|
const ROUTE_LABELS: Record<RouteKind, string> = {
|
|
blocked: "Blocked",
|
|
local: "Local",
|
|
forward_zone: "Forward zone",
|
|
upstream: "Upstream",
|
|
cache: "Cache",
|
|
rejected: "Rejected",
|
|
};
|
|
|
|
/** The compact Route label. `Record` over the union, so a new kind fails `tsc`. */
|
|
export function routeLabel(kind: RouteKind): string {
|
|
return ROUTE_LABELS[kind];
|
|
}
|
|
|
|
/**
|
|
* The compact Result label. A block is the answer the operator asked nxdns for,
|
|
* so it wins over the rcode it was delivered as — a blocked name answered with
|
|
* NOERROR and a zero address is still "Blocked". Everything else reads as the
|
|
* code the client saw.
|
|
*/
|
|
export function resultLabel(row: Pick<QuerySummary, "blocked" | "rcode">): string {
|
|
return row.blocked ? "Blocked" : rcodeShortName(row.rcode);
|
|
}
|
|
|
|
/**
|
|
* What a row's domain is wrapped in. The caller owns the routes, so it builds
|
|
* the element; the look stays here, as `activityDomainLink`, which the caller
|
|
* spreads onto the control itself — a link's own colour beats one inherited
|
|
* from a wrapper. `id` is null for a streamed row, which history has no surface
|
|
* for and live opens from memory.
|
|
*/
|
|
export type DomainRenderer = (id: number | null, children: ReactNode) => ReactNode;
|
|
|
|
export const activityDomainLink = styles.domainLink;
|
|
|
|
export function ResultCellContent({ row }: { row: Pick<QuerySummary, "blocked" | "rcode"> }) {
|
|
const label = resultLabel(row);
|
|
if (row.blocked) return <span {...stylex.props(styles.badge, styles.blockedBadge)}>{label}</span>;
|
|
if (row.rcode !== 0) return <span {...stylex.props(styles.badge, styles.faultBadge)}>{label}</span>;
|
|
return <span {...stylex.props(styles.small, styles.muted)}>{label}</span>;
|
|
}
|
|
|
|
/** The facts the hidden columns hold, in their column order, for the compact Domain cell. */
|
|
function CompactFacts({ row, clientNames }: { row: QuerySummary; clientNames: ClientNames }) {
|
|
// The label stands in for the hidden Type header: a screen reader says a bare "A" as the article.
|
|
const qtype = (
|
|
<>
|
|
<span {...stylex.props(shared.srOnly)}>Type </span>
|
|
{qtypeName(row.qtype)}
|
|
</>
|
|
);
|
|
const facts: ReactNode[] = [formatTime(row.ts), qtype, routeLabel(row.route_kind)];
|
|
if (row.response_time_us !== null) facts.push(formatMicros(row.response_time_us));
|
|
return (
|
|
<>
|
|
<span {...stylex.props(styles.compact)}>
|
|
<ClientName ip={row.client_ip} names={clientNames} />
|
|
</span>
|
|
<span {...stylex.props(styles.compact, shared.tabularNums)}>
|
|
<FactLine facts={facts} />
|
|
</span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ActivityCells({
|
|
row,
|
|
clientNames,
|
|
renderDomain,
|
|
}: {
|
|
row: QuerySummary;
|
|
clientNames: ClientNames;
|
|
renderDomain: DomainRenderer;
|
|
}) {
|
|
return (
|
|
<>
|
|
<td {...stylex.props(styles.cell, styles.nowrap, styles.muted, styles.wide)}>{formatTime(row.ts)}</td>
|
|
<td title={row.domain} {...stylex.props(styles.cell, styles.small, styles.domainCell)}>
|
|
{renderDomain(
|
|
row.id,
|
|
<span {...stylex.props(styles.domainClamp, styles.breakAll, shared.mono)}>{row.domain}</span>,
|
|
)}
|
|
<CompactFacts row={row} clientNames={clientNames} />
|
|
</td>
|
|
<td {...stylex.props(styles.cell, styles.small, styles.nowrap, styles.wide)}>
|
|
<ClientName ip={row.client_ip} names={clientNames} />
|
|
</td>
|
|
<td {...stylex.props(styles.cell, styles.nowrap, styles.wide)}>{qtypeName(row.qtype)}</td>
|
|
<td {...stylex.props(styles.cell, styles.nowrap)}>
|
|
<ResultCellContent row={row} />
|
|
</td>
|
|
<td {...stylex.props(styles.cell, styles.nowrap, styles.wide)}>{routeLabel(row.route_kind)}</td>
|
|
<td {...stylex.props(styles.cell, styles.nowrap, shared.tabularNums, styles.wide)}>
|
|
{row.response_time_us === null ? "—" : formatMicros(row.response_time_us)}
|
|
</td>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export const ACTIVITY_COLUMNS = ["Time", "Domain", "Client", "Type", "Result", "Route", "Duration"] as const;
|
|
|
|
const COMPACT_COLUMNS: ReadonlySet<string> = new Set(["Domain", "Result"]);
|
|
|
|
export function ActivityTableHead() {
|
|
return (
|
|
<thead {...stylex.props(styles.head)}>
|
|
<tr>
|
|
{ACTIVITY_COLUMNS.map((column) => (
|
|
<th key={column} {...stylex.props(styles.th, !COMPACT_COLUMNS.has(column) && styles.wide)}>
|
|
{column}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
);
|
|
}
|