Refactor/improve packet information (#218)

This PR rearranges the info of packets and devices depending on the
chosen layer.

# Information

On devices it shows:
- MAC address and IP address on Link Layer
- Only IP address on Network, Transport and App 

## Hosts
### Link

![image](https://github.com/user-attachments/assets/ea269bba-3579-4811-afdc-c1859e9159be)
### Network

![image](https://github.com/user-attachments/assets/0aa1ee7f-0098-43c3-9da6-62a60af0b3ce)
### Transport 

![image](https://github.com/user-attachments/assets/63737736-d22a-4d63-b3be-cc5e355938f2)
### App

![image](https://github.com/user-attachments/assets/5bf82c4a-1a1b-4579-bb2d-ee643005c96f)

## Routers
### Link

![image](https://github.com/user-attachments/assets/d012d512-5243-43d2-9d92-d180c4a40190)
### Network

![image](https://github.com/user-attachments/assets/1cb40b90-e02f-477e-bba9-e8c098ce1e20)

## Switches
### Link

![image](https://github.com/user-attachments/assets/6650ba7f-04eb-499e-9dbe-a39a785487e0)

On packets, it shows:
- MAC Address on Link

![image](https://github.com/user-attachments/assets/0f9bda43-31c9-44f3-a274-7eb742f0cf55)
- IP Address on Network

![image](https://github.com/user-attachments/assets/99f0242b-f204-4998-828c-b6a586a68c4a)
- IP Address and Ports on Transport and App

![image](https://github.com/user-attachments/assets/1558e010-b2eb-4b0f-b965-9799da8d77a6)

![image](https://github.com/user-attachments/assets/802d068a-1a3a-4809-912f-83c592eafb18)


# Packet Details
## TCP
- Encoded request on App

![image](https://github.com/user-attachments/assets/4e154c0c-10df-4379-ae4f-82d96dd5beb0)
- Sequence number, Ack number, Window Size, Flags and Payload on
Transport

![image](https://github.com/user-attachments/assets/db46f9b1-bbb0-4629-930a-1c75ef05a93e)
- IPV4 data and Payload on Network

![image](https://github.com/user-attachments/assets/ad2d9588-9dec-40ae-8c23-78a837295288)
- MAC address and EtherType on Link

![image](https://github.com/user-attachments/assets/414e1ef9-6e82-4552-8189-8e8612b697af)

## ICMP
- IPV4 data and payload on Network

![image](https://github.com/user-attachments/assets/912c68e1-1d96-41d1-9fe9-696bd187b158)
- MAC address and Ethertype on Link

![image](https://github.com/user-attachments/assets/dbe0cfb6-68f7-482d-b271-79b8daf23ea2)

--- 

closes #210 
closes #211
closes #212

---------

Co-authored-by: Tomás Grüner <[email protected]>

Author: V-SANT

src/graphics/basic_components/text_info.ts

@@ -1,5 +1,7 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
 import { attachTooltip } from "../renderables/tooltip_manager";
+import { Table } from "./table";
+import { Flags, TCP_FLAGS_KEY } from "../../packets/tcp";
 
 export interface InfoField {
   key: string;
@@ -58,7 +60,10 @@ export class TextInfo {
   private createListItem(field: InfoField): HTMLLIElement {
     const { key, value, tooltip } = field;
 
-    if (typeof value === "object" && value !== null) {
+    if (key === TCP_FLAGS_KEY) {
+      const flags = value as Flags;
+      return this.createFlagsElement(flags, tooltip);
+    } else if (typeof value === "object" && value !== null) {
       return this.createPayloadElement(key, value, tooltip);
     } else {
       return this.createDetailElement(key, value as string, tooltip);
@@ -133,4 +138,77 @@ export class TextInfo {
 
     return listItem;
   }
+
+  /**
+   * Creates a TCP flags display element with ticks and crosses using the Table class
+   * @param flags An object containing the TCP flag values
+   * @param tooltip Optional tooltip for the flags element
+   * @returns HTMLLIElement containing the flags table
+   */
+  createFlagsElement(flags: Flags, tooltip?: string): HTMLLIElement {
+    // Create list item container
+    const listItem = document.createElement("li");
+    listItem.classList.add(CSS_CLASSES.DETAIL_ITEM);
+
+    // Create key element
+    const keyElement = document.createElement("span");
+    keyElement.textContent = "TCP Flags";
+    keyElement.classList.add(
+      CSS_CLASSES.DETAIL_KEY,
+      CSS_CLASSES.TCP_FLAG_HEADER,
+    );
+    keyElement.style.display = CSS_CLASSES.BLOCK;
+
+    if (tooltip) {
+      attachTooltip(keyElement, tooltip);
+    }
+
+    // Create rows for the table
+    const statusRow: string[] = [];
+    const valueRow: string[] = [];
+
+    Object.entries(flags).forEach(([, value]) => {
+      statusRow.push(value ? "✓" : "✗");
+      valueRow.push(value ? "1" : "0");
+    });
+
+    // Create headers for the table
+    const headers = Object.keys(flags);
+
+    // Create the table using the Table class
+    const flagsTable = new Table({
+      headers: headers.reduce(
+        (acc, header) => {
+          acc[header] = header;
+          return acc;
+        },
+        {} as Record<string, string>,
+      ),
+      fieldsPerRow: Object.keys(flags).length,
+      rows: [statusRow, valueRow],
+      tableClasses: [CSS_CLASSES.TABLE, CSS_CLASSES.RIGHT_BAR_TABLE],
+    });
+
+    // Get the table element
+    const tableElement = flagsTable.toHTML();
+
+    // Apply custom styling to the status row cells (ticks and crosses)
+    const tbody = tableElement.querySelector("tbody");
+    if (tbody && tbody.rows.length > 0) {
+      const statusCells = tbody.rows[0].cells;
+      for (const cell of statusCells) {
+        if (cell.textContent === "✓") {
+          cell.classList.add(CSS_CLASSES.TCP_FLAG_ACTIVE);
+        } else {
+          cell.classList.add(CSS_CLASSES.TCP_FLAG_INACTIVE);
+        }
+      }
+    }
+
+    // Append elements to list item
+    listItem.appendChild(keyElement);
+    listItem.appendChild(tableElement);
+
+    return listItem;
+  }
 }

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 { Layer } from "../../types/layer";
 
 export class DeviceInfo extends BaseInfo {
   readonly device: ViewDevice;
@@ -34,11 +35,16 @@ export class DeviceInfo extends BaseInfo {
       connections,
       TOOLTIP_KEYS.CONNECTED_DEVICES,
     );
-    this.information.addField(
-      TOOLTIP_KEYS.MAC_ADDRESS,
-      mac.toString(),
-      TOOLTIP_KEYS.MAC_ADDRESS,
-    );
+
+    const layer = this.device.viewgraph.getLayer();
+
+    if (layer == Layer.Link) {
+      this.information.addField(
+        TOOLTIP_KEYS.MAC_ADDRESS,
+        mac.toString(),
+        TOOLTIP_KEYS.MAC_ADDRESS,
+      );
+    }
   }
 
   protected addCommonButtons(): void {

src/graphics/renderables/packet_info.ts

@@ -4,6 +4,8 @@ import { Button } from "../basic_components/button";
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
 import { BaseInfo } from "./base_info";
 import { ToggleInfo } from "../components/toggle_info";
+import { Layer } from "../../types/layer";
+import { IPv4Packet } from "../../packets/ip";
 
 export class PacketInfo extends BaseInfo {
   readonly packet: Packet;
@@ -22,16 +24,51 @@ export class PacketInfo extends BaseInfo {
       this.packet.type,
       TOOLTIP_KEYS.PACKET_TYPE,
     );
-    this.information.addField(
-      TOOLTIP_KEYS.SOURCE_MAC_ADDRESS,
-      this.packet.rawPacket.source.toString(),
-      TOOLTIP_KEYS.SOURCE_MAC_ADDRESS,
-    );
-    this.information.addField(
-      TOOLTIP_KEYS.DESTINATION_MAC_ADDRESS,
-      this.packet.rawPacket.destination.toString(),
-      TOOLTIP_KEYS.DESTINATION_MAC_ADDRESS,
-    );
+
+    const layer = this.packet.viewgraph.getLayer();
+    const framePayload = this.packet.rawPacket.payload as IPv4Packet;
+
+    if (layer == Layer.Link) {
+      this.information.addField(
+        TOOLTIP_KEYS.SOURCE_MAC_ADDRESS,
+        this.packet.rawPacket.source.toString(),
+        TOOLTIP_KEYS.SOURCE_MAC_ADDRESS,
+      );
+      this.information.addField(
+        TOOLTIP_KEYS.DESTINATION_MAC_ADDRESS,
+        this.packet.rawPacket.destination.toString(),
+        TOOLTIP_KEYS.DESTINATION_MAC_ADDRESS,
+      );
+    }
+
+    if (layer >= Layer.Network) {
+      this.information.addField(
+        TOOLTIP_KEYS.SOURCE_IP_ADDRESS,
+        framePayload.sourceAddress.toString(),
+        TOOLTIP_KEYS.SOURCE_IP_ADDRESS,
+      );
+      this.information.addField(
+        TOOLTIP_KEYS.DESTINATION_IP_ADDRESS,
+        framePayload.destinationAddress.toString(),
+        TOOLTIP_KEYS.DESTINATION_IP_ADDRESS,
+      );
+    }
+
+    if (layer >= Layer.Transport) {
+      const ports = framePayload.payload.getPorts();
+      if (ports) {
+        this.information.addField(
+          TOOLTIP_KEYS.SOURCE_PORT,
+          ports.sourcePort,
+          TOOLTIP_KEYS.SOURCE_PORT,
+        );
+        this.information.addField(
+          TOOLTIP_KEYS.DESTINATION_PORT,
+          ports.destinationPort,
+          TOOLTIP_KEYS.DESTINATION_PORT,
+        );
+      }
+    }
   }
 
   protected addCommonButtons(): void {
@@ -56,7 +93,7 @@ export class PacketInfo extends BaseInfo {
   private addToggleInfo(): void {
     // Obtener los detalles del paquete
     const packetDetails = this.packet.getPacketDetails(
-      this.packet.belongingLayer,
+      this.packet.viewgraph.getLayer(),
       this.packet.rawPacket,
     );
 

src/packets/ethernet.ts

@@ -148,8 +148,8 @@ export class EthernetFrame {
   getDetails(layer: Layer) {
     if (layer == Layer.Link) {
       return {
-        "Destination MAC": this.destination.toString(),
         "Source MAC": this.source.toString(),
+        "Destination MAC": this.destination.toString(),
         EtherType: this.type.toString(),
       };
     } else {

src/packets/icmp.ts

@@ -1,9 +1,9 @@
-import { ICMP_PROTOCOL_NUMBER, IpPayload, computeIpChecksum } from "./ip";
-import { Layer } from "../types/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.";
-
+import {
+  ICMP_PROTOCOL_NUMBER,
+  IpPayload,
+  computeIpChecksum,
+  Ports,
+} from "./ip";
 export const ICMP_REQUEST_TYPE_NUMBER = 8;
 export const ICMP_REPLY_TYPE_NUMBER = 0;
 
@@ -60,7 +60,9 @@ export abstract class IcmpPacket implements IpPayload {
     return `ICMP-${this.type}`;
   }
 
-  abstract getDetails(layer: Layer): Record<string, string | number | object>;
+  getPorts(): Ports {
+    return null;
+  }
 }
 
 //   0                   1                   2                   3
@@ -102,27 +104,6 @@ class EchoMessage extends IcmpPacket {
       ...this.data,
     ]);
   }
-
-  getDetails(layer: number): Record<string, string | number | object> {
-    if (layer == Layer.Transport) {
-      return {
-        Warning: ICMP_WARNING,
-      };
-    }
-
-    // TODO: If we decide to hide ICMP packets on Application layer, this should be removed
-    if (this.type == 8) {
-      return {
-        Application: "Ping",
-        Task: "Echo Request",
-      };
-    } else {
-      return {
-        Application: "Ping",
-        Task: "Echo Reply",
-      };
-    }
-  }
 }
 
 export class EchoRequest extends EchoMessage {

src/packets/ip.ts

@@ -6,6 +6,11 @@ export const ICMP_PROTOCOL_NUMBER = 1;
 export const TCP_PROTOCOL_NUMBER = 6;
 export const UDP_PROTOCOL_NUMBER = 17;
 
+export interface Ports {
+  sourcePort: number;
+  destinationPort: number;
+}
+
 export class EmptyPayload implements IpPayload {
   byteLength() {
     return 0;
@@ -24,6 +29,10 @@ export class EmptyPayload implements IpPayload {
   getDetails() {
     return {};
   }
+
+  getPorts(): Ports {
+    return null;
+  }
 }
 
 /// Internet Protocol (IP) address
@@ -130,7 +139,9 @@ export interface IpPayload {
   // Packet protocol name
   getPacketType(): string;
   // Get details of the payload
-  getDetails(layer: Layer): Record<string, string | number | object>;
+  getDetails?(layer: Layer): Record<string, string | number | object>;
+  // Get ports of the payload (if any)
+  getPorts(): Ports;
 }
 
 // Info taken from the original RFC: https://datatracker.ietf.org/doc/html/rfc791#section-3.1
@@ -267,24 +278,13 @@ export class IPv4Packet implements FramePayload {
   }
 
   getDetails(layer: Layer) {
-    // TODO: Refactor Packet Building Process
-    //
-    // Current Implementation:
-    // - Packet building starts at the Network layer
-    // - Frame payload data is directly included here
-    //
-    // Desired Implementation:
-    // - Move frame-specific data to EthernetFrame class
-    // - Implement packet sending using MAC addresses at device level
-
     if (layer == Layer.Network) {
       return {
         Version: this.version,
         "Internet Header Length": this.internetHeaderLength,
         "Type of Service": this.typeOfService,
         "Total Length": this.totalLength,
         Identification: this.identification,
-        Flags: this.flags,
         "Fragment Offset": this.fragmentOffset,
         "Time to Live": this.timeToLive,
         Protocol: this.protocol,

src/packets/tcp.ts

@@ -5,6 +5,9 @@ import {
   TCP_PROTOCOL_NUMBER,
 } from "./ip";
 import { Layer } from "../types/layer";
+import { Ports } from "./ip";
+
+export const TCP_FLAGS_KEY = "tcp_flags";
 
 export class Flags {
   // Urgent Pointer field significant
@@ -211,12 +214,33 @@ export class TcpSegment implements IpPayload {
     return "TCP";
   }
 
-  // Dummy Method for the moment
   getDetails(layer: Layer) {
-    return { Layer: layer };
+    if (layer == Layer.Transport) {
+      return {
+        "Seq Number": this.sequenceNumber,
+        "Ack Number": this.acknowledgementNumber,
+        "Window Size": this.window,
+        [TCP_FLAGS_KEY]: {
+          Urg: this.flags.urg,
+          Ack: this.flags.ack,
+          Psh: this.flags.psh,
+          Rst: this.flags.rst,
+          Syn: this.flags.syn,
+          Fin: this.flags.fin,
+        },
+        Payload: this.data,
+      };
+    } else if (layer == Layer.App) {
+      return { Request: new TextDecoder("utf-8").decode(this.data) };
+    }
   }
 
-  // ### IpPayload ###
+  getPorts(): Ports {
+    return {
+      sourcePort: this.sourcePort,
+      destinationPort: this.destinationPort,
+    };
+  }
 }
 
 function checkUint(n: number, numBits: number): void {

src/styles/info.css

@@ -94,3 +94,20 @@
   max-width: 100%; /* Prevents it from exceeding the container */
   display: block;
 }
+
+/* TCP Flags Table Styles */
+.tcp-flag-active {
+  font-weight: bold;
+  color: #28a745;
+}
+
+.tcp-flag-inactive {
+  font-weight: bold;
+  color: #dc3545;
+}
+
+.tcp-flag-header {
+  display: block;
+  text-align: center;
+  margin-bottom: 8px;
+}