feat: support changing IP & MAC of each interface

src/graphics/renderables/device_info.ts

@@ -19,9 +19,11 @@ import { Layer } from "../../types/layer";
 import { DataNetworkDevice, DataSwitch } from "../../types/data-devices";
 import { ForwardingTable } from "./forwarding_table";
 import { getRoutingTable } from "../../types/network-modules/tables/routing_table";
-import { ToggleInfo } from "../components/toggle_info";
 import { getArpTable } from "../../types/network-modules/tables/arp_table";
 import { getForwardingTable } from "../../types/network-modules/tables/forwarding_table";
+import { EditableParameter } from "../basic_components/parameter_editor";
+import { IpAddress } from "../../packets/ip";
+import { MacAddress } from "../../packets/ethernet";
 
 export class DeviceInfo extends BaseInfo {
   readonly device: ViewDevice;
@@ -90,35 +92,38 @@ export class DeviceInfo extends BaseInfo {
     const showIp = this.device.getType() !== DeviceType.Switch;
     const showMac = layer === Layer.Link;
 
-    const fields: { key: string; value: string; tooltip: string }[] = [];
+    const fields: EditableParameter[] = [];
 
     if (showIp) {
       this.device.interfaces.forEach((iface) => {
         fields.push({
-          key: TOOLTIP_KEYS.IP_ADDRESS + (iface.name ? ` (${iface.name})` : ""),
-          value: iface.ip.toString(),
-          tooltip: TOOLTIP_KEYS.IP_ADDRESS,
+          label:
+            TOOLTIP_KEYS.IP_ADDRESS + (iface.name ? ` (${iface.name})` : ""),
+          initialValue: iface.ip.toString(),
+          onChange: (newValue: string) => {
+            const ip = IpAddress.parse(newValue);
+            iface.ip = ip;
+            this.device.setInterface(iface);
+          },
         });
       });
     }
     if (showMac) {
       this.device.interfaces.forEach((iface) => {
         fields.push({
-          key:
+          label:
             TOOLTIP_KEYS.MAC_ADDRESS + (iface.name ? ` (${iface.name})` : ""),
-          value: iface.mac.toString(),
-          tooltip: TOOLTIP_KEYS.MAC_ADDRESS,
+          initialValue: iface.mac.toCompressedString(),
+          onChange: (newValue: string) => {
+            const mac = MacAddress.parse(newValue);
+            iface.mac = mac;
+            this.device.setInterface(iface);
+          },
         });
       });
     }
 
-    const toggleInfo = new ToggleInfo({
-      title: "Interfaces",
-      fields,
-      toggleButtonText: { on: "Hide Interfaces", off: "Show Interfaces" },
-    });
-
-    this.inputFields.push(toggleInfo.toHTML());
+    this.addParameterGroup("Interfaces", "Show/Hide interfaces", fields);
   }
 
   addProgramRunner(runner: ProgramRunner, programs: ProgramInfo[]): void {
@@ -164,7 +169,6 @@ export class DeviceInfo extends BaseInfo {
       parameters,
     );
     this.inputFields.push(parameterEditor.toHTML());
-    this.addDivider();
   }
 
   /**

src/packets/ethernet.ts

@@ -37,6 +37,10 @@ export class MacAddress {
   static parse(addrString: string): MacAddress {
     const octets = new Uint8Array(6);
     addrString.split(":").forEach((octet, i) => {
+      if (octet === "") {
+        octets[i] = 0;
+        return;
+      }
       const octetInt = parseInt(octet, 16);
       if (isNaN(octetInt) || octetInt < 0 || octetInt > 255) {
         throw new Error(`Invalid MAC address: ${addrString}`);

src/styles/parameter_editor.css

@@ -31,7 +31,7 @@
   text-align: center;
   font-size: 0.9rem; /* Smaller font size */
   border-radius: 0.5rem;
-  width: 80px; /* Fixed width for the input */
+  width: 120px; /* Fixed width for the input */
   box-sizing: border-box;
   transition:
     background-color 0.3s ease,

src/types/view-devices/vDevice.ts

@@ -304,6 +304,23 @@ export abstract class ViewDevice extends Container {
     return { x: this.x, y: this.y };
   }
 
+  setInterface(setIface: NetworkInterface) {
+    this.viewgraph.getDataGraph().modifyDevice(this.id, (device) => {
+      if (device) {
+        device.interfaces = device.interfaces.map((iface) => {
+          if (iface.name === setIface.name) {
+            return {
+              ...iface,
+              mac: setIface.mac,
+              ip: setIface.ip ? setIface.ip : iface.ip,
+            };
+          }
+          return iface;
+        });
+      }
+    });
+  }
+
   delete(): RemovedNodeData {
     const deviceData = this.viewgraph.removeDevice(this.id);
     console.log(`Device ${this.id} deleted`);

src/types/view-devices/vRouter.ts

@@ -97,6 +97,7 @@ export class ViewRouter extends ViewNetworkDevice {
         },
       ],
     );
+    info.addDivider();
 
     info.addRoutingTable(this.viewgraph, this.id);