feat: add ifacesDropdown (#257)

Author: pgallino

src/graphics/renderables/base_info.ts

@@ -11,7 +11,6 @@ export abstract class BaseInfo implements Renderable {
 
   constructor(title: string) {
     this.information = new TextInfo(title);
-    this.addCommonButtons();
   }
 
   protected abstract addCommonInfoFields(): void;

src/graphics/renderables/device_info.ts

@@ -18,6 +18,7 @@ import { ArpTable } from "./arp_table";
 import { Layer } from "../../types/layer";
 import { DataNetworkDevice, DataSwitch } from "../../types/data-devices";
 import { SwitchingTable } from "./switching_table";
+import { ToggleInfo } from "../components/toggle_info";
 
 export class DeviceInfo extends BaseInfo {
   readonly device: ViewDevice;
@@ -26,6 +27,7 @@ export class DeviceInfo extends BaseInfo {
     super(getTypeName(device) + " Information");
     this.device = device;
     this.addCommonInfoFields();
+    this.addCommonButtons();
   }
 
   protected addCommonInfoFields(): void {
@@ -38,34 +40,11 @@ export class DeviceInfo extends BaseInfo {
       connections,
       TOOLTIP_KEYS.CONNECTED_DEVICES,
     );
-
-    const layer = this.device.viewgraph.getLayer();
-    const showIp = this.device.getType() !== DeviceType.Switch;
-    const showMac = layer === Layer.Link;
-
-    if (showIp) {
-      this.device.interfaces.forEach((iface) => {
-        this.information.addField(
-          TOOLTIP_KEYS.IP_ADDRESS + (iface.name ? ` (${iface.name})` : ""),
-          iface.ip.toString(),
-          TOOLTIP_KEYS.IP_ADDRESS,
-        );
-      });
-    }
-
-    if (showMac) {
-      this.device.interfaces.forEach((iface) => {
-        this.information.addField(
-          TOOLTIP_KEYS.MAC_ADDRESS + (iface.name ? ` (${iface.name})` : ""),
-          iface.mac.toString(),
-          TOOLTIP_KEYS.MAC_ADDRESS,
-        );
-      });
-    }
   }
 
   protected addCommonButtons(): void {
     this.addDivider();
+
     const connectButton = new Button({
       text: TOOLTIP_KEYS.CONNECT_DEVICE,
       onClick: () => this.device.selectToConnect(),
@@ -91,9 +70,47 @@ export class DeviceInfo extends BaseInfo {
     });
 
     this.inputFields.push(connectButton.toHTML(), deleteButton.toHTML());
+
+    this.addIfacesToggle();
     this.addDivider();
   }
 
+  addIfacesToggle(): void {
+    const layer = this.device.viewgraph.getLayer();
+    const showIp = this.device.getType() !== DeviceType.Switch;
+    const showMac = layer === Layer.Link;
+
+    const fields: { key: string; value: string; tooltip: string }[] = [];
+
+    if (showIp) {
+      this.device.interfaces.forEach((iface) => {
+        fields.push({
+          key: TOOLTIP_KEYS.IP_ADDRESS + (iface.name ? ` (${iface.name})` : ""),
+          value: iface.ip.toString(),
+          tooltip: TOOLTIP_KEYS.IP_ADDRESS,
+        });
+      });
+    }
+    if (showMac) {
+      this.device.interfaces.forEach((iface) => {
+        fields.push({
+          key:
+            TOOLTIP_KEYS.MAC_ADDRESS + (iface.name ? ` (${iface.name})` : ""),
+          value: iface.mac.toString(),
+          tooltip: TOOLTIP_KEYS.MAC_ADDRESS,
+        });
+      });
+    }
+
+    const toggleInfo = new ToggleInfo({
+      title: "Interfaces",
+      fields,
+      toggleButtonText: { on: "Hide Interfaces", off: "Show Interfaces" },
+    });
+
+    this.inputFields.push(toggleInfo.toHTML());
+  }
+
   addProgramRunner(runner: ProgramRunner, programs: ProgramInfo[]): void {
     const programRunnerInfo = new ProgramRunnerInfo(runner, programs);
     this.inputFields.push(...programRunnerInfo.toHTML());

src/graphics/renderables/edge_info.ts

@@ -14,6 +14,7 @@ export class EdgeInfo extends BaseInfo {
     super(TOOLTIP_KEYS.EDGE_INFORMATION);
     this.edge = edge;
     this.addCommonInfoFields();
+    this.addCommonButtons();
     this.addInterfaceDropdowns();
   }
 

src/graphics/renderables/packet_info.ts

@@ -14,6 +14,7 @@ export class PacketInfo extends BaseInfo {
     super("Packet Information");
     this.packet = packet;
     this.addCommonInfoFields();
+    this.addCommonButtons();
     this.addToggleInfo(); // Add the toggle info for packet details
   }
 

src/styles/divider.css

@@ -1,6 +1,6 @@
 /* Style for the divider */
 .divider {
-  border-bottom: 1px solid #d6d6d6; /* Separator line */
+  border-bottom: 1px solid #bcbcbc; /* Separator line */
   margin: 10px 0; /* Spacing above and below */
   width: 100%; /* Takes up the full width of the container */
   box-sizing: border-box; /* Includes padding and border in the total width */