Finish Task 13: extract remaining page subcomponents and clean page files
This commit is contained in:
@@ -16,33 +16,22 @@ import {
|
|||||||
DataGridHeader,
|
DataGridHeader,
|
||||||
DataGridHeaderCell,
|
DataGridHeaderCell,
|
||||||
DataGridRow,
|
DataGridRow,
|
||||||
MessageBar,
|
|
||||||
MessageBarBody,
|
|
||||||
Spinner,
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableCellLayout,
|
|
||||||
TableColumnDefinition,
|
|
||||||
TableHeader,
|
|
||||||
TableHeaderCell,
|
|
||||||
TableRow,
|
|
||||||
Text,
|
Text,
|
||||||
Toolbar,
|
Toolbar,
|
||||||
ToolbarButton,
|
ToolbarButton,
|
||||||
|
TableColumnDefinition,
|
||||||
createTableColumn,
|
createTableColumn,
|
||||||
makeStyles,
|
makeStyles,
|
||||||
tokens,
|
tokens,
|
||||||
} from "@fluentui/react-components";
|
} from "@fluentui/react-components";
|
||||||
import { useCardStyles } from "../theme/commonStyles";
|
|
||||||
import {
|
import {
|
||||||
ArrowCounterclockwiseRegular,
|
ArrowCounterclockwiseRegular,
|
||||||
ArrowLeftRegular,
|
|
||||||
ChevronLeftRegular,
|
ChevronLeftRegular,
|
||||||
ChevronRightRegular,
|
ChevronRightRegular,
|
||||||
} from "@fluentui/react-icons";
|
} from "@fluentui/react-icons";
|
||||||
import { DashboardFilterBar } from "../components/DashboardFilterBar";
|
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 { HistoryBanItem, HistoryQuery, TimeRange } from "../types/history";
|
||||||
import type { BanOriginFilter } from "../types/ban";
|
import type { BanOriginFilter } from "../types/ban";
|
||||||
|
|
||||||
@@ -216,169 +205,6 @@ const HISTORY_COLUMNS = (
|
|||||||
}),
|
}),
|
||||||
] as ReturnType<typeof createTableColumn<HistoryBanItem>>[];
|
] 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
|
// HistoryPage — main component
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
|
|||||||
@@ -8,33 +8,23 @@
|
|||||||
|
|
||||||
import { useState, useMemo, useEffect } from "react";
|
import { useState, useMemo, useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
Badge,
|
|
||||||
Button,
|
Button,
|
||||||
MessageBar,
|
MessageBar,
|
||||||
MessageBarBody,
|
MessageBarBody,
|
||||||
Spinner,
|
Spinner,
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableCellLayout,
|
|
||||||
TableHeader,
|
|
||||||
TableHeaderCell,
|
|
||||||
TableRow,
|
|
||||||
Text,
|
Text,
|
||||||
Tooltip,
|
|
||||||
makeStyles,
|
makeStyles,
|
||||||
tokens,
|
tokens,
|
||||||
} from "@fluentui/react-components";
|
} from "@fluentui/react-components";
|
||||||
import {
|
import {
|
||||||
ArrowCounterclockwiseRegular,
|
ArrowCounterclockwiseRegular,
|
||||||
ChevronLeftRegular,
|
|
||||||
ChevronRightRegular,
|
|
||||||
DismissRegular,
|
DismissRegular,
|
||||||
} from "@fluentui/react-icons";
|
} from "@fluentui/react-icons";
|
||||||
import { DashboardFilterBar } from "../components/DashboardFilterBar";
|
import { DashboardFilterBar } from "../components/DashboardFilterBar";
|
||||||
import { WorldMap } from "../components/WorldMap";
|
import { WorldMap } from "../components/WorldMap";
|
||||||
import { useMapData } from "../hooks/useMapData";
|
import { useMapData } from "../hooks/useMapData";
|
||||||
import { useMapColorThresholds } from "../hooks/useMapColorThresholds";
|
import { useMapColorThresholds } from "../hooks/useMapColorThresholds";
|
||||||
|
import { MapBansTable } from "./map/MapBansTable";
|
||||||
import type { TimeRange } from "../types/map";
|
import type { TimeRange } from "../types/map";
|
||||||
import type { BanOriginFilter } from "../types/ban";
|
import type { BanOriginFilter } from "../types/ban";
|
||||||
|
|
||||||
@@ -106,8 +96,6 @@ export function MapPage(): React.JSX.Element {
|
|||||||
const [page, setPage] = useState<number>(1);
|
const [page, setPage] = useState<number>(1);
|
||||||
const [pageSize, setPageSize] = useState<number>(100);
|
const [pageSize, setPageSize] = useState<number>(100);
|
||||||
|
|
||||||
const PAGE_SIZE_OPTIONS = [25, 50, 100] as const;
|
|
||||||
|
|
||||||
const source = range === "24h" ? "fail2ban" : "archive";
|
const source = range === "24h" ? "fail2ban" : "archive";
|
||||||
|
|
||||||
const { countries, countryNames, bans, total, loading, error, refresh } =
|
const { countries, countryNames, bans, total, loading, error, refresh } =
|
||||||
@@ -268,123 +256,17 @@ export function MapPage(): React.JSX.Element {
|
|||||||
{/* ---------------------------------------------------------------- */}
|
{/* ---------------------------------------------------------------- */}
|
||||||
{!error && hasLoadedOnce && (
|
{!error && hasLoadedOnce && (
|
||||||
<div className={styles.tableWrapper} style={{ opacity: loading ? 0.5 : 1, transition: "opacity 150ms" }}>
|
<div className={styles.tableWrapper} style={{ opacity: loading ? 0.5 : 1, transition: "opacity 150ms" }}>
|
||||||
<Table size="small" aria-label="Bans list">
|
<MapBansTable
|
||||||
<TableHeader>
|
pageBans={pageBans}
|
||||||
<TableRow>
|
visibleCount={visibleBans.length}
|
||||||
<TableHeaderCell className={styles.stickyHeaderCell}>IP Address</TableHeaderCell>
|
page={page}
|
||||||
<TableHeaderCell className={styles.stickyHeaderCell}>Jail</TableHeaderCell>
|
pageSize={pageSize}
|
||||||
<TableHeaderCell className={styles.stickyHeaderCell}>Banned At</TableHeaderCell>
|
totalPages={totalPages}
|
||||||
<TableHeaderCell className={styles.stickyHeaderCell}>Country</TableHeaderCell>
|
hasPrev={hasPrev}
|
||||||
<TableHeaderCell className={styles.stickyHeaderCell}>Origin</TableHeaderCell>
|
hasNext={hasNext}
|
||||||
<TableHeaderCell className={styles.stickyHeaderCell}>Times Banned</TableHeaderCell>
|
onPageChange={setPage}
|
||||||
</TableRow>
|
onPageSizeChange={setPageSize}
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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