Fix partial-connection indicator leaking across stack members

applyPortStatus() used a global querySelectorAll which matched the same
stylename (e.g. gigabitethernet0-35) in every chassis panel simultaneously.
For a virtual chassis, GigabitEthernet1/0/35 and GigabitEthernet2/0/35 both
derive the same stylename, so a partially-connected port on one member
incorrectly highlighted the same port position on all other members.

Fix: add a device field to each portData entry (the ports_chassis key) and
scope querySelectorAll to the matching #dv-svg-wrapper-{device} div, falling
back to a global search only when the wrapper is not found.

Author: peterbaumert

netbox_device_view/templates/netbox_device_view/deviceview.html

@@ -113,6 +113,7 @@
     {% for device, interfaces in ports_chassis.items %}
     {% for int in interfaces %}
     {
+      device: "{{ device }}",
       stylename: "{{ int.stylename }}",
       url: "{{ int.get_absolute_url }}trace/",
       name: "{{ int.name|escapejs }}",
@@ -130,7 +131,10 @@
 
   function applyPortStatus() {
     portData.forEach(function (p) {
-      var groups = document.querySelectorAll(".dv-port." + CSS.escape(p.stylename));
+      var wrapper = document.getElementById("dv-svg-wrapper-" + p.device);
+      var groups = wrapper
+        ? wrapper.querySelectorAll(".dv-port." + CSS.escape(p.stylename))
+        : document.querySelectorAll(".dv-port." + CSS.escape(p.stylename));
       groups.forEach(function (g) {
         var rect = g.querySelector(".dv-port-rect");
 

netbox_device_view/templates/netbox_device_view/ports.html

@@ -110,6 +110,7 @@ <h2 class="card-header">Deviceview {{ object.name }}</h2>
     {% for switch, interfaces in ports_chassis.items %}
     {% for int in interfaces %}
     {
+      device: "{{ switch }}",
       stylename: "{{ int.stylename }}",
       url: "{{ int.get_absolute_url }}trace/",
       name: "{{ int.name|escapejs }}",
@@ -127,7 +128,10 @@ <h2 class="card-header">Deviceview {{ object.name }}</h2>
 
   function applyPortStatus() {
     portData.forEach(function (p) {
-      var groups = document.querySelectorAll(".dv-port." + CSS.escape(p.stylename));
+        var wrapper = document.getElementById("dv-svg-wrapper-" + p.device);
+        var groups = wrapper
+          ? wrapper.querySelectorAll(".dv-port." + CSS.escape(p.stylename))
+          : document.querySelectorAll(".dv-port." + CSS.escape(p.stylename));
       groups.forEach(function (g) {
         var rect = g.querySelector(".dv-port-rect");
         if (p.cableNoColor) {