142 lines
3.4 KiB
TypeScript
142 lines
3.4 KiB
TypeScript
import { mdiIp } from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
import {
|
|
Avatar,
|
|
Button,
|
|
IconButton,
|
|
ListItem,
|
|
ListItemAvatar,
|
|
ListItemText,
|
|
Paper,
|
|
Tooltip,
|
|
} from "@mui/material";
|
|
import { DHCPConfig, DHCPHost } from "../../api/NetworksApi";
|
|
import { ServerApi } from "../../api/ServerApi";
|
|
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
|
|
import { IPInput } from "./IPInput";
|
|
import { MACInput } from "./MACInput";
|
|
import { TextInput } from "./TextInput";
|
|
|
|
export function NetDHCPHostReservations(p: {
|
|
editable: boolean;
|
|
dhcp: DHCPConfig;
|
|
version: 4 | 6;
|
|
onChange?: (d: DHCPConfig) => void;
|
|
}): React.ReactElement {
|
|
const addHost = () => {
|
|
p.dhcp.hosts.push({
|
|
ip: p.version === 4 ? "192.168.1.30" : "fd00::b200",
|
|
name: "host",
|
|
mac: p.version === 4 ? "00:00:00:00:00:00" : undefined,
|
|
});
|
|
p.onChange?.(p.dhcp);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{p.dhcp.hosts.map((h, num) => (
|
|
<HostReservationWidget
|
|
key={num}
|
|
{...p}
|
|
onChange={() => {
|
|
p.onChange?.(p.dhcp);
|
|
}}
|
|
host={h}
|
|
onRemove={() => {
|
|
p.dhcp.hosts.splice(num, 1);
|
|
p.onChange?.(p.dhcp);
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{p.editable && (
|
|
<Button onClick={addHost}>Add new host reservation</Button>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function HostReservationWidget(p: {
|
|
editable: boolean;
|
|
host: DHCPHost;
|
|
version: 4 | 6;
|
|
onChange: () => void;
|
|
onRemove: () => void;
|
|
}): React.ReactElement {
|
|
const confirm = useConfirm();
|
|
const deleteReservation = async () => {
|
|
if (
|
|
!(await confirm("Do you really want to remove this host IP reservation?"))
|
|
)
|
|
return;
|
|
|
|
p.onRemove();
|
|
};
|
|
|
|
return (
|
|
<Paper elevation={3} style={{ padding: "20px", marginBottom: "20px" }}>
|
|
<ListItem
|
|
secondaryAction={
|
|
p.editable && (
|
|
<IconButton
|
|
edge="end"
|
|
aria-label="remove network"
|
|
onClick={deleteReservation}
|
|
>
|
|
<Tooltip title="Remove host IP allocation">
|
|
<DeleteIcon />
|
|
</Tooltip>
|
|
</IconButton>
|
|
)
|
|
}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar>
|
|
<Icon path={mdiIp} />
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={
|
|
<TextInput
|
|
editable={p.editable}
|
|
label="Host name"
|
|
value={p.host.name}
|
|
onValueChange={(v) => {
|
|
p.host.name = v!;
|
|
p.onChange();
|
|
}}
|
|
type="text"
|
|
size={ServerApi.Config.constraints.dhcp_reservation_host_name}
|
|
/>
|
|
}
|
|
/>
|
|
</ListItem>
|
|
<div style={{ marginLeft: "70px" }}>
|
|
{p.version === 4 && (
|
|
<MACInput
|
|
editable={p.editable}
|
|
label="MAC Address"
|
|
value={p.host.mac}
|
|
onValueChange={(v) => {
|
|
p.host.mac = v!;
|
|
p.onChange?.();
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<IPInput
|
|
editable={p.editable}
|
|
label="IP address"
|
|
version={p.version}
|
|
value={p.host.ip}
|
|
onValueChange={(v) => {
|
|
p.host.ip = v!;
|
|
p.onChange?.();
|
|
}}
|
|
/>
|
|
</div>
|
|
</Paper>
|
|
);
|
|
}
|