feat: run programs on hosts (#88)

Related to #51

This PR changes the "Send packet" button to instead have a dropdown list
of "programs", each with a different functionality. Pressing the "Start
program" button starts the program. For now we have three choices:
- No program: just stops the program
- Send ICMP packet: sends a single ICMP packet
- Start echo server: sends ICMP echo packets every X seconds


![image](https://github.com/user-attachments/assets/5ace3471-12bd-4ab9-b1a1-7414f9de764b)


This still has a problem when changing layers: the program continues
running, but with wrong object references. It should be fixed in #89

Author: MegaRedHand

src/graphics/renderables/device_info.ts

@@ -2,8 +2,6 @@ import { Device } from "../../types/devices";
 import { DeviceType } from "../../types/devices/device";
 import { CreateDevice } from "../../types/devices/utils";
 import { RoutingTableEntry } from "../../types/graphs/datagraph";
-import { ViewGraph } from "../../types/graphs/viewgraph";
-import { sendPacket } from "../../types/packet";
 import { RemoveDeviceMove } from "../../types/undo-redo";
 import { urManager } from "../../types/viewportManager";
 import {
@@ -13,6 +11,13 @@ import {
 } from "../right_bar";
 import { StyledInfo } from "./styled_info";
 
+export interface ProgramInfo {
+  name: string;
+  inputs?: Node[];
+
+  start(): void;
+}
+
 export class DeviceInfo extends StyledInfo {
   readonly device: Device;
   inputFields: Node[] = [];
@@ -61,29 +66,25 @@ export class DeviceInfo extends StyledInfo {
     );
   }
 
-  addSendPacketButton() {
-    const { id, viewgraph } = this.device;
-
-    const adjacentDevices = viewgraph
-      .getDeviceIds()
-      .filter((adjId) => adjId !== id)
-      .map((id) => ({ value: id.toString(), text: `Device ${id}` }));
+  addProgramList(programs: ProgramInfo[]) {
+    const programOptions = programs.map(({ name }, i) => {
+      return { value: i.toString(), text: name };
+    });
+    const inputsContainer = document.createElement("div");
+    let selectedProgram = programs[0];
     this.inputFields.push(
-      // Dropdown for selecting packet type
-      createDropdown(
-        "Packet Type",
-        [
-          { value: "IP", text: "IP" },
-          { value: "ICMP", text: "ICMP" },
-        ],
-        "packet-type",
-      ),
-      // Dropdown for selecting destination
-      createDropdown("Destination", adjacentDevices, "destination"),
+      // Dropdown for selecting program
+      createDropdown("Program", programOptions, "program-selector", (v) => {
+        selectedProgram = programs[parseInt(v)];
+        const programInputs = selectedProgram.inputs || [];
+        inputsContainer.replaceChildren(...programInputs);
+      }),
+      inputsContainer,
       // Button to send a packet
-      createRightBarButton("Send Packet", () =>
-        sendSelectedPacket(viewgraph, id),
-      ),
+      createRightBarButton("Start program", () => {
+        console.log("Started program: ", selectedProgram.name);
+        selectedProgram.start();
+      }),
     );
   }
 
@@ -122,20 +123,3 @@ function getTypeName(device: Device): string {
       return "Host";
   }
 }
-
-function sendSelectedPacket(viewgraph: ViewGraph, id: number): void {
-  // Get the selected packet type and destination ID
-  const packetType = (
-    document.getElementById("packet-type") as HTMLSelectElement
-  )?.value;
-  const destinationId = Number(
-    (document.getElementById("destination") as HTMLSelectElement)?.value,
-  );
-
-  // Call the sendPacket method with the selected values
-  if (packetType && !isNaN(destinationId)) {
-    sendPacket(viewgraph, packetType, id, destinationId);
-  } else {
-    console.warn("Please select both a packet type and a destination.");
-  }
-}

src/graphics/right_bar.ts

@@ -241,6 +241,7 @@ export function createDropdown(
   label: string,
   options: { value: string; text: string }[],
   selectId?: string,
+  onchange: (value: string, event: Event) => void = () => undefined,
 ) {
   const container = document.createElement("div");
   container.classList.add("dropdown-container");
@@ -261,8 +262,9 @@ export function createDropdown(
   });
 
   // Default onchange behavior: logs the selected value
-  select.onchange = () => {
+  select.onchange = (e) => {
     console.log(`Selected ${label}:`, select.value);
+    onchange(select.value, e);
   };
 
   container.appendChild(labelElement);

src/packets/ip.ts

@@ -29,12 +29,18 @@ export class IpAddress {
   }
 
   // Parse IP address from a string representation (10.25.34.42)
-  static parse(addrString: string): IpAddress {
+  static parse(addrString: string): IpAddress | null {
     const octets = new Uint8Array(4);
-    addrString.split(".").forEach((octet, i) => {
+    const splits = addrString.split(".");
+    if (splits.length !== 4) {
+      console.error("Invalid IP address. Length: ", splits.length);
+      return null;
+    }
+    splits.forEach((octet, i) => {
       const octetInt = parseInt(octet);
       if (isNaN(octetInt) || octetInt < 0 || octetInt > 255) {
-        throw new Error(`Invalid IP address: ${addrString}`);
+        console.error("Invalid IP address. value: ", octetInt);
+        return null;
       }
       octets[i] = octetInt;
     });

src/types/devices/host.ts

@@ -3,9 +3,16 @@ import { ViewGraph } from "../graphs/viewgraph";
 import PcImage from "../../assets/pc.svg";
 import { Position } from "../common";
 import { IpAddress } from "../../packets/ip";
-import { DeviceInfo, RightBar } from "../../graphics/right_bar";
+import { createDropdown, DeviceInfo, RightBar } from "../../graphics/right_bar";
+import { ProgramInfo } from "../../graphics/renderables/device_info";
+import { sendPacket } from "../packet";
+import { Ticker } from "pixi.js";
+
+const DEFAULT_ECHO_DELAY = 250; // ms
 
 export class Host extends Device {
+  currentProgram: (ticker: Ticker) => void = undefined;
+
   constructor(
     id: number,
     viewgraph: ViewGraph,
@@ -19,7 +26,7 @@ export class Host extends Device {
   showInfo(): void {
     const info = new DeviceInfo(this);
     info.addField("IP Address", this.ip.octets.join("."));
-    info.addSendPacketButton();
+    info.addProgramList(this.getProgramList());
     RightBar.getInstance().renderInfo(info);
   }
 
@@ -30,4 +37,62 @@ export class Host extends Device {
   getType(): DeviceType {
     return DeviceType.Host;
   }
+
+  getProgramList() {
+    const adjacentDevices = this.viewgraph
+      .getDeviceIds()
+      .filter((adjId) => adjId !== this.id)
+      .map((id) => ({ value: id.toString(), text: `Device ${id}` }));
+
+    const dropdownContainer = createDropdown(
+      "Destination",
+      adjacentDevices,
+      "destination",
+    );
+    const destination = dropdownContainer.querySelector("select");
+
+    const programList: ProgramInfo[] = [
+      { name: "No program", start: () => this.stopProgram() },
+      {
+        name: "Send ICMP echo",
+        inputs: [dropdownContainer],
+        start: () => this.sendSingleEcho(destination.value),
+      },
+      {
+        name: "Echo server",
+        inputs: [dropdownContainer],
+        start: () => this.startEchoServer(destination.value),
+      },
+    ];
+    return programList;
+  }
+
+  sendSingleEcho(id: string) {
+    this.stopProgram();
+    const dst = parseInt(id);
+    sendPacket(this.viewgraph, "ICMP", this.id, dst);
+  }
+
+  startEchoServer(id: string) {
+    this.stopProgram();
+    const dst = parseInt(id);
+    let progress = 0;
+    const send = (ticker: Ticker) => {
+      const delay = DEFAULT_ECHO_DELAY;
+      progress += ticker.deltaMS;
+      if (progress < delay) {
+        return;
+      }
+      sendPacket(this.viewgraph, "ICMP", this.id, dst);
+      progress -= delay;
+    };
+    Ticker.shared.add(send, this);
+    this.currentProgram = send;
+  }
+
+  stopProgram() {
+    if (this.currentProgram) {
+      Ticker.shared.remove(this.currentProgram, this);
+    }
+  }
 }

src/types/packet.ts

@@ -29,9 +29,6 @@ export class Packet extends Graphics {
   currentStart: number;
   color: number;
   type: string;
-  sourceId: number;
-  destinationId: number;
-  private detailsVisible = false;
 
   rawPacket: IPv4Packet;
 
@@ -45,13 +42,7 @@ export class Packet extends Graphics {
     Packet.animationPaused = false;
   }
 
-  constructor(
-    viewgraph: ViewGraph,
-    type: string,
-    rawPacket: IPv4Packet,
-    sourceid: number,
-    destinationid: number,
-  ) {
+  constructor(viewgraph: ViewGraph, type: string, rawPacket: IPv4Packet) {
     super();
 
     this.viewgraph = viewgraph;
@@ -61,8 +52,6 @@ export class Packet extends Graphics {
     this.zIndex = ZIndexLevels.Packet;
 
     this.rawPacket = rawPacket;
-    this.sourceId = sourceid;
-    this.destinationId = destinationid;
 
     this.interactive = true;
     this.cursor = "pointer";
@@ -134,8 +123,6 @@ export class Packet extends Graphics {
 
     const info = new StyledInfo("Packet Information");
     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",
@@ -271,6 +258,7 @@ export class Packet extends Graphics {
   }
 }
 
+// TODO: maybe make this receive the packet directly?
 export function sendPacket(
   viewgraph: ViewGraph,
   packetType: string,
@@ -297,18 +285,10 @@ export function sendPacket(
       console.warn("Tipo de paquete no reconocido");
       return;
   }
-  const rawPacket = new IPv4Packet(
-    originDevice.ip,
-    destinationDevice.ip,
-    payload,
-  );
-  const packet = new Packet(
-    viewgraph,
-    packetType,
-    rawPacket,
-    originId,
-    destinationId,
-  );
+  const dstIp = destinationDevice.ip;
+  const rawPacket = new IPv4Packet(originDevice.ip, dstIp, payload);
+  const packet = new Packet(viewgraph, packetType, rawPacket);
+
   const originConnections = viewgraph.getConnections(originId);
   if (originConnections.length === 0) {
     console.warn(`No se encontró un dispositivo con ID ${originId}.`);