Stage 10: external blocklist importer — backend + frontend
- blocklist_repo.py: CRUD for blocklist_sources table - import_log_repo.py: add/list/get-last log entries - blocklist_service.py: source CRUD, preview, import (download/validate/ban), import_all, schedule get/set/info - blocklist_import.py: APScheduler task (hourly/daily/weekly schedule triggers) - blocklist.py router: 9 endpoints (list/create/update/delete/preview/import/ schedule-get+put/log) - blocklist.py models: ScheduleFrequency (StrEnum), ScheduleConfig, ScheduleInfo, ImportSourceResult, ImportRunResult, PreviewResponse - 59 new tests (18 repo + 19 service + 22 router); 374 total pass - ruff clean, mypy clean for Stage 10 files - types/blocklist.ts, api/blocklist.ts, hooks/useBlocklist.ts - BlocklistsPage.tsx: source management, schedule picker, import log table - Frontend tsc + ESLint clean
This commit is contained in:
@@ -1,23 +1,967 @@
|
||||
/**
|
||||
* Blocklists placeholder page — full implementation in Stage 10.
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import { Text, makeStyles, tokens } from "@fluentui/react-components";
|
||||
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";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Styles
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: { padding: tokens.spacingVerticalXXL },
|
||||
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
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface ImportResultDialogProps {
|
||||
open: boolean;
|
||||
result: ImportRunResult | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function ImportResultDialog({ open, result, onClose }: ImportResultDialogProps): React.JSX.Element {
|
||||
const styles = useStyles();
|
||||
if (!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} | Skipped:
|
||||
{result.total_skipped} | 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
|
||||
</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={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 { running, lastResult, error: importError, runNow } = useRunImport();
|
||||
const [importResultOpen, setImportResultOpen] = useState(false);
|
||||
|
||||
const handleRunImport = useCallback((): void => {
|
||||
void runNow().then(() => {
|
||||
setImportResultOpen(true);
|
||||
});
|
||||
}, [runNow]);
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<Text as="h1" size={700} weight="semibold">
|
||||
Blocklists
|
||||
</Text>
|
||||
<Text as="p" size={300}>
|
||||
Blocklist management will be implemented in Stage 10.
|
||||
</Text>
|
||||
|
||||
{importError && (
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>Import error: {importError}</MessageBarBody>
|
||||
</MessageBar>
|
||||
)}
|
||||
|
||||
<SourcesSection onRunImport={handleRunImport} runImportRunning={running} />
|
||||
<ScheduleSection onRunImport={handleRunImport} runImportRunning={running} />
|
||||
<ImportLogSection />
|
||||
|
||||
<ImportResultDialog
|
||||
open={importResultOpen}
|
||||
result={lastResult}
|
||||
onClose={() => {
|
||||
setImportResultOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user