diff --git a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm b/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm index a6468a0a..e4355ba6 100644 --- a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm +++ b/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}) { diff --git a/share/public/css/netdisco.css b/share/public/css/netdisco.css index 261cb879..ac427dc3 100644 --- a/share/public/css/netdisco.css +++ b/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; diff --git a/share/public/javascripts/d3-force-network-chart.js b/share/public/javascripts/d3-force-network-chart.js index 3e89fe6c..dfbbc587 100644 --- a/share/public/javascripts/d3-force-network-chart.js +++ b/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) { - v.main.labels.attr("lines", null); + if (v.conf.wrapLabels && v.main.labels) { + 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; diff --git a/share/views/ajax/device/netmap.tt b/share/views/ajax/device/netmap.tt index e6404369..bcaaa860 100644 --- a/share/views/ajax/device/netmap.tt +++ b/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')); }); diff --git a/share/views/js/device.js b/share/views/js/device.js index 006482d0..f9cb9ced 100644 --- a/share/views/js/device.js +++ b/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();