Support ARP protocol (lightly) (#216)

## Description
This pr add support for using ARP protocol in simulatior. Although this
is a more lightfull version of the protocol.
First of all, as LANs are not implemented, there’s no limit for a device
to send an _ARP request_ to, but only switches can propagate ARP
packets. This means that if a host or a router receive an ARP packet
which wasn’t meant for it, it will discard it. Even routers, which in
reality have the ability to, either resolve the address requesting or to
forward the packet to the corresponding device, as long as the device
corresponds to the same LAN.
Also, every device _ARP table_ is authomatically completed as the device
connects to other devices. This will simplify the UX, as user will not
have to see how the protocol works each time a recently device sends a
packet to another. User will be able to see _ARP request_ and _responds_
packets by running the ARP program. ARP table entries can be deleted or
modified manually by the user.

## Implementation details
### ARP table
The tables are automatically populated each time a device is added to
the network. Adding each entry to the new device's table and updating
the corresponding entries in all existing devices would have a time
complexity of O(n). To avoid this cost, the entries in the table (which
is implemented as a `Map` in the code) are managed as follows:

**(a)** If there is an entry with the device's IP address:

- **(i)** If the `mac` field is an empty string, this indicates that the
user manually deleted the entry. In this case, it is treated as if the
entry does not exist in the ARP table, and the IP address cannot be
resolved.
- **(ii)** If the `mac` field is a non-empty string (presumably a MAC
address), the entry was modified at some point—either manually by the
user or via an ARP Request tool. In both cases, this entry is used to
resolve the IP address.

**(b)** If there is no entry with the device's IP address:
This means the user has never modified the IP entry, either manually or
through an ARP Request. We assume the entry exists and use the viewgraph
to locate the device associated with the IP and, in turn, find its MAC
address.

From the user's perspective, the table will appear exactly as it would
in a real-world scenario.

---------

Co-authored-by: Pedro Gallino <[email protected]>
Co-authored-by: Manuel Pol <[email protected]>

Author: Manuel-Pol

src/graphics/renderables/arp_table.ts

@@ -0,0 +1,185 @@
+import { DeviceId } from "../../types/graphs/datagraph";
+import { ViewGraph } from "../../types/graphs/viewgraph";
+import { ALERT_MESSAGES } from "../../utils/constants/alert_constants";
+import { CSS_CLASSES } from "../../utils/constants/css_constants";
+import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
+import { Button } from "../basic_components/button";
+import { Table } from "../basic_components/table";
+import { ToggleButton } from "../basic_components/toggle_button";
+import { showError, showSuccess } from "./alert_manager";
+
+export interface ArpTableProps {
+  rows: string[][]; // Rows for the table
+  viewgraph: ViewGraph; // ViewGraph instance for callbacks
+  deviceId: DeviceId; // Device ID for callbacks
+}
+
+export class ArpTable {
+  private container: HTMLElement;
+  private table: Table;
+  private toggleButton: ToggleButton;
+
+  constructor(private props: ArpTableProps) {
+    this.container = document.createElement("div");
+    this.container.className = CSS_CLASSES.ROUTING_TABLE_CONTAINER;
+
+    const { onEdit, onRegenerate, onDelete } = this.setArpTableCallbacks();
+
+    // Create the regenerate button
+    const regenerateButton = this.createRegenerateButton(onRegenerate);
+
+    const headers = {
+      [TOOLTIP_KEYS.IP]: TOOLTIP_KEYS.IP,
+      [TOOLTIP_KEYS.MAC_ADDRESS]: TOOLTIP_KEYS.MAC_ADDRESS,
+      [TOOLTIP_KEYS.REGENERATE]: regenerateButton, // Add the regenerate button to the header
+    };
+
+    this.table = new Table({
+      headers: headers,
+      fieldsPerRow: 2, // IP and MAC
+      rows: props.rows,
+      editableColumns: [false, true], // Make all columns non-editable
+      onEdit: onEdit,
+      onDelete: onDelete,
+      tableClasses: [CSS_CLASSES.RIGHT_BAR_TABLE],
+    });
+
+    this.toggleButton = new ToggleButton({
+      text: TOOLTIP_KEYS.ARP_TABLE,
+      className: CSS_CLASSES.RIGHT_BAR_TOGGLE_BUTTON,
+      onToggle: (isToggled) => {
+        const tableElement = this.table.toHTML();
+        tableElement.style.display = isToggled ? "block" : "none";
+      },
+      tooltip: TOOLTIP_KEYS.ARP_TABLE,
+    });
+
+    // Initially hide the table
+    const tableElement = this.table.toHTML();
+    tableElement.style.display = "none";
+
+    this.initialize();
+  }
+
+  private initialize(): void {
+    this.container.appendChild(this.toggleButton.toHTML());
+    this.container.appendChild(this.table.toHTML());
+  }
+
+  toHTML(): HTMLElement {
+    return this.container;
+  }
+
+  updateRows(newRows: string[][]): void {
+    this.table.updateRows(newRows); // Update the table with new rows
+  }
+
+  // Function to create the regenerate button
+  private createRegenerateButton(
+    onRegenerateCallback: () => void,
+  ): HTMLButtonElement {
+    const regenerateButton = new Button({
+      text: "🔄",
+      classList: [CSS_CLASSES.REGENERATE_BUTTON],
+      onClick: onRegenerateCallback,
+    });
+
+    return regenerateButton.toHTML();
+  }
+
+  private OnRegenerate(): void {
+    const dataGraph = this.props.viewgraph.getDataGraph();
+
+    dataGraph.clearArpTable(this.props.deviceId);
+
+    const newTableData = dataGraph.getArpTable(this.props.deviceId);
+
+    if (!newTableData || newTableData.length === 0) {
+      console.warn("Failed to regenerate ARP table.");
+      showError(ALERT_MESSAGES.ARP_TABLE_REGENERATE_FAILED);
+      return;
+    }
+
+    // Convert ARP table entries to rows
+    const newRows = newTableData.map((entry) => [entry.ip, entry.mac]);
+
+    this.updateRows(newRows);
+
+    showSuccess(ALERT_MESSAGES.ARP_TABLE_REGENERATED);
+  }
+
+  private setArpTableCallbacks() {
+    const onDelete = (row: number) => {
+      // Obtener la tabla ARP actual
+      const arpTable = this.props.viewgraph
+        .getDataGraph()
+        .getArpTable(this.props.deviceId);
+
+      // Validar que el índice es válido
+      if (row < 0 || row >= arpTable.length) {
+        console.warn(`Invalid row index: ${row}`);
+        return false;
+      }
+
+      // Obtener la IP correspondiente a la fila
+      const ip = arpTable[row].ip;
+
+      // Eliminar la entrada de la tabla ARP usando la IP
+      this.props.viewgraph
+        .getDataGraph()
+        .removeArpTableEntry(this.props.deviceId, ip);
+
+      return true;
+    };
+
+    const onRegenerate = () => {
+      console.log("Regenerating ARP table...");
+      this.OnRegenerate();
+    };
+
+    const onEdit = (row: number, _col: number, newValue: string) => {
+      const isValidMac = isValidMAC(newValue);
+
+      if (!isValidMac) {
+        console.warn(`Invalid value: ${newValue}`);
+        return false;
+      }
+
+      // Obtener la tabla ARP actual
+      const arpTable = this.props.viewgraph
+        .getDataGraph()
+        .getArpTable(this.props.deviceId);
+
+      // Validar que el índice es válido
+      if (row < 0 || row >= arpTable.length) {
+        console.warn(`Invalid row index: ${row}`);
+        return false;
+      }
+
+      // Obtener la IP correspondiente a la fila
+      const ip = arpTable[row].ip;
+
+      // Update the ARP table entry
+      this.props.viewgraph
+        .getDataGraph()
+        .saveARPTManualChange(this.props.deviceId, ip, newValue);
+
+      return true;
+    };
+
+    return { onEdit, onRegenerate, onDelete };
+  }
+}
+
+function isValidMAC(mac: string): boolean {
+  // Expresión regular para validar direcciones MAC en formato estándar (XX:XX:XX:XX:XX:XX)
+  const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
+
+  const result = macRegex.test(mac);
+  // Verificar si la dirección MAC coincide con el formato esperado
+  if (!result) {
+    showError(ALERT_MESSAGES.INVALID_MAC);
+  }
+
+  return result;
+}

src/graphics/renderables/device_info.ts

@@ -14,6 +14,7 @@ import { CSS_CLASSES } from "../../utils/constants/css_constants";
 import { BaseInfo } from "./base_info";
 import { ProgressBar } from "../basic_components/progress_bar";
 import { LabeledProgressBar } from "../components/labeled_progress_bar";
+import { ArpTable } from "./arp_table";
 import { Layer } from "../../types/layer";
 
 export class DeviceInfo extends BaseInfo {
@@ -96,6 +97,8 @@ export class DeviceInfo extends BaseInfo {
     });
 
     this.inputFields.push(routingTable.toHTML());
+
+    this.addDivider();
   }
 
   addEmptySpace(): void {
@@ -117,6 +120,7 @@ export class DeviceInfo extends BaseInfo {
       parameters,
     );
     this.inputFields.push(parameterEditor.toHTML());
+    this.addDivider();
   }
 
   /**
@@ -140,6 +144,20 @@ export class DeviceInfo extends BaseInfo {
     );
     this.inputFields.push(labeledProgressBar.toHTML());
   }
+
+  addARPTable(viewgraph: ViewGraph, deviceId: number): void {
+    const entries = viewgraph.getArpTable(deviceId);
+
+    const rows = entries.map((entry) => [entry.ip, entry.mac]);
+
+    const arpTable = new ArpTable({
+      rows,
+      viewgraph,
+      deviceId,
+    });
+
+    this.inputFields.push(arpTable.toHTML());
+  }
 }
 
 function getTypeName(device: ViewDevice): string {

src/graphics/renderables/program_info.ts

@@ -1,5 +1,6 @@
 import { DeviceId } from "../../types/graphs/datagraph";
 import { ViewGraph } from "../../types/graphs/viewgraph";
+import { DeviceType } from "../../types/view-devices/vDevice";
 import { Layer, layerIncluded } from "../../types/layer";
 import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
 import { Dropdown } from "../basic_components/dropdown";
@@ -29,6 +30,13 @@ export class ProgramInfo implements Renderable {
     this.withDropdown(TOOLTIP_KEYS.DESTINATION, devices);
   }
 
+  withDestinationIpDropdown(viewgraph: ViewGraph, srcId: DeviceId) {
+    this.withDropdown(
+      TOOLTIP_KEYS.IP_REQUEST,
+      otherDevicesIp(viewgraph, srcId),
+    );
+  }
+
   withDropdown(name: string, options: { value: string; text: string }[]) {
     const dropdown = new Dropdown({
       default_text: name,
@@ -62,3 +70,22 @@ function otherDevices(viewgraph: ViewGraph, srcId: DeviceId) {
     .filter((id) => id !== srcId)
     .map((id) => ({ value: id.toString(), text: `Device ${id}`, id }));
 }
+
+function otherDevicesIp(viewgraph: ViewGraph, srcId: DeviceId) {
+  return viewgraph
+    .getDevices()
+    .filter(
+      (device) =>
+        device.visible &&
+        device.getType() !== DeviceType.Switch &&
+        device.id !== srcId,
+    )
+    .map((device) => {
+      if ("ip" in device) {
+        const ipString = device.ip.toString();
+        return { value: ipString, text: `${ipString} (Device ${device.id})` };
+      }
+      // Shouldn’t get here
+      return { value: "", text: "" };
+    });
+}

src/graphics/renderables/program_runner_info.ts

@@ -83,7 +83,6 @@ export class ProgramRunnerInfo implements Renderable {
   private addRunningProgramsList() {
     this.runningProgramsTable = this.generateProgramsTable();
     this.inputFields.push(this.runningProgramsTable);
-    this.inputFields.push(document.createElement("br"));
   }
 
   private createProgramsTable(

src/graphics/renderables/routing_table.ts

@@ -124,7 +124,9 @@ export class RoutingTable {
       else if (col === ROUTER_CONSTANTS.INTERFACE_COL_INDEX)
         isValid = isValidInterface(newValue);
       if (isValid) {
-        viewgraph.getDataGraph().saveManualChange(deviceId, row, col, newValue);
+        viewgraph
+          .getDataGraph()
+          .saveRTManualChange(deviceId, row, col, newValue);
         showSuccess(ALERT_MESSAGES.ROUTING_TABLE_UPDATED);
       }
       return isValid;