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

Finish Task 13: extract remaining page subcomponents and clean page files

Browse Source
This commit is contained in:
Lukas
2026-04-19 09:38:23 +02:00
parent 38b9d35255
commit 47f9c602d4
4 changed files with 375 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,33 +8,23 @@
import { useState, useMemo, useEffect } from "react";
import {
Badge,
Button,
MessageBar,
MessageBarBody,
Spinner,
Table,
TableBody,
TableCell,
TableCellLayout,
TableHeader,
TableHeaderCell,
TableRow,
Text,
Tooltip,
makeStyles,
tokens,
} from "@fluentui/react-components";
import {
ArrowCounterclockwiseRegular,
ChevronLeftRegular,
ChevronRightRegular,
DismissRegular,
} from "@fluentui/react-icons";
import { DashboardFilterBar } from "../components/DashboardFilterBar";
import { WorldMap } from "../components/WorldMap";
import { useMapData } from "../hooks/useMapData";
import { useMapColorThresholds } from "../hooks/useMapColorThresholds";
import { MapBansTable } from "./map/MapBansTable";
import type { TimeRange } from "../types/map";
import type { BanOriginFilter } from "../types/ban";
@@ -106,8 +96,6 @@ export function MapPage(): React.JSX.Element {
const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(100);
const PAGE_SIZE_OPTIONS = [25, 50, 100] as const;
const source = range === "24h" ? "fail2ban" : "archive";
const { countries, countryNames, bans, total, loading, error, refresh } =
@@ -268,123 +256,17 @@ export function MapPage(): React.JSX.Element {
{/* ---------------------------------------------------------------- */}
{!error && hasLoadedOnce && (
<div className={styles.tableWrapper} style={{ opacity: loading ? 0.5 : 1, transition: "opacity 150ms" }}>
<Table size="small" aria-label="Bans list">
<TableHeader>
<TableRow>
<TableHeaderCell className={styles.stickyHeaderCell}>IP Address</TableHeaderCell>
<TableHeaderCell className={styles.stickyHeaderCell}>Jail</TableHeaderCell>
<TableHeaderCell className={styles.stickyHeaderCell}>Banned At</TableHeaderCell>
<TableHeaderCell className={styles.stickyHeaderCell}>Country</TableHeaderCell>
<TableHeaderCell className={styles.stickyHeaderCell}>Origin</TableHeaderCell>
<TableHeaderCell className={styles.stickyHeaderCell}>Times Banned</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{visibleBans.length === 0 ? (
<TableRow>
<TableCell colSpan={6}>
<TableCellLayout>
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
No bans found.
</Text>
</TableCellLayout>
</TableCell>
</TableRow>
) : (
pageBans.map((ban) => (
<TableRow key={`${ban.ip}-${ban.banned_at}`}>
<TableCell>
<TableCellLayout>{ban.ip}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{ban.jail}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
{new Date(ban.banned_at).toLocaleString()}
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
{ban.country_name ?? ban.country_code ? (
ban.country_name ?? ban.country_code
) : (
<Tooltip
content="Country could not be resolved — will retry automatically."
relationship="description"
>
<Text style={{ color: tokens.colorNeutralForeground3 }}>
—
</Text>
</Tooltip>
)}
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
<Badge
appearance="tint"
color={ban.origin === "blocklist" ? "brand" : "informative"}
>
{ban.origin === "blocklist" ? "Blocklist" : "Selfblock"}
</Badge>
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{String(ban.ban_count)}</TableCellLayout>
</TableCell>
</TableRow>
))
)}
</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>
<MapBansTable
pageBans={pageBans}
visibleCount={visibleBans.length}
page={page}
pageSize={pageSize}
totalPages={totalPages}
hasPrev={hasPrev}
hasNext={hasNext}
onPageChange={setPage}
onPageSizeChange={setPageSize}
/>
</div>
)}
</div>