feat: click navigates to port detail; tooltip adds Trace link

Both the CSS grid and SVG rendering paths now navigate to the port
detail page on click. A 'Trace' link is added to the hover tooltip
so the trace view remains one click away.

Author: peterbaumert

netbox_device_view/templates/netbox_device_view/deviceview.html

@@ -55,7 +55,7 @@
 		>
 			{% for int in interfaces %}
 			<a
-				href="{{int.get_absolute_url}}trace/"
+				href="{{int.get_absolute_url}}"
 				class="device-view-port 
 				{% if cable_colors == "on" and int.cable.color == "" or cable_colors == "on" and int.cable == None %}
 				nocolor
@@ -81,6 +81,7 @@
 					{% endif %}
 					{% endfor %}
 				{% endif %}
+				<hr><a href='{{int.get_absolute_url}}trace/'>Trace</a>
 				"
 				style="grid-area: {{ int.stylename }}{% if cable_colors == 'on' and int.cable.color != '' %}; background-color: #{{ int.cable.color }}{% endif %}"
 				data-bs-toggle="tooltip"
@@ -115,7 +116,8 @@
     {
       device: "{{ device }}",
       stylename: "{{ int.stylename }}",
-      url: "{{ int.get_absolute_url }}trace/",
+      detailUrl: "{{ int.get_absolute_url }}",
+      traceUrl: "{{ int.get_absolute_url }}trace/",
       name: "{{ int.name|escapejs }}",
       enabled: {% if int.enabled or int.is_port %}true{% else %}false{% endif %},
       connected: {% if int.connected_endpoints|length > 0 or int.is_port and int.link_peers|length > 0 %}true{% else %}false{% endif %},
@@ -165,14 +167,15 @@
 
         g.setAttribute("role", "link");
         g.style.cursor = "pointer";
-        g.addEventListener("click", function () { window.location.href = p.url; });
+        g.addEventListener("click", function () { window.location.href = p.detailUrl; });
         g.addEventListener("keydown", function (e) {
-          if (e.key === "Enter" || e.key === " ") { window.location.href = p.url; }
+          if (e.key === "Enter" || e.key === " ") { window.location.href = p.detailUrl; }
         });
 
         var title = p.name;
         var peers = p.connectedEndpoints.length > 0 ? p.connectedEndpoints : p.linkPeers;
         if (peers.length > 0) { title += "<hr>" + peers.join("<br>"); }
+        title += '<hr><a href="' + p.traceUrl + '">Trace</a>';
         g.setAttribute("data-bs-html", "true");
         g.setAttribute("data-bs-custom-class", "device-view-tooltip");
         g.setAttribute("title", title);