Switch connection to viewgraph (#142)

- Devices have MAC addresses
- New hierarchical order with GraphNode interfaces and Device classes.
- Switches send a received frame to the right port, following the
natural packet’s flow. Does not send the frame to all it’s ports yet.
- Routers register network devices beyond switches in it’s routing
tables.
- Protocol’s codes and types now used to identify the packet in devices’
handling process.

Known bugs:
- Forwarding packets with switches in the middle, in transport layer,
does not work (#143).
- MAC addresses does repeat.

Next Issues:
- Resolve known bugs
- Support switches to send a received frame to all its’ ports (except
the one frame arrive on).
- Introduce ARP protocol with it table.

---------

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

Author: Manuel-Pol

src/context.ts

@@ -1,5 +1,5 @@
 import { Viewport } from "./graphics/viewport";
-import { DataGraph } from "./types/graphs/datagraph";
+import { DataGraph, isLinkNode, isNetworkNode } from "./types/graphs/datagraph";
 import { ViewGraph } from "./types/graphs/viewgraph";
 import {
   loadFromLocalStorage,
@@ -10,6 +10,7 @@ import { Layer } from "./types/devices/device";
 import { IpAddress, IpAddressGenerator } from "./packets/ip";
 import { layerFromName } from "./types/devices/layer";
 import { SpeedMultiplier } from "./types/devices/speedMultiplier";
+import { MacAddress, MacAddressGenerator } from "./packets/ethernet";
 
 export class GlobalContext {
   private viewport: Viewport = null;
@@ -18,6 +19,7 @@ export class GlobalContext {
   private speedMultiplier: SpeedMultiplier;
   private saveIntervalId: NodeJS.Timeout | null = null;
   private ipGenerator: IpAddressGenerator;
+  private macGenerator: MacAddressGenerator;
 
   constructor(viewport: Viewport) {
     this.viewport = viewport;
@@ -26,12 +28,17 @@ export class GlobalContext {
     loadFromLocalStorage(this);
 
     this.setIpGenerator();
+    this.setMacGenerator();
   }
 
   getNextIp(): { ip: string; mask: string } {
     return this.ipGenerator.getNextIp();
   }
 
+  getNextMac(): string {
+    return this.macGenerator.getNextMac();
+  }
+
   private setNetwork(datagraph: DataGraph, layer: Layer) {
     this.datagraph = datagraph;
     this.viewport.clear();
@@ -40,6 +47,7 @@ export class GlobalContext {
     }
     this.viewgraph = new ViewGraph(this.datagraph, this, layer);
     this.setIpGenerator();
+    this.setMacGenerator();
   }
 
   private setSpeedMultiplier(speedMultiplier: SpeedMultiplier) {
@@ -126,9 +134,11 @@ export class GlobalContext {
   private setIpGenerator() {
     let maxIp = IpAddress.parse("10.0.0.0");
     this.datagraph.getDevices().forEach((device) => {
-      const ip = IpAddress.parse(device.ip);
-      if (maxIp.octets < ip.octets) {
-        maxIp = ip;
+      if (isNetworkNode(device)) {
+        const ip = IpAddress.parse(device.ip);
+        if (maxIp.octets < ip.octets) {
+          maxIp = ip;
+        }
       }
     });
     // TODO: we should use IpAddress instead of string here and in Datagraph
@@ -137,6 +147,21 @@ export class GlobalContext {
     this.ipGenerator = new IpAddressGenerator(baseIp, mask);
   }
 
+  private setMacGenerator() {
+    let maxMac = MacAddress.parse("00:00:10:00:00:00");
+    this.datagraph.getDevices().forEach((device) => {
+      if (isLinkNode(device)) {
+        const mac = MacAddress.parse(device.mac);
+        if (maxMac.octets < mac.octets) {
+          maxMac = mac;
+        }
+      }
+    });
+    // TODO: we should use MacAddress instead of string here and in Datagraph
+    const baseMac = maxMac.toString();
+    this.macGenerator = new MacAddressGenerator(baseMac);
+  }
+
   print() {
     console.log("VieGraph:");
     console.log(this.viewgraph);

src/graphics/renderables/device_info.ts

@@ -23,8 +23,9 @@ export class DeviceInfo extends StyledInfo {
   }
 
   private addCommonInfoFields() {
-    const { id, connections } = this.device;
+    const { id, connections, mac } = this.device;
     super.addField("ID", id.toString());
+    super.addField("MacAddress", mac.toString());
     super.addListField("Connected Devices", Array.from(connections.values()));
   }
 

src/packets/ethernet.ts

@@ -1,4 +1,5 @@
 import { CRC32 } from "@tsxper/crc32";
+import { Layer } from "../types/devices/layer";
 
 // From https://en.wikipedia.org/wiki/EtherType
 export const IP_PROTOCOL_TYPE = 0x0800;
@@ -43,6 +44,35 @@ export class MacAddress {
   }
 }
 
+export class MacAddressGenerator {
+  private baseMac: bigint;
+  private currentMac: bigint;
+
+  constructor(baseMac: string) {
+    this.baseMac = MacAddressGenerator.macToNumber(baseMac);
+    this.currentMac = this.baseMac + BigInt(1); // Start on first valid MAC
+  }
+
+  // Generate next valid IP
+  getNextMac(): string {
+    const nextMac = MacAddressGenerator.numberToMac(this.currentMac);
+    this.currentMac++;
+    return nextMac;
+  }
+
+  // Turn MAC into a number
+  static macToNumber(mac: string): bigint {
+    // leaves an hexadecimal string of 6 bytes, then parse it to bigint
+    return BigInt("0x" + mac.replace(/:/g, ""));
+  }
+
+  // Turn number into IP
+  static numberToMac(num: bigint): string {
+    const match = num.toString(16).padStart(12, "0").match(/.{2}/g);
+    return match ? match.join(":") : "";
+  }
+}
+
 const crc32 = new CRC32();
 
 const MINIMUM_PAYLOAD_SIZE = 46;
@@ -114,9 +144,25 @@ export class EthernetFrame {
       ...checksum,
     ]);
   }
+
+  getDetails(layer: Layer) {
+    if (layer == Layer.Link) {
+      return {
+        "Destination MAC": this.destination.toString(),
+        "Source MAC": this.source.toString(),
+        EtherType: this.type.toString(),
+      };
+    } else {
+      return this.payload.getDetails(layer);
+    }
+  }
 }
 
 export interface FramePayload {
+  // The bytes equivalent of the payload
   toBytes(): Uint8Array;
+  // The number of the protocol
   type(): number;
+  // Get details of the payload
+  getDetails(layer: Layer): Record<string, string | number | object>;
 }

src/packets/icmp.ts

@@ -4,6 +4,9 @@ import { Layer } from "../types/devices/layer";
 const ICMP_WARNING =
   "ICMP operates directly on top of IP at the Network layer, bypassing the Transport layer (TCP/UDP). This is because ICMP is primarily used for network diagnostics and error reporting, not for end-to-end data transport.";
 
+export const ICMP_REQUEST_TYPE_NUMBER = 8;
+export const ICMP_REPLY_TYPE_NUMBER = 0;
+
 // More info in RFC-792
 //   0                   1                   2                   3
 //   0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
@@ -111,9 +114,9 @@ class EchoMessage extends IcmpPacket {
 }
 
 export class EchoRequest extends EchoMessage {
-  type = 8;
+  type = ICMP_REQUEST_TYPE_NUMBER;
 }
 
 export class EchoReply extends EchoMessage {
-  type = 0;
+  type = ICMP_REPLY_TYPE_NUMBER;
 }

src/packets/ip.ts

@@ -270,14 +270,6 @@ export class IPv4Packet implements FramePayload {
     // Desired Implementation:
     // - Move frame-specific data to EthernetFrame class
     // - Implement packet sending using MAC addresses at device level
-    if (layer == Layer.Link) {
-      return {
-        "Ethernet Header": "---",
-        "Destination MAC": "---",
-        "Source MAC": "---",
-        EtherType: "0x0800",
-      };
-    }
 
     if (layer == Layer.Network) {
       return {

src/programs/echo_sender.ts

@@ -6,6 +6,8 @@ import { ViewGraph } from "../types/graphs/viewgraph";
 import { ProgramInfo } from "../graphics/renderables/device_info";
 import { EchoRequest } from "../packets/icmp";
 import { IPv4Packet } from "../packets/ip";
+import { NetworkDevice } from "../types/devices";
+import { EthernetFrame } from "../packets/ethernet";
 
 function adjacentDevices(viewgraph: ViewGraph, srcId: DeviceId) {
   const adjacentDevices = viewgraph
@@ -46,9 +48,32 @@ export class SingleEcho extends ProgramBase {
       console.error("Destination device not found");
       return;
     }
+    if (
+      !(
+        srcDevice instanceof NetworkDevice && dstDevice instanceof NetworkDevice
+      )
+    ) {
+      console.log(
+        "At least one device between source and destination is not a network device",
+      );
+      return;
+    }
     const echoRequest = new EchoRequest(0);
     const ipPacket = new IPv4Packet(srcDevice.ip, dstDevice.ip, echoRequest);
-    sendRawPacket(this.viewgraph, this.srcId, ipPacket);
+    const path = this.viewgraph.getPathBetween(this.srcId, this.dstId);
+    let dstMac = dstDevice.mac;
+    if (!path) return;
+    console.log(path);
+    for (const id of path.slice(1)) {
+      const device = this.viewgraph.getDevice(id);
+      // if there’s a router in the middle, first send frame to router mac
+      if (device instanceof NetworkDevice) {
+        dstMac = device.mac;
+        break;
+      }
+    }
+    const ethernetFrame = new EthernetFrame(srcDevice.mac, dstMac, ipPacket);
+    sendRawPacket(this.viewgraph, this.srcId, this.dstId, ethernetFrame);
   }
 
   static getProgramInfo(viewgraph: ViewGraph, srcId: DeviceId): ProgramInfo {

src/types/devices/device.ts

@@ -18,13 +18,13 @@ import { RightBar } from "../../graphics/right_bar";
 import { Colors, ZIndexLevels } from "../../utils";
 import { Position } from "../common";
 import { DeviceInfo } from "../../graphics/renderables/device_info";
-import { IpAddress, IPv4Packet } from "../../packets/ip";
+import { IpAddress } from "../../packets/ip";
 import { DeviceId } from "../graphs/datagraph";
 import { DragDeviceMove, AddEdgeMove } from "../undo-redo";
 import { Layer } from "./layer";
-import { Packet, sendRawPacket } from "../packet";
-import { EchoReply } from "../../packets/icmp";
+import { Packet } from "../packet";
 import { CreateDevice } from "./utils";
+import { MacAddress } from "../../packets/ethernet";
 
 export { Layer } from "./layer";
 
@@ -52,6 +52,9 @@ export abstract class Device extends Container {
   readonly viewgraph: ViewGraph;
   connections = new Set<DeviceId>();
 
+  mac: MacAddress;
+  arpTable: Map<IpAddress, MacAddress> = new Map<IpAddress, MacAddress>();
+
   highlightMarker: Graphics | null = null; // Marker to indicate selection
 
   static dragTarget: Device | null = null;
@@ -65,28 +68,27 @@ export abstract class Device extends Container {
     return this.sprite.height;
   }
 
-  ip: IpAddress;
-  ipMask: IpAddress;
-
-  // Each type of device has different ways of handling a received packet.
-  // Returns the DevicedId for the next device to send the packet to, or
-  // null if there’s no next device to send the packet.
+  /**
+   * Each type of device has different ways of handling a received packet.
+   * Returns the id for the next device to send the packet to, or
+   * null if there’s no next device to send the packet.
+   * */
+  // TODO: Might be general for all device in the future.
   abstract receivePacket(packet: Packet): Promise<DeviceId | null>;
 
   constructor(
     id: DeviceId,
     texture: Texture,
     viewgraph: ViewGraph,
     position: Position,
-    ip: IpAddress,
-    ipMask: IpAddress,
+    mac: MacAddress,
   ) {
     super();
 
     this.id = id;
     this.viewgraph = viewgraph;
-    this.ip = ip;
-    this.ipMask = ipMask;
+
+    this.mac = mac;
 
     this.sprite = new Sprite(texture);
 
@@ -144,25 +146,6 @@ export abstract class Device extends Container {
     this.connections.delete(id);
   }
 
-  // TODO: Most probably it will be different for each type of device
-  handlePacket(packet: Packet) {
-    switch (packet.type) {
-      case "ICMP-8": {
-        const dstDevice = this.viewgraph.getDeviceByIP(
-          packet.rawPacket.sourceAddress,
-        );
-        if (dstDevice) {
-          const echoReply = new EchoReply(0);
-          const ipPacket = new IPv4Packet(this.ip, dstDevice.ip, echoReply);
-          sendRawPacket(this.viewgraph, this.id, ipPacket);
-        }
-        break;
-      }
-      default:
-        console.warn("Packet's type unrecognized");
-    }
-  }
-
   delete(): void {
     this.viewgraph.removeDevice(this.id);
     console.log(`Device ${this.id} deleted`);

src/types/devices/host.ts

@@ -1,8 +1,9 @@
-import { Device, DeviceType } from "./device";
+import { DeviceType } from "./device";
+import { NetworkDevice } from "./networkDevice";
 import { ViewGraph } from "../graphs/viewgraph";
 import PcImage from "../../assets/pc.svg";
 import { Position } from "../common";
-import { IpAddress } from "../../packets/ip";
+import { IpAddress, IPv4Packet } from "../../packets/ip";
 import { DeviceInfo, RightBar } from "../../graphics/right_bar";
 import { DeviceId } from "../graphs/datagraph";
 import { Layer } from "./layer";
@@ -16,8 +17,9 @@ import {
 } from "../../programs";
 import { Packet } from "../packet";
 import { Texture } from "pixi.js";
+import { MacAddress } from "../../packets/ethernet";
 
-export class Host extends Device {
+export class Host extends NetworkDevice {
   static DEVICE_TEXTURE: Texture;
 
   static getTexture() {
@@ -34,13 +36,25 @@ export class Host extends Device {
     id: DeviceId,
     viewgraph: ViewGraph,
     position: Position,
+    mac: MacAddress,
     ip: IpAddress,
     mask: IpAddress,
   ) {
-    super(id, Host.getTexture(), viewgraph, position, ip, mask);
+    super(id, Host.getTexture(), viewgraph, position, mac, ip, mask);
     this.loadRunningPrograms();
   }
 
+  receiveDatagram(packet: Packet): Promise<DeviceId | null> {
+    const datagram = packet.rawPacket.payload;
+    if (!(datagram instanceof IPv4Packet)) {
+      return null;
+    }
+    if (this.ip.equals(datagram.destinationAddress)) {
+      this.handlePacket(datagram);
+    }
+    return null;
+  }
+
   showInfo(): void {
     const programList = getProgramList(this.viewgraph, this.id);
 
@@ -58,13 +72,6 @@ export class Host extends Device {
     return DeviceType.Host;
   }
 
-  async receivePacket(packet: Packet): Promise<DeviceId | null> {
-    if (this.ip.equals(packet.rawPacket.destinationAddress)) {
-      this.handlePacket(packet);
-    }
-    return null;
-  }
-
   addRunningProgram(name: string, inputs: string[]) {
     const pid = this.getNextPid();
     const runningProgram = { pid, name, inputs };