Dynamic ARP table (#232)

This pull request introduces a mechanism to dynamically update the ARP
table in the UI when changes occur in the underlying data model. The key
changes include adding a listener for ARP table updates, implementing a
refresh method in the ARP table UI component, and integrating these
updates into the `DeviceInfo` class.

Author: pgallino

src/graphics/renderables/arp_table.ts

@@ -173,6 +173,16 @@ export class ArpTable {
 
     return { onEdit, onRegenerate, onDelete };
   }
+
+  refreshTable(): void {
+    const updatedEntries = this.props.viewgraph
+      .getDataGraph()
+      .getArpTable(this.props.deviceId);
+
+    const updatedRows = updatedEntries.map((entry) => [entry.ip, entry.mac]);
+
+    this.updateRows(updatedRows);
+  }
 }
 
 function isValidMAC(mac: string): boolean {

src/graphics/renderables/device_info.ts

@@ -16,6 +16,7 @@ import { ProgressBar } from "../basic_components/progress_bar";
 import { LabeledProgressBar } from "../components/labeled_progress_bar";
 import { ArpTable } from "./arp_table";
 import { Layer } from "../../types/layer";
+import { DataNetworkDevice } from "../../types/data-devices";
 
 export class DeviceInfo extends BaseInfo {
   readonly device: ViewDevice;
@@ -157,6 +158,18 @@ export class DeviceInfo extends BaseInfo {
     });
 
     this.inputFields.push(arpTable.toHTML());
+
+    const dataDevice = viewgraph.getDataGraph().getDevice(deviceId);
+
+    if (dataDevice instanceof DataNetworkDevice) {
+      // Suscribe to ARP table changes
+      dataDevice.setArpTableChangeListener(() => {
+        // update the ARP table in the UI
+        arpTable.refreshTable();
+      });
+    } else {
+      console.warn(`Device with ID ${deviceId} is not a DataNetworkDevice.`);
+    }
   }
 }
 

src/types/data-devices/dNetworkDevice.ts

@@ -7,6 +7,7 @@ export abstract class DataNetworkDevice extends DataDevice {
   ip: IpAddress;
   ipMask: IpAddress;
   arpTable: Map<string, string>;
+  private arpTableChangeListener: (() => void) | null = null;
 
   constructor(graphData: NetworkDataNode, datagraph: DataGraph) {
     super(graphData, datagraph);
@@ -17,8 +18,21 @@ export abstract class DataNetworkDevice extends DataDevice {
 
   abstract receiveDatagram(datagram: IPv4Packet): void;
 
-  updateArpTable(mac: MacAddress, ip: IpAddress) {
+  /**
+   * Update the ARP table and notify the listener.
+   */
+  updateArpTable(mac: MacAddress, ip: IpAddress): void {
     this.arpTable.set(ip.toString(), mac.toString());
+    if (this.arpTableChangeListener) {
+      this.arpTableChangeListener(); // Notify the listener
+    }
+  }
+
+  /**
+   * Set the listener for ARP table changes.
+   */
+  setArpTableChangeListener(listener: () => void): void {
+    this.arpTableChangeListener = listener;
   }
 
   resolveAddress(ip: IpAddress): MacAddress {