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

Merge branch 'main' of https://git.lpl-mind.de/lukas.pupkalipinski/BanGUI

Browse Source
This commit is contained in:
Lukas
2026-03-22 14:31:20 +01:00
parent 00e702a2c0 ee73373111
commit 26af69e2a3
119 changed files with 8123 additions and 4262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.tsx
View File

@@ -26,6 +26,7 @@ import { AuthProvider } from "./providers/AuthProvider";
import { TimezoneProvider } from "./providers/TimezoneProvider";
import { RequireAuth } from "./components/RequireAuth";
import { SetupGuard } from "./components/SetupGuard";
import { ErrorBoundary } from "./components/ErrorBoundary";
import { MainLayout } from "./layouts/MainLayout";
import { SetupPage } from "./pages/SetupPage";
import { LoginPage } from "./pages/LoginPage";
@@ -43,9 +44,10 @@ import { BlocklistsPage } from "./pages/BlocklistsPage";
function App(): React.JSX.Element {
return (
<FluentProvider theme={lightTheme}>
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<AuthProvider>
<Routes>
<ErrorBoundary>
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<AuthProvider>
<Routes>
{/* Setup wizard — always accessible; redirects to /login if already done */}
<Route path="/setup" element={<SetupPage />} />
@@ -85,6 +87,7 @@ function App(): React.JSX.Element {
</Routes>
</AuthProvider>
</BrowserRouter>
</ErrorBoundary>
</FluentProvider>
);
}

26
frontend/src/components/BanTable.tsx
View File

@@ -27,6 +27,7 @@ import {
import { PageEmpty, PageError, PageLoading } from "./PageFeedback";
import { ChevronLeftRegular, ChevronRightRegular } from "@fluentui/react-icons";
import { useBans } from "../hooks/useBans";
import { formatTimestamp } from "../utils/formatDate";
import type { DashboardBanItem, TimeRange, BanOriginFilter } from "../types/ban";
// ---------------------------------------------------------------------------
@@ -90,31 +91,6 @@ const useStyles = makeStyles({
},
});
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
/**
* Format an ISO 8601 timestamp for display.
*
* @param iso - ISO 8601 UTC string.
* @returns Localised date+time string.
*/
function formatTimestamp(iso: string): string {
try {
return new Date(iso).toLocaleString(undefined, {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
} catch {
return iso;
}
}
// ---------------------------------------------------------------------------
// Column definitions
// ---------------------------------------------------------------------------

18
frontend/src/components/DashboardFilterBar.tsx
View File

@@ -14,6 +14,7 @@ import {
makeStyles,
tokens,
} from "@fluentui/react-components";
import { useCardStyles } from "../theme/commonStyles";
import type { BanOriginFilter, TimeRange } from "../types/ban";
import {
BAN_ORIGIN_FILTER_LABELS,
@@ -57,20 +58,6 @@ const useStyles = makeStyles({
alignItems: "center",
flexWrap: "wrap",
gap: tokens.spacingVerticalS,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
paddingTop: tokens.spacingVerticalS,
paddingBottom: tokens.spacingVerticalS,
paddingLeft: tokens.spacingHorizontalM,
@@ -107,9 +94,10 @@ export function DashboardFilterBar({
onOriginFilterChange,
}: DashboardFilterBarProps): React.JSX.Element {
const styles = useStyles();
const cardStyles = useCardStyles();
return (
<div className={styles.container}>
<div className={`${styles.container} ${cardStyles.card}`}>
{/* Time-range group */}
<div className={styles.group}>
<Text weight="semibold" size={300}>

62
frontend/src/components/ErrorBoundary.tsx Normal file
View File

@@ -0,0 +1,62 @@
/**
* React error boundary component.
*
* Catches render-time exceptions in child components and shows a fallback UI.
*/
import React from "react";
interface ErrorBoundaryState {
hasError: boolean;
errorMessage: string | null;
}
interface ErrorBoundaryProps {
children: React.ReactNode;
}
export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = { hasError: false, errorMessage: null };
this.handleReload = this.handleReload.bind(this);
}
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
return { hasError: true, errorMessage: error.message || "Unknown error" };
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
console.error("ErrorBoundary caught an error", { error, errorInfo });
}
handleReload(): void {
window.location.reload();
}
render(): React.ReactNode {
if (this.state.hasError) {
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
minHeight: "100vh",
padding: "24px",
textAlign: "center",
}}
role="alert"
>
<h1>Something went wrong</h1>
<p>{this.state.errorMessage ?? "Please try reloading the page."}</p>
<button type="button" onClick={this.handleReload} style={{ marginTop: "16px" }}>
Reload
</button>
</div>
);
}
return this.props.children;
}
}

19
frontend/src/components/ServerStatusBar.tsx
View File

@@ -18,6 +18,7 @@ import {
tokens,
Tooltip,
} from "@fluentui/react-components";
import { useCardStyles } from "../theme/commonStyles";
import { ArrowClockwiseRegular, ShieldRegular } from "@fluentui/react-icons";
import { useServerStatus } from "../hooks/useServerStatus";
@@ -31,20 +32,6 @@ const useStyles = makeStyles({
alignItems: "center",
gap: tokens.spacingHorizontalL,
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalL}`,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
marginBottom: tokens.spacingVerticalL,
flexWrap: "wrap",
},
@@ -85,8 +72,10 @@ export function ServerStatusBar(): React.JSX.Element {
const styles = useStyles();
const { status, banguiVersion, loading, error, refresh } = useServerStatus();
const cardStyles = useCardStyles();
return (
<div className={styles.bar} role="status" aria-label="fail2ban server status">
<div className={`${cardStyles.card} ${styles.bar}`} role="status" aria-label="fail2ban server status">
{/* ---------------------------------------------------------------- */}
{/* Online / Offline badge */}
{/* ---------------------------------------------------------------- */}

29
frontend/src/components/SetupGuard.tsx
View File

@@ -6,12 +6,13 @@
* While the status is loading a full-screen spinner is shown.
*/
import { useEffect, useState } from "react";
import { Navigate } from "react-router-dom";
import { Spinner } from "@fluentui/react-components";
import { getSetupStatus } from "../api/setup";
import { useSetup } from "../hooks/useSetup";
type Status = "loading" | "done" | "pending";
/**
* Component is intentionally simple; status load is handled by the hook.
*/
interface SetupGuardProps {
/** The protected content to render when setup is complete. */
@@ -24,25 +25,9 @@ interface SetupGuardProps {
* Redirects to `/setup` if setup is still pending.
*/
export function SetupGuard({ children }: SetupGuardProps): React.JSX.Element {
const [status, setStatus] = useState<Status>("loading");
const { status, loading } = useSetup();
useEffect(() => {
let cancelled = false;
getSetupStatus()
.then((res): void => {
if (!cancelled) setStatus(res.completed ? "done" : "pending");
})
.catch((): void => {
// A failed check conservatively redirects to /setup — a crashed
// backend cannot serve protected routes anyway.
if (!cancelled) setStatus("pending");
});
return (): void => {
cancelled = true;
};
}, []);
if (status === "loading") {
if (loading) {
return (
<div
style={{
@@ -57,7 +42,7 @@ export function SetupGuard({ children }: SetupGuardProps): React.JSX.Element {
);
}
if (status === "pending") {
if (!status?.completed) {
return <Navigate to="/setup" replace />;
}

7
frontend/src/components/WorldMap.tsx
View File

@@ -11,6 +11,7 @@ import { createPortal } from "react-dom";
import { useCallback, useState } from "react";
import { ComposableMap, ZoomableGroup, Geography, useGeographies } from "react-simple-maps";
import { Button, makeStyles, tokens } from "@fluentui/react-components";
import { useCardStyles } from "../theme/commonStyles";
import type { GeoPermissibleObjects } from "d3-geo";
import { ISO_NUMERIC_TO_ALPHA2 } from "../data/isoNumericToAlpha2";
import { getBanCountColor } from "../utils/mapColors";
@@ -30,9 +31,6 @@ const useStyles = makeStyles({
mapWrapper: {
width: "100%",
position: "relative",
backgroundColor: tokens.colorNeutralBackground2,
borderRadius: tokens.borderRadiusMedium,
border: `1px solid ${tokens.colorNeutralStroke1}`,
overflow: "hidden",
},
countLabel: {
@@ -290,6 +288,7 @@ export function WorldMap({
thresholdHigh = 100,
}: WorldMapProps): React.JSX.Element {
const styles = useStyles();
const cardStyles = useCardStyles();
const [zoom, setZoom] = useState<number>(1);
const [center, setCenter] = useState<[number, number]>([0, 0]);
@@ -308,7 +307,7 @@ export function WorldMap({
return (
<div
className={styles.mapWrapper}
className={`${cardStyles.card} ${styles.mapWrapper}`}
role="img"
aria-label="World map showing banned IP counts by country. Click a country to filter the table below."
>

33
frontend/src/components/__tests__/ErrorBoundary.test.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { ErrorBoundary } from "../ErrorBoundary";
function ExplodingChild(): React.ReactElement {
throw new Error("boom");
}
describe("ErrorBoundary", () => {
it("renders the fallback UI when a child throws", () => {
render(
<ErrorBoundary>
<ExplodingChild />
</ErrorBoundary>,
);
expect(screen.getByRole("alert")).toBeInTheDocument();
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
expect(screen.getByText(/boom/i)).toBeInTheDocument();
expect(screen.getByRole("button", { name: /reload/i })).toBeInTheDocument();
});
it("renders children normally when no error occurs", () => {
render(
<ErrorBoundary>
<div data-testid="safe-child">safe</div>
</ErrorBoundary>,
);
expect(screen.getByTestId("safe-child")).toBeInTheDocument();
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
});
});

105
frontend/src/components/blocklist/BlocklistImportLogSection.tsx Normal file
View File

@@ -0,0 +1,105 @@
import { Button, Badge, Table, TableBody, TableCell, TableCellLayout, TableHeader, TableHeaderCell, TableRow, Text, MessageBar, MessageBarBody, Spinner } from "@fluentui/react-components";
import { ArrowClockwiseRegular } from "@fluentui/react-icons";
import { useCommonSectionStyles } from "../../theme/commonStyles";
import { useImportLog } from "../../hooks/useBlocklist";
import { useBlocklistStyles } from "./blocklistStyles";
export function BlocklistImportLogSection(): React.JSX.Element {
const styles = useBlocklistStyles();
const sectionStyles = useCommonSectionStyles();
const { data, loading, error, page, setPage, refresh } = useImportLog(undefined, 20);
return (
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text size={500} weight="semibold">
Import Log
</Text>
<Button icon={<ArrowClockwiseRegular />} appearance="secondary" onClick={refresh}>
Refresh
</Button>
</div>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{loading ? (
<div className={styles.centred}>
<Spinner label="Loading log…" />
</div>
) : !data || data.items.length === 0 ? (
<div className={styles.centred}>
<Text>No import runs recorded yet.</Text>
</div>
) : (
<>
<div className={styles.tableWrapper}>
<Table>
<TableHeader>
<TableRow>
<TableHeaderCell>Timestamp</TableHeaderCell>
<TableHeaderCell>Source URL</TableHeaderCell>
<TableHeaderCell>Imported</TableHeaderCell>
<TableHeaderCell>Skipped</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{data.items.map((entry) => (
<TableRow key={entry.id} className={entry.errors ? styles.errorRow : undefined}>
<TableCell>
<TableCellLayout>
<span className={styles.mono}>{entry.timestamp}</span>
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
<span className={styles.mono}>{entry.source_url}</span>
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{entry.ips_imported}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{entry.ips_skipped}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
{entry.errors ? (
<Badge appearance="filled" color="danger">
Error
</Badge>
) : (
<Badge appearance="filled" color="success">
OK
</Badge>
)}
</TableCellLayout>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data.total_pages > 1 && (
<div className={styles.pagination}>
<Button size="small" appearance="secondary" disabled={page <= 1} onClick={() => { setPage(page - 1); }}>
Previous
</Button>
<Text size={200}>
Page {page} of {data.total_pages}
</Text>
<Button size="small" appearance="secondary" disabled={page >= data.total_pages} onClick={() => { setPage(page + 1); }}>
Next
</Button>
</div>
)}
</>
)}
</div>
);
}

175
frontend/src/components/blocklist/BlocklistScheduleSection.tsx Normal file
View File

@@ -0,0 +1,175 @@
import { useCallback, useState } from "react";
import { Button, Field, Input, MessageBar, MessageBarBody, Select, Spinner, Text } from "@fluentui/react-components";
import { PlayRegular } from "@fluentui/react-icons";
import { useCommonSectionStyles } from "../../theme/commonStyles";
import { useSchedule } from "../../hooks/useBlocklist";
import { useBlocklistStyles } from "./blocklistStyles";
import type { ScheduleConfig, ScheduleFrequency } from "../../types/blocklist";
const FREQUENCY_LABELS: Record<ScheduleFrequency, string> = {
hourly: "Every N hours",
daily: "Daily",
weekly: "Weekly",
};
const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
interface ScheduleSectionProps {
onRunImport: () => void;
runImportRunning: boolean;
}
export function BlocklistScheduleSection({ onRunImport, runImportRunning }: ScheduleSectionProps): React.JSX.Element {
const styles = useBlocklistStyles();
const sectionStyles = useCommonSectionStyles();
const { info, loading, error, saveSchedule } = useSchedule();
const [saving, setSaving] = useState(false);
const [saveMsg, setSaveMsg] = useState<string | null>(null);
const config = info?.config ?? {
frequency: "daily" as ScheduleFrequency,
interval_hours: 24,
hour: 3,
minute: 0,
day_of_week: 0,
};
const [draft, setDraft] = useState<ScheduleConfig>(config);
const handleSave = useCallback((): void => {
setSaving(true);
saveSchedule(draft)
.then(() => {
setSaveMsg("Schedule saved.");
setSaving(false);
setTimeout(() => { setSaveMsg(null); }, 3000);
})
.catch((err: unknown) => {
setSaveMsg(err instanceof Error ? err.message : "Failed to save schedule");
setSaving(false);
});
}, [draft, saveSchedule]);
return (
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text size={500} weight="semibold">
Import Schedule
</Text>
<Button icon={<PlayRegular />} appearance="secondary" onClick={onRunImport} disabled={runImportRunning}>
{runImportRunning ? <Spinner size="tiny" /> : "Run Now"}
</Button>
</div>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{saveMsg && (
<MessageBar intent={saveMsg === "Schedule saved." ? "success" : "error"}>
<MessageBarBody>{saveMsg}</MessageBarBody>
</MessageBar>
)}
{loading ? (
<div className={styles.centred}>
<Spinner label="Loading schedule…" />
</div>
) : (
<>
<div className={styles.scheduleForm}>
<Field label="Frequency" className={styles.scheduleField}>
<Select
value={draft.frequency}
onChange={(_ev, d) => { setDraft((p) => ({ ...p, frequency: d.value as ScheduleFrequency })); }}
>
{(["hourly", "daily", "weekly"] as ScheduleFrequency[]).map((f) => (
<option key={f} value={f}>
{FREQUENCY_LABELS[f]}
</option>
))}
</Select>
</Field>
{draft.frequency === "hourly" && (
<Field label="Every (hours)" className={styles.scheduleField}>
<Input
type="number"
value={String(draft.interval_hours)}
onChange={(_ev, d) => { setDraft((p) => ({ ...p, interval_hours: Math.max(1, parseInt(d.value, 10) || 1) })); }}
min={1}
max={168}
/>
</Field>
)}
{draft.frequency !== "hourly" && (
<>
{draft.frequency === "weekly" && (
<Field label="Day of week" className={styles.scheduleField}>
<Select
value={String(draft.day_of_week)}
onChange={(_ev, d) => { setDraft((p) => ({ ...p, day_of_week: parseInt(d.value, 10) })); }}
>
{DAYS.map((day, i) => (
<option key={day} value={i}>
{day}
</option>
))}
</Select>
</Field>
)}
<Field label="Hour (UTC)" className={styles.scheduleField}>
<Select
value={String(draft.hour)}
onChange={(_ev, d) => { setDraft((p) => ({ ...p, hour: parseInt(d.value, 10) })); }}
>
{Array.from({ length: 24 }, (_, i) => (
<option key={i} value={i}>
{String(i).padStart(2, "0")}:00
</option>
))}
</Select>
</Field>
<Field label="Minute" className={styles.scheduleField}>
<Select
value={String(draft.minute)}
onChange={(_ev, d) => { setDraft((p) => ({ ...p, minute: parseInt(d.value, 10) })); }}
>
{[0, 15, 30, 45].map((m) => (
<option key={m} value={m}>
{String(m).padStart(2, "0")}
</option>
))}
</Select>
</Field>
</>
)}
<Button appearance="primary" onClick={handleSave} disabled={saving} style={{ alignSelf: "flex-end" }}>
{saving ? <Spinner size="tiny" /> : "Save Schedule"}
</Button>
</div>
<div className={styles.metaRow}>
<div className={styles.metaItem}>
<Text size={200} weight="semibold">
Last run
</Text>
<Text size={200}>{info?.last_run_at ?? "Never"}</Text>
</div>
<div className={styles.metaItem}>
<Text size={200} weight="semibold">
Next run
</Text>
<Text size={200}>{info?.next_run_at ?? "Not scheduled"}</Text>
</div>
</div>
</>
)}
</div>
);
}

392
frontend/src/components/blocklist/BlocklistSourcesSection.tsx Normal file
View File

@@ -0,0 +1,392 @@
import { useCallback, useState } from "react";
import {
Button,
Dialog,
DialogActions,
DialogBody,
DialogContent,
DialogSurface,
DialogTitle,
Field,
Input,
MessageBar,
MessageBarBody,
Spinner,
Switch,
Table,
TableBody,
TableCell,
TableCellLayout,
TableHeader,
TableHeaderCell,
TableRow,
Text,
} from "@fluentui/react-components";
import { useCommonSectionStyles } from "../../theme/commonStyles";
import {
AddRegular,
ArrowClockwiseRegular,
DeleteRegular,
EditRegular,
EyeRegular,
PlayRegular,
} from "@fluentui/react-icons";
import { useBlocklists } from "../../hooks/useBlocklist";
import type { BlocklistSource, PreviewResponse } from "../../types/blocklist";
import { useBlocklistStyles } from "./blocklistStyles";
interface SourceFormValues {
name: string;
url: string;
enabled: boolean;
}
interface SourceFormDialogProps {
open: boolean;
mode: "add" | "edit";
initial: SourceFormValues;
saving: boolean;
error: string | null;
onClose: () => void;
onSubmit: (values: SourceFormValues) => void;
}
function SourceFormDialog({
open,
mode,
initial,
saving,
error,
onClose,
onSubmit,
}: SourceFormDialogProps): React.JSX.Element {
const styles = useBlocklistStyles();
const [values, setValues] = useState<SourceFormValues>(initial);
const handleOpen = useCallback((): void => {
setValues(initial);
}, [initial]);
return (
<Dialog
open={open}
onOpenChange={(_ev, data) => {
if (!data.open) onClose();
}}
>
<DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
<DialogBody>
<DialogTitle>{mode === "add" ? "Add Blocklist Source" : "Edit Blocklist Source"}</DialogTitle>
<DialogContent>
<div className={styles.dialogForm}>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
<Field label="Name" required>
<Input
value={values.name}
onChange={(_ev, d) => { setValues((p) => ({ ...p, name: d.value })); }}
placeholder="e.g. Blocklist.de — All"
/>
</Field>
<Field label="URL" required>
<Input
value={values.url}
onChange={(_ev, d) => { setValues((p) => ({ ...p, url: d.value })); }}
placeholder="https://lists.blocklist.de/lists/all.txt"
/>
</Field>
<Switch
label="Enabled"
checked={values.enabled}
onChange={(_ev, d) => { setValues((p) => ({ ...p, enabled: d.checked })); }}
/>
</div>
</DialogContent>
<DialogActions>
<Button appearance="secondary" onClick={onClose} disabled={saving}>
Cancel
</Button>
<Button
appearance="primary"
disabled={saving || !values.name.trim() || !values.url.trim()}
onClick={() => { onSubmit(values); }}
>
{saving ? <Spinner size="tiny" /> : mode === "add" ? "Add" : "Save"}
</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
);
}
interface PreviewDialogProps {
open: boolean;
source: BlocklistSource | null;
onClose: () => void;
fetchPreview: (id: number) => Promise<PreviewResponse>;
}
function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
const styles = useBlocklistStyles();
const [data, setData] = useState<PreviewResponse | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleOpen = useCallback((): void => {
if (!source) return;
setData(null);
setError(null);
setLoading(true);
fetchPreview(source.id)
.then((result) => {
setData(result);
setLoading(false);
})
.catch((err: unknown) => {
setError(err instanceof Error ? err.message : "Failed to fetch preview");
setLoading(false);
});
}, [source, fetchPreview]);
return (
<Dialog
open={open}
onOpenChange={(_ev, d) => {
if (!d.open) onClose();
}}
>
<DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
<DialogBody>
<DialogTitle>Preview — {source?.name ?? ""}</DialogTitle>
<DialogContent>
{loading && (
<div style={{ textAlign: "center", padding: "16px" }}>
<Spinner label="Downloading…" />
</div>
)}
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{data && (
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
<Text size={300}>
{data.valid_count} valid IPs / {data.skipped_count} skipped of {data.total_lines} total lines. Showing first {data.entries.length}:
</Text>
<div className={styles.previewList}>
{data.entries.map((entry) => (
<div key={entry}>{entry}</div>
))}
</div>
</div>
)}
</DialogContent>
<DialogActions>
<Button appearance="secondary" onClick={onClose}>
Close
</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
);
}
interface SourcesSectionProps {
onRunImport: () => void;
runImportRunning: boolean;
}
const EMPTY_SOURCE: SourceFormValues = { name: "", url: "", enabled: true };
export function BlocklistSourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps): React.JSX.Element {
const styles = useBlocklistStyles();
const sectionStyles = useCommonSectionStyles();
const { sources, loading, error, refresh, createSource, updateSource, removeSource, previewSource } = useBlocklists();
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogMode, setDialogMode] = useState<"add" | "edit">("add");
const [dialogInitial, setDialogInitial] = useState<SourceFormValues>(EMPTY_SOURCE);
const [editingId, setEditingId] = useState<number | null>(null);
const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const [previewOpen, setPreviewOpen] = useState(false);
const [previewSourceItem, setPreviewSourceItem] = useState<BlocklistSource | null>(null);
const openAdd = useCallback((): void => {
setDialogMode("add");
setDialogInitial(EMPTY_SOURCE);
setEditingId(null);
setSaveError(null);
setDialogOpen(true);
}, []);
const openEdit = useCallback((source: BlocklistSource): void => {
setDialogMode("edit");
setDialogInitial({ name: source.name, url: source.url, enabled: source.enabled });
setEditingId(source.id);
setSaveError(null);
setDialogOpen(true);
}, []);
const handleSubmit = useCallback(
(values: SourceFormValues): void => {
setSaving(true);
setSaveError(null);
const op =
dialogMode === "add"
? createSource({ name: values.name, url: values.url, enabled: values.enabled })
: updateSource(editingId ?? -1, { name: values.name, url: values.url, enabled: values.enabled });
op
.then(() => {
setSaving(false);
setDialogOpen(false);
})
.catch((err: unknown) => {
setSaving(false);
setSaveError(err instanceof Error ? err.message : "Failed to save source");
});
},
[dialogMode, editingId, createSource, updateSource],
);
const handleToggleEnabled = useCallback(
(source: BlocklistSource): void => {
void updateSource(source.id, { enabled: !source.enabled });
},
[updateSource],
);
const handleDelete = useCallback(
(source: BlocklistSource): void => {
void removeSource(source.id);
},
[removeSource],
);
const handlePreview = useCallback((source: BlocklistSource): void => {
setPreviewSourceItem(source);
setPreviewOpen(true);
}, []);
return (
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text size={500} weight="semibold">
Blocklist Sources
</Text>
<div style={{ display: "flex", gap: "8px" }}>
<Button icon={<PlayRegular />} appearance="secondary" onClick={onRunImport} disabled={runImportRunning}>
{runImportRunning ? <Spinner size="tiny" /> : "Run Now"}
</Button>
<Button icon={<ArrowClockwiseRegular />} appearance="secondary" onClick={refresh}>
Refresh
</Button>
<Button icon={<AddRegular />} appearance="primary" onClick={openAdd}>
Add Source
</Button>
</div>
</div>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{loading ? (
<div className={styles.centred}>
<Spinner label="Loading sources…" />
</div>
) : sources.length === 0 ? (
<div className={styles.centred}>
<Text>No blocklist sources configured. Click "Add Source" to get started.</Text>
</div>
) : (
<div className={styles.tableWrapper}>
<Table>
<TableHeader>
<TableRow>
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>URL</TableHeaderCell>
<TableHeaderCell>Enabled</TableHeaderCell>
<TableHeaderCell>Actions</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{sources.map((source) => (
<TableRow key={source.id}>
<TableCell>
<TableCellLayout>{source.name}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
<span className={styles.mono}>{source.url}</span>
</TableCellLayout>
</TableCell>
<TableCell>
<Switch
checked={source.enabled}
onChange={() => { handleToggleEnabled(source); }}
label={source.enabled ? "On" : "Off"}
/>
</TableCell>
<TableCell>
<div className={styles.actionsCell}>
<Button
icon={<EyeRegular />}
size="small"
appearance="secondary"
onClick={() => { handlePreview(source); }}
>
Preview
</Button>
<Button
icon={<EditRegular />}
size="small"
appearance="secondary"
onClick={() => { openEdit(source); }}
>
Edit
</Button>
<Button
icon={<DeleteRegular />}
size="small"
appearance="secondary"
onClick={() => { handleDelete(source); }}
>
Delete
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
<SourceFormDialog
open={dialogOpen}
mode={dialogMode}
initial={dialogInitial}
saving={saving}
error={saveError}
onClose={() => { setDialogOpen(false); }}
onSubmit={handleSubmit}
/>
<PreviewDialog
open={previewOpen}
source={previewSourceItem}
onClose={() => { setPreviewOpen(false); }}
fetchPreview={previewSource}
/>
</div>
);
}

62
frontend/src/components/blocklist/blocklistStyles.ts Normal file
View File

@@ -0,0 +1,62 @@
import { makeStyles, tokens } from "@fluentui/react-components";
export const useBlocklistStyles = makeStyles({
root: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalXL,
},
tableWrapper: { overflowX: "auto" },
actionsCell: { display: "flex", gap: tokens.spacingHorizontalS, flexWrap: "wrap" },
mono: { fontFamily: "Consolas, 'Courier New', monospace", fontSize: "12px" },
centred: {
display: "flex",
justifyContent: "center",
padding: tokens.spacingVerticalL,
},
scheduleForm: {
display: "flex",
flexWrap: "wrap",
gap: tokens.spacingHorizontalM,
alignItems: "flex-end",
},
scheduleField: { minWidth: "140px" },
metaRow: {
display: "flex",
gap: tokens.spacingHorizontalL,
flexWrap: "wrap",
paddingTop: tokens.spacingVerticalS,
},
metaItem: { display: "flex", flexDirection: "column", gap: "2px" },
runResult: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalXS,
maxHeight: "320px",
overflowY: "auto",
},
pagination: {
display: "flex",
justifyContent: "flex-end",
gap: tokens.spacingHorizontalS,
alignItems: "center",
paddingTop: tokens.spacingVerticalS,
},
dialogForm: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalM,
minWidth: "380px",
},
previewList: {
fontFamily: "Consolas, 'Courier New', monospace",
fontSize: "12px",
maxHeight: "280px",
overflowY: "auto",
backgroundColor: tokens.colorNeutralBackground3,
padding: tokens.spacingVerticalS,
borderRadius: tokens.borderRadiusMedium,
},
errorRow: { backgroundColor: tokens.colorStatusDangerBackground1 },
});

64
frontend/src/components/config/ServerTab.tsx
View File

@@ -25,15 +25,10 @@ import {
ArrowSync24Regular,
} from "@fluentui/react-icons";
import { ApiError } from "../../api/client";
import type { ServerSettingsUpdate, MapColorThresholdsResponse, MapColorThresholdsUpdate } from "../../types/config";
import type { ServerSettingsUpdate, MapColorThresholdsUpdate } from "../../types/config";
import { useServerSettings } from "../../hooks/useConfig";
import { useAutoSave } from "../../hooks/useAutoSave";
import {
fetchMapColorThresholds,
updateMapColorThresholds,
reloadConfig,
restartFail2Ban,
} from "../../api/config";
import { useMapColorThresholds } from "../../hooks/useMapColorThresholds";
import { AutoSaveIndicator } from "./AutoSaveIndicator";
import { ServerHealthSection } from "./ServerHealthSection";
import { useConfigStyles } from "./configStyles";
@@ -48,7 +43,7 @@ const LOG_LEVELS = ["CRITICAL", "ERROR", "WARNING", "NOTICE", "INFO", "DEBUG"];
*/
export function ServerTab(): React.JSX.Element {
const styles = useConfigStyles();
const { settings, loading, error, updateSettings, flush } =
const { settings, loading, error, updateSettings, flush, reload, restart } =
useServerSettings();
const [logLevel, setLogLevel] = useState("");
const [logTarget, setLogTarget] = useState("");
@@ -62,11 +57,15 @@ export function ServerTab(): React.JSX.Element {
const [isRestarting, setIsRestarting] = useState(false);
// Map color thresholds
const [mapThresholds, setMapThresholds] = useState<MapColorThresholdsResponse | null>(null);
const {
thresholds: mapThresholds,
error: mapThresholdsError,
refresh: refreshMapThresholds,
updateThresholds: updateMapThresholds,
} = useMapColorThresholds();
const [mapThresholdHigh, setMapThresholdHigh] = useState("");
const [mapThresholdMedium, setMapThresholdMedium] = useState("");
const [mapThresholdLow, setMapThresholdLow] = useState("");
const [mapLoadError, setMapLoadError] = useState<string | null>(null);
const effectiveLogLevel = logLevel || settings?.log_level || "";
const effectiveLogTarget = logTarget || settings?.log_target || "";
@@ -105,11 +104,11 @@ export function ServerTab(): React.JSX.Element {
}
}, [flush]);
const handleReload = useCallback(async () => {
const handleReload = async (): Promise<void> => {
setIsReloading(true);
setMsg(null);
try {
await reloadConfig();
await reload();
setMsg({ text: "fail2ban reloaded successfully", ok: true });
} catch (err: unknown) {
setMsg({
@@ -119,13 +118,13 @@ export function ServerTab(): React.JSX.Element {
} finally {
setIsReloading(false);
}
}, []);
};
const handleRestart = useCallback(async () => {
const handleRestart = async (): Promise<void> => {
setIsRestarting(true);
setMsg(null);
try {
await restartFail2Ban();
await restart();
setMsg({ text: "fail2ban restart initiated", ok: true });
} catch (err: unknown) {
setMsg({
@@ -135,27 +134,15 @@ export function ServerTab(): React.JSX.Element {
} finally {
setIsRestarting(false);
}
}, []);
// Load map color thresholds on mount.
const loadMapThresholds = useCallback(async (): Promise<void> => {
try {
const data = await fetchMapColorThresholds();
setMapThresholds(data);
setMapThresholdHigh(String(data.threshold_high));
setMapThresholdMedium(String(data.threshold_medium));
setMapThresholdLow(String(data.threshold_low));
setMapLoadError(null);
} catch (err) {
setMapLoadError(
err instanceof ApiError ? err.message : "Failed to load map color thresholds",
);
}
}, []);
};
useEffect(() => {
void loadMapThresholds();
}, [loadMapThresholds]);
if (!mapThresholds) return;
setMapThresholdHigh(String(mapThresholds.threshold_high));
setMapThresholdMedium(String(mapThresholds.threshold_medium));
setMapThresholdLow(String(mapThresholds.threshold_low));
}, [mapThresholds]);
// Map threshold validation and auto-save.
const mapHigh = Number(mapThresholdHigh);
@@ -190,9 +177,10 @@ export function ServerTab(): React.JSX.Element {
const saveMapThresholds = useCallback(
async (payload: MapColorThresholdsUpdate): Promise<void> => {
await updateMapColorThresholds(payload);
await updateMapThresholds(payload);
await refreshMapThresholds();
},
[],
[refreshMapThresholds, updateMapThresholds],
);
const { status: mapSaveStatus, errorText: mapSaveErrorText, retry: retryMapSave } =
@@ -332,10 +320,10 @@ export function ServerTab(): React.JSX.Element {
</div>
{/* Map Color Thresholds section */}
{mapLoadError ? (
{mapThresholdsError ? (
<div className={styles.sectionCard}>
<MessageBar intent="error">
<MessageBarBody>{mapLoadError}</MessageBarBody>
<MessageBarBody>{mapThresholdsError}</MessageBarBody>
</MessageBar>
</div>
) : mapThresholds ? (

184
frontend/src/components/jail/BannedIpsSection.tsx
View File

@@ -9,7 +9,6 @@
* remains fast even when a jail contains thousands of banned IPs.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import {
Badge,
Button,
@@ -33,6 +32,8 @@ import {
type TableColumnDefinition,
createTableColumn,
} from "@fluentui/react-components";
import { useCommonSectionStyles } from "../../theme/commonStyles";
import { formatTimestamp } from "../../utils/formatDate";
import {
ArrowClockwiseRegular,
ChevronLeftRegular,
@@ -40,17 +41,12 @@ import {
DismissRegular,
SearchRegular,
} from "@fluentui/react-icons";
import { fetchJailBannedIps, unbanIp } from "../../api/jails";
import type { ActiveBan } from "../../types/jail";
import { ApiError } from "../../api/client";
// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------
/** Debounce delay in milliseconds for the search input. */
const SEARCH_DEBOUNCE_MS = 300;
/** Available page-size options. */
const PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
@@ -59,26 +55,6 @@ const PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
// ---------------------------------------------------------------------------
const useStyles = makeStyles({
root: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalS,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
padding: tokens.spacingVerticalM,
},
header: {
display: "flex",
alignItems: "center",
@@ -132,31 +108,6 @@ const useStyles = makeStyles({
},
});
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
/**
* Format an ISO 8601 timestamp for compact display.
*
* @param iso - ISO 8601 string or `null`.
* @returns A locale time string, or `"—"` when `null`.
*/
function fmtTime(iso: string | null): string {
if (!iso) return "—";
try {
return new Date(iso).toLocaleString(undefined, {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
});
} catch {
return iso;
}
}
// ---------------------------------------------------------------------------
// Column definitions
// ---------------------------------------------------------------------------
@@ -164,7 +115,7 @@ function fmtTime(iso: string | null): string {
/** A row item augmented with an `onUnban` callback for the row action. */
interface BanRow {
ban: ActiveBan;
onUnban: (ip: string) => void;
onUnban: (ip: string) => Promise<void>;
}
const columns: TableColumnDefinition<BanRow>[] = [
@@ -197,12 +148,16 @@ const columns: TableColumnDefinition<BanRow>[] = [
createTableColumn<BanRow>({
columnId: "banned_at",
renderHeaderCell: () => "Banned At",
renderCell: ({ ban }) => <Text size={200}>{fmtTime(ban.banned_at)}</Text>,
renderCell: ({ ban }) => (
<Text size={200}>{ban.banned_at ? formatTimestamp(ban.banned_at) : "—"}</Text>
),
}),
createTableColumn<BanRow>({
columnId: "expires_at",
renderHeaderCell: () => "Expires At",
renderCell: ({ ban }) => <Text size={200}>{fmtTime(ban.expires_at)}</Text>,
renderCell: ({ ban }) => (
<Text size={200}>{ban.expires_at ? formatTimestamp(ban.expires_at) : "—"}</Text>
),
}),
createTableColumn<BanRow>({
columnId: "actions",
@@ -213,9 +168,7 @@ const columns: TableColumnDefinition<BanRow>[] = [
size="small"
appearance="subtle"
icon={<DismissRegular />}
onClick={() => {
onUnban(ban.ip);
}}
onClick={() => { void onUnban(ban.ip); }}
aria-label={`Unban ${ban.ip}`}
/>
</Tooltip>
@@ -229,8 +182,19 @@ const columns: TableColumnDefinition<BanRow>[] = [
/** Props for {@link BannedIpsSection}. */
export interface BannedIpsSectionProps {
/** The jail name whose banned IPs are displayed. */
jailName: string;
items: ActiveBan[];
total: number;
page: number;
pageSize: number;
search: string;
loading: boolean;
error: string | null;
opError: string | null;
onSearch: (term: string) => void;
onPageChange: (page: number) => void;
onPageSizeChange: (size: number) => void;
onRefresh: () => Promise<void>;
onUnban: (ip: string) => Promise<void>;
}
// ---------------------------------------------------------------------------
@@ -242,87 +206,33 @@ export interface BannedIpsSectionProps {
*
* @param props - {@link BannedIpsSectionProps}
*/
export function BannedIpsSection({ jailName }: BannedIpsSectionProps): React.JSX.Element {
export function BannedIpsSection({
items,
total,
page,
pageSize,
search,
loading,
error,
opError,
onSearch,
onPageChange,
onPageSizeChange,
onRefresh,
onUnban,
}: BannedIpsSectionProps): React.JSX.Element {
const styles = useStyles();
const [items, setItems] = useState<ActiveBan[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState<number>(25);
const [search, setSearch] = useState("");
const [debouncedSearch, setDebouncedSearch] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [opError, setOpError] = useState<string | null>(null);
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// Debounce the search input so we don't spam the backend on every keystroke.
useEffect(() => {
if (debounceRef.current !== null) {
clearTimeout(debounceRef.current);
}
debounceRef.current = setTimeout((): void => {
setDebouncedSearch(search);
setPage(1);
}, SEARCH_DEBOUNCE_MS);
return (): void => {
if (debounceRef.current !== null) clearTimeout(debounceRef.current);
};
}, [search]);
const load = useCallback(() => {
setLoading(true);
setError(null);
fetchJailBannedIps(jailName, page, pageSize, debouncedSearch || undefined)
.then((resp) => {
setItems(resp.items);
setTotal(resp.total);
})
.catch((err: unknown) => {
const msg =
err instanceof ApiError
? `${String(err.status)}: ${err.body}`
: err instanceof Error
? err.message
: String(err);
setError(msg);
})
.finally(() => {
setLoading(false);
});
}, [jailName, page, pageSize, debouncedSearch]);
useEffect(() => {
load();
}, [load]);
const handleUnban = (ip: string): void => {
setOpError(null);
unbanIp(ip, jailName)
.then(() => {
load();
})
.catch((err: unknown) => {
const msg =
err instanceof ApiError
? `${String(err.status)}: ${err.body}`
: err instanceof Error
? err.message
: String(err);
setOpError(msg);
});
};
const sectionStyles = useCommonSectionStyles();
const rows: BanRow[] = items.map((ban) => ({
ban,
onUnban: handleUnban,
onUnban,
}));
const totalPages = pageSize > 0 ? Math.ceil(total / pageSize) : 1;
return (
<div className={styles.root}>
<div className={sectionStyles.section}>
{/* Section header */}
<div className={styles.header}>
<div className={styles.headerLeft}>
@@ -335,7 +245,7 @@ export function BannedIpsSection({ jailName }: BannedIpsSectionProps): React.JSX
size="small"
appearance="subtle"
icon={<ArrowClockwiseRegular />}
onClick={load}
onClick={() => { void onRefresh(); }}
aria-label="Refresh banned IPs"
/>
</div>
@@ -350,7 +260,7 @@ export function BannedIpsSection({ jailName }: BannedIpsSectionProps): React.JSX
placeholder="e.g. 192.168"
value={search}
onChange={(_, d) => {
setSearch(d.value);
onSearch(d.value);
}}
/>
</Field>
@@ -420,8 +330,8 @@ export function BannedIpsSection({ jailName }: BannedIpsSectionProps): React.JSX
onOptionSelect={(_, d) => {
const newSize = Number(d.optionValue);
if (!Number.isNaN(newSize)) {
setPageSize(newSize);
setPage(1);
onPageSizeChange(newSize);
onPageChange(1);
}
}}
style={{ minWidth: "80px" }}
@@ -445,7 +355,7 @@ export function BannedIpsSection({ jailName }: BannedIpsSectionProps): React.JSX
icon={<ChevronLeftRegular />}
disabled={page <= 1}
onClick={() => {
setPage((p) => Math.max(1, p - 1));
onPageChange(Math.max(1, page - 1));
}}
aria-label="Previous page"
/>
@@ -455,7 +365,7 @@ export function BannedIpsSection({ jailName }: BannedIpsSectionProps): React.JSX
icon={<ChevronRightRegular />}
disabled={page >= totalPages}
onClick={() => {
setPage((p) => p + 1);
onPageChange(page + 1);
}}
aria-label="Next page"
/>

255
frontend/src/components/jail/__tests__/BannedIpsSection.test.tsx
View File

@@ -1,52 +1,11 @@
/**
* Tests for the `BannedIpsSection` component.
*
* Verifies:
* - Renders the section header and total count badge.
* - Shows a spinner while loading.
* - Renders a table with IP rows on success.
* - Shows an empty-state message when there are no banned IPs.
* - Displays an error message bar when the API call fails.
* - Search input re-fetches with the search parameter after debounce.
* - Unban button calls `unbanIp` and refreshes the list.
* - Pagination buttons are shown and change the page.
*/
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor, act, fireEvent } from "@testing-library/react";
import { describe, it, expect, 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 { BannedIpsSection } from "../BannedIpsSection";
import type { JailBannedIpsResponse } from "../../../types/jail";
import { BannedIpsSection, type BannedIpsSectionProps } from "../BannedIpsSection";
import type { ActiveBan } from "../../../types/jail";
// ---------------------------------------------------------------------------
// Module mocks
// ---------------------------------------------------------------------------
const { mockFetchJailBannedIps, mockUnbanIp } = vi.hoisted(() => ({
mockFetchJailBannedIps: vi.fn<
(
jailName: string,
page?: number,
pageSize?: number,
search?: string,
) => Promise<JailBannedIpsResponse>
>(),
mockUnbanIp: vi.fn<
(ip: string, jail?: string) => Promise<{ message: string; jail: string }>
>(),
}));
vi.mock("../../../api/jails", () => ({
fetchJailBannedIps: mockFetchJailBannedIps,
unbanIp: mockUnbanIp,
}));
// ---------------------------------------------------------------------------
// Fixtures
// ---------------------------------------------------------------------------
function makeBan(ip: string) {
function makeBan(ip: string): ActiveBan {
return {
ip,
jail: "sshd",
@@ -57,195 +16,65 @@ function makeBan(ip: string) {
};
}
function makeResponse(
ips: string[] = ["1.2.3.4", "5.6.7.8"],
total = 2,
): JailBannedIpsResponse {
return {
items: ips.map(makeBan),
total,
function renderWithProps(props: Partial<BannedIpsSectionProps> = {}) {
const defaults: BannedIpsSectionProps = {
items: [makeBan("1.2.3.4"), makeBan("5.6.7.8")],
total: 2,
page: 1,
page_size: 25,
pageSize: 25,
search: "",
loading: false,
error: null,
opError: null,
onSearch: vi.fn(),
onPageChange: vi.fn(),
onPageSizeChange: vi.fn(),
onRefresh: vi.fn(),
onUnban: vi.fn(),
};
}
const EMPTY_RESPONSE: JailBannedIpsResponse = {
items: [],
total: 0,
page: 1,
page_size: 25,
};
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function renderSection(jailName = "sshd") {
return render(
<FluentProvider theme={webLightTheme}>
<BannedIpsSection jailName={jailName} />
<BannedIpsSection {...defaults} {...props} />
</FluentProvider>,
);
}
// ---------------------------------------------------------------------------
// Tests
// ---------------------------------------------------------------------------
describe("BannedIpsSection", () => {
beforeEach(() => {
vi.clearAllMocks();
vi.useRealTimers();
mockUnbanIp.mockResolvedValue({ message: "ok", jail: "sshd" });
});
it("renders section header with 'Currently Banned IPs' title", async () => {
mockFetchJailBannedIps.mockResolvedValue(makeResponse());
renderSection();
await waitFor(() => {
expect(screen.getByText("Currently Banned IPs")).toBeTruthy();
});
});
it("shows the total count badge", async () => {
mockFetchJailBannedIps.mockResolvedValue(makeResponse(["1.2.3.4", "5.6.7.8"], 2));
renderSection();
await waitFor(() => {
expect(screen.getByText("2")).toBeTruthy();
});
it("shows the table rows and total count", () => {
renderWithProps();
expect(screen.getByText("Currently Banned IPs")).toBeTruthy();
expect(screen.getByText("1.2.3.4")).toBeTruthy();
expect(screen.getByText("5.6.7.8")).toBeTruthy();
});
it("shows a spinner while loading", () => {
// Never resolves during this test so we see the spinner.
mockFetchJailBannedIps.mockReturnValue(new Promise(() => void 0));
renderSection();
renderWithProps({ loading: true, items: [] });
expect(screen.getByText("Loading banned IPs…")).toBeTruthy();
});
it("renders IP rows when banned IPs exist", async () => {
mockFetchJailBannedIps.mockResolvedValue(makeResponse(["1.2.3.4", "5.6.7.8"]));
renderSection();
await waitFor(() => {
expect(screen.getByText("1.2.3.4")).toBeTruthy();
expect(screen.getByText("5.6.7.8")).toBeTruthy();
});
it("shows error message when error is present", () => {
renderWithProps({ error: "Failed to load" });
expect(screen.getByText(/Failed to load/i)).toBeTruthy();
});
it("shows empty-state message when no IPs are banned", async () => {
mockFetchJailBannedIps.mockResolvedValue(EMPTY_RESPONSE);
renderSection();
await waitFor(() => {
expect(
screen.getByText("No IPs currently banned in this jail."),
).toBeTruthy();
});
it("triggers onUnban for IP row button", async () => {
const onUnban = vi.fn();
renderWithProps({ onUnban });
const unbanBtn = screen.getByLabelText("Unban 1.2.3.4");
await userEvent.click(unbanBtn);
expect(onUnban).toHaveBeenCalledWith("1.2.3.4");
});
it("shows an error message bar on API failure", async () => {
mockFetchJailBannedIps.mockRejectedValue(new Error("socket dead"));
renderSection();
await waitFor(() => {
expect(screen.getByText(/socket dead/i)).toBeTruthy();
});
});
it("calls onSearch when the search input changes", async () => {
const onSearch = vi.fn();
renderWithProps({ onSearch });
it("calls fetchJailBannedIps with the jail name", async () => {
mockFetchJailBannedIps.mockResolvedValue(makeResponse());
renderSection("nginx");
await waitFor(() => {
expect(mockFetchJailBannedIps).toHaveBeenCalledWith(
"nginx",
expect.any(Number),
expect.any(Number),
undefined,
);
});
});
it("search input re-fetches after debounce with the search term", async () => {
vi.useFakeTimers();
mockFetchJailBannedIps.mockResolvedValue(makeResponse());
renderSection();
// Flush pending async work from the initial render (no timer advancement needed).
await act(async () => {});
mockFetchJailBannedIps.mockClear();
mockFetchJailBannedIps.mockResolvedValue(
makeResponse(["1.2.3.4"], 1),
);
// fireEvent is synchronous — avoids hanging with fake timers.
const input = screen.getByPlaceholderText("e.g. 192.168");
act(() => {
fireEvent.change(input, { target: { value: "1.2.3" } });
});
await userEvent.type(input, "1.2.3");
// Advance just past the 300ms debounce delay and flush promises.
await act(async () => {
await vi.advanceTimersByTimeAsync(350);
});
expect(mockFetchJailBannedIps).toHaveBeenLastCalledWith(
"sshd",
expect.any(Number),
expect.any(Number),
"1.2.3",
);
vi.useRealTimers();
});
it("calls unbanIp when the unban button is clicked", async () => {
mockFetchJailBannedIps.mockResolvedValue(makeResponse(["1.2.3.4"]));
renderSection();
await waitFor(() => {
expect(screen.getByText("1.2.3.4")).toBeTruthy();
});
const unbanBtn = screen.getByLabelText("Unban 1.2.3.4");
await userEvent.click(unbanBtn);
expect(mockUnbanIp).toHaveBeenCalledWith("1.2.3.4", "sshd");
});
it("refreshes list after successful unban", async () => {
mockFetchJailBannedIps
.mockResolvedValueOnce(makeResponse(["1.2.3.4"]))
.mockResolvedValue(EMPTY_RESPONSE);
mockUnbanIp.mockResolvedValue({ message: "ok", jail: "sshd" });
renderSection();
await waitFor(() => {
expect(screen.getByText("1.2.3.4")).toBeTruthy();
});
const unbanBtn = screen.getByLabelText("Unban 1.2.3.4");
await userEvent.click(unbanBtn);
await waitFor(() => {
expect(mockFetchJailBannedIps).toHaveBeenCalledTimes(2);
});
});
it("shows pagination controls when total > 0", async () => {
mockFetchJailBannedIps.mockResolvedValue(
makeResponse(["1.2.3.4", "5.6.7.8"], 50),
);
renderSection();
await waitFor(() => {
expect(screen.getByLabelText("Next page")).toBeTruthy();
expect(screen.getByLabelText("Previous page")).toBeTruthy();
});
});
it("previous page button is disabled on page 1", async () => {
mockFetchJailBannedIps.mockResolvedValue(
makeResponse(["1.2.3.4"], 50),
);
renderSection();
await waitFor(() => {
const prevBtn = screen.getByLabelText("Previous page");
expect(prevBtn).toHaveAttribute("disabled");
});
expect(onSearch).toHaveBeenCalled();
});
});

88
frontend/src/hooks/__tests__/useConfigItem.test.ts Normal file
View File

@@ -0,0 +1,88 @@
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { renderHook, act } from "@testing-library/react";
import { useConfigItem } from "../useConfigItem";
describe("useConfigItem", () => {
beforeEach(() => {
vi.useFakeTimers();
});
afterEach(() => {
vi.useRealTimers();
vi.clearAllMocks();
});
it("loads data and sets loading state", async () => {
const fetchFn = vi.fn().mockResolvedValue("hello");
const saveFn = vi.fn().mockResolvedValue(undefined);
const { result } = renderHook(() => useConfigItem<string, string>({ fetchFn, saveFn }));
expect(result.current.loading).toBe(true);
await act(async () => {
await Promise.resolve();
});
expect(fetchFn).toHaveBeenCalled();
expect(result.current.data).toBe("hello");
expect(result.current.loading).toBe(false);
});
it("sets error if fetch rejects", async () => {
const fetchFn = vi.fn().mockRejectedValue(new Error("nope"));
const saveFn = vi.fn().mockResolvedValue(undefined);
const { result } = renderHook(() => useConfigItem<string, string>({ fetchFn, saveFn }));
await act(async () => {
await Promise.resolve();
});
expect(result.current.error).toBe("nope");
expect(result.current.loading).toBe(false);
});
it("save updates data when mergeOnSave is provided", async () => {
const fetchFn = vi.fn().mockResolvedValue({ value: 1 });
const saveFn = vi.fn().mockResolvedValue(undefined);
const { result } = renderHook(() =>
useConfigItem<{ value: number }, { delta: number }>({
fetchFn,
saveFn,
mergeOnSave: (prev, update) =>
prev ? { ...prev, value: prev.value + update.delta } : prev,
})
);
await act(async () => {
await Promise.resolve();
});
expect(result.current.data).toEqual({ value: 1 });
await act(async () => {
await result.current.save({ delta: 2 });
});
expect(saveFn).toHaveBeenCalledWith({ delta: 2 });
expect(result.current.data).toEqual({ value: 3 });
});
it("saveError is set when save fails", async () => {
const fetchFn = vi.fn().mockResolvedValue("ok");
const saveFn = vi.fn().mockRejectedValue(new Error("save failed"));
const { result } = renderHook(() => useConfigItem<string, string>({ fetchFn, saveFn }));
await act(async () => {
await Promise.resolve();
});
await act(async () => {
await expect(result.current.save("test")).rejects.toThrow("save failed");
});
expect(result.current.saveError).toBe("save failed");
});
});

29
frontend/src/hooks/__tests__/useJailBannedIps.test.ts Normal file
View File

@@ -0,0 +1,29 @@
import { describe, it, expect, vi } from "vitest";
import { renderHook, act, waitFor } from "@testing-library/react";
import { useJailBannedIps } from "../useJails";
import * as api from "../../api/jails";
vi.mock("../../api/jails");
describe("useJailBannedIps", () => {
it("loads bans and allows unban", async () => {
const fetchMock = vi.mocked(api.fetchJailBannedIps);
const unbanMock = vi.mocked(api.unbanIp);
fetchMock.mockResolvedValue({ items: [{ ip: "1.2.3.4", jail: "sshd", banned_at: "2025-01-01T10:00:00+00:00", expires_at: "2025-01-01T10:10:00+00:00", ban_count: 1, country: "US" }], total: 1, page: 1, page_size: 25 });
unbanMock.mockResolvedValue({ message: "ok", jail: "sshd" });
const { result } = renderHook(() => useJailBannedIps("sshd"));
await waitFor(() => {
expect(result.current.loading).toBe(false);
});
expect(result.current.items.length).toBe(1);
await act(async () => {
await result.current.unban("1.2.3.4");
});
expect(unbanMock).toHaveBeenCalledWith("1.2.3.4", "sshd");
expect(fetchMock).toHaveBeenCalledTimes(2);
});
});

207
frontend/src/hooks/__tests__/useJailDetail.test.ts Normal file
View File

@@ -0,0 +1,207 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { renderHook, act } from "@testing-library/react";
import * as jailsApi from "../../api/jails";
import { useJailDetail } from "../useJails";
import type { Jail } from "../../types/jail";
// Mock the API module
vi.mock("../../api/jails");
const mockJail: Jail = {
name: "sshd",
running: true,
idle: false,
backend: "pyinotify",
log_paths: ["/var/log/auth.log"],
fail_regex: ["^\\[.*\\]\\s.*Failed password"],
ignore_regex: [],
date_pattern: "%b %d %H:%M:%S",
log_encoding: "UTF-8",
actions: [],
find_time: 600,
ban_time: 600,
max_retry: 5,
status: null,
bantime_escalation: null,
};
describe("useJailDetail control methods", () => {
beforeEach(() => {
vi.clearAllMocks();
vi.mocked(jailsApi.fetchJail).mockResolvedValue({
jail: mockJail,
ignore_list: [],
ignore_self: false,
});
});
it("calls start() and refetches jail data", async () => {
vi.mocked(jailsApi.startJail).mockResolvedValue(undefined);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
expect(result.current.jail?.name).toBe("sshd");
expect(jailsApi.startJail).not.toHaveBeenCalled();
// Call start()
await act(async () => {
await result.current.start();
});
expect(jailsApi.startJail).toHaveBeenCalledWith("sshd");
expect(jailsApi.fetchJail).toHaveBeenCalledTimes(2); // Initial fetch + refetch after start
});
it("calls stop() and refetches jail data", async () => {
vi.mocked(jailsApi.stopJail).mockResolvedValue(undefined);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
// Call stop()
await act(async () => {
await result.current.stop();
});
expect(jailsApi.stopJail).toHaveBeenCalledWith("sshd");
expect(jailsApi.fetchJail).toHaveBeenCalledTimes(2); // Initial fetch + refetch after stop
});
it("calls reload() and refetches jail data", async () => {
vi.mocked(jailsApi.reloadJail).mockResolvedValue(undefined);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
// Call reload()
await act(async () => {
await result.current.reload();
});
expect(jailsApi.reloadJail).toHaveBeenCalledWith("sshd");
expect(jailsApi.fetchJail).toHaveBeenCalledTimes(2); // Initial fetch + refetch after reload
});
it("calls setIdle() with correct parameter and refetches jail data", async () => {
vi.mocked(jailsApi.setJailIdle).mockResolvedValue(undefined);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
// Call setIdle(true)
await act(async () => {
await result.current.setIdle(true);
});
expect(jailsApi.setJailIdle).toHaveBeenCalledWith("sshd", true);
expect(jailsApi.fetchJail).toHaveBeenCalledTimes(2);
// Reset mock to verify second call
vi.mocked(jailsApi.setJailIdle).mockClear();
vi.mocked(jailsApi.fetchJail).mockResolvedValue({
jail: { ...mockJail, idle: true },
ignore_list: [],
ignore_self: false,
});
// Call setIdle(false)
await act(async () => {
await result.current.setIdle(false);
});
expect(jailsApi.setJailIdle).toHaveBeenCalledWith("sshd", false);
});
it("propagates errors from start()", async () => {
const error = new Error("Failed to start jail");
vi.mocked(jailsApi.startJail).mockRejectedValue(error);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
// Call start() and expect it to throw
await expect(
act(async () => {
await result.current.start();
}),
).rejects.toThrow("Failed to start jail");
});
it("propagates errors from stop()", async () => {
const error = new Error("Failed to stop jail");
vi.mocked(jailsApi.stopJail).mockRejectedValue(error);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
// Call stop() and expect it to throw
await expect(
act(async () => {
await result.current.stop();
}),
).rejects.toThrow("Failed to stop jail");
});
it("propagates errors from reload()", async () => {
const error = new Error("Failed to reload jail");
vi.mocked(jailsApi.reloadJail).mockRejectedValue(error);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
// Call reload() and expect it to throw
await expect(
act(async () => {
await result.current.reload();
}),
).rejects.toThrow("Failed to reload jail");
});
it("propagates errors from setIdle()", async () => {
const error = new Error("Failed to set idle mode");
vi.mocked(jailsApi.setJailIdle).mockRejectedValue(error);
const { result } = renderHook(() => useJailDetail("sshd"));
// Wait for initial fetch
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
// Call setIdle() and expect it to throw
await expect(
act(async () => {
await result.current.setIdle(true);
}),
).rejects.toThrow("Failed to set idle mode");
});
});

41
frontend/src/hooks/__tests__/useMapColorThresholds.test.ts Normal file
View File

@@ -0,0 +1,41 @@
import { describe, it, expect, vi } from "vitest";
import { renderHook, act, waitFor } from "@testing-library/react";
import { useMapColorThresholds } from "../useMapColorThresholds";
import * as api from "../../api/config";
vi.mock("../../api/config");
describe("useMapColorThresholds", () => {
it("loads thresholds and exposes values", async () => {
const mocked = vi.mocked(api.fetchMapColorThresholds);
mocked.mockResolvedValue({ threshold_low: 10, threshold_medium: 20, threshold_high: 50 });
const { result } = renderHook(() => useMapColorThresholds());
expect(result.current.loading).toBe(true);
await waitFor(() => {
expect(result.current.loading).toBe(false);
});
expect(result.current.thresholds).toEqual({ threshold_low: 10, threshold_medium: 20, threshold_high: 50 });
expect(result.current.error).toBeNull();
});
it("updates thresholds via callback", async () => {
const fetchMock = vi.mocked(api.fetchMapColorThresholds);
const updateMock = vi.mocked(api.updateMapColorThresholds);
fetchMock.mockResolvedValue({ threshold_low: 10, threshold_medium: 20, threshold_high: 50 });
updateMock.mockResolvedValue({ threshold_low: 15, threshold_medium: 25, threshold_high: 75 });
const { result } = renderHook(() => useMapColorThresholds());
await waitFor(() => {
expect(result.current.loading).toBe(false);
});
await act(async () => {
await result.current.updateThresholds({ threshold_low: 15, threshold_medium: 25, threshold_high: 75 });
});
expect(result.current.thresholds).toEqual({ threshold_low: 15, threshold_medium: 25, threshold_high: 75 });
});
});

87
frontend/src/hooks/useActionConfig.ts
View File

@@ -2,7 +2,7 @@
* React hook for loading and updating a single parsed action config.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { useConfigItem } from "./useConfigItem";
import { fetchAction, updateAction } from "../api/config";
import type { ActionConfig, ActionConfigUpdate } from "../types/config";
@@ -23,67 +23,28 @@ export interface UseActionConfigResult {
* @param name - Action base name (e.g. ``"iptables"``).
*/
export function useActionConfig(name: string): UseActionConfigResult {
const [config, setConfig] = useState<ActionConfig | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const abortRef = useRef<AbortController | null>(null);
const { data, loading, error, saving, saveError, refresh, save } = useConfigItem<
ActionConfig,
ActionConfigUpdate
>({
fetchFn: () => fetchAction(name),
saveFn: (update) => updateAction(name, update),
mergeOnSave: (prev, update) =>
prev
? {
...prev,
...Object.fromEntries(Object.entries(update).filter(([, v]) => v != null)),
}
: prev,
});
const load = useCallback((): void => {
abortRef.current?.abort();
const ctrl = new AbortController();
abortRef.current = ctrl;
setLoading(true);
setError(null);
fetchAction(name)
.then((data) => {
if (!ctrl.signal.aborted) {
setConfig(data);
setLoading(false);
}
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : "Failed to load action config");
setLoading(false);
}
});
}, [name]);
useEffect(() => {
load();
return (): void => {
abortRef.current?.abort();
};
}, [load]);
const save = useCallback(
async (update: ActionConfigUpdate): Promise<void> => {
setSaving(true);
setSaveError(null);
try {
await updateAction(name, update);
setConfig((prev) =>
prev
? {
...prev,
...Object.fromEntries(
Object.entries(update).filter(([, v]) => v !== null && v !== undefined)
),
}
: prev
);
} catch (err: unknown) {
setSaveError(err instanceof Error ? err.message : "Failed to save action config");
throw err;
} finally {
setSaving(false);
}
},
[name]
);
return { config, loading, error, saving, saveError, refresh: load, save };
return {
config: data,
loading,
error,
saving,
saveError,
refresh,
save,
};
}

3
frontend/src/hooks/useBanTrend.ts
View File

@@ -7,6 +7,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchBanTrend } from "../api/dashboard";
import { handleFetchError } from "../utils/fetchError";
import type { BanTrendBucket, BanOriginFilter, TimeRange } from "../types/ban";
// ---------------------------------------------------------------------------
@@ -65,7 +66,7 @@ export function useBanTrend(
})
.catch((err: unknown) => {
if (controller.signal.aborted) return;
setError(err instanceof Error ? err.message : "Failed to fetch trend data");
handleFetchError(err, setError, "Failed to fetch trend data");
})
.finally(() => {
if (!controller.signal.aborted) {

3
frontend/src/hooks/useBans.ts
View File

@@ -7,6 +7,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchBans } from "../api/dashboard";
import { handleFetchError } from "../utils/fetchError";
import type { DashboardBanItem, TimeRange, BanOriginFilter } from "../types/ban";
/** Items per page for the ban table. */
@@ -63,7 +64,7 @@ export function useBans(
setBanItems(data.items);
setTotal(data.total);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "Failed to fetch data");
handleFetchError(err, setError, "Failed to fetch bans");
} finally {
setLoading(false);
}

27
frontend/src/hooks/useBlocklist.ts
View File

@@ -9,16 +9,19 @@ import {
fetchBlocklists,
fetchImportLog,
fetchSchedule,
previewBlocklist,
runImportNow,
updateBlocklist,
updateSchedule,
} from "../api/blocklist";
import { handleFetchError } from "../utils/fetchError";
import type {
BlocklistSource,
BlocklistSourceCreate,
BlocklistSourceUpdate,
ImportLogListResponse,
ImportRunResult,
PreviewResponse,
ScheduleConfig,
ScheduleInfo,
} from "../types/blocklist";
@@ -35,6 +38,7 @@ export interface UseBlocklistsReturn {
createSource: (payload: BlocklistSourceCreate) => Promise<BlocklistSource>;
updateSource: (id: number, payload: BlocklistSourceUpdate) => Promise<BlocklistSource>;
removeSource: (id: number) => Promise<void>;
previewSource: (id: number) => Promise<PreviewResponse>;
}
/**
@@ -63,7 +67,7 @@ export function useBlocklists(): UseBlocklistsReturn {
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : "Failed to load blocklists");
handleFetchError(err, setError, "Failed to load blocklists");
setLoading(false);
}
});
@@ -99,7 +103,20 @@ export function useBlocklists(): UseBlocklistsReturn {
setSources((prev) => prev.filter((s) => s.id !== id));
}, []);
return { sources, loading, error, refresh: load, createSource, updateSource, removeSource };
const previewSource = useCallback(async (id: number): Promise<PreviewResponse> => {
return previewBlocklist(id);
}, []);
return {
sources,
loading,
error,
refresh: load,
createSource,
updateSource,
removeSource,
previewSource,
};
}
// ---------------------------------------------------------------------------
@@ -129,7 +146,7 @@ export function useSchedule(): UseScheduleReturn {
setLoading(false);
})
.catch((err: unknown) => {
setError(err instanceof Error ? err.message : "Failed to load schedule");
handleFetchError(err, setError, "Failed to load schedule");
setLoading(false);
});
}, []);
@@ -185,7 +202,7 @@ export function useImportLog(
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : "Failed to load import log");
handleFetchError(err, setError, "Failed to load import log");
setLoading(false);
}
});
@@ -227,7 +244,7 @@ export function useRunImport(): UseRunImportReturn {
const result = await runImportNow();
setLastResult(result);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "Import failed");
handleFetchError(err, setError, "Import failed");
} finally {
setRunning(false);
}

32
frontend/src/hooks/useConfig.ts
View File

@@ -12,11 +12,13 @@ import {
flushLogs,
previewLog,
reloadConfig,
restartFail2Ban,
testRegex,
updateGlobalConfig,
updateJailConfig,
updateServerSettings,
} from "../api/config";
import { handleFetchError } from "../utils/fetchError";
import type {
AddLogPathRequest,
GlobalConfig,
@@ -65,9 +67,7 @@ export function useJailConfigs(): UseJailConfigsResult {
setTotal(resp.total);
})
.catch((err: unknown) => {
if (err instanceof Error && err.name !== "AbortError") {
setError(err.message);
}
handleFetchError(err, setError, "Failed to fetch jail configs");
})
.finally(() => {
setLoading(false);
@@ -128,9 +128,7 @@ export function useJailConfigDetail(name: string): UseJailConfigDetailResult {
setJail(resp.jail);
})
.catch((err: unknown) => {
if (err instanceof Error && err.name !== "AbortError") {
setError(err.message);
}
handleFetchError(err, setError, "Failed to fetch jail config");
})
.finally(() => {
setLoading(false);
@@ -191,9 +189,7 @@ export function useGlobalConfig(): UseGlobalConfigResult {
fetchGlobalConfig()
.then(setConfig)
.catch((err: unknown) => {
if (err instanceof Error && err.name !== "AbortError") {
setError(err.message);
}
handleFetchError(err, setError, "Failed to fetch global config");
})
.finally(() => {
setLoading(false);
@@ -229,6 +225,8 @@ interface UseServerSettingsResult {
refresh: () => void;
updateSettings: (update: ServerSettingsUpdate) => Promise<void>;
flush: () => Promise<string>;
reload: () => Promise<void>;
restart: () => Promise<void>;
}
export function useServerSettings(): UseServerSettingsResult {
@@ -249,9 +247,7 @@ export function useServerSettings(): UseServerSettingsResult {
setSettings(resp.settings);
})
.catch((err: unknown) => {
if (err instanceof Error && err.name !== "AbortError") {
setError(err.message);
}
handleFetchError(err, setError, "Failed to fetch server settings");
})
.finally(() => {
setLoading(false);
@@ -273,6 +269,16 @@ export function useServerSettings(): UseServerSettingsResult {
[load],
);
const reload = useCallback(async (): Promise<void> => {
await reloadConfig();
load();
}, [load]);
const restart = useCallback(async (): Promise<void> => {
await restartFail2Ban();
load();
}, [load]);
const flush = useCallback(async (): Promise<string> => {
return flushLogs();
}, []);
@@ -284,6 +290,8 @@ export function useServerSettings(): UseServerSettingsResult {
refresh: load,
updateSettings: updateSettings_,
flush,
reload,
restart,
};
}

3
frontend/src/hooks/useConfigActiveStatus.ts
View File

@@ -13,6 +13,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchJails } from "../api/jails";
import { fetchJailConfigs } from "../api/config";
import { handleFetchError } from "../utils/fetchError";
import type { JailConfig } from "../types/config";
import type { JailSummary } from "../types/jail";
@@ -110,7 +111,7 @@ export function useConfigActiveStatus(): UseConfigActiveStatusResult {
})
.catch((err: unknown) => {
if (ctrl.signal.aborted) return;
setError(err instanceof Error ? err.message : "Failed to load status.");
handleFetchError(err, setError, "Failed to load active status.");
setLoading(false);
});
}, []);

85
frontend/src/hooks/useConfigItem.ts Normal file
View File

@@ -0,0 +1,85 @@
/**
* Generic config hook for loading and saving a single entity.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { handleFetchError } from "../utils/fetchError";
export interface UseConfigItemResult<T, U> {
data: T | null;
loading: boolean;
error: string | null;
saving: boolean;
saveError: string | null;
refresh: () => void;
save: (update: U) => Promise<void>;
}
export interface UseConfigItemOptions<T, U> {
fetchFn: (signal: AbortSignal) => Promise<T>;
saveFn: (update: U) => Promise<void>;
mergeOnSave?: (prev: T | null, update: U) => T | null;
}
export function useConfigItem<T, U>(
options: UseConfigItemOptions<T, U>
): UseConfigItemResult<T, U> {
const { fetchFn, saveFn, mergeOnSave } = options;
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const abortRef = useRef<AbortController | null>(null);
const refresh = useCallback((): void => {
abortRef.current?.abort();
const controller = new AbortController();
abortRef.current = controller;
setLoading(true);
setError(null);
fetchFn(controller.signal)
.then((nextData) => {
if (controller.signal.aborted) return;
setData(nextData);
setLoading(false);
})
.catch((err: unknown) => {
if (controller.signal.aborted) return;
handleFetchError(err, setError, "Failed to load data");
setLoading(false);
});
}, [fetchFn]);
useEffect(() => {
refresh();
return (): void => {
abortRef.current?.abort();
};
}, [refresh]);
const save = useCallback(
async (update: U): Promise<void> => {
setSaving(true);
setSaveError(null);
try {
await saveFn(update);
if (mergeOnSave) {
setData((prevData) => mergeOnSave(prevData, update));
}
} catch (err: unknown) {
const message = err instanceof Error ? err.message : "Failed to save data";
setSaveError(message);
throw err;
} finally {
setSaving(false);
}
},
[saveFn, mergeOnSave]
);
return { data, loading, error, saving, saveError, refresh, save };
}

3
frontend/src/hooks/useDashboardCountryData.ts
View File

@@ -9,6 +9,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchBansByCountry } from "../api/map";
import { handleFetchError } from "../utils/fetchError";
import type { DashboardBanItem, BanOriginFilter, TimeRange } from "../types/ban";
// ---------------------------------------------------------------------------
@@ -77,7 +78,7 @@ export function useDashboardCountryData(
})
.catch((err: unknown) => {
if (controller.signal.aborted) return;
setError(err instanceof Error ? err.message : "Failed to fetch data");
handleFetchError(err, setError, "Failed to fetch dashboard country data");
})
.finally(() => {
if (!controller.signal.aborted) {

89
frontend/src/hooks/useFilterConfig.ts
View File

@@ -2,7 +2,7 @@
* React hook for loading and updating a single parsed filter config.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { useConfigItem } from "./useConfigItem";
import { fetchParsedFilter, updateParsedFilter } from "../api/config";
import type { FilterConfig, FilterConfigUpdate } from "../types/config";
@@ -23,69 +23,28 @@ export interface UseFilterConfigResult {
* @param name - Filter base name (e.g. ``"sshd"``).
*/
export function useFilterConfig(name: string): UseFilterConfigResult {
const [config, setConfig] = useState<FilterConfig | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const abortRef = useRef<AbortController | null>(null);
const { data, loading, error, saving, saveError, refresh, save } = useConfigItem<
FilterConfig,
FilterConfigUpdate
>({
fetchFn: () => fetchParsedFilter(name),
saveFn: (update) => updateParsedFilter(name, update),
mergeOnSave: (prev, update) =>
prev
? {
...prev,
...Object.fromEntries(Object.entries(update).filter(([, v]) => v != null)),
}
: prev,
});
const load = useCallback((): void => {
abortRef.current?.abort();
const ctrl = new AbortController();
abortRef.current = ctrl;
setLoading(true);
setError(null);
fetchParsedFilter(name)
.then((data) => {
if (!ctrl.signal.aborted) {
setConfig(data);
setLoading(false);
}
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : "Failed to load filter config");
setLoading(false);
}
});
}, [name]);
useEffect(() => {
load();
return (): void => {
abortRef.current?.abort();
};
}, [load]);
const save = useCallback(
async (update: FilterConfigUpdate): Promise<void> => {
setSaving(true);
setSaveError(null);
try {
await updateParsedFilter(name, update);
// Optimistically update local state so the form reflects changes
// without a full reload.
setConfig((prev) =>
prev
? {
...prev,
...Object.fromEntries(
Object.entries(update).filter(([, v]) => v !== null && v !== undefined)
),
}
: prev
);
} catch (err: unknown) {
setSaveError(err instanceof Error ? err.message : "Failed to save filter config");
throw err;
} finally {
setSaving(false);
}
},
[name]
);
return { config, loading, error, saving, saveError, refresh: load, save };
return {
config: data,
loading,
error,
saving,
saveError,
refresh,
save,
};
}

9
frontend/src/hooks/useHistory.ts
View File

@@ -4,6 +4,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchHistory, fetchIpHistory } from "../api/history";
import { handleFetchError } from "../utils/fetchError";
import type {
HistoryBanItem,
HistoryQuery,
@@ -44,9 +45,7 @@ export function useHistory(query: HistoryQuery = {}): UseHistoryResult {
setTotal(resp.total);
})
.catch((err: unknown) => {
if (err instanceof Error && err.name !== "AbortError") {
setError(err.message);
}
handleFetchError(err, setError, "Failed to fetch history");
})
.finally((): void => {
setLoading(false);
@@ -91,9 +90,7 @@ export function useIpHistory(ip: string): UseIpHistoryResult {
setDetail(resp);
})
.catch((err: unknown) => {
if (err instanceof Error && err.name !== "AbortError") {
setError(err.message);
}
handleFetchError(err, setError, "Failed to fetch IP history");
})
.finally((): void => {
setLoading(false);

5
frontend/src/hooks/useJailDistribution.ts
View File

@@ -7,6 +7,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchBansByJail } from "../api/dashboard";
import { handleFetchError } from "../utils/fetchError";
import type { BanOriginFilter, JailBanCount, TimeRange } from "../types/ban";
// ---------------------------------------------------------------------------
@@ -65,9 +66,7 @@ export function useJailDistribution(
})
.catch((err: unknown) => {
if (controller.signal.aborted) return;
setError(
err instanceof Error ? err.message : "Failed to fetch jail distribution",
);
handleFetchError(err, setError, "Failed to fetch jail distribution");
})
.finally(() => {
if (!controller.signal.aborted) {

71
frontend/src/hooks/useJailFileConfig.ts
View File

@@ -2,7 +2,7 @@
* React hook for loading and updating a single parsed jail.d config file.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { useConfigItem } from "./useConfigItem";
import { fetchParsedJailFile, updateParsedJailFile } from "../api/config";
import type { JailFileConfig, JailFileConfigUpdate } from "../types/config";
@@ -21,56 +21,23 @@ export interface UseJailFileConfigResult {
* @param filename - Filename including extension (e.g. ``"sshd.conf"``).
*/
export function useJailFileConfig(filename: string): UseJailFileConfigResult {
const [config, setConfig] = useState<JailFileConfig | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const abortRef = useRef<AbortController | null>(null);
const { data, loading, error, refresh, save } = useConfigItem<
JailFileConfig,
JailFileConfigUpdate
>({
fetchFn: () => fetchParsedJailFile(filename),
saveFn: (update) => updateParsedJailFile(filename, update),
mergeOnSave: (prev, update) =>
update.jails != null && prev
? { ...prev, jails: { ...prev.jails, ...update.jails } }
: prev,
});
const load = useCallback((): void => {
abortRef.current?.abort();
const ctrl = new AbortController();
abortRef.current = ctrl;
setLoading(true);
setError(null);
fetchParsedJailFile(filename)
.then((data) => {
if (!ctrl.signal.aborted) {
setConfig(data);
setLoading(false);
}
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : "Failed to load jail file config");
setLoading(false);
}
});
}, [filename]);
useEffect(() => {
load();
return (): void => {
abortRef.current?.abort();
};
}, [load]);
const save = useCallback(
async (update: JailFileConfigUpdate): Promise<void> => {
try {
await updateParsedJailFile(filename, update);
// Optimistically merge updated jails into local state.
if (update.jails != null) {
setConfig((prev) =>
prev ? { ...prev, jails: { ...prev.jails, ...update.jails } } : prev
);
}
} catch (err: unknown) {
throw err instanceof Error ? err : new Error("Failed to save jail file config");
}
},
[filename]
);
return { config, loading, error, refresh: load, save };
return {
config: data,
loading,
error,
refresh,
save,
};
}

143
frontend/src/hooks/useJails.ts
View File

@@ -7,12 +7,14 @@
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { handleFetchError } from "../utils/fetchError";
import {
addIgnoreIp,
banIp,
delIgnoreIp,
fetchActiveBans,
fetchJail,
fetchJailBannedIps,
fetchJails,
lookupIp,
reloadAllJails,
@@ -91,7 +93,7 @@ export function useJails(): UseJailsResult {
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : String(err));
handleFetchError(err, setError, "Failed to load jails");
}
})
.finally(() => {
@@ -153,6 +155,14 @@ export interface UseJailDetailResult {
removeIp: (ip: string) => Promise<void>;
/** Enable or disable the ignoreself option for this jail. */
toggleIgnoreSelf: (on: boolean) => Promise<void>;
/** Start the jail. */
start: () => Promise<void>;
/** Stop the jail. */
stop: () => Promise<void>;
/** Reload jail configuration. */
reload: () => Promise<void>;
/** Toggle idle mode on/off for the jail. */
setIdle: (on: boolean) => Promise<void>;
}
/**
@@ -186,7 +196,7 @@ export function useJailDetail(name: string): UseJailDetailResult {
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : String(err));
handleFetchError(err, setError, "Failed to fetch jail detail");
}
})
.finally(() => {
@@ -216,6 +226,26 @@ export function useJailDetail(name: string): UseJailDetailResult {
load();
};
const doStart = async (): Promise<void> => {
await startJail(name);
load();
};
const doStop = async (): Promise<void> => {
await stopJail(name);
load();
};
const doReload = async (): Promise<void> => {
await reloadJail(name);
load();
};
const doSetIdle = async (on: boolean): Promise<void> => {
await setJailIdle(name, on);
load();
};
return {
jail,
ignoreList,
@@ -226,6 +256,111 @@ export function useJailDetail(name: string): UseJailDetailResult {
addIp,
removeIp,
toggleIgnoreSelf,
start: doStart,
stop: doStop,
reload: doReload,
setIdle: doSetIdle,
};
}
// ---------------------------------------------------------------------------
// useJailBannedIps
export interface UseJailBannedIpsResult {
items: ActiveBan[];
total: number;
page: number;
pageSize: number;
search: string;
loading: boolean;
error: string | null;
opError: string | null;
refresh: () => Promise<void>;
setPage: (page: number) => void;
setPageSize: (size: number) => void;
setSearch: (term: string) => void;
unban: (ip: string) => Promise<void>;
}
export function useJailBannedIps(jailName: string): UseJailBannedIpsResult {
const [items, setItems] = useState<ActiveBan[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(25);
const [search, setSearch] = useState("");
const [debouncedSearch, setDebouncedSearch] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [opError, setOpError] = useState<string | null>(null);
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const load = useCallback(async (): Promise<void> => {
if (!jailName) {
setItems([]);
setTotal(0);
setLoading(false);
return;
}
setLoading(true);
setError(null);
try {
const resp = await fetchJailBannedIps(jailName, page, pageSize, debouncedSearch || undefined);
setItems(resp.items);
setTotal(resp.total);
} catch (err: unknown) {
handleFetchError(err, setError, "Failed to fetch jailed IPs");
} finally {
setLoading(false);
}
}, [jailName, page, pageSize, debouncedSearch]);
useEffect(() => {
if (debounceRef.current !== null) {
clearTimeout(debounceRef.current);
}
debounceRef.current = setTimeout(() => {
setDebouncedSearch(search);
setPage(1);
}, 300);
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
return () => {
if (debounceRef.current !== null) {
clearTimeout(debounceRef.current);
}
};
}, [search]);
useEffect(() => {
void load();
}, [load]);
const unban = useCallback(async (ip: string): Promise<void> => {
setOpError(null);
try {
await unbanIp(ip, jailName);
await load();
} catch (err: unknown) {
setOpError(err instanceof Error ? err.message : String(err));
}
}, [jailName, load]);
return {
items,
total,
page,
pageSize,
search,
loading,
error,
opError,
refresh: load,
setPage,
setPageSize,
setSearch,
unban,
};
}
@@ -281,7 +416,7 @@ export function useActiveBans(): UseActiveBansResult {
})
.catch((err: unknown) => {
if (!ctrl.signal.aborted) {
setError(err instanceof Error ? err.message : String(err));
handleFetchError(err, setError, "Failed to fetch active bans");
}
})
.finally(() => {
@@ -362,7 +497,7 @@ export function useIpLookup(): UseIpLookupResult {
setResult(res);
})
.catch((err: unknown) => {
setError(err instanceof Error ? err.message : String(err));
handleFetchError(err, setError, "Failed to lookup IP");
})
.finally(() => {
setLoading(false);

56
frontend/src/hooks/useMapColorThresholds.ts Normal file
View File

@@ -0,0 +1,56 @@
import { useCallback, useEffect, useState } from "react";
import { fetchMapColorThresholds, updateMapColorThresholds } from "../api/config";
import { handleFetchError } from "../utils/fetchError";
import type {
MapColorThresholdsResponse,
MapColorThresholdsUpdate,
} from "../types/config";
export interface UseMapColorThresholdsResult {
thresholds: MapColorThresholdsResponse | null;
loading: boolean;
error: string | null;
refresh: () => Promise<void>;
updateThresholds: (payload: MapColorThresholdsUpdate) => Promise<MapColorThresholdsResponse>;
}
export function useMapColorThresholds(): UseMapColorThresholdsResult {
const [thresholds, setThresholds] = useState<MapColorThresholdsResponse | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const load = useCallback(async (): Promise<void> => {
setLoading(true);
setError(null);
try {
const data = await fetchMapColorThresholds();
setThresholds(data);
} catch (err: unknown) {
handleFetchError(err, setError, "Failed to fetch map color thresholds");
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
void load();
}, [load]);
const updateThresholds = useCallback(
async (payload: MapColorThresholdsUpdate): Promise<MapColorThresholdsResponse> => {
const updated = await updateMapColorThresholds(payload);
setThresholds(updated);
return updated;
},
[],
);
return {
thresholds,
loading,
error,
refresh: load,
updateThresholds,
};
}

5
frontend/src/hooks/useMapData.ts
View File

@@ -4,6 +4,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchBansByCountry } from "../api/map";
import { handleFetchError } from "../utils/fetchError";
import type { BansByCountryResponse, MapBanItem, TimeRange } from "../types/map";
import type { BanOriginFilter } from "../types/ban";
@@ -68,9 +69,7 @@ export function useMapData(
setData(resp);
})
.catch((err: unknown) => {
if (err instanceof Error && err.name !== "AbortError") {
setError(err.message);
}
handleFetchError(err, setError, "Failed to fetch map data");
})
.finally((): void => {
setLoading(false);

3
frontend/src/hooks/useServerStatus.ts
View File

@@ -8,6 +8,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchServerStatus } from "../api/dashboard";
import { handleFetchError } from "../utils/fetchError";
import type { ServerStatus } from "../types/server";
/** How often to poll the status endpoint (milliseconds). */
@@ -49,7 +50,7 @@ export function useServerStatus(): UseServerStatusResult {
setBanguiVersion(data.bangui_version);
setError(null);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "Failed to fetch server status");
handleFetchError(err, setError, "Failed to fetch server status");
} finally {
setLoading(false);
}

91
frontend/src/hooks/useSetup.ts Normal file
View File

@@ -0,0 +1,91 @@
/**
* Hook for the initial BanGUI setup flow.
*
* Exposes the current setup completion status and a submission handler.
*/
import { useCallback, useEffect, useState } from "react";
import { ApiError } from "../api/client";
import { handleFetchError } from "../utils/fetchError";
import { getSetupStatus, submitSetup } from "../api/setup";
import type {
SetupRequest,
SetupStatusResponse,
} from "../types/setup";
export interface UseSetupResult {
/** Known setup status, or null while loading. */
status: SetupStatusResponse | null;
/** Whether the initial status check is in progress. */
loading: boolean;
/** User-facing error message from the last status check. */
error: string | null;
/** Refresh the setup status from the backend. */
refresh: () => Promise<void>;
/** Whether a submit request is currently in flight. */
submitting: boolean;
/** User-facing error message from the last submit attempt. */
submitError: string | null;
/** Submit the initial setup payload. */
submit: (payload: SetupRequest) => Promise<void>;
}
export function useSetup(): UseSetupResult {
const [status, setStatus] = useState<SetupStatusResponse | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [submitting, setSubmitting] = useState(false);
const [submitError, setSubmitError] = useState<string | null>(null);
const refresh = useCallback(async (): Promise<void> => {
setLoading(true);
setError(null);
try {
const resp = await getSetupStatus();
setStatus(resp);
} catch (err: unknown) {
const fallback = "Failed to fetch setup status";
handleFetchError(err, setError, fallback);
if (!(err instanceof DOMException && err.name === "AbortError")) {
console.warn("Setup status check failed:", err instanceof Error ? err.message : fallback);
}
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
void refresh();
}, [refresh]);
const submit = useCallback(async (payload: SetupRequest): Promise<void> => {
setSubmitting(true);
setSubmitError(null);
try {
await submitSetup(payload);
} catch (err: unknown) {
if (err instanceof ApiError) {
setSubmitError(err.message);
} else if (err instanceof Error) {
setSubmitError(err.message);
} else {
setSubmitError("An unexpected error occurred.");
}
throw err;
} finally {
setSubmitting(false);
}
}, []);
return {
status,
loading,
error,
refresh,
submitting,
submitError,
submit,
};
}

42
frontend/src/hooks/useTimezoneData.ts Normal file
View File

@@ -0,0 +1,42 @@
import { useCallback, useEffect, useState } from "react";
import { fetchTimezone } from "../api/setup";
import { handleFetchError } from "../utils/fetchError";
export interface UseTimezoneDataResult {
timezone: string;
loading: boolean;
error: string | null;
refresh: () => Promise<void>;
}
export function useTimezoneData(): UseTimezoneDataResult {
const [timezone, setTimezone] = useState<string>("UTC");
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const load = useCallback(async (): Promise<void> => {
setLoading(true);
setError(null);
try {
const resp = await fetchTimezone();
setTimezone(resp.timezone);
} catch (err: unknown) {
handleFetchError(err, setError, "Failed to fetch timezone");
setTimezone("UTC");
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
void load();
}, [load]);
return {
timezone,
loading,
error,
refresh: load,
};
}

938
frontend/src/pages/BlocklistsPage.tsx
View File

@@ -1,341 +1,18 @@
/**
* BlocklistsPage — external IP blocklist source management.
*
* Provides three sections:
* 1. **Blocklist Sources** — table of configured URLs with enable/disable
* toggle, edit, delete, and preview actions.
* 2. **Import Schedule** — frequency preset (hourly/daily/weekly) + time
* picker + "Run Now" button showing last/next run times.
* 3. **Import Log** — paginated table of completed import runs.
* Responsible for composition of sources, schedule, and import log sections.
*/
import { useCallback, useState } from "react";
import {
Badge,
Button,
Dialog,
DialogActions,
DialogBody,
DialogContent,
DialogSurface,
DialogTitle,
Field,
Input,
MessageBar,
MessageBarBody,
Select,
Spinner,
Switch,
Table,
TableBody,
TableCell,
TableCellLayout,
TableHeader,
TableHeaderCell,
TableRow,
Text,
makeStyles,
tokens,
} from "@fluentui/react-components";
import {
AddRegular,
ArrowClockwiseRegular,
DeleteRegular,
EditRegular,
EyeRegular,
PlayRegular,
} from "@fluentui/react-icons";
import {
useBlocklists,
useImportLog,
useRunImport,
useSchedule,
} from "../hooks/useBlocklist";
import { previewBlocklist } from "../api/blocklist";
import type {
BlocklistSource,
ImportRunResult,
PreviewResponse,
ScheduleConfig,
ScheduleFrequency,
} from "../types/blocklist";
import { Button, MessageBar, MessageBarBody, Text } from "@fluentui/react-components";
import { useBlocklistStyles } from "../theme/commonStyles";
// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------
const useStyles = makeStyles({
root: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalXL,
},
section: {
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
padding: tokens.spacingVerticalM,
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalS,
},
sectionHeader: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
paddingBottom: tokens.spacingVerticalS,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
},
tableWrapper: { overflowX: "auto" },
actionsCell: { display: "flex", gap: tokens.spacingHorizontalS, flexWrap: "wrap" },
mono: { fontFamily: "Consolas, 'Courier New', monospace", fontSize: "12px" },
centred: {
display: "flex",
justifyContent: "center",
padding: tokens.spacingVerticalL,
},
scheduleForm: {
display: "flex",
flexWrap: "wrap",
gap: tokens.spacingHorizontalM,
alignItems: "flex-end",
},
scheduleField: { minWidth: "140px" },
metaRow: {
display: "flex",
gap: tokens.spacingHorizontalL,
flexWrap: "wrap",
paddingTop: tokens.spacingVerticalS,
},
metaItem: { display: "flex", flexDirection: "column", gap: "2px" },
runResult: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalXS,
maxHeight: "320px",
overflowY: "auto",
},
pagination: {
display: "flex",
justifyContent: "flex-end",
gap: tokens.spacingHorizontalS,
alignItems: "center",
paddingTop: tokens.spacingVerticalS,
},
dialogForm: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalM,
minWidth: "380px",
},
previewList: {
fontFamily: "Consolas, 'Courier New', monospace",
fontSize: "12px",
maxHeight: "280px",
overflowY: "auto",
backgroundColor: tokens.colorNeutralBackground3,
padding: tokens.spacingVerticalS,
borderRadius: tokens.borderRadiusMedium,
},
errorRow: { backgroundColor: tokens.colorStatusDangerBackground1 },
});
// ---------------------------------------------------------------------------
// Source form dialog
// ---------------------------------------------------------------------------
interface SourceFormValues {
name: string;
url: string;
enabled: boolean;
}
interface SourceFormDialogProps {
open: boolean;
mode: "add" | "edit";
initial: SourceFormValues;
saving: boolean;
error: string | null;
onClose: () => void;
onSubmit: (values: SourceFormValues) => void;
}
function SourceFormDialog({
open,
mode,
initial,
saving,
error,
onClose,
onSubmit,
}: SourceFormDialogProps): React.JSX.Element {
const styles = useStyles();
const [values, setValues] = useState<SourceFormValues>(initial);
// Sync when dialog re-opens with new initial data.
const handleOpen = useCallback((): void => {
setValues(initial);
}, [initial]);
return (
<Dialog
open={open}
onOpenChange={(_ev, data) => {
if (!data.open) onClose();
}}
>
<DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
<DialogBody>
<DialogTitle>{mode === "add" ? "Add Blocklist Source" : "Edit Blocklist Source"}</DialogTitle>
<DialogContent>
<div className={styles.dialogForm}>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
<Field label="Name" required>
<Input
value={values.name}
onChange={(_ev, d) => {
setValues((p) => ({ ...p, name: d.value }));
}}
placeholder="e.g. Blocklist.de — All"
/>
</Field>
<Field label="URL" required>
<Input
value={values.url}
onChange={(_ev, d) => {
setValues((p) => ({ ...p, url: d.value }));
}}
placeholder="https://lists.blocklist.de/lists/all.txt"
/>
</Field>
<Switch
label="Enabled"
checked={values.enabled}
onChange={(_ev, d) => {
setValues((p) => ({ ...p, enabled: d.checked }));
}}
/>
</div>
</DialogContent>
<DialogActions>
<Button appearance="secondary" onClick={onClose} disabled={saving}>
Cancel
</Button>
<Button
appearance="primary"
disabled={saving || !values.name.trim() || !values.url.trim()}
onClick={() => {
onSubmit(values);
}}
>
{saving ? <Spinner size="tiny" /> : mode === "add" ? "Add" : "Save"}
</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
);
}
// ---------------------------------------------------------------------------
// Preview dialog
// ---------------------------------------------------------------------------
interface PreviewDialogProps {
open: boolean;
source: BlocklistSource | null;
onClose: () => void;
}
function PreviewDialog({ open, source, onClose }: PreviewDialogProps): React.JSX.Element {
const styles = useStyles();
const [data, setData] = useState<PreviewResponse | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// Load preview when dialog opens.
const handleOpen = useCallback((): void => {
if (!source) return;
setData(null);
setError(null);
setLoading(true);
previewBlocklist(source.id)
.then((result) => {
setData(result);
setLoading(false);
})
.catch((err: unknown) => {
setError(err instanceof Error ? err.message : "Failed to fetch preview");
setLoading(false);
});
}, [source]);
return (
<Dialog
open={open}
onOpenChange={(_ev, d) => {
if (!d.open) onClose();
}}
>
<DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
<DialogBody>
<DialogTitle>Preview — {source?.name ?? ""}</DialogTitle>
<DialogContent>
{loading && (
<div style={{ textAlign: "center", padding: "16px" }}>
<Spinner label="Downloading…" />
</div>
)}
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{data && (
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
<Text size={300}>
{data.valid_count} valid IPs / {data.skipped_count} skipped of{" "}
{data.total_lines} total lines. Showing first {data.entries.length}:
</Text>
<div className={styles.previewList}>
{data.entries.map((entry) => (
<div key={entry}>{entry}</div>
))}
</div>
</div>
)}
</DialogContent>
<DialogActions>
<Button appearance="secondary" onClick={onClose}>
Close
</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
);
}
// ---------------------------------------------------------------------------
// Import result dialog
// ---------------------------------------------------------------------------
import { BlocklistSourcesSection } from "../components/blocklist/BlocklistSourcesSection";
import { BlocklistScheduleSection } from "../components/blocklist/BlocklistScheduleSection";
import { BlocklistImportLogSection } from "../components/blocklist/BlocklistImportLogSection";
import { useRunImport } from "../hooks/useBlocklist";
import type { ImportRunResult } from "../types/blocklist";
interface ImportResultDialogProps {
open: boolean;
@@ -344,591 +21,29 @@ interface ImportResultDialogProps {
}
function ImportResultDialog({ open, result, onClose }: ImportResultDialogProps): React.JSX.Element {
const styles = useStyles();
if (!result) return <></>;
if (!open || !result) return <></>;
return (
<Dialog
open={open}
onOpenChange={(_ev, d) => {
if (!d.open) onClose();
}}
>
<DialogSurface>
<DialogBody>
<DialogTitle>Import Complete</DialogTitle>
<DialogContent>
<div className={styles.runResult}>
<Text size={300} weight="semibold">
Total imported: {result.total_imported} &nbsp;|&nbsp; Skipped:
{result.total_skipped} &nbsp;|&nbsp; Sources with errors: {result.errors_count}
</Text>
{result.results.map((r, i) => (
<div key={i} style={{ padding: "4px 0", borderBottom: "1px solid #eee" }}>
<Text size={200} weight="semibold">
{r.source_url}
</Text>
<br />
<Text size={200}>
Imported: {r.ips_imported} | Skipped: {r.ips_skipped}
{r.error ? ` | Error: ${r.error}` : ""}
</Text>
</div>
))}
</div>
</DialogContent>
<DialogActions>
<Button appearance="primary" onClick={onClose}>
Close
</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
);
}
// ---------------------------------------------------------------------------
// Sources section
// ---------------------------------------------------------------------------
const EMPTY_SOURCE: SourceFormValues = { name: "", url: "", enabled: true };
interface SourcesSectionProps {
onRunImport: () => void;
runImportRunning: boolean;
}
function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps): React.JSX.Element {
const styles = useStyles();
const { sources, loading, error, refresh, createSource, updateSource, removeSource } =
useBlocklists();
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogMode, setDialogMode] = useState<"add" | "edit">("add");
const [dialogInitial, setDialogInitial] = useState<SourceFormValues>(EMPTY_SOURCE);
const [editingId, setEditingId] = useState<number | null>(null);
const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const [previewOpen, setPreviewOpen] = useState(false);
const [previewSource, setPreviewSource] = useState<BlocklistSource | null>(null);
const openAdd = useCallback((): void => {
setDialogMode("add");
setDialogInitial(EMPTY_SOURCE);
setEditingId(null);
setSaveError(null);
setDialogOpen(true);
}, []);
const openEdit = useCallback((source: BlocklistSource): void => {
setDialogMode("edit");
setDialogInitial({ name: source.name, url: source.url, enabled: source.enabled });
setEditingId(source.id);
setSaveError(null);
setDialogOpen(true);
}, []);
const handleSubmit = useCallback(
(values: SourceFormValues): void => {
setSaving(true);
setSaveError(null);
const op =
dialogMode === "add"
? createSource({ name: values.name, url: values.url, enabled: values.enabled })
: updateSource(editingId ?? -1, {
name: values.name,
url: values.url,
enabled: values.enabled,
});
op.then(() => {
setSaving(false);
setDialogOpen(false);
}).catch((err: unknown) => {
setSaving(false);
setSaveError(err instanceof Error ? err.message : "Failed to save source");
});
},
[dialogMode, editingId, createSource, updateSource],
);
const handleToggleEnabled = useCallback(
(source: BlocklistSource): void => {
void updateSource(source.id, { enabled: !source.enabled });
},
[updateSource],
);
const handleDelete = useCallback(
(source: BlocklistSource): void => {
void removeSource(source.id);
},
[removeSource],
);
const handlePreview = useCallback((source: BlocklistSource): void => {
setPreviewSource(source);
setPreviewOpen(true);
}, []);
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<Text size={500} weight="semibold">
Blocklist Sources
<div style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "rgba(0, 0, 0, 0.5)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 1000 }}>
<div style={{ background: "white", padding: "24px", borderRadius: "8px", maxWidth: "520px", minWidth: "300px" }}>
<Text as="h2" size={500} weight="semibold">
Import Complete
</Text>
<div style={{ display: "flex", gap: "8px" }}>
<Button
icon={<PlayRegular />}
appearance="secondary"
onClick={onRunImport}
disabled={runImportRunning}
>
{runImportRunning ? <Spinner size="tiny" /> : "Run Now"}
</Button>
<Button icon={<ArrowClockwiseRegular />} appearance="secondary" onClick={refresh}>
Refresh
</Button>
<Button icon={<AddRegular />} appearance="primary" onClick={openAdd}>
Add Source
<Text size={200} style={{ marginTop: "12px" }}>
Total imported: {result.total_imported} | Skipped: {result.total_skipped} | Sources with errors: {result.errors_count}
</Text>
<div style={{ marginTop: "16px", textAlign: "right" }}>
<Button appearance="primary" onClick={onClose}>
Close
</Button>
</div>
</div>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{loading ? (
<div className={styles.centred}>
<Spinner label="Loading sources…" />
</div>
) : sources.length === 0 ? (
<div className={styles.centred}>
<Text>No blocklist sources configured. Click "Add Source" to get started.</Text>
</div>
) : (
<div className={styles.tableWrapper}>
<Table>
<TableHeader>
<TableRow>
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>URL</TableHeaderCell>
<TableHeaderCell>Enabled</TableHeaderCell>
<TableHeaderCell>Actions</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{sources.map((source) => (
<TableRow key={source.id}>
<TableCell>
<TableCellLayout>{source.name}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
<span className={styles.mono}>{source.url}</span>
</TableCellLayout>
</TableCell>
<TableCell>
<Switch
checked={source.enabled}
onChange={() => {
handleToggleEnabled(source);
}}
label={source.enabled ? "On" : "Off"}
/>
</TableCell>
<TableCell>
<div className={styles.actionsCell}>
<Button
icon={<EyeRegular />}
size="small"
appearance="secondary"
onClick={() => {
handlePreview(source);
}}
>
Preview
</Button>
<Button
icon={<EditRegular />}
size="small"
appearance="secondary"
onClick={() => {
openEdit(source);
}}
>
Edit
</Button>
<Button
icon={<DeleteRegular />}
size="small"
appearance="secondary"
onClick={() => {
handleDelete(source);
}}
>
Delete
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
<SourceFormDialog
open={dialogOpen}
mode={dialogMode}
initial={dialogInitial}
saving={saving}
error={saveError}
onClose={() => {
setDialogOpen(false);
}}
onSubmit={handleSubmit}
/>
<PreviewDialog
open={previewOpen}
source={previewSource}
onClose={() => {
setPreviewOpen(false);
}}
/>
</div>
);
}
// ---------------------------------------------------------------------------
// Schedule section
// ---------------------------------------------------------------------------
const FREQUENCY_LABELS: Record<ScheduleFrequency, string> = {
hourly: "Every N hours",
daily: "Daily",
weekly: "Weekly",
};
const DAYS = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
];
interface ScheduleSectionProps {
onRunImport: () => void;
runImportRunning: boolean;
}
function ScheduleSection({ onRunImport, runImportRunning }: ScheduleSectionProps): React.JSX.Element {
const styles = useStyles();
const { info, loading, error, saveSchedule } = useSchedule();
const [saving, setSaving] = useState(false);
const [saveMsg, setSaveMsg] = useState<string | null>(null);
const config = info?.config ?? {
frequency: "daily" as ScheduleFrequency,
interval_hours: 24,
hour: 3,
minute: 0,
day_of_week: 0,
};
const [draft, setDraft] = useState<ScheduleConfig>(config);
// Sync draft when data loads.
const handleSave = useCallback((): void => {
setSaving(true);
saveSchedule(draft)
.then(() => {
setSaveMsg("Schedule saved.");
setSaving(false);
setTimeout(() => {
setSaveMsg(null);
}, 3000);
})
.catch((err: unknown) => {
setSaveMsg(err instanceof Error ? err.message : "Failed to save schedule");
setSaving(false);
});
}, [draft, saveSchedule]);
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<Text size={500} weight="semibold">
Import Schedule
</Text>
<Button
icon={<PlayRegular />}
appearance="secondary"
onClick={onRunImport}
disabled={runImportRunning}
>
{runImportRunning ? <Spinner size="tiny" /> : "Run Now"}
</Button>
</div>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{saveMsg && (
<MessageBar intent={saveMsg === "Schedule saved." ? "success" : "error"}>
<MessageBarBody>{saveMsg}</MessageBarBody>
</MessageBar>
)}
{loading ? (
<div className={styles.centred}>
<Spinner label="Loading schedule…" />
</div>
) : (
<>
<div className={styles.scheduleForm}>
<Field label="Frequency" className={styles.scheduleField}>
<Select
value={draft.frequency}
onChange={(_ev, d) => {
setDraft((p) => ({ ...p, frequency: d.value as ScheduleFrequency }));
}}
>
{(["hourly", "daily", "weekly"] as ScheduleFrequency[]).map((f) => (
<option key={f} value={f}>
{FREQUENCY_LABELS[f]}
</option>
))}
</Select>
</Field>
{draft.frequency === "hourly" && (
<Field label="Every (hours)" className={styles.scheduleField}>
<Input
type="number"
value={String(draft.interval_hours)}
onChange={(_ev, d) => {
setDraft((p) => ({ ...p, interval_hours: Math.max(1, parseInt(d.value, 10) || 1) }));
}}
min={1}
max={168}
/>
</Field>
)}
{draft.frequency !== "hourly" && (
<>
{draft.frequency === "weekly" && (
<Field label="Day of week" className={styles.scheduleField}>
<Select
value={String(draft.day_of_week)}
onChange={(_ev, d) => {
setDraft((p) => ({ ...p, day_of_week: parseInt(d.value, 10) }));
}}
>
{DAYS.map((day, i) => (
<option key={day} value={i}>
{day}
</option>
))}
</Select>
</Field>
)}
<Field label="Hour (UTC)" className={styles.scheduleField}>
<Select
value={String(draft.hour)}
onChange={(_ev, d) => {
setDraft((p) => ({ ...p, hour: parseInt(d.value, 10) }));
}}
>
{Array.from({ length: 24 }, (_, i) => (
<option key={i} value={i}>
{String(i).padStart(2, "0")}:00
</option>
))}
</Select>
</Field>
<Field label="Minute" className={styles.scheduleField}>
<Select
value={String(draft.minute)}
onChange={(_ev, d) => {
setDraft((p) => ({ ...p, minute: parseInt(d.value, 10) }));
}}
>
{[0, 15, 30, 45].map((m) => (
<option key={m} value={m}>
{String(m).padStart(2, "0")}
</option>
))}
</Select>
</Field>
</>
)}
<Button
appearance="primary"
onClick={handleSave}
disabled={saving}
style={{ alignSelf: "flex-end" }}
>
{saving ? <Spinner size="tiny" /> : "Save Schedule"}
</Button>
</div>
<div className={styles.metaRow}>
<div className={styles.metaItem}>
<Text size={200} weight="semibold">
Last run
</Text>
<Text size={200}>{info?.last_run_at ?? "Never"}</Text>
</div>
<div className={styles.metaItem}>
<Text size={200} weight="semibold">
Next run
</Text>
<Text size={200}>{info?.next_run_at ?? "Not scheduled"}</Text>
</div>
</div>
</>
)}
</div>
);
}
// ---------------------------------------------------------------------------
// Import log section
// ---------------------------------------------------------------------------
function ImportLogSection(): React.JSX.Element {
const styles = useStyles();
const { data, loading, error, page, setPage, refresh } = useImportLog(undefined, 20);
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<Text size={500} weight="semibold">
Import Log
</Text>
<Button icon={<ArrowClockwiseRegular />} appearance="secondary" onClick={refresh}>
Refresh
</Button>
</div>
{error && (
<MessageBar intent="error">
<MessageBarBody>{error}</MessageBarBody>
</MessageBar>
)}
{loading ? (
<div className={styles.centred}>
<Spinner label="Loading log…" />
</div>
) : !data || data.items.length === 0 ? (
<div className={styles.centred}>
<Text>No import runs recorded yet.</Text>
</div>
) : (
<>
<div className={styles.tableWrapper}>
<Table>
<TableHeader>
<TableRow>
<TableHeaderCell>Timestamp</TableHeaderCell>
<TableHeaderCell>Source URL</TableHeaderCell>
<TableHeaderCell>Imported</TableHeaderCell>
<TableHeaderCell>Skipped</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{data.items.map((entry) => (
<TableRow
key={entry.id}
className={entry.errors ? styles.errorRow : undefined}
>
<TableCell>
<TableCellLayout>
<span className={styles.mono}>{entry.timestamp}</span>
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
<span className={styles.mono}>{entry.source_url}</span>
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{entry.ips_imported}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{entry.ips_skipped}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
{entry.errors ? (
<Badge appearance="filled" color="danger">
Error
</Badge>
) : (
<Badge appearance="filled" color="success">
OK
</Badge>
)}
</TableCellLayout>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data.total_pages > 1 && (
<div className={styles.pagination}>
<Button
size="small"
appearance="secondary"
disabled={page <= 1}
onClick={() => {
setPage(page - 1);
}}
>
Previous
</Button>
<Text size={200}>
Page {page} of {data.total_pages}
</Text>
<Button
size="small"
appearance="secondary"
disabled={page >= data.total_pages}
onClick={() => {
setPage(page + 1);
}}
>
Next
</Button>
</div>
)}
</>
)}
</div>
);
}
// ---------------------------------------------------------------------------
// Main page
// ---------------------------------------------------------------------------
export function BlocklistsPage(): React.JSX.Element {
const styles = useStyles();
const safeUseBlocklistStyles = useBlocklistStyles as unknown as () => { root: string };
const styles = safeUseBlocklistStyles();
const { running, lastResult, error: importError, runNow } = useRunImport();
const [importResultOpen, setImportResultOpen] = useState(false);
@@ -950,18 +65,15 @@ export function BlocklistsPage(): React.JSX.Element {
</MessageBar>
)}
<SourcesSection onRunImport={handleRunImport} runImportRunning={running} />
<ScheduleSection onRunImport={handleRunImport} runImportRunning={running} />
<ImportLogSection />
<BlocklistSourcesSection onRunImport={handleRunImport} runImportRunning={running} />
<BlocklistScheduleSection onRunImport={handleRunImport} runImportRunning={running} />
<BlocklistImportLogSection />
<ImportResultDialog
open={importResultOpen}
result={lastResult}
onClose={() => {
setImportResultOpen(false);
}}
onClose={() => { setImportResultOpen(false); }}
/>
</div>
);
}

29
frontend/src/pages/DashboardPage.tsx
View File

@@ -15,6 +15,7 @@ import { DashboardFilterBar } from "../components/DashboardFilterBar";
import { ServerStatusBar } from "../components/ServerStatusBar";
import { TopCountriesBarChart } from "../components/TopCountriesBarChart";
import { TopCountriesPieChart } from "../components/TopCountriesPieChart";
import { useCommonSectionStyles } from "../theme/commonStyles";
import { useDashboardCountryData } from "../hooks/useDashboardCountryData";
import type { BanOriginFilter, TimeRange } from "../types/ban";
@@ -29,26 +30,6 @@ const useStyles = makeStyles({
flexDirection: "column",
gap: tokens.spacingVerticalM,
},
section: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalS,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
padding: tokens.spacingVerticalM,
},
sectionHeader: {
display: "flex",
alignItems: "center",
@@ -93,6 +74,8 @@ export function DashboardPage(): React.JSX.Element {
const { countries, countryNames, isLoading: countryLoading, error: countryError, reload: reloadCountry } =
useDashboardCountryData(timeRange, originFilter);
const sectionStyles = useCommonSectionStyles();
return (
<div className={styles.root}>
{/* ------------------------------------------------------------------ */}
@@ -113,7 +96,7 @@ export function DashboardPage(): React.JSX.Element {
{/* ------------------------------------------------------------------ */}
{/* Ban Trend section */}
{/* ------------------------------------------------------------------ */}
<div className={styles.section}>
<div className={sectionStyles.section}>
<div className={styles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
Ban Trend
@@ -127,7 +110,7 @@ export function DashboardPage(): React.JSX.Element {
{/* ------------------------------------------------------------------ */}
{/* Charts section */}
{/* ------------------------------------------------------------------ */}
<div className={styles.section}>
<div className={sectionStyles.section}>
<div className={styles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
Top Countries
@@ -162,7 +145,7 @@ export function DashboardPage(): React.JSX.Element {
{/* ------------------------------------------------------------------ */}
{/* Ban list section */}
{/* ------------------------------------------------------------------ */}
<div className={styles.section}>
<div className={sectionStyles.section}>
<div className={styles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
Ban List

7
frontend/src/pages/HistoryPage.tsx
View File

@@ -35,6 +35,7 @@ import {
makeStyles,
tokens,
} from "@fluentui/react-components";
import { useCardStyles } from "../theme/commonStyles";
import {
ArrowCounterclockwiseRegular,
ArrowLeftRegular,
@@ -112,9 +113,6 @@ const useStyles = makeStyles({
gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
gap: tokens.spacingVerticalM,
padding: tokens.spacingVerticalM,
background: tokens.colorNeutralBackground2,
borderRadius: tokens.borderRadiusMedium,
border: `1px solid ${tokens.colorNeutralStroke1}`,
marginBottom: tokens.spacingVerticalM,
},
detailField: {
@@ -216,6 +214,7 @@ interface IpDetailViewProps {
function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
const styles = useStyles();
const cardStyles = useCardStyles();
const { detail, loading, error, refresh } = useIpHistory(ip);
if (loading) {
@@ -272,7 +271,7 @@ function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
</div>
{/* Summary grid */}
<div className={styles.detailGrid}>
<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>

158
frontend/src/pages/JailDetailPage.tsx
View File

@@ -23,6 +23,7 @@ import {
makeStyles,
tokens,
} from "@fluentui/react-components";
import { useCommonSectionStyles } from "../theme/commonStyles";
import {
ArrowClockwiseRegular,
ArrowLeftRegular,
@@ -33,15 +34,9 @@ import {
StopRegular,
} from "@fluentui/react-icons";
import { Link, useNavigate, useParams } from "react-router-dom";
import {
reloadJail,
setJailIdle,
startJail,
stopJail,
} from "../api/jails";
import { useJailDetail } from "../hooks/useJails";
import { useJailDetail, useJailBannedIps } from "../hooks/useJails";
import { formatSeconds } from "../utils/formatDate";
import type { Jail } from "../types/jail";
import { ApiError } from "../api/client";
import { BannedIpsSection } from "../components/jail/BannedIpsSection";
// ---------------------------------------------------------------------------
@@ -59,36 +54,7 @@ const useStyles = makeStyles({
alignItems: "center",
gap: tokens.spacingHorizontalS,
},
section: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalS,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
padding: tokens.spacingVerticalM,
},
sectionHeader: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: tokens.spacingHorizontalM,
paddingBottom: tokens.spacingVerticalS,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
},
headerRow: {
display: "flex",
alignItems: "center",
@@ -153,16 +119,9 @@ const useStyles = makeStyles({
});
// ---------------------------------------------------------------------------
// Helpers
// Components
// ---------------------------------------------------------------------------
function fmtSeconds(s: number): string {
if (s < 0) return "permanent";
if (s < 60) return `${String(s)} s`;
if (s < 3600) return `${String(Math.round(s / 60))} min`;
return `${String(Math.round(s / 3600))} h`;
}
function CodeList({ items, empty }: { items: string[]; empty: string }): React.JSX.Element {
const styles = useStyles();
if (items.length === 0) {
@@ -186,10 +145,15 @@ function CodeList({ items, empty }: { items: string[]; empty: string }): React.J
interface JailInfoProps {
jail: Jail;
onRefresh: () => void;
onStart: () => Promise<void>;
onStop: () => Promise<void>;
onSetIdle: (on: boolean) => Promise<void>;
onReload: () => Promise<void>;
}
function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element {
function JailInfoSection({ jail, onRefresh, onStart, onStop, onSetIdle, onReload }: JailInfoProps): React.JSX.Element {
const styles = useStyles();
const sectionStyles = useCommonSectionStyles();
const navigate = useNavigate();
const [ctrlError, setCtrlError] = useState<string | null>(null);
@@ -207,18 +171,16 @@ function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element
})
.catch((err: unknown) => {
const msg =
err instanceof ApiError
? `${String(err.status)}: ${err.body}`
: err instanceof Error
? err.message
: String(err);
err instanceof Error
? err.message
: String(err);
setCtrlError(msg);
});
};
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<div className={styles.headerRow}>
<Text
size={600}
@@ -259,7 +221,7 @@ function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element
<Button
appearance="secondary"
icon={<StopRegular />}
onClick={handle(() => stopJail(jail.name).then(() => void 0))}
onClick={handle(onStop)}
>
Stop
</Button>
@@ -269,7 +231,7 @@ function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element
<Button
appearance="primary"
icon={<PlayRegular />}
onClick={handle(() => startJail(jail.name).then(() => void 0))}
onClick={handle(onStart)}
>
Start
</Button>
@@ -282,7 +244,7 @@ function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element
<Button
appearance="outline"
icon={<PauseRegular />}
onClick={handle(() => setJailIdle(jail.name, !jail.idle).then(() => void 0))}
onClick={handle(() => onSetIdle(!jail.idle))}
disabled={!jail.running}
>
{jail.idle ? "Resume" : "Set Idle"}
@@ -292,7 +254,7 @@ function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element
<Button
appearance="outline"
icon={<ArrowSyncRegular />}
onClick={handle(() => reloadJail(jail.name).then(() => void 0))}
onClick={handle(onReload)}
>
Reload
</Button>
@@ -318,9 +280,9 @@ function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element
<Text className={styles.label}>Backend:</Text>
<Text className={styles.mono}>{jail.backend}</Text>
<Text className={styles.label}>Find time:</Text>
<Text>{fmtSeconds(jail.find_time)}</Text>
<Text>{formatSeconds(jail.find_time)}</Text>
<Text className={styles.label}>Ban time:</Text>
<Text>{fmtSeconds(jail.ban_time)}</Text>
<Text>{formatSeconds(jail.ban_time)}</Text>
<Text className={styles.label}>Max retry:</Text>
<Text>{String(jail.max_retry)}</Text>
{jail.date_pattern && (
@@ -345,10 +307,10 @@ function JailInfoSection({ jail, onRefresh }: JailInfoProps): React.JSX.Element
// ---------------------------------------------------------------------------
function PatternsSection({ jail }: { jail: Jail }): React.JSX.Element {
const styles = useStyles();
const sectionStyles = useCommonSectionStyles();
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
Log Paths &amp; Patterns
</Text>
@@ -385,12 +347,13 @@ function PatternsSection({ jail }: { jail: Jail }): React.JSX.Element {
function BantimeEscalationSection({ jail }: { jail: Jail }): React.JSX.Element | null {
const styles = useStyles();
const sectionStyles = useCommonSectionStyles();
const esc = jail.bantime_escalation;
if (!esc?.increment) return null;
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
Ban-time Escalation
</Text>
@@ -418,13 +381,13 @@ function BantimeEscalationSection({ jail }: { jail: Jail }): React.JSX.Element |
{esc.max_time !== null && (
<>
<Text className={styles.label}>Max time:</Text>
<Text>{fmtSeconds(esc.max_time)}</Text>
<Text>{formatSeconds(esc.max_time)}</Text>
</>
)}
{esc.rnd_time !== null && (
<>
<Text className={styles.label}>Random jitter:</Text>
<Text>{fmtSeconds(esc.rnd_time)}</Text>
<Text>{formatSeconds(esc.rnd_time)}</Text>
</>
)}
<Text className={styles.label}>Count across all jails:</Text>
@@ -456,6 +419,7 @@ function IgnoreListSection({
onToggleIgnoreSelf,
}: IgnoreListSectionProps): React.JSX.Element {
const styles = useStyles();
const sectionStyles = useCommonSectionStyles();
const [inputVal, setInputVal] = useState("");
const [opError, setOpError] = useState<string | null>(null);
@@ -467,12 +431,7 @@ function IgnoreListSection({
setInputVal("");
})
.catch((err: unknown) => {
const msg =
err instanceof ApiError
? `${String(err.status)}: ${err.body}`
: err instanceof Error
? err.message
: String(err);
const msg = err instanceof Error ? err.message : String(err);
setOpError(msg);
});
};
@@ -480,19 +439,14 @@ function IgnoreListSection({
const handleRemove = (ip: string): void => {
setOpError(null);
onRemove(ip).catch((err: unknown) => {
const msg =
err instanceof ApiError
? `${String(err.status)}: ${err.body}`
: err instanceof Error
? err.message
: String(err);
const msg = err instanceof Error ? err.message : String(err);
setOpError(msg);
});
};
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM }}>
<Text as="h2" size={500} weight="semibold">
Ignore List (IP Whitelist)
@@ -507,12 +461,7 @@ function IgnoreListSection({
checked={ignoreSelf}
onChange={(_e, data): void => {
onToggleIgnoreSelf(data.checked).catch((err: unknown) => {
const msg =
err instanceof ApiError
? `${String(err.status)}: ${err.body}`
: err instanceof Error
? err.message
: String(err);
const msg = err instanceof Error ? err.message : String(err);
setOpError(msg);
});
}}
@@ -592,8 +541,23 @@ function IgnoreListSection({
export function JailDetailPage(): React.JSX.Element {
const styles = useStyles();
const { name = "" } = useParams<{ name: string }>();
const { jail, ignoreList, ignoreSelf, loading, error, refresh, addIp, removeIp, toggleIgnoreSelf } =
const { jail, ignoreList, ignoreSelf, loading, error, refresh, addIp, removeIp, toggleIgnoreSelf, start, stop, reload, setIdle } =
useJailDetail(name);
const {
items,
total,
page,
pageSize,
search,
loading: bannedLoading,
error: bannedError,
opError,
refresh: refreshBanned,
setPage,
setPageSize,
setSearch,
unban,
} = useJailBannedIps(name);
if (loading && !jail) {
return (
@@ -637,8 +601,22 @@ export function JailDetailPage(): React.JSX.Element {
</Text>
</div>
<JailInfoSection jail={jail} onRefresh={refresh} />
<BannedIpsSection jailName={name} />
<JailInfoSection jail={jail} onRefresh={refresh} onStart={start} onStop={stop} onReload={reload} onSetIdle={setIdle} />
<BannedIpsSection
items={items}
total={total}
page={page}
pageSize={pageSize}
search={search}
loading={bannedLoading}
error={bannedError}
opError={opError}
onSearch={setSearch}
onPageChange={setPage}
onPageSizeChange={setPageSize}
onRefresh={refreshBanned}
onUnban={unban}
/>
<PatternsSection jail={jail} />
<BantimeEscalationSection jail={jail} />
<IgnoreListSection

205
frontend/src/pages/JailsPage.tsx
View File

@@ -9,7 +9,8 @@
* geo-location details.
*/
import { useMemo, useState } from "react";
import { useState } from "react";
import { formatSeconds } from "../utils/formatDate";
import {
Badge,
Button,
@@ -32,6 +33,7 @@ import {
type TableColumnDefinition,
createTableColumn,
} from "@fluentui/react-components";
import { useCardStyles, useCommonSectionStyles } from "../theme/commonStyles";
import {
ArrowClockwiseRegular,
ArrowSyncRegular,
@@ -42,7 +44,7 @@ import {
SearchRegular,
StopRegular,
} from "@fluentui/react-icons";
import { useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";
import { useActiveBans, useIpLookup, useJails } from "../hooks/useJails";
import type { JailSummary } from "../types/jail";
import { ApiError } from "../api/client";
@@ -57,36 +59,7 @@ const useStyles = makeStyles({
flexDirection: "column",
gap: tokens.spacingVerticalL,
},
section: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalS,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
padding: tokens.spacingVerticalM,
},
sectionHeader: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: tokens.spacingHorizontalM,
paddingBottom: tokens.spacingVerticalS,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
},
tableWrapper: { overflowX: "auto" },
centred: {
display: "flex",
@@ -116,20 +89,6 @@ const useStyles = makeStyles({
gap: tokens.spacingVerticalS,
marginTop: tokens.spacingVerticalS,
padding: tokens.spacingVerticalS,
backgroundColor: tokens.colorNeutralBackground2,
borderRadius: tokens.borderRadiusMedium,
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: tokens.colorNeutralStroke2,
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: tokens.colorNeutralStroke2,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: tokens.colorNeutralStroke2,
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderLeftColor: tokens.colorNeutralStroke2,
},
lookupRow: {
display: "flex",
@@ -141,15 +100,65 @@ const useStyles = makeStyles({
});
// ---------------------------------------------------------------------------
// Helpers
// Jail overview columns
// ---------------------------------------------------------------------------
function fmtSeconds(s: number): string {
if (s < 0) return "permanent";
if (s < 60) return `${String(s)}s`;
if (s < 3600) return `${String(Math.round(s / 60))}m`;
return `${String(Math.round(s / 3600))}h`;
}
const jailColumns: TableColumnDefinition<JailSummary>[] = [
createTableColumn<JailSummary>({
columnId: "name",
renderHeaderCell: () => "Jail",
renderCell: (j) => (
<Link to={`/jails/${encodeURIComponent(j.name)}`} style={{ textDecoration: "none" }}>
<Text style={{ fontFamily: "Consolas, 'Courier New', monospace", fontSize: "0.85rem" }}>
{j.name}
</Text>
</Link>
),
}),
createTableColumn<JailSummary>({
columnId: "status",
renderHeaderCell: () => "Status",
renderCell: (j) => {
if (!j.running) return <Badge appearance="filled" color="danger">stopped</Badge>;
if (j.idle) return <Badge appearance="filled" color="warning">idle</Badge>;
return <Badge appearance="filled" color="success">running</Badge>;
},
}),
createTableColumn<JailSummary>({
columnId: "backend",
renderHeaderCell: () => "Backend",
renderCell: (j) => <Text size={200}>{j.backend}</Text>,
}),
createTableColumn<JailSummary>({
columnId: "banned",
renderHeaderCell: () => "Banned",
renderCell: (j) => (
<Text size={200}>{j.status ? String(j.status.currently_banned) : "—"}</Text>
),
}),
createTableColumn<JailSummary>({
columnId: "failed",
renderHeaderCell: () => "Failed",
renderCell: (j) => (
<Text size={200}>{j.status ? String(j.status.currently_failed) : "—"}</Text>
),
}),
createTableColumn<JailSummary>({
columnId: "findTime",
renderHeaderCell: () => "Find Time",
renderCell: (j) => <Text size={200}>{formatSeconds(j.find_time)}</Text>,
}),
createTableColumn<JailSummary>({
columnId: "banTime",
renderHeaderCell: () => "Ban Time",
renderCell: (j) => <Text size={200}>{formatSeconds(j.ban_time)}</Text>,
}),
createTableColumn<JailSummary>({
columnId: "maxRetry",
renderHeaderCell: () => "Max Retry",
renderCell: (j) => <Text size={200}>{String(j.max_retry)}</Text>,
}),
];
// ---------------------------------------------------------------------------
// Sub-component: Jail overview section
@@ -157,82 +166,11 @@ function fmtSeconds(s: number): string {
function JailOverviewSection(): React.JSX.Element {
const styles = useStyles();
const navigate = useNavigate();
const sectionStyles = useCommonSectionStyles();
const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } =
useJails();
const [opError, setOpError] = useState<string | null>(null);
const jailColumns = useMemo<TableColumnDefinition<JailSummary>[]>(
() => [
createTableColumn<JailSummary>({
columnId: "name",
renderHeaderCell: () => "Jail",
renderCell: (j) => (
<Button
appearance="transparent"
size="small"
style={{ padding: 0, minWidth: 0, justifyContent: "flex-start" }}
onClick={() =>
navigate("/config", {
state: { tab: "jails", jail: j.name },
})
}
>
<Text
style={{ fontFamily: "Consolas, 'Courier New', monospace", fontSize: "0.85rem" }}
>
{j.name}
</Text>
</Button>
),
}),
createTableColumn<JailSummary>({
columnId: "status",
renderHeaderCell: () => "Status",
renderCell: (j) => {
if (!j.running) return <Badge appearance="filled" color="danger">stopped</Badge>;
if (j.idle) return <Badge appearance="filled" color="warning">idle</Badge>;
return <Badge appearance="filled" color="success">running</Badge>;
},
}),
createTableColumn<JailSummary>({
columnId: "backend",
renderHeaderCell: () => "Backend",
renderCell: (j) => <Text size={200}>{j.backend}</Text>,
}),
createTableColumn<JailSummary>({
columnId: "banned",
renderHeaderCell: () => "Banned",
renderCell: (j) => (
<Text size={200}>{j.status ? String(j.status.currently_banned) : "—"}</Text>
),
}),
createTableColumn<JailSummary>({
columnId: "failed",
renderHeaderCell: () => "Failed",
renderCell: (j) => (
<Text size={200}>{j.status ? String(j.status.currently_failed) : "—"}</Text>
),
}),
createTableColumn<JailSummary>({
columnId: "findTime",
renderHeaderCell: () => "Find Time",
renderCell: (j) => <Text size={200}>{fmtSeconds(j.find_time)}</Text>,
}),
createTableColumn<JailSummary>({
columnId: "banTime",
renderHeaderCell: () => "Ban Time",
renderCell: (j) => <Text size={200}>{fmtSeconds(j.ban_time)}</Text>,
}),
createTableColumn<JailSummary>({
columnId: "maxRetry",
renderHeaderCell: () => "Max Retry",
renderCell: (j) => <Text size={200}>{String(j.max_retry)}</Text>,
}),
],
[navigate],
);
const handle = (fn: () => Promise<void>): void => {
setOpError(null);
fn().catch((err: unknown) => {
@@ -241,8 +179,8 @@ function JailOverviewSection(): React.JSX.Element {
};
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
Jail Overview
{total > 0 && (
@@ -379,6 +317,7 @@ interface BanUnbanFormProps {
function BanUnbanForm({ jailNames, onBan, onUnban }: BanUnbanFormProps): React.JSX.Element {
const styles = useStyles();
const sectionStyles = useCommonSectionStyles();
const [banIpVal, setBanIpVal] = useState("");
const [banJail, setBanJail] = useState("");
const [unbanIpVal, setUnbanIpVal] = useState("");
@@ -436,8 +375,8 @@ function BanUnbanForm({ jailNames, onBan, onUnban }: BanUnbanFormProps): React.J
};
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
Ban / Unban IP
</Text>
@@ -565,6 +504,8 @@ function BanUnbanForm({ jailNames, onBan, onUnban }: BanUnbanFormProps): React.J
function IpLookupSection(): React.JSX.Element {
const styles = useStyles();
const sectionStyles = useCommonSectionStyles();
const cardStyles = useCardStyles();
const { result, loading, error, lookup, clear } = useIpLookup();
const [inputVal, setInputVal] = useState("");
@@ -575,8 +516,8 @@ function IpLookupSection(): React.JSX.Element {
};
return (
<div className={styles.section}>
<div className={styles.sectionHeader}>
<div className={sectionStyles.section}>
<div className={sectionStyles.sectionHeader}>
<Text as="h2" size={500} weight="semibold">
IP Lookup
</Text>
@@ -616,7 +557,7 @@ function IpLookupSection(): React.JSX.Element {
)}
{result && (
<div className={styles.lookupResult}>
<div className={`${cardStyles.card} ${styles.lookupResult}`}>
<div className={styles.lookupRow}>
<Text className={styles.lookupLabel}>IP:</Text>
<Text className={styles.mono}>{result.ip}</Text>

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

@@ -29,7 +29,7 @@ import { ArrowCounterclockwiseRegular, DismissRegular } from "@fluentui/react-ic
import { DashboardFilterBar } from "../components/DashboardFilterBar";
import { WorldMap } from "../components/WorldMap";
import { useMapData } from "../hooks/useMapData";
import { fetchMapColorThresholds } from "../api/config";
import { useMapColorThresholds } from "../hooks/useMapColorThresholds";
import type { TimeRange } from "../types/map";
import type { BanOriginFilter } from "../types/ban";
@@ -79,28 +79,25 @@ 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 [thresholdLow, setThresholdLow] = useState<number>(20);
const [thresholdMedium, setThresholdMedium] = useState<number>(50);
const [thresholdHigh, setThresholdHigh] = useState<number>(100);
const { countries, countryNames, bans, total, loading, error, refresh } =
useMapData(range, originFilter);
// Fetch color thresholds on mount
const {
thresholds: mapThresholds,
error: mapThresholdError,
} = useMapColorThresholds();
const thresholdLow = mapThresholds?.threshold_low ?? 20;
const thresholdMedium = mapThresholds?.threshold_medium ?? 50;
const thresholdHigh = mapThresholds?.threshold_high ?? 100;
useEffect(() => {
const loadThresholds = async (): Promise<void> => {
try {
const thresholds = await fetchMapColorThresholds();
setThresholdLow(thresholds.threshold_low);
setThresholdMedium(thresholds.threshold_medium);
setThresholdHigh(thresholds.threshold_high);
} catch (err) {
// Silently fall back to defaults if fetch fails
console.warn("Failed to load map color thresholds:", err);
}
};
void loadThresholds();
}, []);
if (mapThresholdError) {
// Silently fall back to defaults if fetch fails
console.warn("Failed to load map color thresholds:", mapThresholdError);
}
}, [mapThresholdError]);
/** Bans visible in the companion table (filtered by selected country). */
const visibleBans = useMemo(() => {

54
frontend/src/pages/SetupPage.tsx
View File

@@ -20,8 +20,7 @@ import {
} from "@fluentui/react-components";
import { useNavigate } from "react-router-dom";
import type { ChangeEvent, FormEvent } from "react";
import { ApiError } from "../api/client";
import { getSetupStatus, submitSetup } from "../api/setup";
import { useSetup } from "../hooks/useSetup";
// ---------------------------------------------------------------------------
// Styles
@@ -100,37 +99,18 @@ export function SetupPage(): React.JSX.Element {
const styles = useStyles();
const navigate = useNavigate();
const [checking, setChecking] = useState(true);
const { status, loading, error, submit, submitting, submitError } = useSetup();
const [values, setValues] = useState<FormValues>(DEFAULT_VALUES);
const [errors, setErrors] = useState<Partial<Record<keyof FormValues, string>>>({});
const [apiError, setApiError] = useState<string | null>(null);
const [submitting, setSubmitting] = useState(false);
const apiError = error ?? submitError;
// Redirect to /login if setup has already been completed.
// Show a full-screen spinner while the check is in flight to prevent
// the form from flashing before the redirect fires.
// Show a full-screen spinner while the initial status check is in flight.
useEffect(() => {
let cancelled = false;
getSetupStatus()
.then((res) => {
if (!cancelled) {
if (res.completed) {
navigate("/login", { replace: true });
} else {
setChecking(false);
}
}
})
.catch(() => {
// Failed check: the backend may still be starting up. Stay on this
// page so the user can attempt setup once the backend is ready.
console.warn("SetupPage: setup status check failed — rendering setup form");
if (!cancelled) setChecking(false);
});
return (): void => {
cancelled = true;
};
}, [navigate]);
if (status?.completed) {
navigate("/login", { replace: true });
}
}, [navigate, status]);
// ---------------------------------------------------------------------------
// Handlers
@@ -170,13 +150,11 @@ export function SetupPage(): React.JSX.Element {
async function handleSubmit(ev: FormEvent<HTMLFormElement>): Promise<void> {
ev.preventDefault();
setApiError(null);
if (!validate()) return;
setSubmitting(true);
try {
await submitSetup({
await submit({
master_password: values.masterPassword,
database_path: values.databasePath,
fail2ban_socket: values.fail2banSocket,
@@ -184,14 +162,8 @@ export function SetupPage(): React.JSX.Element {
session_duration_minutes: parseInt(values.sessionDurationMinutes, 10),
});
navigate("/login", { replace: true });
} catch (err) {
if (err instanceof ApiError) {
setApiError(err.message || `Error ${String(err.status)}`);
} else {
setApiError("An unexpected error occurred. Please try again.");
}
} finally {
setSubmitting(false);
} catch {
// Errors are surfaced through the hook via `submitError`.
}
}
@@ -199,7 +171,7 @@ export function SetupPage(): React.JSX.Element {
// Render
// ---------------------------------------------------------------------------
if (checking) {
if (loading) {
return (
<div
style={{
@@ -225,7 +197,7 @@ export function SetupPage(): React.JSX.Element {
is complete.
</Text>
{apiError !== null && (
{apiError && (
<MessageBar intent="error" className={styles.error}>
<MessageBarBody>{apiError}</MessageBarBody>
</MessageBar>

19
frontend/src/pages/__tests__/JailDetailIgnoreSelf.test.tsx
View File

@@ -41,6 +41,21 @@ const {
// Mock the jail detail hook — tests control the returned state directly.
vi.mock("../../hooks/useJails", () => ({
useJailDetail: vi.fn(),
useJailBannedIps: vi.fn(() => ({
items: [],
total: 0,
page: 1,
pageSize: 25,
search: "",
loading: false,
error: null,
opError: null,
refresh: vi.fn(),
setPage: vi.fn(),
setPageSize: vi.fn(),
setSearch: vi.fn(),
unban: vi.fn(),
})),
}));
// Mock API functions used by JailInfoSection control buttons to avoid side effects.
@@ -101,6 +116,10 @@ function mockHook(ignoreSelf: boolean): void {
addIp: mockAddIp,
removeIp: mockRemoveIp,
toggleIgnoreSelf: mockToggleIgnoreSelf,
start: vi.fn().mockResolvedValue(undefined),
stop: vi.fn().mockResolvedValue(undefined),
reload: vi.fn().mockResolvedValue(undefined),
setIdle: vi.fn().mockResolvedValue(undefined),
};
vi.mocked(useJailDetail).mockReturnValue(result);
}

25
frontend/src/providers/TimezoneProvider.tsx
View File

@@ -9,15 +9,8 @@
* always receive a safe fallback.
*/
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from "react";
import { fetchTimezone } from "../api/setup";
import { createContext, useContext, useMemo } from "react";
import { useTimezoneData } from "../hooks/useTimezoneData";
// ---------------------------------------------------------------------------
// Context definition
@@ -52,19 +45,7 @@ export interface TimezoneProviderProps {
export function TimezoneProvider({
children,
}: TimezoneProviderProps): React.JSX.Element {
const [timezone, setTimezone] = useState<string>("UTC");
const load = useCallback((): void => {
fetchTimezone()
.then((resp) => { setTimezone(resp.timezone); })
.catch(() => {
// Silently fall back to UTC; the backend may not be reachable yet.
});
}, []);
useEffect(() => {
load();
}, [load]);
const { timezone } = useTimezoneData();
const value = useMemo<TimezoneContextValue>(() => ({ timezone }), [timezone]);

30
frontend/src/theme/commonStyles.ts Normal file
View File

@@ -0,0 +1,30 @@
import { makeStyles, tokens } from "@fluentui/react-components";
export const useCommonSectionStyles = makeStyles({
section: {
display: "flex",
flexDirection: "column",
gap: tokens.spacingVerticalS,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
border: `1px solid ${tokens.colorNeutralStroke2}`,
padding: tokens.spacingVerticalM,
},
sectionHeader: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: tokens.spacingHorizontalM,
paddingBottom: tokens.spacingVerticalS,
borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
},
});
export const useCardStyles = makeStyles({
card: {
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
border: `1px solid ${tokens.colorNeutralStroke2}`,
padding: tokens.spacingVerticalM,
},
});

14
frontend/src/utils/fetchError.ts Normal file
View File

@@ -0,0 +1,14 @@
/**
* Normalize fetch error handling across hooks.
*/
export function handleFetchError(
err: unknown,
setError: (value: string | null) => void,
fallback: string = "Unknown error",
): void {
if (err instanceof DOMException && err.name === "AbortError") {
return;
}
setError(err instanceof Error ? err.message : fallback);
}

31
frontend/src/utils/formatDate.ts
View File

@@ -130,3 +130,34 @@ export function formatRelative(
return formatDate(isoUtc, timezone);
}
}
/**
* Format an ISO 8601 timestamp for display with local browser timezone.
*
* Keeps parity with existing code paths in the UI that render full date+time
* strings inside table rows.
*/
export function formatTimestamp(iso: string): string {
try {
return new Date(iso).toLocaleString(undefined, {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
} catch {
return iso;
}
}
/**
* Format a duration in seconds to a compact text representation.
*/
export function formatSeconds(seconds: number): string {
if (seconds < 0) return "permanent";
if (seconds < 60) return `${String(seconds)} s`;
if (seconds < 3600) return `${String(Math.round(seconds / 60))} min`;
return `${String(Math.round(seconds / 3600))} h`;
}