refactoring-backend #3
@@ -16,33 +16,22 @@ import {
|
||||
DataGridHeader,
|
||||
DataGridHeaderCell,
|
||||
DataGridRow,
|
||||
MessageBar,
|
||||
MessageBarBody,
|
||||
Spinner,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableCellLayout,
|
||||
TableColumnDefinition,
|
||||
TableHeader,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
Text,
|
||||
Toolbar,
|
||||
ToolbarButton,
|
||||
TableColumnDefinition,
|
||||
createTableColumn,
|
||||
makeStyles,
|
||||
tokens,
|
||||
} from "@fluentui/react-components";
|
||||
import { useCardStyles } from "../theme/commonStyles";
|
||||
import {
|
||||
ArrowCounterclockwiseRegular,
|
||||
ArrowLeftRegular,
|
||||
ChevronLeftRegular,
|
||||
ChevronRightRegular,
|
||||
} from "@fluentui/react-icons";
|
||||
import { DashboardFilterBar } from "../components/DashboardFilterBar";
|
||||
import { useHistory, useIpHistory } from "../hooks/useHistory";
|
||||
import { useHistory } from "../hooks/useHistory";
|
||||
import { IpDetailView } from "./history/IpDetailView";
|
||||
import type { HistoryBanItem, HistoryQuery, TimeRange } from "../types/history";
|
||||
import type { BanOriginFilter } from "../types/ban";
|
||||
|
||||
@@ -216,169 +205,6 @@ const HISTORY_COLUMNS = (
|
||||
}),
|
||||
] as ReturnType<typeof createTableColumn<HistoryBanItem>>[];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// IpDetailView — per-IP detail view
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface IpDetailViewProps {
|
||||
ip: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
|
||||
const styles = useStyles();
|
||||
const cardStyles = useCardStyles();
|
||||
const { detail, loading, error, refresh } = useIpHistory(ip);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div
|
||||
style={{ display: "flex", justifyContent: "center", padding: tokens.spacingVerticalXL }}
|
||||
>
|
||||
<Spinner label={`Loading history for ${ip}…`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>{error}</MessageBarBody>
|
||||
</MessageBar>
|
||||
);
|
||||
}
|
||||
|
||||
if (!detail) {
|
||||
return (
|
||||
<MessageBar intent="warning">
|
||||
<MessageBarBody>No history found for {ip}.</MessageBarBody>
|
||||
</MessageBar>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: tokens.spacingVerticalL }}>
|
||||
{/* Back button + heading */}
|
||||
<div className={styles.header}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM }}>
|
||||
<Button
|
||||
icon={<ArrowLeftRegular />}
|
||||
appearance="subtle"
|
||||
onClick={onBack}
|
||||
>
|
||||
Back to list
|
||||
</Button>
|
||||
<Text as="h2" size={600} weight="semibold" className={styles.monoText}>
|
||||
{ip}
|
||||
</Text>
|
||||
</div>
|
||||
<Button
|
||||
icon={<ArrowCounterclockwiseRegular />}
|
||||
appearance="subtle"
|
||||
onClick={(): void => {
|
||||
refresh();
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Summary grid */}
|
||||
<div className={`${cardStyles.card} ${styles.detailGrid}`}>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Total Bans</span>
|
||||
<span className={styles.detailValue}>{String(detail.total_bans)}</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Total Failures</span>
|
||||
<span className={styles.detailValue}>{String(detail.total_failures)}</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Last Banned</span>
|
||||
<span className={styles.detailValue}>
|
||||
{detail.last_ban_at
|
||||
? new Date(detail.last_ban_at).toLocaleString()
|
||||
: "—"}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Country</span>
|
||||
<span className={styles.detailValue}>
|
||||
{detail.country_name ?? detail.country_code ?? "—"}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>ASN</span>
|
||||
<span className={styles.detailValue}>{detail.asn ?? "—"}</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Organisation</span>
|
||||
<span className={styles.detailValue}>{detail.org ?? "—"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline table */}
|
||||
<Text weight="semibold" size={400}>
|
||||
Ban Timeline ({String(detail.timeline.length)} events)
|
||||
</Text>
|
||||
|
||||
<div className={styles.tableWrapper}>
|
||||
<Table size="small" aria-label="Ban timeline">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHeaderCell>Banned At</TableHeaderCell>
|
||||
<TableHeaderCell>Jail</TableHeaderCell>
|
||||
<TableHeaderCell>Failures</TableHeaderCell>
|
||||
<TableHeaderCell>Times Banned</TableHeaderCell>
|
||||
<TableHeaderCell>Matched Lines</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detail.timeline.map((event) => (
|
||||
<TableRow key={`${event.jail}-${event.banned_at}`}>
|
||||
<TableCell>
|
||||
<TableCellLayout>
|
||||
{new Date(event.banned_at).toLocaleString()}
|
||||
</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>{event.jail}</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>{String(event.failures)}</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>{String(event.ban_count)}</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>
|
||||
{event.matches.length === 0 ? (
|
||||
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
|
||||
—
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
size={100}
|
||||
style={{
|
||||
fontFamily: "Consolas, 'Courier New', monospace",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
}}
|
||||
>
|
||||
{event.matches.join("\n")}
|
||||
</Text>
|
||||
)}
|
||||
</TableCellLayout>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// HistoryPage — main component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@@ -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>
|
||||
|
||||
203
frontend/src/pages/history/IpDetailView.tsx
Normal file
203
frontend/src/pages/history/IpDetailView.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import {
|
||||
Button,
|
||||
MessageBar,
|
||||
MessageBarBody,
|
||||
Spinner,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableCellLayout,
|
||||
TableHeader,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
Text,
|
||||
makeStyles,
|
||||
tokens,
|
||||
} from "@fluentui/react-components";
|
||||
import { ArrowCounterclockwiseRegular, ArrowLeftRegular } from "@fluentui/react-icons";
|
||||
import { useCardStyles } from "../../theme/commonStyles";
|
||||
import { useIpHistory } from "../../hooks/useHistory";
|
||||
|
||||
interface IpDetailViewProps {
|
||||
ip: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: tokens.spacingVerticalL,
|
||||
},
|
||||
header: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: tokens.spacingHorizontalM,
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
monoText: {
|
||||
fontFamily: "Consolas, 'Courier New', monospace",
|
||||
fontSize: "0.85rem",
|
||||
},
|
||||
detailGrid: {
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
|
||||
gap: tokens.spacingVerticalM,
|
||||
padding: tokens.spacingVerticalM,
|
||||
marginBottom: tokens.spacingVerticalM,
|
||||
},
|
||||
detailField: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: tokens.spacingVerticalXS,
|
||||
},
|
||||
detailLabel: {
|
||||
color: tokens.colorNeutralForeground3,
|
||||
fontSize: "0.75rem",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
},
|
||||
detailValue: {
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: "600",
|
||||
},
|
||||
tableWrapper: {
|
||||
overflow: "auto",
|
||||
borderRadius: tokens.borderRadiusMedium,
|
||||
border: `1px solid ${tokens.colorNeutralStroke1}`,
|
||||
},
|
||||
});
|
||||
|
||||
export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
|
||||
const styles = useStyles();
|
||||
const cardStyles = useCardStyles();
|
||||
const { detail, loading, error, refresh } = useIpHistory(ip);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: "flex", justifyContent: "center", padding: tokens.spacingVerticalXL }}>
|
||||
<Spinner label={`Loading history for ${ip}…`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>{error}</MessageBarBody>
|
||||
</MessageBar>
|
||||
);
|
||||
}
|
||||
|
||||
if (!detail) {
|
||||
return (
|
||||
<MessageBar intent="warning">
|
||||
<MessageBarBody>No history found for {ip}.</MessageBarBody>
|
||||
</MessageBar>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className={styles.header}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM }}>
|
||||
<Button icon={<ArrowLeftRegular />} appearance="subtle" onClick={onBack}>
|
||||
Back to list
|
||||
</Button>
|
||||
<Text as="h2" size={600} weight="semibold" className={styles.monoText}>
|
||||
{ip}
|
||||
</Text>
|
||||
</div>
|
||||
<Button icon={<ArrowCounterclockwiseRegular />} appearance="subtle" onClick={refresh}>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={`${cardStyles.card} ${styles.detailGrid}`}>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Total Bans</span>
|
||||
<span className={styles.detailValue}>{String(detail.total_bans)}</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Total Failures</span>
|
||||
<span className={styles.detailValue}>{String(detail.total_failures)}</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Last Banned</span>
|
||||
<span className={styles.detailValue}>
|
||||
{detail.last_ban_at ? new Date(detail.last_ban_at).toLocaleString() : "—"}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Country</span>
|
||||
<span className={styles.detailValue}>{detail.country_name ?? detail.country_code ?? "—"}</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>ASN</span>
|
||||
<span className={styles.detailValue}>{detail.asn ?? "—"}</span>
|
||||
</div>
|
||||
<div className={styles.detailField}>
|
||||
<span className={styles.detailLabel}>Organisation</span>
|
||||
<span className={styles.detailValue}>{detail.org ?? "—"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Text weight="semibold" size={400}>
|
||||
Ban Timeline ({String(detail.timeline.length)} events)
|
||||
</Text>
|
||||
|
||||
<div className={styles.tableWrapper}>
|
||||
<Table size="small" aria-label="Ban timeline">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHeaderCell>Banned At</TableHeaderCell>
|
||||
<TableHeaderCell>Jail</TableHeaderCell>
|
||||
<TableHeaderCell>Failures</TableHeaderCell>
|
||||
<TableHeaderCell>Times Banned</TableHeaderCell>
|
||||
<TableHeaderCell>Matched Lines</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detail.timeline.map((event) => (
|
||||
<TableRow key={`${event.jail}-${event.banned_at}`}>
|
||||
<TableCell>
|
||||
<TableCellLayout>{new Date(event.banned_at).toLocaleString()}</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>{event.jail}</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>{String(event.failures)}</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>{String(event.ban_count)}</TableCellLayout>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCellLayout>
|
||||
{event.matches.length === 0 ? (
|
||||
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
|
||||
—
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
size={100}
|
||||
style={{
|
||||
fontFamily: "Consolas, 'Courier New', monospace",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
}}
|
||||
>
|
||||
{event.matches.join("\n")}
|
||||
</Text>
|
||||
)}
|
||||
</TableCellLayout>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
frontend/src/pages/map/MapBansTable.tsx
Normal file
157
frontend/src/pages/map/MapBansTable.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableCellLayout,
|
||||
TableHeader,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
Text,
|
||||
Tooltip,
|
||||
tokens,
|
||||
} from "@fluentui/react-components";
|
||||
import { ChevronLeftRegular, ChevronRightRegular } from "@fluentui/react-icons";
|
||||
import type { MapBanItem } from "../../types/map";
|
||||
|
||||
interface MapBansTableProps {
|
||||
pageBans: MapBanItem[];
|
||||
visibleCount: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
hasPrev: boolean;
|
||||
hasNext: boolean;
|
||||
onPageChange: (nextPage: number) => void;
|
||||
onPageSizeChange: (pageSize: number) => void;
|
||||
}
|
||||
|
||||
export function MapBansTable({
|
||||
pageBans,
|
||||
visibleCount,
|
||||
page,
|
||||
pageSize,
|
||||
totalPages,
|
||||
hasPrev,
|
||||
hasNext,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
}: MapBansTableProps): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<Table size="small" aria-label="Bans list">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHeaderCell>IP Address</TableHeaderCell>
|
||||
<TableHeaderCell>Jail</TableHeaderCell>
|
||||
<TableHeaderCell>Banned At</TableHeaderCell>
|
||||
<TableHeaderCell>Country</TableHeaderCell>
|
||||
<TableHeaderCell>Origin</TableHeaderCell>
|
||||
<TableHeaderCell>Times Banned</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{visibleCount === 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>
|
||||
|
||||
{visibleCount > 0 && (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacingHorizontalS, marginTop: tokens.spacingVerticalS }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
|
||||
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
|
||||
Showing {pageBans.length} of {visibleCount} filtered ban{visibleCount !== 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 => {
|
||||
onPageSizeChange(Number(event.target.value));
|
||||
}}
|
||||
>
|
||||
{[25, 50, 100].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 => onPageChange(page - 1)}
|
||||
aria-label="Previous page"
|
||||
/>
|
||||
<Button
|
||||
icon={<ChevronRightRegular />}
|
||||
appearance="subtle"
|
||||
disabled={!hasNext}
|
||||
onClick={(): void => onPageChange(page + 1)}
|
||||
aria-label="Next page"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user