133 enhancement bubbletext (#136)

* added extra fields to popup

* open new tab with device info

netbox_topology_views/static/netbox_topology_views/js/app.js

@@ -1 +1 @@
-var graph=null,container=null,downloadButton=null,MIME_TYPE="image/png",canvas=null,csrftoken=null,nodes=new vis.DataSet,edges=new vis.DataSet,options={interaction:{hover:!0,hoverConnectedEdges:!0,multiselect:!1},nodes:{shape:"image",brokenImage:"../../static/netbox_topology_views/img/role-unknown.png",size:35,font:{multi:"md",face:"helvetica"}},edges:{length:100,width:2,font:{face:"helvetica"},shadow:{enabled:!0}},physics:{solver:"forceAtlas2Based"}},selected_regions=[],selected_sites=[],coord_save_checkbox=null,htmlElement=null;function getCookie(e){var t=null;if(document.cookie&&""!==document.cookie)for(var o=document.cookie.split(";"),n=0;n<o.length;n++){var d=o[n].trim();if(d.substring(0,e.length+1)===e+"="){t=decodeURIComponent(d.substring(e.length+1));break}}return t}function htmlTitle(e){return(container=document.createElement("div")).innerHTML=e,container}function addEdge(e){e.title=htmlTitle(e.title),edges.add(e)}function addNode(e){e.title=htmlTitle(e.title),nodes.add(e)}function iniPlotboxIndex(){document.addEventListener("DOMContentLoaded",function(){csrftoken=getCookie("csrftoken"),container=document.getElementById("visgraph"),htmlElement=document.getElementsByTagName("html")[0],downloadButton=document.getElementById("btnDownloadImage"),handleLoadData(),btnFullView=document.getElementById("btnFullView"),coord_save_checkbox=document.getElementById("id_save_coords")},!1)}function performGraphDownload(){var e=document.createElement("a"),t=canvas.toDataURL(MIME_TYPE);e.href=t,e.download="topology",document.body.appendChild(e),e.click(),document.body.removeChild(e)}function handleLoadData(){null!==topology_data&&("dark"==htmlElement.dataset.netboxColorMode&&(options.nodes.font.color="#fff"),graph=null,nodes=new vis.DataSet,edges=new vis.DataSet,graph=new vis.Network(container,{nodes:nodes,edges:edges},options),topology_data.edges.forEach(addEdge),topology_data.nodes.forEach(addNode),graph.fit(),canvas=document.getElementById("visgraph").getElementsByTagName("canvas")[0],downloadButton.onclick=function(e){return performGraphDownload(),!1},graph.on("dragEnd",function(e){if(dragged=this.getPositions(e.nodes),coord_save_checkbox.checked&&0!==Object.keys(dragged).length)for(dragged_device in dragged){var t=dragged_device,o=new XMLHttpRequest;o.open("PATCH","/api/plugins/netbox_topology_views/save-coords/save_coords/"),o.setRequestHeader("X-CSRFToken",csrftoken),o.setRequestHeader("Accept","application/json"),o.setRequestHeader("Content-Type","application/json"),o.onreadystatechange=function(){4===o.readyState&&(console.log(o.status),console.log(o.responseText))};var n=JSON.stringify({node_id:t,x:dragged[t].x,y:dragged[t].y});o.send(n)}}))}
+var graph=null,container=null,downloadButton=null,MIME_TYPE="image/png",canvas=null,csrftoken=null,nodes=new vis.DataSet,edges=new vis.DataSet,options={interaction:{hover:!0,hoverConnectedEdges:!0,multiselect:!1},nodes:{shape:"image",brokenImage:"../../static/netbox_topology_views/img/role-unknown.png",size:35,font:{multi:"md",face:"helvetica"}},edges:{length:100,width:2,font:{face:"helvetica"},shadow:{enabled:!0}},physics:{solver:"forceAtlas2Based"}},selected_regions=[],selected_sites=[],coord_save_checkbox=null,htmlElement=null;function getCookie(e){var o=null;if(document.cookie&&""!==document.cookie)for(var t=document.cookie.split(";"),n=0;n<t.length;n++){var d=t[n].trim();if(d.substring(0,e.length+1)===e+"="){o=decodeURIComponent(d.substring(e.length+1));break}}return o}function htmlTitle(e){return(container=document.createElement("div")).innerHTML=e,container}function addEdge(e){e.title=htmlTitle(e.title),edges.add(e)}function addNode(e){e.title=htmlTitle(e.title),nodes.add(e)}function iniPlotboxIndex(){document.addEventListener("DOMContentLoaded",function(){csrftoken=getCookie("csrftoken"),container=document.getElementById("visgraph"),htmlElement=document.getElementsByTagName("html")[0],downloadButton=document.getElementById("btnDownloadImage"),handleLoadData(),btnFullView=document.getElementById("btnFullView"),coord_save_checkbox=document.getElementById("id_save_coords")},!1)}function performGraphDownload(){var e=document.createElement("a"),o=canvas.toDataURL(MIME_TYPE);e.href=o,e.download="topology",document.body.appendChild(e),e.click(),document.body.removeChild(e)}function handleLoadData(){null!==topology_data&&("dark"==htmlElement.dataset.netboxColorMode&&(options.nodes.font.color="#fff"),graph=null,nodes=new vis.DataSet,edges=new vis.DataSet,graph=new vis.Network(container,{nodes:nodes,edges:edges},options),topology_data.edges.forEach(addEdge),topology_data.nodes.forEach(addNode),graph.fit(),canvas=document.getElementById("visgraph").getElementsByTagName("canvas")[0],downloadButton.onclick=function(e){return performGraphDownload(),!1},graph.on("dragEnd",function(e){if(dragged=this.getPositions(e.nodes),coord_save_checkbox.checked&&0!==Object.keys(dragged).length)for(dragged_device in dragged){var o=dragged_device,t=new XMLHttpRequest;t.open("PATCH","/api/plugins/netbox_topology_views/save-coords/save_coords/"),t.setRequestHeader("X-CSRFToken",csrftoken),t.setRequestHeader("Accept","application/json"),t.setRequestHeader("Content-Type","application/json"),t.onreadystatechange=function(){4===t.readyState&&(console.log(t.status),console.log(t.responseText))};var n=JSON.stringify({node_id:o,x:dragged[o].x,y:dragged[o].y});t.send(n)}}),graph.on("doubleClick",function(e){for(selected_device in console.log(e.nodes),selected_devices=e.nodes,selected_devices)console.log(selected_device),console.log(selected_devices[selected_device]),url="/dcim/devices/"+selected_devices[selected_device]+"/",console.log(url),window.open(url,"_blank")}))}

netbox_topology_views/static_dev/js/home.js

@@ -147,5 +147,15 @@ function handleLoadData() {
                 }
             }
         });
+
+        graph.on("doubleClick", function (params) {
+            console.log(params.nodes);
+            selected_devices = params.nodes;
+            for (selected_device in selected_devices) {
+                url = "/dcim/devices/" + selected_devices[selected_device] + "/";
+                window.open(url, "_blank");
+            }
+
+        });
     }
 }

netbox_topology_views/views.py

@@ -33,6 +33,15 @@ def create_node(device):
         node_content += "<tr><th>IP Address: </th><td>" + str(device.primary_ip.address) + "</td></tr>"
     if device.site is not None:
         node_content += "<tr><th>Site: </th><td>" + device.site.name + "</td></tr>"
+    if device.location is not None:
+        node_content += "<tr><th>Location: </th><td>" + device.location.name + "</td></tr>"
+    if device.rack is not None:
+        node_content += "<tr><th>Rack: </th><td>" + device.rack.name + "</td></tr>"
+    if device.position is not None:
+        if device.face is not None:
+            node_content += "<tr><th>Position: </th><td> {} ({}) </td></tr>".format(device.position, device.face)
+        else:
+            node_content += "<tr><th>Position: </th><td>" + device.position + "</td></tr>"
 
     dev_title = "<table> %s </table>" % (node_content)