lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add MapPage pagination and page-size selector; update Web-Design docs

Browse Source
This commit is contained in:
Lukas
2026-03-29 15:23:47 +02:00
parent ccfcbc82c5
commit 7789353690
4 changed files with 180 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/pages/MapPage.tsx
View File

@@ -25,7 +25,12 @@ import {
makeStyles,
tokens,
} from "@fluentui/react-components";
import { ArrowCounterclockwiseRegular, DismissRegular } from "@fluentui/react-icons";
import {
ArrowCounterclockwiseRegular,
ChevronLeftRegular,
ChevronRightRegular,
DismissRegular,
} from "@fluentui/react-icons";
import { DashboardFilterBar } from "../components/DashboardFilterBar";
import { WorldMap } from "../components/WorldMap";
import { useMapData } from "../hooks/useMapData";
@@ -68,6 +73,15 @@ const useStyles = makeStyles({
borderRadius: tokens.borderRadiusMedium,
backgroundColor: tokens.colorNeutralBackground2,
},
pagination: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: tokens.spacingHorizontalS,
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
backgroundColor: tokens.colorNeutralBackground2,
},
});
// ---------------------------------------------------------------------------
@@ -79,6 +93,10 @@ export function MapPage(): React.JSX.Element {
const [range, setRange] = useState<TimeRange>("24h");
const [originFilter, setOriginFilter] = useState<BanOriginFilter>("all");
const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(100);
const PAGE_SIZE_OPTIONS = [25, 50, 100] as const;
const { countries, countryNames, bans, total, loading, error, refresh } =
useMapData(range, originFilter);
@@ -99,6 +117,10 @@ export function MapPage(): React.JSX.Element {
}
}, [mapThresholdError]);
useEffect(() => {
setPage(1);
}, [range, originFilter, selectedCountry, bans, pageSize]);
/** Bans visible in the companion table (filtered by selected country). */
const visibleBans = useMemo(() => {
if (!selectedCountry) return bans;
@@ -109,6 +131,15 @@ export function MapPage(): React.JSX.Element {
? (countryNames[selectedCountry] ?? selectedCountry)
: null;
const totalPages = Math.max(1, Math.ceil(visibleBans.length / pageSize));
const hasPrev = page > 1;
const hasNext = page < totalPages;
const pageBans = useMemo(() => {
const start = (page - 1) * pageSize;
return visibleBans.slice(start, start + pageSize);
}, [visibleBans, page, pageSize]);
return (
<div className={styles.root}>
{/* ---------------------------------------------------------------- */}
@@ -235,7 +266,7 @@ export function MapPage(): React.JSX.Element {
</TableCell>
</TableRow>
) : (
visibleBans.map((ban) => (
pageBans.map((ban) => (
<TableRow key={`${ban.ip}-${ban.banned_at}`}>
<TableCell>
<TableCellLayout>{ban.ip}</TableCellLayout>
@@ -282,6 +313,53 @@ export function MapPage(): React.JSX.Element {
)}
</TableBody>
</Table>
<div className={styles.pagination}>
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
Showing {pageBans.length} of {visibleBans.length} filtered ban{visibleBans.length !== 1 ? "s" : ""}
{" · "}Page {page} of {totalPages}
</Text>
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
Page size
</Text>
<select
aria-label="Page size"
value={pageSize}
onChange={(event): void => {
setPageSize(Number(event.target.value));
}}
>
{PAGE_SIZE_OPTIONS.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
</div>
<div style={{ display: "flex", gap: tokens.spacingHorizontalXS }}>
<Button
icon={<ChevronLeftRegular />}
appearance="subtle"
disabled={!hasPrev}
onClick={(): void => {
setPage(page - 1);
}}
aria-label="Previous page"
/>
<Button
icon={<ChevronRightRegular />}
appearance="subtle"
disabled={!hasNext}
onClick={(): void => {
setPage(page + 1);
}}
aria-label="Next page"
/>
</div>
</div>
</div>
)}
</div>

109
frontend/src/pages/__tests__/MapPage.test.tsx
View File

@@ -2,42 +2,43 @@ import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { getLastArgs, setMapData } from "../../hooks/useMapData";
import { MapPage } from "../MapPage";
const mockFetchMapColorThresholds = vi.fn(async () => ({
threshold_low: 10,
threshold_medium: 50,
threshold_high: 100,
}));
let lastArgs: { range: string; origin: string } = { range: "", origin: "" };
const mockUseMapData = vi.fn((range: string, origin: string) => {
lastArgs = { range, origin };
return {
vi.mock("../../hooks/useMapData", () => {
let lastArgs: { range: string; origin: string } = { range: "", origin: "" };
let dataState = {
countries: {},
countryNames: {},
bans: [],
total: 0,
loading: false,
error: null,
refresh: vi.fn(),
refresh: () => {},
};
return {
useMapData: (range: string, origin: string) => {
lastArgs = { range, origin };
return { ...dataState };
},
setMapData: (newState: Partial<typeof dataState>) => {
dataState = { ...dataState, ...newState };
},
getLastArgs: () => lastArgs,
};
});
vi.mock("../hooks/useMapData", () => ({
useMapData: (range: string, origin: string) => mockUseMapData(range, origin),
vi.mock("../../api/config", () => ({
fetchMapColorThresholds: vi.fn(async () => ({
threshold_low: 10,
threshold_medium: 50,
threshold_high: 100,
})),
}));
vi.mock("../api/config", async () => ({
fetchMapColorThresholds: mockFetchMapColorThresholds,
}));
const mockWorldMap = vi.fn((_props: unknown) => <div data-testid="world-map" />);
vi.mock("../components/WorldMap", () => ({
WorldMap: (props: unknown) => {
mockWorldMap(props);
return <div data-testid="world-map" />;
},
vi.mock("../../components/WorldMap", () => ({
WorldMap: () => <div data-testid="world-map" />,
}));
describe("MapPage", () => {
@@ -51,17 +52,63 @@ describe("MapPage", () => {
);
// Initial load should call useMapData with default filters.
expect(lastArgs).toEqual({ range: "24h", origin: "all" });
// Map should receive country names from the hook so tooltips can show human-readable labels.
expect(mockWorldMap).toHaveBeenCalled();
const firstCallArgs = mockWorldMap.mock.calls[0]?.[0];
expect(firstCallArgs).toMatchObject({ countryNames: {} });
expect(getLastArgs()).toEqual({ range: "24h", origin: "all" });
await user.click(screen.getByRole("button", { name: /Last 7 days/i }));
expect(lastArgs.range).toBe("7d");
expect(getLastArgs().range).toBe("7d");
await user.click(screen.getByRole("button", { name: /Blocklist/i }));
expect(lastArgs.origin).toBe("blocklist");
expect(getLastArgs().origin).toBe("blocklist");
});
it("supports pagination with 100 items per page and reset on filter changes", async () => {
const user = userEvent.setup();
const bans = Array.from({ length: 120 }, (_, index) => ({
ip: `192.0.2.${index}`,
jail: "ssh",
banned_at: new Date(Date.now() - index * 1000).toISOString(),
service: null,
country_code: "US",
country_name: "United States",
asn: null,
org: null,
ban_count: 1,
origin: "selfblock",
}));
setMapData({
countries: { US: 120 },
countryNames: { US: "United States" },
bans,
total: 120,
loading: false,
error: null,
});
render(
<FluentProvider theme={webLightTheme}>
<MapPage />
</FluentProvider>,
);
expect(await screen.findByText(/Page 1 of 2/i)).toBeInTheDocument();
expect(screen.getByText(/Showing 100 of 120 filtered bans/i)).toBeInTheDocument();
await user.click(screen.getByRole("button", { name: /Next page/i }));
expect(await screen.findByText(/Page 2 of 2/i)).toBeInTheDocument();
await user.click(screen.getByRole("button", { name: /Previous page/i }));
expect(await screen.findByText(/Page 1 of 2/i)).toBeInTheDocument();
// Page size selector should adjust pagination
await user.selectOptions(screen.getByRole("combobox", { name: /Page size/i }), "25");
expect(await screen.findByText(/Page 1 of 5/i)).toBeInTheDocument();
expect(screen.getByText(/Showing 25 of 120 filtered bans/i)).toBeInTheDocument();
// Changing filter keeps page reset to 1
await user.click(screen.getByRole("button", { name: /Blocklist/i }));
expect(getLastArgs().origin).toBe("blocklist");
expect(await screen.findByText(/Page 1 of 5/i)).toBeInTheDocument();
});
});