Move DHCP component to a more logical location

2024-01-04 10:19:42 +01:00
parent fdd005a3ec
commit baa0adf529
2 changed files with 6 additions and 6 deletions
--- a/virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx
+++ b/virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx
@ -0,0 +1,141 @@
+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>
+  );
+}