From 0c59d8f342ffb80f24054feeac212bca83831511 Mon Sep 17 00:00:00 2001 From: thomasalvaedison7777-lgtm Date: Fri, 17 Jul 2026 06:07:04 -0700 Subject: [PATCH 1/2] feat(ui): integrate recharts for claims status visualization and enhance pagination in ledgers view (#6832) - Added recharts dependency for visualizing claims status with a bar chart. - Implemented pagination for event count tables and recent events feed in the LedgersView component. - Introduced a new setup file for Vitest to handle ResizeObserver stubbing for chart rendering in tests. - Updated tests to verify the rendering of the claims status chart and pagination functionality. Closes #6832 --- apps/loopover-miner-ui/package.json | 1 + apps/loopover-miner-ui/src/ledgers.test.tsx | 97 ++++++++ apps/loopover-miner-ui/src/routes/ledgers.tsx | 220 ++++++++++++++---- apps/loopover-miner-ui/vitest.config.ts | 1 + apps/loopover-miner-ui/vitest.setup.ts | 17 ++ package-lock.json | 1 + 6 files changed, 297 insertions(+), 40 deletions(-) create mode 100644 apps/loopover-miner-ui/vitest.setup.ts diff --git a/apps/loopover-miner-ui/package.json b/apps/loopover-miner-ui/package.json index 080affe951..eaa28a924c 100644 --- a/apps/loopover-miner-ui/package.json +++ b/apps/loopover-miner-ui/package.json @@ -20,6 +20,7 @@ "@tanstack/react-router": "^1.170.17", "react": "^19.2.7", "react-dom": "^19.2.7", + "recharts": "^2.15.4", "tailwindcss": "^4.3.2", "tw-animate-css": "^1.4.0", "vite-tsconfig-paths": "^6.1.1" diff --git a/apps/loopover-miner-ui/src/ledgers.test.tsx b/apps/loopover-miner-ui/src/ledgers.test.tsx index 8d79a4cf4d..69fc9c57d4 100644 --- a/apps/loopover-miner-ui/src/ledgers.test.tsx +++ b/apps/loopover-miner-ui/src/ledgers.test.tsx @@ -87,6 +87,18 @@ describe("emptyLedgersSummary (#4855)", () => { }); }); +function manyEventTypes(count: number): Record { + return Object.fromEntries(Array.from({ length: count }, (_, index) => [`event_type_${index}`, count - index])); +} + +function manyRecentEvents(count: number): LedgersSummary["events"]["recent"] { + return Array.from({ length: count }, (_, index) => ({ + eventType: `event_type_${index}`, + repoFullName: index % 2 === 0 ? `acme/repo-${index}` : null, + createdAt: index % 3 === 0 ? null : `2026-07-10T06:${String(index).padStart(2, "0")}:00.000Z`, + })); +} + describe("LedgersView (#4855)", () => { it("renders claim status counts, the governor type table, the events-by-type table, and the recent-events feed", () => { render(); @@ -101,6 +113,11 @@ describe("LedgersView (#4855)", () => { expect(screen.getAllByText("acme/widgets").length).toBeGreaterThan(0); }); + it("renders a claims-by-status chart via the ui-kit ChartContainer (#6832)", () => { + render(); + expect(screen.getByLabelText("Claims by status chart")).toBeTruthy(); + }); + it("renders the fresh-install empty state when every ledger is empty", () => { render(); expect(screen.getByText(/No ledger activity yet/i)).toBeTruthy(); @@ -117,6 +134,86 @@ describe("LedgersView (#4855)", () => { expect(screen.getByRole("status", { name: /loading local ledgers/i })).toBeTruthy(); expect(screen.queryByText("Loading local ledgers…")).toBeNull(); // the pre-#6512 sentence is gone }); + + it("does not paginate count/feed tables at or below 20 rows (#6832)", () => { + // Only events-by-type + recent feed are populated (20 each) so type labels stay unique across tables. + const summary: LedgersSummary = { + claims: { total: 1, byStatus: { active: 1, released: 0, expired: 0 } }, + events: { + total: 20, + byType: manyEventTypes(20), + recent: manyRecentEvents(20), + }, + governor: { total: 0, byEventType: {} }, + }; + render(); + expect(screen.queryByRole("navigation", { name: /pagination/i })).toBeNull(); + // Each type appears twice (count table + recent feed); both ends of the range must be visible. + expect(screen.getAllByText("event_type_0").length).toBe(2); + expect(screen.getAllByText("event_type_19").length).toBe(2); + }); + + it("paginates the events-by-type CountTable client-side above 20 rows (#6832)", () => { + const summary: LedgersSummary = { + claims: { total: 1, byStatus: { active: 1, released: 0, expired: 0 } }, + events: { + total: 45, + byType: manyEventTypes(45), + recent: [], + }, + governor: { total: 0, byEventType: {} }, + }; + render(); + expect(screen.getByRole("navigation", { name: /pagination/i })).toBeTruthy(); + // Sorted descending by count: event_type_0 has the highest count and appears first. + expect(screen.getByText("event_type_0")).toBeTruthy(); + expect(screen.queryByText("event_type_20")).toBeNull(); + fireEvent.click(screen.getByRole("link", { name: "2" })); + expect(screen.getByText("event_type_20")).toBeTruthy(); + expect(screen.queryByText("event_type_0")).toBeNull(); + }); + + it("paginates the recent-events feed client-side above 20 rows, with null column fallbacks (#6832)", () => { + const summary: LedgersSummary = { + claims: { total: 1, byStatus: { active: 1, released: 0, expired: 0 } }, + events: { + total: 45, + byType: { attempt_started: 45 }, + recent: manyRecentEvents(45), + }, + governor: { total: 0, byEventType: {} }, + }; + render(); + expect(screen.getByRole("navigation", { name: /pagination/i })).toBeTruthy(); + expect(screen.getByText("event_type_0")).toBeTruthy(); + expect(screen.queryByText("event_type_20")).toBeNull(); + // Null repo/createdAt render as em-dashes (odd indices / multiples of 3 on page 1). + expect(screen.getAllByText("—").length).toBeGreaterThan(0); + fireEvent.click(screen.getByRole("link", { name: "2" })); + expect(screen.getByText("event_type_20")).toBeTruthy(); + expect(screen.queryByText("event_type_0")).toBeNull(); + fireEvent.click(screen.getByRole("link", { name: "3" })); + expect(screen.getByText("event_type_40")).toBeTruthy(); + }); + + it("paginates the governor-events CountTable independently of the events tables (#6832)", () => { + const summary: LedgersSummary = { + claims: { total: 1, byStatus: { active: 1, released: 0, expired: 0 } }, + events: { total: 0, byType: {}, recent: [] }, + governor: { total: 45, byEventType: manyEventTypes(45) }, + }; + render(); + expect(screen.getByRole("navigation", { name: /pagination/i })).toBeTruthy(); + expect(screen.getByText("event_type_0")).toBeTruthy(); + expect(screen.queryByText("event_type_20")).toBeNull(); + fireEvent.click(screen.getByRole("link", { name: "2" })); + expect(screen.getByText("event_type_20")).toBeTruthy(); + // Previous / Next buttons also advance the page (covers both onClick arms). + fireEvent.click(screen.getByRole("link", { name: /go to previous page/i })); + expect(screen.getByText("event_type_0")).toBeTruthy(); + fireEvent.click(screen.getByRole("link", { name: /go to next page/i })); + expect(screen.getByText("event_type_20")).toBeTruthy(); + }); }); describe("LedgersPage (#4855)", () => { diff --git a/apps/loopover-miner-ui/src/routes/ledgers.tsx b/apps/loopover-miner-ui/src/routes/ledgers.tsx index 9093bdf661..37efebbe64 100644 --- a/apps/loopover-miner-ui/src/routes/ledgers.tsx +++ b/apps/loopover-miner-ui/src/routes/ledgers.tsx @@ -1,9 +1,24 @@ import { createFileRoute } from "@tanstack/react-router"; import { useEffect, useState } from "react"; +import { Bar, BarChart, Cell, XAxis, YAxis } from "recharts"; import { Button } from "@loopover/ui-kit/components/button"; import { Card, CardContent, CardHeader } from "@loopover/ui-kit/components/card"; +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, + type ChartConfig, +} from "@loopover/ui-kit/components/chart"; import { Input } from "@loopover/ui-kit/components/input"; +import { + Pagination, + PaginationContent, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from "@loopover/ui-kit/components/pagination"; import { Skeleton } from "@loopover/ui-kit/components/skeleton"; import { StateBoundary } from "@loopover/ui-kit/components/state-views"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@loopover/ui-kit/components/table"; @@ -12,6 +27,8 @@ import { CLAIM_STATUSES, fetchLedgers, type ClaimStatus, + type ClaimStatusCounts, + type EventFeedEntry, type LedgersResult, type LedgersSummary, } from "../lib/ledgers"; @@ -29,9 +46,12 @@ export const Route = createFileRoute("/ledgers")({ // governor control section) are each replaced by the shared @loopover/ui-kit `StateBoundary`, with a // content-shaped `Skeleton` placeholder for the loading state so the layout doesn't jump when the poll resolves. // The two flows keep their OWN independent boundary — a governor-state fetch failure must not blank the ledger -// summary, and vice-versa. Purely presentational: `lib/ledgers.ts`/`lib/governor.ts`, the two fetch loops, and -// the pause/resume Button wiring are untouched; only the loading/error chrome and the governor-control layout -// change. +// summary, and vice-versa. +// +// #6832: claims status cards gain a ui-kit `ChartContainer` bar chart (so the bare numbers aren't the only +// signal), and both event count-tables + the recent-events feed paginate client-side via the kit's `Pagination` +// once they exceed PAGE_SIZE rows — matching the run-history restyle (#6510). Purely presentational: +// `lib/ledgers.ts`/`lib/governor.ts`, the two fetch loops, and the pause/resume Button wiring stay untouched. // // The governor control section below is a SEPARATE fetch/action loop from the read-only ledger summary above // (#4857, the governor half): it reads/writes the governor's pause state via vite-governor-api.ts, the @@ -50,32 +70,167 @@ const CLAIM_STATUS_TONE: Record = { expired: "text-warning", }; +/** Rows per page once a count/feed table grows past this; below it the full table renders unpaginated. */ +const PAGE_SIZE = 20; + +const CLAIMS_CHART_CONFIG = { + count: { label: "Claims" }, + active: { label: "Active", color: "var(--success)" }, + released: { label: "Released", color: "var(--muted-foreground)" }, + expired: { label: "Expired", color: "var(--warning)" }, +} satisfies ChartConfig; + +function TablePagination({ + page, + pageCount, + onPageChange, +}: { + page: number; + pageCount: number; + onPageChange: (next: number) => void; +}) { + return ( + + + + { + event.preventDefault(); + onPageChange(Math.max(0, page - 1)); + }} + /> + + {Array.from({ length: pageCount }).map((_, index) => ( + + { + event.preventDefault(); + onPageChange(index); + }} + > + {index + 1} + + + ))} + + = pageCount - 1} + onClick={(event) => { + event.preventDefault(); + onPageChange(Math.min(pageCount - 1, page + 1)); + }} + /> + + + + ); +} + function CountTable({ counts, keyLabel }: { counts: Record; keyLabel: string }) { + const [page, setPage] = useState(0); const entries = Object.entries(counts).sort(([, a], [, b]) => b - a); + const pageCount = Math.max(1, Math.ceil(entries.length / PAGE_SIZE)); + const isPaginated = entries.length > PAGE_SIZE; + const safePage = Math.min(page, pageCount - 1); + const visible = isPaginated ? entries.slice(safePage * PAGE_SIZE, safePage * PAGE_SIZE + PAGE_SIZE) : entries; return ( - - - - {keyLabel} - Count - - - - {entries.map(([type, count]) => ( - - {type} - {count} +
+
+ + + {keyLabel} + Count - ))} - -
+ + + {visible.map(([type, count]) => ( + + {type} + {count} + + ))} + + + {isPaginated && } + + ); +} + +function RecentEventsTable({ entries }: { entries: EventFeedEntry[] }) { + const [page, setPage] = useState(0); + const pageCount = Math.max(1, Math.ceil(entries.length / PAGE_SIZE)); + const isPaginated = entries.length > PAGE_SIZE; + const safePage = Math.min(page, pageCount - 1); + const visible = isPaginated ? entries.slice(safePage * PAGE_SIZE, safePage * PAGE_SIZE + PAGE_SIZE) : entries; + return ( +
+ + + + Event type + Repository + Recorded + + + + {visible.map((entry, index) => ( + + {entry.eventType} + {entry.repoFullName ?? "—"} + {entry.createdAt ?? "—"} + + ))} + +
+ {isPaginated && } +
+ ); +} + +/** Horizontal bar chart of claim status counts — the chart.tsx adoption for the claims cards section (#6832). + * Cards still show the exact numbers; the chart is the glanceable breakdown the bare `
`s alone weren't. */ +function ClaimsStatusChart({ byStatus }: { byStatus: ClaimStatusCounts }) { + const data = CLAIM_STATUSES.map((status) => ({ + status, + label: CLAIM_STATUS_LABELS[status], + count: byStatus[status], + })); + return ( + + + + + } /> + + {data.map((entry) => ( + + ))} + + + ); } -/** Card+table-shaped loading placeholder for the ledger summary: mirrors the 3 status cards and the stacked - * count/feed tables below them, so the summary keeps its shape while the first fetch resolves. `role="status"` - * keeps the loading state announced to assistive tech (as the flat "Loading local ledgers…" text it replaces - * was). */ +/** Card+chart+table-shaped loading placeholder for the ledger summary: mirrors the 3 status cards, the claims + * chart, and the stacked count/feed tables below them, so the summary keeps its shape while the first fetch + * resolves. `role="status"` keeps the loading state announced to assistive tech (as the flat "Loading local + * ledgers…" text it replaces was). */ function LedgerSummarySkeleton() { return (
@@ -91,6 +246,7 @@ function LedgerSummarySkeleton() { ))}
+ {Array.from({ length: 2 }).map((_, index) => (
@@ -138,6 +294,7 @@ function LedgersSummaryContent({ summary }: { summary: LedgersSummary }) { ))} +
@@ -163,24 +320,7 @@ function LedgersSummaryContent({ summary }: { summary: LedgersSummary }) { {events.recent.length === 0 ? (

No event-ledger entries recorded.

) : ( - - - - Event type - Repository - Recorded - - - - {events.recent.map((entry, index) => ( - - {entry.eventType} - {entry.repoFullName ?? "—"} - {entry.createdAt ?? "—"} - - ))} - -
+ )}
diff --git a/apps/loopover-miner-ui/vitest.config.ts b/apps/loopover-miner-ui/vitest.config.ts index 24419dc281..e3b2e08bfb 100644 --- a/apps/loopover-miner-ui/vitest.config.ts +++ b/apps/loopover-miner-ui/vitest.config.ts @@ -7,6 +7,7 @@ export default defineConfig({ test: { environment: "jsdom", globals: true, + setupFiles: ["./vitest.setup.ts"], include: ["src/**/*.test.{ts,tsx}"], coverage: { provider: "v8", diff --git a/apps/loopover-miner-ui/vitest.setup.ts b/apps/loopover-miner-ui/vitest.setup.ts new file mode 100644 index 0000000000..dd4599eaa1 --- /dev/null +++ b/apps/loopover-miner-ui/vitest.setup.ts @@ -0,0 +1,17 @@ +import { cleanup } from "@testing-library/react"; +import { afterEach } from "vitest"; + +// Unmount React trees between tests so jsdom state never leaks across cases. +afterEach(() => { + cleanup(); +}); + +// jsdom has no ResizeObserver -- recharts' ResponsiveContainer (used by ChartContainer on the ledgers +// claims chart, #6832) needs one to mount at all. A no-op stub is the standard fix: it never actually +// resizes in a test DOM, and no test here asserts on a resize-driven re-render, only on the rendered markup. +class ResizeObserverStub { + observe(): void {} + unobserve(): void {} + disconnect(): void {} +} +globalThis.ResizeObserver ??= ResizeObserverStub as unknown as typeof ResizeObserver; diff --git a/package-lock.json b/package-lock.json index e8bcf6bdda..ffffe08d06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -84,6 +84,7 @@ "@tanstack/react-router": "^1.170.17", "react": "^19.2.7", "react-dom": "^19.2.7", + "recharts": "^2.15.4", "tailwindcss": "^4.3.2", "tw-animate-css": "^1.4.0", "vite-tsconfig-paths": "^6.1.1" From 5659f59272bdd0e359d2d1923c82b74446bb2b59 Mon Sep 17 00:00:00 2001 From: thomasalvaedison7777-lgtm Date: Fri, 17 Jul 2026 06:25:00 -0700 Subject: [PATCH 2/2] refactor(ledgers): streamline chart imports in ledgers.tsx - Consolidated import statements for ChartContainer, ChartTooltip, and ChartTooltipContent from the ui-kit components to improve code readability. --- apps/loopover-miner-ui/src/routes/ledgers.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/loopover-miner-ui/src/routes/ledgers.tsx b/apps/loopover-miner-ui/src/routes/ledgers.tsx index 37efebbe64..a788d3496f 100644 --- a/apps/loopover-miner-ui/src/routes/ledgers.tsx +++ b/apps/loopover-miner-ui/src/routes/ledgers.tsx @@ -4,12 +4,7 @@ import { Bar, BarChart, Cell, XAxis, YAxis } from "recharts"; import { Button } from "@loopover/ui-kit/components/button"; import { Card, CardContent, CardHeader } from "@loopover/ui-kit/components/card"; -import { - ChartContainer, - ChartTooltip, - ChartTooltipContent, - type ChartConfig, -} from "@loopover/ui-kit/components/chart"; +import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@loopover/ui-kit/components/chart"; import { Input } from "@loopover/ui-kit/components/input"; import { Pagination,