feat: add interface setters on edge (#203)

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

Author: MegaRedHand

src/graphics/basic_components/label.ts

@@ -6,6 +6,7 @@ export class Label {
   constructor(label: string, tooltip?: string, className?: string) {
     this.labelElement = document.createElement("label");
     this.labelElement.innerHTML = `<strong>${label}</strong>`; // Use innerHTML for consistency
+    this.labelElement.classList.add("label-dark");
 
     if (className) {
       this.labelElement.classList.add(className); // Add optional CSS class

src/graphics/renderables/edge_info.ts

@@ -5,6 +5,7 @@ import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
 import { Button } from "../basic_components/button";
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
 import { BaseInfo } from "./base_info";
+import { Dropdown } from "../basic_components/dropdown";
 
 export class EdgeInfo extends BaseInfo {
   readonly edge: Edge;
@@ -13,6 +14,7 @@ export class EdgeInfo extends BaseInfo {
     super(TOOLTIP_KEYS.EDGE_INFORMATION);
     this.edge = edge;
     this.addCommonInfoFields();
+    this.addInterfaceDropdowns();
   }
 
   protected addCommonInfoFields(): void {
@@ -83,4 +85,62 @@ export class EdgeInfo extends BaseInfo {
     // Add the button to the inputFields array
     this.inputFields.push(deleteEdgeButton.toHTML());
   }
+
+  protected addInterfaceDropdowns(): void {
+    const from = this.edge.data.from.id;
+    const to = this.edge.data.to.id;
+
+    // Dropdown for selecting the interface for "from" device
+    const fromIfaceDropdown = new Dropdown({
+      label: `Interface (Device ${from})`,
+      tooltip: TOOLTIP_KEYS.IFACE_EDITOR,
+      options: [
+        {
+          value: this.edge.data.from.iface.toString(),
+          text: `eth${this.edge.data.from.iface}`,
+        },
+        ...this.edge
+          .getDeviceFreeIfaces(from)
+          .filter((iface) => iface !== this.edge.data.from.iface)
+          .map((iface) => ({ value: iface.toString(), text: `eth${iface}` })),
+      ],
+      default_text: "Iface",
+      onchange: (value) => {
+        const iface = parseInt(value, 10);
+        this.edge.setInterface(from, iface);
+        console.log(`Updated interface for device ${from}: eth${iface}`);
+        this.edge.showInfo();
+      },
+    });
+
+    fromIfaceDropdown.setValue(this.edge.data.from.iface.toString());
+
+    // Dropdown for selecting the interface for "to" device
+    const toIfaceDropdown = new Dropdown({
+      label: `Interface (Device ${to})`,
+      tooltip: TOOLTIP_KEYS.IFACE_EDITOR,
+      options: [
+        {
+          value: this.edge.data.to.iface.toString(),
+          text: `eth${this.edge.data.to.iface}`,
+        },
+        ...this.edge
+          .getDeviceFreeIfaces(to)
+          .filter((iface) => iface !== this.edge.data.to.iface)
+          .map((iface) => ({ value: iface.toString(), text: `eth${iface}` })),
+      ],
+      default_text: "Iface",
+      onchange: (value) => {
+        const iface = parseInt(value, 10);
+        this.edge.setInterface(to, iface);
+        console.log(`Updated interface for device ${to}: eth${iface}`);
+        this.edge.showInfo();
+      },
+    });
+
+    toIfaceDropdown.setValue(this.edge.data.to.iface.toString());
+
+    // Add the dropdowns to the inputFields array
+    this.inputFields.push(fromIfaceDropdown.toHTML(), toIfaceDropdown.toHTML());
+  }
 }

src/styles/label.css

@@ -8,3 +8,7 @@
   text-align: center; /* Aligns the label text to the center */
   overflow: hidden; /* Hides text that doesn't fit */
 }
+
+.label-dark {
+  color: #2b2b2b;
+}

src/types/edge.ts

@@ -7,17 +7,25 @@ import { Colors, ZIndexLevels } from "../utils/utils";
 import { Packet } from "./packet";
 import { EdgeInfo } from "../graphics/renderables/edge_info";
 import { DataEdge, DeviceId } from "./graphs/datagraph";
+import { MacAddress } from "../packets/ethernet";
 
 export class Edge extends Graphics {
-  data: DataEdge;
+  private _data: DataEdge;
   private startPos: Point;
   private endPos: Point;
 
   viewgraph: ViewGraph;
 
+  // This is to always have the same data as the datagraph
+  get data(): DataEdge {
+    return this.viewgraph
+      .getDataGraph()
+      .getConnection(this._data.from.id, this._data.to.id);
+  }
+
   constructor(viewgraph: ViewGraph, edgeData: DataEdge) {
     super();
-    this.data = edgeData;
+    this._data = edgeData;
     this.viewgraph = viewgraph;
 
     this.eventMode = "static";
@@ -105,20 +113,9 @@ export class Edge extends Graphics {
     RightBar.getInstance().renderInfo(edgeInfo);
   }
 
-  // Method to delete the edge
-  delete() {
-    // Remove the edge from the viewgraph and datagraph
-    const n1 = this.data.from.id;
-    const n2 = this.data.to.id;
-    this.viewgraph.removeEdge(n1, n2);
-    console.log(`Edge ${n1},${n2} deleted.`);
-    this.destroy();
-  }
-
-  destroy(): DataEdge {
+  destroy(): void {
     deselectElement();
     super.destroy();
-    return this.data;
   }
 
   makeVisible() {
@@ -191,4 +188,39 @@ export class Edge extends Graphics {
 
     this.drawEdge(newStartPos, newEndPos, Colors.Lightblue);
   }
+
+  setInterface(deviceId: DeviceId, iface: number) {
+    if (this.data.from.id === deviceId) {
+      this.data.from.iface = iface;
+    } else {
+      this.data.to.iface = iface;
+    }
+    this.viewgraph.getDataGraph().regenerateAllRoutingTables();
+  }
+
+  setInterfaceMac(deviceId: DeviceId, mac: string): void {
+    let iface;
+    if (this.data.from.id === deviceId) {
+      iface = this.data.from.iface;
+    } else {
+      iface = this.data.to.iface;
+    }
+    const device = this.viewgraph.getDataGraph().getDevice(deviceId);
+
+    if (!device) {
+      console.error(`Device with ID ${deviceId} not found.`);
+      return;
+    }
+    device.interfaces[iface].mac = MacAddress.parse(mac);
+    console.log(
+      `Updated MAC address for device ${deviceId}, interface ${iface}: ${mac}`,
+    );
+  }
+
+  getDeviceFreeIfaces(deviceId: DeviceId): number[] {
+    const freeIfaces = this.viewgraph
+      .getDataGraph()
+      .getFreeInterfaces(deviceId);
+    return freeIfaces;
+  }
 }

src/types/graphs/datagraph.ts

@@ -165,7 +165,7 @@ export class DataGraph {
     const { id, vertex, edges } = removedData;
     this.deviceGraph.setVertex(id, vertex);
     edges.forEach((edge) => {
-      this.deviceGraph.setEdge(edge.from.id, edge.to.id, edge);
+      this.reAddEdge(edge);
     });
     this.notifyChanges();
     return id;
@@ -199,31 +199,60 @@ export class DataGraph {
     const { from, to } = edgeData;
     const n1Id = from.id;
     const n2Id = to.id;
+
     if (n1Id === n2Id) {
       console.warn(
         `Cannot create a connection between the same device (ID ${n1Id}).`,
       );
       return null;
     }
-    if (!this.deviceGraph.hasVertex(n1Id)) {
-      console.warn(`Device with ID ${n1Id} does not exist.`);
+
+    const device1 = this.getDevice(n1Id);
+    const device2 = this.getDevice(n2Id);
+
+    if (!device1 || !device2) {
+      console.warn(`One or both devices do not exist: ${n1Id}, ${n2Id}`);
       return null;
     }
-    if (!this.deviceGraph.hasVertex(n2Id)) {
-      console.warn(`Device with ID ${n2Id} does not exist.`);
-      return null;
+
+    // Check if the interfaces are already in use
+    const isIface1InUse =
+      this.getConnectionsInInterface(n1Id, from.iface)?.length > 0;
+    const isIface2InUse =
+      this.getConnectionsInInterface(n2Id, to.iface)?.length > 0;
+
+    // If interface 1 is in use, find the next free interface
+    if (isIface1InUse) {
+      const nextFreeIface1 = this.getNextFreeInterfaceNumber(device1);
+      if (nextFreeIface1 !== null) {
+        edgeData.from.iface = nextFreeIface1;
+      } else {
+        console.error(`No free interfaces available for device ${n1Id}.`);
+        return null;
+      }
+    }
+
+    // If interface 2 is in use, find the next free interface
+    if (isIface2InUse) {
+      const nextFreeIface2 = this.getNextFreeInterfaceNumber(device2);
+      if (nextFreeIface2 !== null) {
+        edgeData.to.iface = nextFreeIface2;
+      } else {
+        console.error(`No free interfaces available for device ${n2Id}.`);
+        return null;
+      }
     }
+
+    // Add the edge to the graph
     if (this.deviceGraph.hasEdge(n1Id, n2Id)) {
       console.warn(
         `Connection between ID ${n1Id} and ID ${n2Id} already exists.`,
       );
       return null;
     }
+
     this.deviceGraph.setEdge(n1Id, n2Id, edgeData);
 
-    console.log(
-      `Connection created between devices ID: ${n1Id} and ID: ${n2Id}`,
-    );
     this.notifyChanges();
     this.regenerateAllRoutingTables();
     return edgeData;
@@ -279,6 +308,23 @@ export class DataGraph {
     return null; // Return null if no free interface is found
   }
 
+  getFreeInterfaces(deviceId: DeviceId): number[] {
+    const device = this.getDevice(deviceId);
+    if (!device) {
+      console.warn(`Device with ID ${deviceId} not found.`);
+      return [];
+    }
+    const numberOfInterfaces = getNumberOfInterfaces(device.getType());
+    const freeInterfaces: number[] = [];
+    for (let i = 0; i < numberOfInterfaces; i++) {
+      const connections = this.getConnectionsInInterface(deviceId, i);
+      if (!connections || connections.length === 0) {
+        freeInterfaces.push(i); // Add the free interface to the list
+      }
+    }
+    return freeInterfaces; // Return the list of free interfaces
+  }
+
   updateDevicePosition(id: DeviceId, newValues: { x?: number; y?: number }) {
     const deviceDataNode = this.deviceGraph.getVertex(id);
     if (!deviceDataNode) {

src/types/graphs/viewgraph.ts

@@ -361,7 +361,8 @@ export class ViewGraph {
     // Remove connection in DataGraph
     this.datagraph.removeConnection(n1Id, n2Id);
 
-    return this._removeEdge(n1Id, n2Id);
+    this._removeEdge(n1Id, n2Id);
+    return datagraphEdge;
   }
 
   /**
@@ -383,7 +384,7 @@ export class ViewGraph {
     console.log(
       `Edge with ID ${n1Id},${n2Id} successfully removed from ViewGraph.`,
     );
-    return edge.destroy();
+    edge.destroy();
   }
 
   getViewport() {

src/types/undo-redo/moves/addRemoveEdge.ts

@@ -79,7 +79,7 @@ export abstract class AddRemoveEdgeMove extends BaseMove {
     const n1 = this.state.connectedNodes.n1;
     const n2 = this.state.connectedNodes.n2;
     const edgeData = viewgraph.removeEdge(n1, n2);
-
+    console.log("Edge data", edgeData);
     if (!edgeData) {
       return false;
     }

src/utils/constants/tooltips_constants.ts

@@ -59,6 +59,7 @@ export const TOOLTIP_KEYS = {
   PROGRAM_RUNNER: "Program Runner",
   EDGE_INFORMATION: "Edge Information",
   PACKET_INFORMATION: "Packet Information",
+  IFACE_EDITOR: "iface-editor",
 } as const;
 
 // Tooltip Content
@@ -169,4 +170,6 @@ export const TOOLTIP_CONTENT = {
     "An edge represents a connection between two devices in the network. It provides information about the devices and interfaces directly connected by this link. Edges can represent physical connections, such as cables, or logical connections in a virtualized environment.",
   [TOOLTIP_KEYS.PACKET_INFORMATION]:
     "A packet is a unit of data transmitted across the network. This field provides detailed information about the packet, including its source, destination, and the protocol used for communication.",
+  [TOOLTIP_KEYS.IFACE_EDITOR]:
+    "Modify the network interface used by this device.",
 } as const;