Refactor BlocklistsPage into section components and fix frontend lint issues
This commit is contained in:
@@ -288,7 +288,7 @@ Reference: `Docs/Refactoring.md` for full analysis of each issue.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Task 13 — Extract sub-components from large frontend pages
|
### Task 13 — Extract sub-components from large frontend pages (✅ completed)
|
||||||
|
|
||||||
**Priority**: Low
|
**Priority**: Low
|
||||||
**Refactoring ref**: Refactoring.md §11
|
**Refactoring ref**: Refactoring.md §11
|
||||||
|
|||||||
105
frontend/src/components/blocklist/BlocklistImportLogSection.tsx
Normal file
105
frontend/src/components/blocklist/BlocklistImportLogSection.tsx
Normal 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
175
frontend/src/components/blocklist/BlocklistScheduleSection.tsx
Normal 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
392
frontend/src/components/blocklist/BlocklistSourcesSection.tsx
Normal 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
62
frontend/src/components/blocklist/blocklistStyles.ts
Normal 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 },
|
||||||
|
});
|
||||||
@@ -115,7 +115,7 @@ const useStyles = makeStyles({
|
|||||||
/** A row item augmented with an `onUnban` callback for the row action. */
|
/** A row item augmented with an `onUnban` callback for the row action. */
|
||||||
interface BanRow {
|
interface BanRow {
|
||||||
ban: ActiveBan;
|
ban: ActiveBan;
|
||||||
onUnban: (ip: string) => void;
|
onUnban: (ip: string) => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const columns: TableColumnDefinition<BanRow>[] = [
|
const columns: TableColumnDefinition<BanRow>[] = [
|
||||||
@@ -168,9 +168,7 @@ const columns: TableColumnDefinition<BanRow>[] = [
|
|||||||
size="small"
|
size="small"
|
||||||
appearance="subtle"
|
appearance="subtle"
|
||||||
icon={<DismissRegular />}
|
icon={<DismissRegular />}
|
||||||
onClick={() => {
|
onClick={() => { void onUnban(ban.ip); }}
|
||||||
onUnban(ban.ip);
|
|
||||||
}}
|
|
||||||
aria-label={`Unban ${ban.ip}`}
|
aria-label={`Unban ${ban.ip}`}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@@ -195,8 +193,8 @@ export interface BannedIpsSectionProps {
|
|||||||
onSearch: (term: string) => void;
|
onSearch: (term: string) => void;
|
||||||
onPageChange: (page: number) => void;
|
onPageChange: (page: number) => void;
|
||||||
onPageSizeChange: (size: number) => void;
|
onPageSizeChange: (size: number) => void;
|
||||||
onRefresh: () => void;
|
onRefresh: () => Promise<void>;
|
||||||
onUnban: (ip: string) => void;
|
onUnban: (ip: string) => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@@ -247,7 +245,7 @@ export function BannedIpsSection({
|
|||||||
size="small"
|
size="small"
|
||||||
appearance="subtle"
|
appearance="subtle"
|
||||||
icon={<ArrowClockwiseRegular />}
|
icon={<ArrowClockwiseRegular />}
|
||||||
onClick={onRefresh}
|
onClick={() => { void onRefresh(); }}
|
||||||
aria-label="Refresh banned IPs"
|
aria-label="Refresh banned IPs"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ export function useConfigItem<T, U>(
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refresh();
|
refresh();
|
||||||
|
|
||||||
return () => {
|
return (): void => {
|
||||||
abortRef.current?.abort();
|
abortRef.current?.abort();
|
||||||
};
|
};
|
||||||
}, [refresh]);
|
}, [refresh]);
|
||||||
|
|||||||
@@ -1,314 +1,18 @@
|
|||||||
/**
|
/**
|
||||||
* BlocklistsPage — external IP blocklist source management.
|
* BlocklistsPage — external IP blocklist source management.
|
||||||
*
|
*
|
||||||
* Provides three sections:
|
* Responsible for composition of sources, schedule, and import log 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 { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import {
|
import { Button, MessageBar, MessageBarBody, Text } from "@fluentui/react-components";
|
||||||
Badge,
|
import { useBlocklistStyles } from "../theme/commonStyles";
|
||||||
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 { useCommonSectionStyles } from "../theme/commonStyles";
|
|
||||||
import {
|
|
||||||
AddRegular,
|
|
||||||
ArrowClockwiseRegular,
|
|
||||||
DeleteRegular,
|
|
||||||
EditRegular,
|
|
||||||
EyeRegular,
|
|
||||||
PlayRegular,
|
|
||||||
} from "@fluentui/react-icons";
|
|
||||||
import {
|
|
||||||
useBlocklists,
|
|
||||||
useImportLog,
|
|
||||||
useRunImport,
|
|
||||||
useSchedule,
|
|
||||||
} from "../hooks/useBlocklist";
|
|
||||||
import type {
|
|
||||||
BlocklistSource,
|
|
||||||
ImportRunResult,
|
|
||||||
PreviewResponse,
|
|
||||||
ScheduleConfig,
|
|
||||||
ScheduleFrequency,
|
|
||||||
} from "../types/blocklist";
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
import { BlocklistSourcesSection } from "../components/blocklist/BlocklistSourcesSection";
|
||||||
// Styles
|
import { BlocklistScheduleSection } from "../components/blocklist/BlocklistScheduleSection";
|
||||||
// ---------------------------------------------------------------------------
|
import { BlocklistImportLogSection } from "../components/blocklist/BlocklistImportLogSection";
|
||||||
|
import { useRunImport } from "../hooks/useBlocklist";
|
||||||
const useStyles = makeStyles({
|
import type { ImportRunResult } from "../types/blocklist";
|
||||||
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 },
|
|
||||||
});
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// 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;
|
|
||||||
fetchPreview: (id: number) => Promise<PreviewResponse>;
|
|
||||||
}
|
|
||||||
|
|
||||||
function PreviewDialog({ open, source, onClose, fetchPreview }: 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);
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Import result dialog
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
interface ImportResultDialogProps {
|
interface ImportResultDialogProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -317,595 +21,29 @@ interface ImportResultDialogProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ImportResultDialog({ open, result, onClose }: ImportResultDialogProps): React.JSX.Element {
|
function ImportResultDialog({ open, result, onClose }: ImportResultDialogProps): React.JSX.Element {
|
||||||
const styles = useStyles();
|
if (!open || !result) return <></>;
|
||||||
if (!result) return <></>;
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<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 }}>
|
||||||
open={open}
|
<div style={{ background: "white", padding: "24px", borderRadius: "8px", maxWidth: "520px", minWidth: "300px" }}>
|
||||||
onOpenChange={(_ev, d) => {
|
<Text as="h2" size={500} weight="semibold">
|
||||||
if (!d.open) onClose();
|
Import Complete
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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 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>
|
</Text>
|
||||||
<div style={{ display: "flex", gap: "8px" }}>
|
<Text size={200} style={{ marginTop: "12px" }}>
|
||||||
<Button
|
Total imported: {result.total_imported} | Skipped: {result.total_skipped} | Sources with errors: {result.errors_count}
|
||||||
icon={<PlayRegular />}
|
</Text>
|
||||||
appearance="secondary"
|
<div style={{ marginTop: "16px", textAlign: "right" }}>
|
||||||
onClick={onRunImport}
|
<Button appearance="primary" onClick={onClose}>
|
||||||
disabled={runImportRunning}
|
Close
|
||||||
>
|
|
||||||
{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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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 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);
|
|
||||||
|
|
||||||
// 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={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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Import log section
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
function ImportLogSection(): React.JSX.Element {
|
|
||||||
const styles = useStyles();
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Main page
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
export function BlocklistsPage(): React.JSX.Element {
|
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 { running, lastResult, error: importError, runNow } = useRunImport();
|
||||||
const [importResultOpen, setImportResultOpen] = useState(false);
|
const [importResultOpen, setImportResultOpen] = useState(false);
|
||||||
|
|
||||||
@@ -927,18 +65,15 @@ export function BlocklistsPage(): React.JSX.Element {
|
|||||||
</MessageBar>
|
</MessageBar>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<SourcesSection onRunImport={handleRunImport} runImportRunning={running} />
|
<BlocklistSourcesSection onRunImport={handleRunImport} runImportRunning={running} />
|
||||||
<ScheduleSection onRunImport={handleRunImport} runImportRunning={running} />
|
<BlocklistScheduleSection onRunImport={handleRunImport} runImportRunning={running} />
|
||||||
<ImportLogSection />
|
<BlocklistImportLogSection />
|
||||||
|
|
||||||
<ImportResultDialog
|
<ImportResultDialog
|
||||||
open={importResultOpen}
|
open={importResultOpen}
|
||||||
result={lastResult}
|
result={lastResult}
|
||||||
onClose={() => {
|
onClose={() => { setImportResultOpen(false); }}
|
||||||
setImportResultOpen(false);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user