NASP/rpki
84
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260728_2 修复rpki-explorer体验问题7项(#134)：证书资源可展开、CMS对象新增EE Parsed Tab、Overview增加repo数KPI/修复Object types标签/Top repositories按objects排序(后端sort参数)/reject reasons按前缀聚类可下钻、Run选择器30s轮询

Browse Source
This commit is contained in:
yuyr
2026-07-28 13:21:58 +08:00
parent 0d6bbec9f3
commit f7f80fe684
20 changed files with 676 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ui/rpki-explorer/src/api/service.ts
View File

@@ -117,9 +117,15 @@ export function getRunSummary(runId: string): Promise<RunSummary> {
/* Repositories */
/* ------------------------------------------------------------------ */
export type RepoListParams = PageParams & {
/** Server-side sort; currently only "objects" is supported. */
sort?: "objects";
order?: "asc" | "desc";
};
export function listRepos(
runId: string,
params: PageParams = {},
params: RepoListParams = {},
): Promise<ListResult<RepositoryRecord>> {
return getList(`${runBase(runId)}/repos`, repositoryRecordSchema, params);
}
@@ -418,6 +424,10 @@ export function getStatsObjectTypes(runId: string): Promise<Record<string, numbe
return getData(`${runBase(runId)}/stats/object-types`, statsMapSchema);
}
export function getStatsOverview(runId: string): Promise<Record<string, number>> {
return getData(`${runBase(runId)}/stats/overview`, statsMapSchema);
}
export function getStatsValidation(runId: string): Promise<Record<string, number>> {
return getData(`${runBase(runId)}/stats/validation`, statsMapSchema);
}

59
ui/rpki-explorer/src/components/ProjectionView.tsx
View File

@@ -1,5 +1,5 @@
import { useQuery } from "@tanstack/react-query";
import type { ReactNode } from "react";
import { useState, type ReactNode } from "react";
import { listManifestFiles, listRevokedCertificates } from "../api/service";
import type { ProjectionRecord } from "../api/schemas";
import { CopyableValue } from "./CopyableValue";
@@ -132,6 +132,34 @@ function uriLines(uris: string[]): ReactNode {
);
}
/**
* Chip list that collapses to `collapsedCount` entries with a clickable
* "+N more" toggle; expanding shows every item (plus a "Show less" toggle).
*/
export function ExpandableChipList({ items, collapsedCount = 12 }: { items: string[]; collapsedCount?: number }) {
const [expanded, setExpanded] = useState(false);
if (!items.length) return <>—</>;
const collapsible = items.length > collapsedCount;
const visible = expanded || !collapsible ? items : items.slice(0, collapsedCount);
return (
<span className="chip-list">
{visible.map((item, i) => (
<span className="chip" key={i}>{item}</span>
))}
{collapsible ? (
<button
type="button"
className="chip chip-more"
onClick={() => setExpanded((prev) => !prev)}
aria-expanded={expanded}
>
{expanded ? "Show less" : `+${items.length - collapsedCount} more`}
</button>
) : null}
</span>
);
}
function ManifestFiles({ runId, objectInstanceId }: { runId: string; objectInstanceId: string }) {
const pager = useCursorPager(`${runId}:${objectInstanceId}:mft`);
const query = useQuery({
@@ -292,7 +320,7 @@ function AspaView({ projection }: { projection: Record<string, unknown> }) {
);
}
function CertificateView({ projection }: { projection: Record<string, unknown> }) {
export function CertificateView({ projection }: { projection: Record<string, unknown> }) {
// Real API shape: the certificate payload lives in `resourceCertificate`
// with extensions nested under `extensions`; keep the older
// certificate/cer + flat-field variants working as fallbacks.
@@ -367,33 +395,11 @@ function CertificateView({ projection }: { projection: Record<string, unknown> }
/>
<MetaRow
label="IP resources"
value={
ipBlocks.length ? (
<span className="chip-list">
{ipBlocks.slice(0, 12).map((b, i) => (
<span className="chip" key={i}>{b}</span>
))}
{ipBlocks.length > 12 ? <span className="chip">+{ipBlocks.length - 12} more</span> : null}
</span>
) : (
"—"
)
}
value={<ExpandableChipList items={ipBlocks} />}
/>
<MetaRow
label="AS resources"
value={
asBlocks.length ? (
<span className="chip-list">
{asBlocks.slice(0, 12).map((b, i) => (
<span className="chip" key={i}>{b}</span>
))}
{asBlocks.length > 12 ? <span className="chip">+{asBlocks.length - 12} more</span> : null}
</span>
) : (
"—"
)
}
value={<ExpandableChipList items={asBlocks} />}
/>
<MetaRow label="Signature algorithm" value={asString(cert.signatureAlgorithm)} mono />
</dl>
@@ -426,7 +432,6 @@ export function ProjectionView({
const projection = record.projection;
const type = (record.objectType ?? "").toLowerCase();
// The query service nests the typed payload one level down:
// projection = { input, object: { roa | manifest | crl | certificate | aspa, … }, schemaVersion, tool }
// Accept a flat payload too, so older fixtures / shape variants keep working.

3
ui/rpki-explorer/src/components/Shell.tsx
View File

@@ -59,6 +59,9 @@ function RunSelector() {
queryKey: ["runs", "selector"],
queryFn: () => listRuns({ limit: 25 }),
staleTime: 60_000,
// Soak runs keep producing new runs; poll so the dropdown picks them up
// without a manual page refresh.
refetchInterval: 30_000,
});
const healthQuery = useQuery({ queryKey: ["health"], queryFn: getHealth });
const latestId = healthQuery.data?.latestReadyRun ?? runsQuery.data?.items[0]?.runId;

4
ui/rpki-explorer/src/lib/format.test.ts
View File

@@ -98,6 +98,10 @@ describe("objectTypeLabel", () => {
expect(objectTypeLabel("mft")).toBe("Manifest");
expect(objectTypeLabel("asa")).toBe("ASPA");
});
it("maps router certificate spellings", () => {
expect(objectTypeLabel("router_certificate")).toBe("Router certificate");
expect(objectTypeLabel("router_cert")).toBe("Router certificate");
});
it("uppercases unknown types", () => {
expect(objectTypeLabel("xyz")).toBe("XYZ");
});

3
ui/rpki-explorer/src/lib/format.ts
View File

@@ -106,6 +106,9 @@ export function objectTypeLabel(type: string | null | undefined): string {
return "Ghostbusters";
case "ee":
return "EE Certificate";
case "router_certificate":
case "router_cert":
return "Router certificate";
case "other":
return "Other";
default:

48
ui/rpki-explorer/src/lib/projection.test.ts
View File

@@ -1,5 +1,6 @@
import { describe, expect, it } from "vitest";
import { asArray, asNumber, asRecord, asString } from "./projection";
import type { ProjectionRecord } from "../api/schemas";
import { asArray, asNumber, asRecord, asString, eeCertificateProjection } from "./projection";
describe("projection guards", () => {
it("asRecord accepts plain objects only", () => {
@@ -23,3 +24,48 @@ describe("projection guards", () => {
expect(asArray({})).toEqual([]);
});
});
describe("eeCertificateProjection", () => {
const eeCert = { kind: "Ee", subject: "CN=ee" };
const recordWith = (object: unknown): ProjectionRecord =>
({ parseStatus: "ok", projection: { object } }) as unknown as ProjectionRecord;
it("extracts the Ee certificate from the CMS wrapper", () => {
const record = recordWith({
type: "roa",
signedObject: {
signedData: {
certificates: [
{ resourceCertificate: { kind: "Ca", subject: "CN=ca" } },
{ resourceCertificate: eeCert },
],
},
},
});
expect(eeCertificateProjection(record)).toEqual({ resourceCertificate: eeCert });
});
it("falls back to the first certificate when no Ee kind is marked", () => {
const record = recordWith({
signedObject: { signedData: { certificates: [{ resourceCertificate: eeCert }] } },
});
expect(eeCertificateProjection(record)).toEqual({ resourceCertificate: eeCert });
});
it("returns null for non-CMS or malformed projections", () => {
expect(eeCertificateProjection(null)).toBeNull();
expect(eeCertificateProjection(recordWith({ type: "crl" }))).toBeNull();
expect(eeCertificateProjection(recordWith(null))).toBeNull();
expect(
eeCertificateProjection(recordWith({ signedObject: { signedData: { certificates: [] } } })),
).toBeNull();
});
it("returns null when the projection failed to parse", () => {
const record = {
parseStatus: "error",
projection: { object: { signedObject: { signedData: { certificates: [{ resourceCertificate: eeCert }] } } } },
} as unknown as ProjectionRecord;
expect(eeCertificateProjection(record)).toBeNull();
});
});

24
ui/rpki-explorer/src/lib/projection.ts
View File

@@ -1,4 +1,6 @@
/** Defensive accessors for loosely-typed projection payloads. */
import type { ProjectionRecord } from "../api/schemas";
export function asRecord(value: unknown): Record<string, unknown> | null {
return value !== null && typeof value === "object" && !Array.isArray(value)
? (value as Record<string, unknown>)
@@ -16,3 +18,25 @@ export function asNumber(value: unknown): number | null {
export function asArray(value: unknown): unknown[] {
return Array.isArray(value) ? value : [];
}
/**
* Extract the CMS wrapper's EE certificate from a parsed projection, if any.
* Real shape: projection.object.signedObject.signedData.certificates[] — each
* entry carries a `resourceCertificate` with `kind: "Ee"` for the signer cert.
* Returns a `{ resourceCertificate }` projection for CertificateView, or null
* when the object is not CMS-signed or has no embedded certificate.
*/
export function eeCertificateProjection(
record: ProjectionRecord | null,
): Record<string, unknown> | null {
const projection = record?.projection;
if (!projection || record?.parseStatus === "error") return null;
const typed = asRecord(projection.object) ?? projection;
const certificates = asArray(asRecord(asRecord(typed.signedObject)?.signedData)?.certificates);
const certs = certificates
.map((entry) => asRecord(asRecord(entry)?.resourceCertificate))
.filter((cert): cert is Record<string, unknown> => Boolean(cert));
if (!certs.length) return null;
const ee = certs.find((cert) => asString(cert.kind) === "Ee") ?? certs[0];
return { resourceCertificate: ee };
}

39
ui/rpki-explorer/src/lib/reasons.test.ts Normal file
View File

@@ -0,0 +1,39 @@
import { describe, expect, it } from "vitest";
import { clusterReasons, reasonClusterKey } from "./reasons";
describe("reasonClusterKey", () => {
it("takes the text before the first colon", () => {
expect(reasonClusterKey("manifest stale: thisUpdate in the past")).toBe("manifest stale");
expect(
reasonClusterKey("manifest is not valid at validation_time: this_update=2023-01-01"),
).toBe("manifest is not valid at validation_time");
});
it("keeps reasons without a colon intact", () => {
expect(reasonClusterKey("certificate expired")).toBe("certificate expired");
});
it("trims whitespace around the prefix", () => {
expect(reasonClusterKey("bad roa : detail")).toBe("bad roa");
});
});
describe("clusterReasons", () => {
it("merges reasons sharing a prefix and sums counts", () => {
const clusters = clusterReasons({
"manifest stale: thisUpdate in the past": 3,
"manifest stale: nextUpdate missing": 2,
"certificate expired: notAfter 2026-01-01": 5,
});
expect(clusters).toEqual([
{ key: "certificate expired", count: 5, variants: 1 },
{ key: "manifest stale", count: 5, variants: 2 },
]);
});
it("sorts by count desc, then key asc for determinism", () => {
const clusters = clusterReasons({ "b: 1": 4, "a: 2": 4, "c": 1 });
expect(clusters.map((c) => c.key)).toEqual(["a", "b", "c"]);
});
it("honours the limit", () => {
const clusters = clusterReasons({ "a: 1": 3, "b: 2": 2, "c: 3": 1 }, 2);
expect(clusters.map((c) => c.key)).toEqual(["a", "b"]);
});
});

39
ui/rpki-explorer/src/lib/reasons.ts Normal file
View File

@@ -0,0 +1,39 @@
/**
* Reject-reason clustering for the overview dashboard.
*
* Raw reject reasons embed object-specific details after a colon
* (e.g. "manifest is not valid at validation_time: this_update=2023-…"),
* which scatters one logical cause across many rows. Grouping by the text
* before the first colon collapses them back into a single cluster.
*/
/** Cluster label for a raw reject reason: text before the first colon. */
export function reasonClusterKey(reason: string): string {
const idx = reason.indexOf(":");
return (idx === -1 ? reason : reason.slice(0, idx)).trim();
}
export interface ReasonCluster {
/** Cluster label (prefix before the first colon, or the whole reason). */
key: string;
/** Total rejected objects across all reasons in the cluster. */
count: number;
/** Distinct raw reasons merged into the cluster. */
variants: number;
}
/** Aggregate a reason→count map into clusters, sorted by count desc. */
export function clusterReasons(map: Record<string, number>, limit = 8): ReasonCluster[] {
const clusters = new Map<string, { count: number; variants: number }>();
for (const [reason, count] of Object.entries(map)) {
const key = reasonClusterKey(reason);
const entry = clusters.get(key) ?? { count: 0, variants: 0 };
entry.count += count;
entry.variants += 1;
clusters.set(key, entry);
}
return [...clusters.entries()]
.map(([key, { count, variants }]) => ({ key, count, variants }))
.sort((a, b) => b.count - a.count || a.key.localeCompare(b.key))
.slice(0, limit);
}

19
ui/rpki-explorer/src/pages/ObjectDetailPage.tsx
View File

@@ -16,12 +16,13 @@ import { CopyableValue } from "../components/CopyableValue";
import { DataTable, type Column } from "../components/DataTable";
import { PageHeader } from "../components/PageHeader";
import { Panel } from "../components/Panel";
import { ProjectionView } from "../components/ProjectionView";
import { CertificateView, ProjectionView } from "../components/ProjectionView";
import { StatusPill } from "../components/StatusPill";
import { EmptyBlock, ErrorBlock, LoadingBlock, Notice } from "../components/StateBlock";
import { TabPanel, Tabs } from "../components/Tabs";
import { WorkflowStatus } from "../components/WorkflowStatus";
import { formatInt, objectTypeLabel } from "../lib/format";
import { eeCertificateProjection } from "../lib/projection";
import { withRunParam } from "../lib/run";
import { useExportJob } from "../lib/useExportJob";
import { useRun } from "../lib/useRun";
@@ -212,10 +213,11 @@ export default function ObjectDetailPage() {
queryFn: () => getObject(runId, objectInstanceId),
});
// Always fetch the parsed projection: the Parsed tab needs it, and the
// conditional "EE Parsed" tab derives from it (CMS-signed objects only).
const projectionQuery = useQuery({
queryKey: ["object-parsed", runId, objectInstanceId],
queryFn: () => getObjectProjection(runId, objectInstanceId),
enabled: tab === "parsed",
staleTime: 5 * 60_000,
});
@@ -251,6 +253,7 @@ export default function ObjectDetailPage() {
}
const object = objectQuery.data;
const eeProjection = eeCertificateProjection(projectionQuery.data ?? null);
const setTab = (next: string) => {
const params = new URLSearchParams(searchParams);
@@ -351,6 +354,7 @@ export default function ObjectDetailPage() {
<Tabs
tabs={[
{ id: "parsed", label: "Parsed" },
...(eeProjection ? [{ id: "ee", label: "EE Parsed" }] : []),
{ id: "validation", label: "Validation" },
{ id: "chain", label: "Chain" },
]}
@@ -377,6 +381,17 @@ export default function ObjectDetailPage() {
)}
</div>
</TabPanel>
{eeProjection ? (
<TabPanel id="ee" active={tab}>
<div style={{ padding: 16 }}>
<CertificateView projection={eeProjection} />
</div>
</TabPanel>
) : tab === "ee" ? (
<div style={{ padding: 16 }}>
<Notice kind="info">This object has no embedded EE certificate in its CMS wrapper.</Notice>
</div>
) : null}
<TabPanel id="validation" active={tab}>
<ValidationTab runId={runId} objectInstanceId={objectInstanceId} />
</TabPanel>

46
ui/rpki-explorer/src/pages/OverviewPage.tsx
View File

@@ -15,6 +15,7 @@ import {
import { Clock, GitBranch, Timer } from "lucide-react";
import {
getStatsObjectTypes,
getStatsOverview,
getStatsReasons,
getStatsValidation,
listRepos,
@@ -35,6 +36,7 @@ import {
objectTypeLabel,
truncateMiddle,
} from "../lib/format";
import { clusterReasons } from "../lib/reasons";
import { withRunParam } from "../lib/run";
import { useRun, runErrorTitle } from "../lib/useRun";
@@ -61,7 +63,7 @@ export default function OverviewPage() {
const { runId, runQuery } = useRun();
const navigate = useNavigate();
const [validationQuery, typesQuery, reasonsQuery, reposQuery] = useQueries({
const [validationQuery, typesQuery, reasonsQuery, reposQuery, overviewQuery] = useQueries({
queries: [
{
queryKey: ["stats", runId, "validation"],
@@ -80,7 +82,12 @@ export default function OverviewPage() {
},
{
queryKey: ["repos", runId, "top"],
queryFn: () => listRepos(runId, { limit: 8 }),
queryFn: () => listRepos(runId, { limit: 8, sort: "objects", order: "desc" }),
staleTime: 60_000,
},
{
queryKey: ["stats", runId, "overview"],
queryFn: () => getStatsOverview(runId),
staleTime: 60_000,
},
],
@@ -109,13 +116,10 @@ export default function OverviewPage() {
.slice(0, 8);
}, [typesQuery.data]);
const reasonRows = useMemo(() => {
const map = reasonsQuery.data ?? {};
return Object.entries(map)
.map(([reason, count]) => ({ reason, count }))
.sort((a, b) => b.count - a.count)
.slice(0, 8);
}, [reasonsQuery.data]);
const reasonRows = useMemo(
() => clusterReasons(reasonsQuery.data ?? {}),
[reasonsQuery.data],
);
const maxReason = reasonRows[0]?.count ?? 0;
@@ -224,6 +228,11 @@ export default function OverviewPage() {
value={formatInt(counts?.publicationPoints)}
to={withRunParam("/publication-points", runId)}
/>
<KpiCard
label="Repositories"
value={formatInt(overviewQuery.data?.repos)}
to={withRunParam("/repositories", runId)}
/>
<KpiCard
label="Rejected"
value={formatInt(counts?.rejectedObjects)}
@@ -304,7 +313,7 @@ export default function OverviewPage() {
<YAxis
type="category"
dataKey="name"
width={104}
width={150}
tickLine={false}
axisLine={false}
tick={{ fontSize: 12, fill: "var(--text-2)" }}
@@ -325,7 +334,7 @@ export default function OverviewPage() {
<div className="overview-bottom">
<Panel
title="Top repositories"
subtitle="First repositories by index order"
subtitle="Repositories with the most objects"
tools={
<Link className="btn small" to={withRunParam("/repositories", runId)}>
View all
@@ -353,7 +362,7 @@ export default function OverviewPage() {
<Panel
title="Top reject reasons"
subtitle="Click a reason to inspect matching objects"
subtitle="Grouped by reason prefix — click to inspect matching objects"
tools={
<Link className="btn small" to={withRunParam("/validation", runId)}>
Validation
@@ -370,12 +379,17 @@ export default function OverviewPage() {
<div className="reason-list">
{reasonRows.map((row) => (
<Link
key={row.reason}
key={row.key}
className="reason-row"
to={withRunParam(`/validation?reason=${encodeURIComponent(row.reason)}`, runId)}
title={row.reason}
to={withRunParam(`/validation?reason=${encodeURIComponent(row.key)}`, runId)}
title={row.key}
>
<span className="reason-text">{row.reason}</span>
<span className="reason-text">
{row.key}
{row.variants > 1 ? (
<span className="text-faint text-small"> ×{row.variants}</span>
) : null}
</span>
<span className="reason-count">{formatInt(row.count)}</span>
<span className="reason-bar" aria-hidden="true">
<span style={{ width: `${maxReason ? (row.count / maxReason) * 100 : 0}%` }} />

12
ui/rpki-explorer/src/styles/components.css
View File

@@ -522,6 +522,18 @@ a.kpi-card:hover {
gap: 6px;
}
/* Clickable expand/collapse toggle inside an ExpandableChipList. */
button.chip-more {
cursor: pointer;
color: var(--blue-700);
border-style: dashed;
background: transparent;
}
button.chip-more:hover {
background: var(--slate-100);
}
/* JSON block */
.json-block {
background: var(--text-1);

69
ui/rpki-explorer/tests/e2e/fixtures.ts
View File

@@ -84,7 +84,9 @@ export const REPO_C = {
terminalStates: { fresh: 1 },
};
export const REPOS = [REPO_A, REPO_B, REPO_C];
// Deliberately not in object-count order: index order (300, 900, 84) differs
// from `sort=objects&order=desc` (900, 300, 84) so tests can tell them apart.
export const REPOS = [REPO_B, REPO_A, REPO_C];
export const PP_1 = {
ppId: "node_1",
@@ -237,6 +239,15 @@ export const STATS_OBJECT_TYPES = {
export const STATS_REASONS = {
"certificate expired: notAfter 2026-01-01T00:00:00Z": 1,
"manifest stale: thisUpdate in the past": 1,
"manifest is not valid at validation_time: this_update=2023-01-01T00:00:00Z": 3,
"manifest is not valid at validation_time: this_update=2024-06-01T00:00:00Z": 2,
};
export const STATS_OVERVIEW = {
publicationPoints: 4,
objects: 1284,
repos: REPOS.length,
vrps: 987,
aspas: 12,
};
export const ROA_PROJECTION = {
@@ -270,6 +281,43 @@ export const ROA_PROJECTION = {
},
],
},
// CMS wrapper with the embedded EE certificate (real query service shape).
signedObject: {
signedData: {
certificates: [
{
resourceCertificate: {
kind: "Ee",
version: 3,
serialNumberHex: "0E65A501",
issuer: "CN=A9114E750000, serialNumber=5A179648",
subject: "CN=alice-roa-ee, serialNumber=0E65A501",
validity: { notBefore: "2026-07-23T00:30:06Z", notAfter: "2027-01-01T00:00:00Z" },
signatureAlgorithm: "1.2.840.113549.1.1.11",
extensions: {
subjectKeyIdentifier: "aa11bb22cc33dd44ee55ff66778899aabbccdd",
authorityKeyIdentifier: "5a179648b3ef2369dce7bdb58140ff7dc7060abf",
ipResources: {
families: [
{
afi: "Ipv4",
choice: {
AddressesOrRanges: [
{ Prefix: { addr: [203, 0, 113, 0], afi: "Ipv4", prefix_len: 24 } },
],
},
},
],
},
asResources: {
asnum: { AsIdsOrRanges: [{ Id: 65001 }] },
},
},
},
},
],
},
},
},
schemaVersion: 2,
tool: "rpki",
@@ -373,7 +421,24 @@ export const CER_PROJECTION = {
},
asResources: {
asnum: {
AsIdsOrRanges: [{ Id: 38008 }, { Id: 38023 }, { Range: { min: 65536, max: 65551 } }],
// 15 entries (> 12 collapsed limit) to exercise the "+N more" expand toggle.
AsIdsOrRanges: [
{ Id: 38008 },
{ Id: 38023 },
{ Range: { min: 65536, max: 65551 } },
{ Id: 64496 },
{ Id: 64497 },
{ Id: 64498 },
{ Id: 64499 },
{ Id: 64500 },
{ Id: 64501 },
{ Id: 64502 },
{ Id: 64503 },
{ Id: 64504 },
{ Id: 64505 },
{ Id: 64506 },
{ Id: 64507 },
],
},
},
},

11
ui/rpki-explorer/tests/e2e/mockApi.ts
View File

@@ -21,6 +21,7 @@ import {
RUN_2,
SERVICE_INFO,
STATS_OBJECT_TYPES,
STATS_OVERVIEW,
STATS_REASONS,
STATS_VALIDATION,
VALIDATION_SUMMARY,
@@ -234,8 +235,13 @@ export async function installMockApi(
}
if (section === "repos" && !a) {
const { page: items, next } = paginate(REPOS, url);
return fulfillJson(route, items, next);
let items = REPOS;
if (url.searchParams.get("sort") === "objects") {
const dir = url.searchParams.get("order") === "asc" ? 1 : -1;
items = [...REPOS].sort((x, y) => dir * (x.objects - y.objects));
}
const { page: itemsPage, next } = paginate(items, url);
return fulfillJson(route, itemsPage, next);
}
if (section === "repos" && a) {
const repo = REPOS.find((r) => r.repoId === a);
@@ -384,6 +390,7 @@ export async function installMockApi(
if (a === "validation") return fulfillJson(route, STATS_VALIDATION);
if (a === "object-types") return fulfillJson(route, STATS_OBJECT_TYPES);
if (a === "reasons") return fulfillJson(route, STATS_REASONS);
if (a === "overview") return fulfillJson(route, STATS_OVERVIEW);
if (a === "downloads") return fulfillJson(route, { requests: 42, bytes: 1234567 });
return fulfillJson(route, {});
}

31
ui/rpki-explorer/tests/e2e/object-detail.spec.ts
View File

@@ -49,8 +49,35 @@ test("validation explain POSTs and renders the audit-projection notice", async (
await expect(page.getByText("not a full revalidation")).toBeVisible();
});
test("manifest object renders the file list", async ({ page }) => {
await page.goto("/objects/obj-mft-0001");
test("CMS-signed ROA shows the EE Parsed tab with the embedded certificate", async ({ page }) => {
await page.goto("/objects/obj-roa-0001");
const eeTab = page.getByRole("tab", { name: "EE Parsed" });
await expect(eeTab).toBeVisible();
await eeTab.click();
// EE certificate fields rendered like the Certificate object Parsed view.
await expect(page.getByText("Serial number")).toBeVisible();
await expect(page.getByText("0E65A501").first()).toBeVisible();
await expect(page.getByText("CN=alice-roa-ee, serialNumber=0E65A501")).toBeVisible();
await expect(page.getByText("CN=A9114E750000, serialNumber=5A179648")).toBeVisible();
await expect(page.getByText("aa11bb22cc33dd44ee55ff66778899aabbccdd")).toBeVisible();
await expect(page.getByText("203.0.113.0/24")).toBeVisible();
await expect(page.getByText("AS65001", { exact: true })).toBeVisible();
await expect(page.getByText("1.2.840.113549.1.1.11")).toBeVisible();
});
test("non-CMS objects do not show the EE Parsed tab", async ({ page }) => {
await page.goto("/objects/obj-crl-0001");
await expect(page.getByText("CRL number")).toBeVisible();
await expect(page.getByRole("tab", { name: "EE Parsed" })).not.toBeVisible();
await page.goto("/objects/obj-cer-0001");
await expect(page.getByText("Serial number")).toBeVisible();
await expect(page.getByRole("tab", { name: "EE Parsed" })).not.toBeVisible();
});
test("manifest object renders the file list", async ({ page }) => { await page.goto("/objects/obj-mft-0001");
await expect(page.getByText("Manifest number")).toBeVisible();
await expect(page.getByText("0A2F")).toBeVisible();
await expect(page.getByRole("cell", { name: "alice.roa" })).toBeVisible();

23
ui/rpki-explorer/tests/e2e/overview.spec.ts
View File

@@ -13,15 +13,28 @@ test("overview renders run strip, KPIs, charts, top repos and reasons", async ({
await expect(page.getByText("VRPs")).toBeVisible();
await expect(page.getByText("987")).toBeVisible();
await expect(page.locator(".kpi-grid").getByText("Rejected")).toBeVisible();
// Repositories KPI from stats/overview
const reposKpi = page.locator(".kpi-grid > *", { hasText: "Repositories" });
await expect(reposKpi).toBeVisible();
await expect(reposKpi).toContainText("3");
// Charts render (recharts svg)
await expect(page.locator(".recharts-responsive-container").first()).toBeVisible();
// Top repositories table
await expect(page.getByRole("cell", { name: "repo-a.example" })).toBeVisible();
// Top repositories table, sorted by objects desc (900 > 300 > 84),
// not the fixture index order (300, 900, 84).
const repoRows = page.locator(".overview-bottom table tbody tr");
await expect(repoRows.first()).toContainText("repo-a.example");
await expect(repoRows.nth(1)).toContainText("repo-b.example");
await expect(repoRows.nth(2)).toContainText("repo-c.example");
// Top reject reasons
await expect(page.getByText("certificate expired: notAfter")).toBeVisible();
// Top reject reasons, clustered by prefix: the two validation_time
// variants merge into one row with a combined count.
const cluster = page.getByRole("link", { name: /manifest is not valid at validation_time/ });
await expect(cluster).toBeVisible();
await expect(cluster).toContainText("×2");
await expect(cluster).toContainText("5");
await expect(page.getByRole("link", { name: "certificate expired" })).toBeVisible();
});
test("overview does not request the global object list (first-screen discipline)", async ({
@@ -59,5 +72,5 @@ test("overview drill-down: reason navigates to filtered validation page", async
test("overview shows an explicit error state when the run cannot be loaded", async ({ page }) => {
await installMockApi(page, { failLatestRun: true });
await page.goto("/");
await expect(page.getByRole("alert")).toContainText("Failed to load the latest run");
await expect(page.getByRole("alert")).toContainText("Failed to load run latest");
});

19
ui/rpki-explorer/tests/e2e/projection-cert-crl.spec.ts
View File

@@ -24,6 +24,25 @@ test("certificate object renders the resourceCertificate projection", async ({ p
await expect(page.getByText("1.2.840.113549.1.1.11")).toBeVisible();
});
test("certificate AS resources collapse behind an expandable '+N more' toggle", async ({ page }) => {
await page.goto("/objects/obj-cer-0001");
// 15 AS entries: 12 visible, rest behind the toggle.
const moreToggle = page.getByRole("button", { name: "+3 more" });
await expect(moreToggle).toBeVisible();
await expect(page.getByText("AS38008", { exact: true })).toBeVisible();
await expect(page.getByText("AS64507", { exact: true })).not.toBeVisible();
await moreToggle.click();
await expect(page.getByText("AS64507", { exact: true })).toBeVisible();
await expect(page.getByText("AS64496", { exact: true })).toBeVisible();
const lessToggle = page.getByRole("button", { name: "Show less" });
await expect(lessToggle).toBeVisible();
await lessToggle.click();
await expect(page.getByText("AS64507", { exact: true })).not.toBeVisible();
});
test("crl object renders header fields from the top-level payload", async ({ page }) => {
await page.goto("/objects/obj-crl-0001");

26
ui/rpki-explorer/tests/e2e/shell.spec.ts
View File

@@ -61,6 +61,22 @@ test("run selector pins the run via ?run= and pages use it", async ({ page }) =>
await expect.poll(() => requests.some((url) => url.includes("/runs/run_0001/"))).toBe(true);
});
test("run selector polls for new runs without a page refresh", async ({ page }) => {
test.setTimeout(60_000);
let runsRequests = 0;
page.on("request", (req) => {
const url = new URL(req.url());
if (/\/api\/v1\/runs$/.test(url.pathname)) runsRequests += 1;
});
await page.goto("/");
await expect(page.getByLabel("Run")).toBeVisible();
// Initial fetch happens immediately; the 30s refetchInterval issues another.
await expect
.poll(() => runsRequests, { timeout: 45_000, intervals: [1_000, 2_000, 5_000] })
.toBeGreaterThan(1);
});
test("topbar search routes to the search page with the query", async ({ page }) => {
await page.goto("/");
const input = page.getByRole("searchbox", { name: "Global search" });
@@ -87,11 +103,15 @@ test("deep links restore page state after reload", async ({ page }) => {
test("runs page lists runs, pins a run and expands artifacts", async ({ page }) => {
await page.goto("/runs");
await expect(page.getByRole("cell", { name: "run_0002" })).toBeVisible();
await expect(page.getByRole("cell", { name: "run_0001" })).toBeVisible();
// Scope to the row: the actions cell also contains the run id in its
// accessible name ("Use run run_0002 …"), so a bare cell lookup is ambiguous.
await expect(
page.getByRole("row", { name: /run_0002/ }).getByRole("cell").first(),
).toContainText("run_0002");
const row = page.getByRole("row", { name: /run_0001/ });
await expect(row.getByRole("cell").first()).toContainText("run_0001");
// Expand artifacts for run_0001
const row = page.getByRole("row", { name: /run_0001/ });
await row.getByRole("button", { name: "Artifacts" }).click();
await expect(page.getByText("/data/runs/run_0001/report.json")).toBeVisible();