show ips functionality; improvement to maximise icon; bugfix d3-force label wrap

lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm

@@ -158,7 +158,9 @@ ajax '/ajax/data/device/netmap' => require_login sub {
           (($device->get_column('log') || 1) * 1000) : 3000),
         (param('colorgroups') ?
           (COLORVALUE => ($first_hgrp ? setting('host_group_displaynames')->{$first_hgrp} : 'Other')) : ()),
-        LABEL => $name,
+        LABEL => (param('showips')
+          ? (($name eq $device->ip) ? $name : ($name .' '. $device->ip)) : $name),
+        ORIG_LABEL => $name,
       };
 
       if ($mapshow ne 'neighbors' and exists $pos_for->{$device->ip}) {

share/public/css/netdisco.css

@@ -466,6 +466,12 @@ td > form.nd_inline-form {
   width: 56px;
 }
 
+/* netmap maximise icon */
+#nd2_fullscreen_netmap {
+  fill: black;
+  font-size: 15px;
+}
+
 /* fixup for prepended checkbox in sidebar */
 .nd_searchcheckbox {
   width: 121px;

share/public/javascripts/d3-force-network-chart.js

@@ -3560,7 +3560,7 @@ function netGobrechtsD3Force(domContainerId, options, apexPluginId, apexPageItem
             v.status.wrapLabelsOnNextTick = true;
         }
         if (v.status.graphStarted) {
-            v.main.labels.attr("lines", null);
+            v.main.labels.each(function() { d3.select(this).attr("lines", null) });
             v.tools.createCustomizeWizardIfNotRendering();
         }
         return graph;
@@ -3582,8 +3582,8 @@ function netGobrechtsD3Force(domContainerId, options, apexPluginId, apexPageItem
             return v.conf.wrappedLabelWidth;
         }
         v.conf.wrappedLabelWidth = value;
-        if (v.conf.wrapLabels) {
+        if (v.conf.wrapLabels && v.main.labels) {
-            v.main.labels.attr("lines", null);
+            v.main.labels.each(function() { d3.select(this).attr("lines", null) });
             v.status.wrapLabelsOnNextTick = true;
         }
         if (v.status.graphStarted) {
@@ -3612,7 +3612,7 @@ function netGobrechtsD3Force(domContainerId, options, apexPluginId, apexPageItem
             v.status.wrapLabelsOnNextTick = true;
         }
         if (v.status.graphStarted) {
-            v.main.labels.attr("lines", null);
+            v.main.labels.each(function() { d3.select(this).attr("lines", null) });
             v.tools.createCustomizeWizardIfNotRendering();
         }
         return graph;

share/views/ajax/device/netmap.tt

@@ -40,13 +40,13 @@ var tau = 2 * Math.PI;
 
 var arc = d3.svg.arc()
   .innerRadius(radius * 0.5)
-  .outerRadius(radius * 0.9)
+  .outerRadius(radius * 0.8)
   .startAngle(0)
   .endAngle(0.33 * tau);
 
 var arc2 = d3.svg.arc()
   .innerRadius(radius * 0.5)
-  .outerRadius(radius * 0.9)
+  .outerRadius(radius * 0.8)
   .startAngle(0)
   .endAngle(tau);
 
@@ -70,11 +70,12 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
 
   jQuery(document).ready(function() {
     window.graph = netGobrechtsD3Force('netmap_pane')
-      .debug(true)
+      // .debug(true)
       [% '.showLegend(false)' IF NOT params.colorgroups %]
+      .wrapLabels(true)
       .lassoMode(true)
       .dragMode(true)
-      .nodeEventToOpenLink('click')
+      .nodeEventToOpenLink('dblclick')
       .nodeLinkTarget('none')
       .labelDistance(2)
       .linkDistance(120)
@@ -90,11 +91,13 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
       .width( parseInt(jQuery('#netmap_pane').parent().css('width')) )
       .height( window.innerHeight - 100 )
       .showSelfLinks(true)
+      .showTooltips(true)
+      .tooltipPosition('svgTopLeft')
       .minNodeRadius(4)
       .maxNodeRadius(14)
       .minZoomFactor(0.1)
       .maxZoomFactor(10)
-      .charge(-550)
+      .charge(-900)
       .gravity(0.3);
 
     graph['nd2'] = {};
@@ -158,7 +161,7 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
       .attr("y", 17)
       .attr("text-anchor", "start")
       .attr("font-family", "FontAwesome")
-      .text(function() { return '\uf0b2' })
+      .text(function() { return '\uf065' })
       .on("click", function() {
         requestFullScreen(document.getElementById('netmap_pane'));
       });

share/views/js/device.js

@@ -24,6 +24,7 @@
     $("[rel=tooltip]").tooltip({live: true});
     $("[rel=popover]").popover({live: true});
 
+    // positions save not available in netmap neighbors view
     if ($("input[name='mapshow']:checked").val() == 'neighbors') {
       $('#nd_netmap-save').prop('disabled', true).removeClass('btn-info');
     } else {
@@ -106,6 +107,27 @@
         $("[rel=tooltip]").tooltip({live: true});
     });
 
+    // netmap show controls
+    $('#nd_showips').change(function() {
+      if ($(this).prop('checked')) {
+        graph.inspect().main.nodes.each(function(n) {
+          if (n['ORIG_LABEL'] != n['ID']) {
+            n['LABEL'] = n['ORIG_LABEL'] + ' ' + n['ID'];
+          }
+        });
+        graph.wrapLabels(true).preventLabelOverlappingOnForceEnd(true).start();
+      } else {
+        graph.inspect().main.nodes.each(function(n) {
+          n['LABEL'] = n['ORIG_LABEL'];
+        });
+        graph.preventLabelOverlappingOnForceEnd(
+          ($("input[name='mapshow']:checked").val() == 'neighbors')
+          ? true : false
+        );
+        graph.wrapLabels(false).start();
+      }
+    });
+
     // netmap pin/release controls
     $('#nd_netmap-releaseall').on('click', function(event) {
       event.preventDefault();