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

203
frontend/src/pages/history/IpDetailView.tsx Normal file
View 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>
);
}