feat: show IP addresses in packet info (#62)

This PR adds packet data to `Packet`, and shows part of that info in the
right bar.

Author: MegaRedHand

src/graphics/renderables/device_info.ts

@@ -1,5 +1,6 @@
 import { Device } from "../../types/devices";
 import { DeviceType } from "../../types/devices/device";
+import { RoutingTableEntry } from "../../types/graphs/datagraph";
 import { ViewGraph } from "../../types/graphs/viewgraph";
 import { sendPacket } from "../../types/packet";
 import {
@@ -69,7 +70,7 @@ export class DeviceInfo extends StyledInfo {
     );
   }
 
-  addRoutingTable(entries: { ip: string; mask: string; iface: string }[]) {
+  addRoutingTable(entries: RoutingTableEntry[]) {
     const rows = entries.map((entry) => [entry.ip, entry.mask, entry.iface]);
 
     const dynamicTable = createToggleTable(

src/types/devices/device.ts

@@ -6,7 +6,7 @@ import {
   TextStyle,
   Text,
 } from "pixi.js";
-import { ViewGraph } from "./../graphs/viewgraph";
+import { EdgeId, ViewGraph } from "./../graphs/viewgraph";
 import {
   deselectElement,
   refreshElement,
@@ -17,6 +17,7 @@ import { Colors, ZIndexLevels } from "../../utils";
 import { Position } from "../common";
 import { DeviceInfo } from "../../graphics/renderables/device_info";
 import { IpAddress } from "../../packets/ip";
+import { DeviceId } from "../graphs/datagraph";
 
 export const DEVICE_SIZE = 20;
 
@@ -33,7 +34,7 @@ export enum DeviceType {
 }
 
 export abstract class Device extends Sprite {
-  readonly id: number;
+  readonly id: DeviceId;
   readonly viewgraph: ViewGraph;
   connections = new Map<number, number>();
 
@@ -90,19 +91,19 @@ export abstract class Device extends Sprite {
     this.addChild(idText); // Add the ID text as a child of the device
   }
 
-  getConnections(): { edgeId: number; adyacentId: number }[] {
+  getConnections(): { edgeId: EdgeId; adyacentId: DeviceId }[] {
     return Array.from(this.connections.entries()).map(
       ([edgeId, adyacentId]) => {
         return { edgeId, adyacentId };
       },
     );
   }
 
-  addConnection(edgeId: number, adyacentId: number) {
+  addConnection(edgeId: EdgeId, adyacentId: DeviceId) {
     this.connections.set(edgeId, adyacentId);
   }
 
-  removeConnection(id: number) {
+  removeConnection(id: EdgeId) {
     this.connections.delete(id);
   }
 

src/types/devices/router.ts

@@ -19,27 +19,10 @@ export class Router extends Device {
   showInfo(): void {
     const info = new DeviceInfo(this);
     info.addField("IP Address", this.ip.octets.join("."));
-    info.addRoutingTable(this.generate_routing_table());
+    info.addRoutingTable(this.viewgraph.getRoutingTable(this.id));
     RightBar.getInstance().renderInfo(info);
   }
 
-  generate_routing_table(): { ip: string; mask: string; iface: string }[] {
-    const routingTableEntries: { ip: string; mask: string; iface: string }[] =
-      [];
-
-    this.getConnections().forEach(({ edgeId, adyacentId }) => {
-      const connectedDevice = this.viewgraph.getDevice(adyacentId);
-      if (connectedDevice) {
-        const ip = connectedDevice.ip.toString();
-        const mask = connectedDevice.ipMask.toString();
-        // Generate interface name based on edge ID
-        const iface = `eth${edgeId}`;
-        routingTableEntries.push({ ip, mask, iface });
-      }
-    });
-    return routingTableEntries;
-  }
-
   getLayer(): Layer {
     return Layer.Network;
   }

src/types/graphs/datagraph.ts

@@ -13,11 +13,25 @@ interface CommonGraphNode {
 
 interface RouterGraphNode extends CommonGraphNode {
   type: DeviceType.Router;
+  routingTable: RoutingTableEntry[];
+}
+
+export interface RoutingTableEntry {
+  ip: string;
+  mask: string;
+  iface: string;
+}
+
+// Typescript type guard
+export function isRouter(node: GraphNode): node is RouterGraphNode {
+  return node.type === DeviceType.Router;
 }
 
 export type GraphNode = CommonGraphNode | RouterGraphNode;
 
-export interface GraphDataNode {
+export type GraphDataNode = CommonDataNode | RouterDataNode;
+
+interface CommonDataNode {
   id: DeviceId;
   x: number;
   y: number;
@@ -27,6 +41,11 @@ export interface GraphDataNode {
   connections: DeviceId[];
 }
 
+interface RouterDataNode extends CommonDataNode {
+  type: DeviceType.Router;
+  routingTable: RoutingTableEntry[];
+}
+
 export type GraphData = GraphDataNode[];
 
 export interface NewDevice {
@@ -49,11 +68,7 @@ export class DataGraph {
       console.log(nodeData);
       const connections = new Set(nodeData.connections);
       const graphNode: GraphNode = {
-        x: nodeData.x,
-        y: nodeData.y,
-        type: nodeData.type,
-        ip: nodeData.ip,
-        mask: nodeData.mask,
+        ...nodeData,
         connections: connections,
       };
       dataGraph.addDevice(nodeData.id, graphNode);
@@ -66,15 +81,20 @@ export class DataGraph {
 
     // Serialize nodes
     this.getDevices().forEach(([id, info]) => {
-      graphData.push({
-        id: id,
+      const graphNode: GraphDataNode = {
+        id,
         x: info.x,
         y: info.y,
         type: info.type, // Save the device type (Router, Host)
         ip: info.ip,
         mask: info.mask,
         connections: Array.from(info.connections.values()),
-      });
+      };
+      if (isRouter(info)) {
+        graphData.push({ ...graphNode, routingTable: info.routingTable });
+      } else {
+        graphData.push(graphNode);
+      }
     });
     return graphData;
   }
@@ -85,6 +105,7 @@ export class DataGraph {
     const graphnode: GraphNode = {
       ...deviceInfo,
       connections: new Set<number>(),
+      routingTable: [],
     };
     this.devices.set(id, graphnode);
     console.log(`Device added with ID ${id}`);
@@ -114,23 +135,47 @@ export class DataGraph {
       );
       return;
     }
-    if (!this.devices.has(n1Id)) {
+    const device1 = this.devices.get(n1Id);
+    const device2 = this.devices.get(n2Id);
+    if (!device1) {
       console.warn(`Device with ID ${n1Id} does not exist in devices.`);
       return;
     }
-    if (!this.devices.has(n2Id)) {
+    if (!device2) {
       console.warn(`Device with ID ${n2Id} does not exist in devices.`);
       return;
       // Check if an edge already exists between these two devices
     }
-    if (this.devices.get(n1Id).connections.has(n2Id)) {
+    if (device1.connections.has(n2Id)) {
       console.warn(
         `Connection between ID ${n1Id} and ID ${n2Id} already exists.`,
       );
       return;
     }
-    this.devices.get(n1Id).connections.add(n2Id);
-    this.devices.get(n2Id).connections.add(n1Id);
+    device1.connections.add(n2Id);
+    device2.connections.add(n1Id);
+
+    if (isRouter(device1)) {
+      if (!device1.routingTable) {
+        device1.routingTable = [];
+      }
+      device1.routingTable.push({
+        ip: device2.ip.toString(),
+        mask: device2.mask,
+        iface: `eth${n2Id}`,
+      });
+    }
+
+    if (isRouter(device2)) {
+      if (!device2.routingTable) {
+        device2.routingTable = [];
+      }
+      device2.routingTable.push({
+        ip: device1.ip.toString(),
+        mask: device1.mask,
+        iface: `eth${n1Id}`,
+      });
+    }
 
     console.log(
       `Connection created between devices ID: ${n1Id} and ID: ${n2Id}`,

src/types/graphs/viewgraph.ts

@@ -1,6 +1,6 @@
 import { Device } from "./../devices/index"; // Import the Device class
 import { Edge } from "./../edge";
-import { DataGraph, DeviceId } from "./datagraph";
+import { DataGraph, DeviceId, isRouter } from "./datagraph";
 import { Viewport } from "../../graphics/viewport";
 import { Layer } from "../devices/device";
 import { createDevice } from "../devices/utils";
@@ -226,6 +226,14 @@ export class ViewGraph {
     return this.viewport;
   }
 
+  getRoutingTable(id: DeviceId) {
+    const device = this.datagraph.getDevice(id);
+    if (!device || !isRouter(device)) {
+      return [];
+    }
+    return device.routingTable;
+  }
+
   // En ViewGraph
   getEdge(edgeId: EdgeId): Edge | undefined {
     return this.edges.get(edgeId);

src/types/packet.ts

@@ -10,6 +10,8 @@ import { circleGraphicsContext, Colors, ZIndexLevels } from "../utils";
 import { RightBar, StyledInfo } from "../graphics/right_bar";
 import { Position } from "./common";
 import { ViewGraph } from "./graphs/viewgraph";
+import { EmptyPayload, IPv4Packet } from "../packets/ip";
+import { EchoRequest } from "../packets/icmp";
 
 const contextPerPacketType: Record<string, GraphicsContext> = {
   IP: circleGraphicsContext(Colors.Green, 0, 0, 5),
@@ -19,7 +21,7 @@ const contextPerPacketType: Record<string, GraphicsContext> = {
 const highlightedPacketContext = circleGraphicsContext(Colors.Violet, 0, 0, 6);
 
 export class Packet extends Graphics {
-  speed: number;
+  speed = 200;
   progress = 0;
   currentPath: Edge[];
   currentEdge: Edge;
@@ -29,6 +31,8 @@ export class Packet extends Graphics {
   sourceId: number;
   destinationId: number;
 
+  rawPacket: IPv4Packet;
+
   static animationPaused = false;
 
   static pauseAnimation() {
@@ -41,7 +45,7 @@ export class Packet extends Graphics {
 
   constructor(
     type: string,
-    speed: number,
+    rawPacket: IPv4Packet,
     sourceid: number,
     destinationid: number,
   ) {
@@ -52,7 +56,7 @@ export class Packet extends Graphics {
     this.context = contextPerPacketType[this.type];
     this.zIndex = ZIndexLevels.Packet;
 
-    this.speed = speed;
+    this.rawPacket = rawPacket;
     this.sourceId = sourceid;
     this.destinationId = destinationid;
 
@@ -81,6 +85,11 @@ export class Packet extends Graphics {
     info.addField("Type", this.type);
     info.addField("Source ID", this.sourceId.toString());
     info.addField("Destination ID", this.destinationId.toString());
+    info.addField("Source IP Address", this.rawPacket.sourceAddress.toString());
+    info.addField(
+      "Destination IP Address",
+      this.rawPacket.destinationAddress.toString(),
+    );
 
     rightbar.renderInfo(info);
   }
@@ -167,7 +176,6 @@ export function sendPacket(
   console.log(
     `Sending ${packetType} packet from ${originId} to ${destinationId}`,
   );
-  const speed = 200; // Velocidad en píxeles por segundo
 
   const pathEdgeIds = viewgraph.getPathBetween(originId, destinationId);
 
@@ -178,8 +186,29 @@ export function sendPacket(
     return;
   }
 
+  const originDevice = viewgraph.getDevice(originId);
+  const destinationDevice = viewgraph.getDevice(destinationId);
+
   const pathEdges = pathEdgeIds.map((id) => viewgraph.getEdge(id));
 
-  const packet = new Packet(packetType, speed, originId, destinationId);
+  // TODO: allow user to choose which payload to send
+  let payload;
+  switch (packetType) {
+    case "IP":
+      payload = new EmptyPayload();
+      break;
+    case "ICMP":
+      payload = new EchoRequest(0);
+      break;
+    default:
+      console.warn("Tipo de paquete no reconocido");
+      return;
+  }
+  const rawPacket = new IPv4Packet(
+    originDevice.ip,
+    destinationDevice.ip,
+    payload,
+  );
+  const packet = new Packet(packetType, rawPacket, originId, destinationId);
   packet.animateAlongPath(pathEdges, originId);
 }