feat: enhance packet info with device identification (src - dest) (#243)

close #202

Author: pgallino

src/graphics/renderables/packet_info.ts

@@ -29,27 +29,41 @@ export class PacketInfo extends BaseInfo {
     const framePayload = this.packet.rawPacket.payload as IPv4Packet;
 
     if (layer == Layer.Link) {
+      const srcDevice = this.packet.viewgraph.getDeviceByMac(
+        this.packet.rawPacket.source,
+      );
+      const dstDevice = this.packet.viewgraph.getDeviceByMac(
+        this.packet.rawPacket.destination,
+      );
+
       this.information.addField(
         TOOLTIP_KEYS.SOURCE_MAC_ADDRESS,
-        this.packet.rawPacket.source.toString(),
+        `${this.packet.rawPacket.source.toString()}${srcDevice ? " (Device " + srcDevice.id + ")" : ""}`,
         TOOLTIP_KEYS.SOURCE_MAC_ADDRESS,
       );
       this.information.addField(
         TOOLTIP_KEYS.DESTINATION_MAC_ADDRESS,
-        this.packet.rawPacket.destination.toString(),
+        `${this.packet.rawPacket.destination.toString()}${dstDevice ? " (Device " + dstDevice.id + ")" : ""}`,
         TOOLTIP_KEYS.DESTINATION_MAC_ADDRESS,
       );
     }
 
     if (layer >= Layer.Network) {
+      const srcDevice = this.packet.viewgraph.getDeviceByIP(
+        framePayload.sourceAddress,
+      );
+      const dstDevice = this.packet.viewgraph.getDeviceByIP(
+        framePayload.destinationAddress,
+      );
+
       this.information.addField(
         TOOLTIP_KEYS.SOURCE_IP_ADDRESS,
-        framePayload.sourceAddress.toString(),
+        `${framePayload.sourceAddress.toString()}${srcDevice ? " (Device " + srcDevice.id + ")" : ""}`,
         TOOLTIP_KEYS.SOURCE_IP_ADDRESS,
       );
       this.information.addField(
         TOOLTIP_KEYS.DESTINATION_IP_ADDRESS,
-        framePayload.destinationAddress.toString(),
+        `${framePayload.destinationAddress.toString()}${dstDevice ? " (Device " + dstDevice.id + ")" : ""}`,
         TOOLTIP_KEYS.DESTINATION_IP_ADDRESS,
       );
     }

src/handlers/layerSelectorHandler.ts

@@ -4,6 +4,7 @@ import { layerToName } from "../types/layer";
 import {
   deselectElement,
   isSelectedElementVisible,
+  refreshElement,
   saveToLocalStorage,
 } from "../types/viewportManager";
 import {
@@ -88,6 +89,8 @@ export class LayerHandler {
     this.leftBar.setButtonsByLayer(selectedLayer);
     if (!isSelectedElementVisible()) {
       deselectElement();
+    } else {
+      refreshElement();
     }
 
     if (showAlert) {

src/types/graphs/viewgraph.ts

@@ -411,12 +411,14 @@ export class ViewGraph {
     return this.datagraph;
   }
 
+  // TODO: This should eventually be changed to use interfaces instead
   getDeviceByIP(ipAddress: IpAddress) {
     return this.getDevices().find((device) => {
       return device instanceof ViewNetworkDevice && device.ip.equals(ipAddress);
     });
   }
 
+  // TODO: This should eventually be changed to use interfaces instead
   getDeviceByMac(destination: MacAddress): ViewDevice {
     return this.getDevices().find((device) => {
       return device.mac.equals(destination);