Refactor frontend pages and config components into single-component files for Task 13
This commit is contained in:
179
frontend/src/pages/jails/BanUnbanForm.tsx
Normal file
179
frontend/src/pages/jails/BanUnbanForm.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Field,
|
||||
Input,
|
||||
MessageBar,
|
||||
MessageBarBody,
|
||||
Select,
|
||||
Text,
|
||||
tokens,
|
||||
} from "@fluentui/react-components";
|
||||
import { LockClosedRegular, LockOpenRegular } from "@fluentui/react-icons";
|
||||
import { useCommonSectionStyles } from "../../theme/commonStyles";
|
||||
import { useJailsPageStyles } from "./jailsPageStyles";
|
||||
import { ApiError } from "../../api/client";
|
||||
|
||||
interface BanUnbanFormProps {
|
||||
jailNames: string[];
|
||||
onBan: (jail: string, ip: string) => Promise<void>;
|
||||
onUnban: (ip: string, jail?: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export function BanUnbanForm({ jailNames, onBan, onUnban }: BanUnbanFormProps): React.JSX.Element {
|
||||
const styles = useJailsPageStyles();
|
||||
const sectionStyles = useCommonSectionStyles();
|
||||
const [banIpVal, setBanIpVal] = useState("");
|
||||
const [banJail, setBanJail] = useState("");
|
||||
const [unbanIpVal, setUnbanIpVal] = useState("");
|
||||
const [unbanJail, setUnbanJail] = useState("");
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [formSuccess, setFormSuccess] = useState<string | null>(null);
|
||||
|
||||
const handleBan = (): void => {
|
||||
setFormError(null);
|
||||
setFormSuccess(null);
|
||||
if (!banIpVal.trim() || !banJail) {
|
||||
setFormError("Both IP address and jail are required.");
|
||||
return;
|
||||
}
|
||||
onBan(banJail, banIpVal.trim())
|
||||
.then(() => {
|
||||
setFormSuccess(`${banIpVal.trim()} banned in ${banJail}.`);
|
||||
setBanIpVal("");
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
const msg =
|
||||
err instanceof ApiError
|
||||
? `${String(err.status)}: ${err.body}`
|
||||
: err instanceof Error
|
||||
? err.message
|
||||
: String(err);
|
||||
setFormError(msg);
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnban = (fromAllJails: boolean): void => {
|
||||
setFormError(null);
|
||||
setFormSuccess(null);
|
||||
if (!unbanIpVal.trim()) {
|
||||
setFormError("IP address is required.");
|
||||
return;
|
||||
}
|
||||
const jail = fromAllJails ? undefined : unbanJail || undefined;
|
||||
onUnban(unbanIpVal.trim(), jail)
|
||||
.then(() => {
|
||||
const scope = jail ?? "all jails";
|
||||
setFormSuccess(`${unbanIpVal.trim()} unbanned from ${scope}.`);
|
||||
setUnbanIpVal("");
|
||||
setUnbanJail("");
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
const msg =
|
||||
err instanceof ApiError
|
||||
? `${String(err.status)}: ${err.body}`
|
||||
: err instanceof Error
|
||||
? err.message
|
||||
: String(err);
|
||||
setFormError(msg);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={sectionStyles.section}>
|
||||
<div className={sectionStyles.sectionHeader}>
|
||||
<Text as="h2" size={500} weight="semibold">
|
||||
Ban / Unban IP
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{formError && (
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>{formError}</MessageBarBody>
|
||||
</MessageBar>
|
||||
)}
|
||||
{formSuccess && (
|
||||
<MessageBar intent="success">
|
||||
<MessageBarBody>{formSuccess}</MessageBarBody>
|
||||
</MessageBar>
|
||||
)}
|
||||
|
||||
<Text size={300} weight="semibold">
|
||||
Ban an IP
|
||||
</Text>
|
||||
<div className={styles.formRow}>
|
||||
<div className={styles.formField}>
|
||||
<Field label="IP Address">
|
||||
<Input
|
||||
placeholder="e.g. 192.168.1.100"
|
||||
value={banIpVal}
|
||||
onChange={(_, d) => {
|
||||
setBanIpVal(d.value);
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className={styles.formField}>
|
||||
<Field label="Jail">
|
||||
<Select
|
||||
value={banJail}
|
||||
onChange={(_, d) => {
|
||||
setBanJail(d.value);
|
||||
}}
|
||||
>
|
||||
<option value="">Select jail…</option>
|
||||
{jailNames.map((n) => (
|
||||
<option key={n} value={n}>
|
||||
{n}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Field>
|
||||
</div>
|
||||
<Button appearance="primary" icon={<LockClosedRegular />} onClick={handleBan}>
|
||||
Ban
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Text size={300} weight="semibold" style={{ marginTop: tokens.spacingVerticalS }}>
|
||||
Unban an IP
|
||||
</Text>
|
||||
<div className={styles.formRow}>
|
||||
<div className={styles.formField}>
|
||||
<Field label="IP Address">
|
||||
<Input
|
||||
placeholder="e.g. 192.168.1.100"
|
||||
value={unbanIpVal}
|
||||
onChange={(_, d) => {
|
||||
setUnbanIpVal(d.value);
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className={styles.formField}>
|
||||
<Field label="Jail (optional — leave blank for all)">
|
||||
<Select
|
||||
value={unbanJail}
|
||||
onChange={(_, d) => {
|
||||
setUnbanJail(d.value);
|
||||
}}
|
||||
>
|
||||
<option value="">All jails</option>
|
||||
{jailNames.map((n) => (
|
||||
<option key={n} value={n}>
|
||||
{n}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Field>
|
||||
</div>
|
||||
<Button appearance="secondary" icon={<LockOpenRegular />} onClick={() => { handleUnban(false); }}>
|
||||
Unban
|
||||
</Button>
|
||||
<Button appearance="outline" icon={<LockOpenRegular />} onClick={() => { handleUnban(true); }}>
|
||||
Unban from All Jails
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
123
frontend/src/pages/jails/IpLookupSection.tsx
Normal file
123
frontend/src/pages/jails/IpLookupSection.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Field,
|
||||
Input,
|
||||
MessageBar,
|
||||
MessageBarBody,
|
||||
Spinner,
|
||||
Text,
|
||||
} from "@fluentui/react-components";
|
||||
import { SearchRegular } from "@fluentui/react-icons";
|
||||
import { useCommonSectionStyles } from "../../theme/commonStyles";
|
||||
import { useJailsPageStyles } from "./jailsPageStyles";
|
||||
import { useIpLookup } from "../../hooks/useJails";
|
||||
|
||||
export function IpLookupSection(): React.JSX.Element {
|
||||
const styles = useJailsPageStyles();
|
||||
const sectionStyles = useCommonSectionStyles();
|
||||
const cardStyles = useCommonSectionStyles();
|
||||
const { result, loading, error, lookup, clear } = useIpLookup();
|
||||
const [inputVal, setInputVal] = useState("");
|
||||
|
||||
const handleLookup = (): void => {
|
||||
if (inputVal.trim()) {
|
||||
lookup(inputVal.trim());
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={sectionStyles.section}>
|
||||
<div className={sectionStyles.sectionHeader}>
|
||||
<Text as="h2" size={500} weight="semibold">
|
||||
IP Lookup
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className={styles.formRow}>
|
||||
<div className={styles.formField}>
|
||||
<Field label="IP Address">
|
||||
<Input
|
||||
placeholder="e.g. 1.2.3.4 or 2001:db8::1"
|
||||
value={inputVal}
|
||||
onChange={(_, d) => {
|
||||
setInputVal(d.value);
|
||||
clear();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleLookup();
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<Button
|
||||
appearance="primary"
|
||||
icon={loading ? <Spinner size="tiny" /> : <SearchRegular />}
|
||||
onClick={handleLookup}
|
||||
disabled={loading || !inputVal.trim()}
|
||||
>
|
||||
Look up
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>{error}</MessageBarBody>
|
||||
</MessageBar>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className={`${cardStyles.section} ${styles.lookupResult}`}>
|
||||
<div className={styles.lookupRow}>
|
||||
<Text className={styles.lookupLabel}>IP:</Text>
|
||||
<Text className={styles.mono}>{result.ip}</Text>
|
||||
</div>
|
||||
|
||||
<div className={styles.lookupRow}>
|
||||
<Text className={styles.lookupLabel}>Currently banned in:</Text>
|
||||
{result.currently_banned_in.length === 0 ? (
|
||||
<Badge appearance="tint" color="success">
|
||||
not banned
|
||||
</Badge>
|
||||
) : (
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
|
||||
{result.currently_banned_in.map((j) => (
|
||||
<Badge key={j} appearance="filled" color="danger">
|
||||
{j}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{result.geo && (
|
||||
<>
|
||||
{result.geo.country_name && (
|
||||
<div className={styles.lookupRow}>
|
||||
<Text className={styles.lookupLabel}>Country:</Text>
|
||||
<Text>
|
||||
{result.geo.country_name}
|
||||
{result.geo.country_code ? ` (${result.geo.country_code})` : ""}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
{result.geo.org && (
|
||||
<div className={styles.lookupRow}>
|
||||
<Text className={styles.lookupLabel}>Organisation:</Text>
|
||||
<Text>{result.geo.org}</Text>
|
||||
</div>
|
||||
)}
|
||||
{result.geo.asn && (
|
||||
<div className={styles.lookupRow}>
|
||||
<Text className={styles.lookupLabel}>ASN:</Text>
|
||||
<Text className={styles.mono}>{result.geo.asn}</Text>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
218
frontend/src/pages/jails/JailOverviewSection.tsx
Normal file
218
frontend/src/pages/jails/JailOverviewSection.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { formatSeconds } from "../../utils/formatDate";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
DataGrid,
|
||||
DataGridBody,
|
||||
DataGridCell,
|
||||
DataGridHeader,
|
||||
DataGridHeaderCell,
|
||||
DataGridRow,
|
||||
MessageBar,
|
||||
MessageBarBody,
|
||||
Spinner,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@fluentui/react-components";
|
||||
import {
|
||||
ArrowClockwiseRegular,
|
||||
ArrowSyncRegular,
|
||||
PauseRegular,
|
||||
PlayRegular,
|
||||
StopRegular,
|
||||
} from "@fluentui/react-icons";
|
||||
import { useCommonSectionStyles } from "../../theme/commonStyles";
|
||||
import { useJailsPageStyles } from "./jailsPageStyles";
|
||||
import { useJails } from "../../hooks/useJails";
|
||||
import type { JailSummary } from "../../types/jail";
|
||||
|
||||
const jailColumns = [
|
||||
{
|
||||
columnId: "name",
|
||||
renderHeaderCell: () => "Jail",
|
||||
renderCell: (j: JailSummary) => (
|
||||
<Link to={`/jails/${encodeURIComponent(j.name)}`} style={{ textDecoration: "none" }}>
|
||||
<Text style={{ fontFamily: "Consolas, 'Courier New', monospace", fontSize: "0.85rem" }}>
|
||||
{j.name}
|
||||
</Text>
|
||||
</Link>
|
||||
),
|
||||
compare: (a: JailSummary, b: JailSummary) => a.name.localeCompare(b.name),
|
||||
},
|
||||
{
|
||||
columnId: "status",
|
||||
renderHeaderCell: () => "Status",
|
||||
renderCell: (j: JailSummary) => {
|
||||
if (!j.running) return <Badge appearance="filled" color="danger">stopped</Badge>;
|
||||
if (j.idle) return <Badge appearance="filled" color="warning">idle</Badge>;
|
||||
return <Badge appearance="filled" color="success">running</Badge>;
|
||||
},
|
||||
compare: (a: JailSummary, b: JailSummary) => {
|
||||
if (a.running !== b.running) return a.running ? -1 : 1;
|
||||
if (a.idle !== b.idle) return a.idle ? 1 : -1;
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
{
|
||||
columnId: "backend",
|
||||
renderHeaderCell: () => "Backend",
|
||||
renderCell: (j: JailSummary) => <Text size={200}>{j.backend}</Text>,
|
||||
compare: (a: JailSummary, b: JailSummary) => a.backend.localeCompare(b.backend),
|
||||
},
|
||||
{
|
||||
columnId: "banned",
|
||||
renderHeaderCell: () => "Banned",
|
||||
renderCell: (j: JailSummary) => (
|
||||
<Text size={200}>{j.status ? String(j.status.currently_banned) : "—"}</Text>
|
||||
),
|
||||
compare: (a: JailSummary, b: JailSummary) => (a.status?.currently_banned ?? 0) - (b.status?.currently_banned ?? 0),
|
||||
},
|
||||
{
|
||||
columnId: "failed",
|
||||
renderHeaderCell: () => "Failed",
|
||||
renderCell: (j: JailSummary) => (
|
||||
<Text size={200}>{j.status ? String(j.status.currently_failed) : "—"}</Text>
|
||||
),
|
||||
compare: (a: JailSummary, b: JailSummary) => (a.status?.currently_failed ?? 0) - (b.status?.currently_failed ?? 0),
|
||||
},
|
||||
{
|
||||
columnId: "findTime",
|
||||
renderHeaderCell: () => "Find Time",
|
||||
renderCell: (j: JailSummary) => <Text size={200}>{formatSeconds(j.find_time)}</Text>,
|
||||
compare: (a: JailSummary, b: JailSummary) => a.find_time - b.find_time,
|
||||
},
|
||||
{
|
||||
columnId: "banTime",
|
||||
renderHeaderCell: () => "Ban Time",
|
||||
renderCell: (j: JailSummary) => <Text size={200}>{formatSeconds(j.ban_time)}</Text>,
|
||||
compare: (a: JailSummary, b: JailSummary) => a.ban_time - b.ban_time,
|
||||
},
|
||||
{
|
||||
columnId: "maxRetry",
|
||||
renderHeaderCell: () => "Max Retry",
|
||||
renderCell: (j: JailSummary) => <Text size={200}>{String(j.max_retry)}</Text>,
|
||||
compare: (a: JailSummary, b: JailSummary) => a.max_retry - b.max_retry,
|
||||
},
|
||||
];
|
||||
|
||||
export function JailOverviewSection(): React.JSX.Element {
|
||||
const styles = useJailsPageStyles();
|
||||
const sectionStyles = useCommonSectionStyles();
|
||||
const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
|
||||
const [opError, setOpError] = useState<string | null>(null);
|
||||
|
||||
const handle = (fn: () => Promise<void>): void => {
|
||||
setOpError(null);
|
||||
fn().catch((err: unknown) => {
|
||||
setOpError(err instanceof Error ? err.message : String(err));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={sectionStyles.section}>
|
||||
<div className={sectionStyles.sectionHeader}>
|
||||
<Text as="h2" size={500} weight="semibold">
|
||||
Jail Overview
|
||||
{total > 0 && (
|
||||
<Badge appearance="tint" style={{ marginLeft: "8px" }}>
|
||||
{String(total)}
|
||||
</Badge>
|
||||
)}
|
||||
</Text>
|
||||
<div className={styles.actionRow}>
|
||||
<Button
|
||||
size="small"
|
||||
appearance="subtle"
|
||||
icon={<ArrowSyncRegular />}
|
||||
onClick={() => { handle(reloadAll); }}
|
||||
>
|
||||
Reload All
|
||||
</Button>
|
||||
<Button size="small" appearance="subtle" icon={<ArrowClockwiseRegular />} onClick={refresh}>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{opError && (
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>{opError}</MessageBarBody>
|
||||
</MessageBar>
|
||||
)}
|
||||
{error && (
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>Failed to load jails: {error}</MessageBarBody>
|
||||
</MessageBar>
|
||||
)}
|
||||
|
||||
{loading && jails.length === 0 ? (
|
||||
<div className={styles.centred}>
|
||||
<Spinner label="Loading jails…" />
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.tableWrapper}>
|
||||
<DataGrid items={jails} columns={jailColumns} getRowId={(j: JailSummary) => j.name} focusMode="composite">
|
||||
<DataGridHeader>
|
||||
<DataGridRow>
|
||||
{({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
|
||||
</DataGridRow>
|
||||
</DataGridHeader>
|
||||
<DataGridBody<JailSummary>>
|
||||
{({ item }) => (
|
||||
<DataGridRow<JailSummary> key={item.name}>
|
||||
{({ renderCell, columnId }) => {
|
||||
if (columnId === "status") {
|
||||
return (
|
||||
<DataGridCell>
|
||||
<div style={{ display: "flex", gap: "6px", alignItems: "center" }}>
|
||||
{renderCell(item)}
|
||||
<Tooltip content={item.running ? "Stop jail" : "Start jail"} relationship="label">
|
||||
<Button
|
||||
size="small"
|
||||
appearance="subtle"
|
||||
icon={item.running ? <StopRegular /> : <PlayRegular />}
|
||||
onClick={() => {
|
||||
handle(async () => {
|
||||
if (item.running) await stopJail(item.name);
|
||||
else await startJail(item.name);
|
||||
});
|
||||
}}
|
||||
aria-label={item.running ? `Stop ${item.name}` : `Start ${item.name}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip content={item.idle ? "Resume from idle" : "Set idle"} relationship="label">
|
||||
<Button
|
||||
size="small"
|
||||
appearance="subtle"
|
||||
icon={<PauseRegular />}
|
||||
onClick={() => { handle(async () => setIdle(item.name, !item.idle)); }}
|
||||
disabled={!item.running}
|
||||
aria-label={`Toggle idle for ${item.name}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip content="Reload jail" relationship="label">
|
||||
<Button
|
||||
size="small"
|
||||
appearance="subtle"
|
||||
icon={<ArrowSyncRegular />}
|
||||
onClick={() => { handle(async () => reloadJail(item.name)); }}
|
||||
aria-label={`Reload ${item.name}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</DataGridCell>
|
||||
);
|
||||
}
|
||||
return <DataGridCell>{renderCell(item)}</DataGridCell>;
|
||||
}}
|
||||
</DataGridRow>
|
||||
)}
|
||||
</DataGridBody>
|
||||
</DataGrid>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
frontend/src/pages/jails/jailsPageStyles.ts
Normal file
46
frontend/src/pages/jails/jailsPageStyles.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useJailsPageStyles = makeStyles({
|
||||
root: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: tokens.spacingVerticalL,
|
||||
},
|
||||
tableWrapper: { overflowX: "auto" },
|
||||
centred: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: tokens.spacingVerticalXXL,
|
||||
},
|
||||
mono: {
|
||||
fontFamily: tokens.fontFamilyMonospace,
|
||||
fontSize: tokens.fontSizeBase200,
|
||||
},
|
||||
formRow: {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: tokens.spacingHorizontalM,
|
||||
alignItems: "flex-end",
|
||||
},
|
||||
formField: { minWidth: "180px", flexGrow: 1 },
|
||||
actionRow: {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: tokens.spacingHorizontalS,
|
||||
},
|
||||
lookupResult: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: tokens.spacingVerticalS,
|
||||
marginTop: tokens.spacingVerticalS,
|
||||
padding: tokens.spacingVerticalS,
|
||||
},
|
||||
lookupRow: {
|
||||
display: "flex",
|
||||
gap: tokens.spacingHorizontalM,
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
},
|
||||
lookupLabel: { fontWeight: tokens.fontWeightSemibold },
|
||||
});
|
||||
Reference in New Issue
Block a user