implement show link speeds on links

lib/App/Netdisco/DB/Result/Virtual/DeviceLinks.pm

@@ -11,10 +11,11 @@ __PACKAGE__->table('device_links');
 __PACKAGE__->result_source_instance->is_virtual(1);
 __PACKAGE__->result_source_instance->view_definition(<<ENDSQL
  SELECT dp.ip AS left_ip, dp.port AS left_port, dp.name AS left_descr,
-        dp.speed,
+        replace(replace(btrim(dp.speed, 'bps'), '.0', ''), ' ', '') AS speed,
         dp2.ip AS right_ip, dp2.port AS right_port, dp2.name AS right_descr
    FROM ( SELECT device_port.ip, device_port.port, device_port.name,
-                 device_port.speed,
+                 (CASE WHEN device_port.speed LIKE '%bps' THEN device_port.speed
+                  ELSE '' END) as speed,
                  device_port.remote_ip, device_port.remote_port
            FROM device_port
           WHERE device_port.remote_port IS NOT NULL

share/config.yml

@@ -133,6 +133,8 @@ sidebar_defaults:
     mac_format:   { default: IEEE }
     neigh_id:     { default: null }
   device_netmap:
+    showips:     { default: null }
+    showspeed:   { default: null }
     mapshow:     { default: neighbors }
     colorgroups: { default: checked }
     dynamicsize: { default: null }

share/public/css/netdisco.css

@@ -467,11 +467,17 @@ td > form.nd_inline-form {
 }
 
 /* netmap maximise icon */
-#nd2_fullscreen_netmap {
+#nd2_fullscreen-netmap {
   fill: black;
   font-size: 15px;
 }
 
+/* netmap link labels */
+.nd_netmap-linklabel {
+  pointer-events: none;
+  font-weight: bold;
+}
+
 /* fixup for prepended checkbox in sidebar */
 .nd_searchcheckbox {
   width: 121px;

share/views/ajax/device/netmap.tt

@@ -153,9 +153,25 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
       graph.inspect().main.force.on('end.setupfornetdisco', null);
     });
 
+    graph.inspect().main.force.on('tick.movelinklabel', function() {
+      graph.inspect().dom.svg.selectAll('text.nd_netmap-linklabel')
+        .attr('x', function(d) {
+          var text = d3.select(this);
+          var sx = graph.nodeDataById(text.attr('data-source')).x;
+          var tx = graph.nodeDataById(text.attr('data-target')).x;
+          return ((sx + tx) / 2);
+        })
+        .attr('y', function(d) {
+          var text = d3.select(this);
+          var sy = graph.nodeDataById(text.attr('data-source')).y;
+          var ty = graph.nodeDataById(text.attr('data-target')).y;
+          return ((sy + ty) / 2);
+        });
+    });
+
     graph.inspect().dom.svg
       .append("svg:text")
-      .attr("id", "nd2_fullscreen_netmap")
+      .attr("id", "nd2_fullscreen-netmap")
       .attr("class", "link")
       .attr("x", (graph.width() - 17))
       .attr("y", 17)
@@ -183,6 +199,21 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
     graph.start(netmapdata);
     d3.select("#nd2_netmap-spinner").call(spin);
 
+    graph.inspect().main.links.each(function(l) {
+      var link = d3.select(this);
+      var data = link.datum();
+      graph.inspect().dom.svg.select('g.graph')
+        .append('svg:text')
+        .attr('class', 'nd_netmap-linklabel')
+        .attr('x', function(d) { return data.source.x; })
+        .attr('y', function(d) { return data.source.y; })
+        .attr('data-source', function(d) { return data.source.ID; })
+        .attr('data-target', function(d) { return data.target.ID; })
+        .attr('text-anchor', 'middle')
+        [% ".attr('fill', 'black')" IF params.showspeed %]
+        .text(function(d) { return data.SPEED; });
+    });
+
     if ('[% params.mapshow %]' == 'neighbors') {
       setTimeout(function() {
         if ('[% params.dynamicsize %]' == 'on') {
@@ -191,7 +222,7 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
           var node = graph.nodeDataById( graph['nd2']['centernode'] );
           graph.zoomSmooth(node.x, node.y, node.radius * 100);
         }
-      }, 1000);
+      }, 1500);
     }
   });
 

share/views/js/device.js

@@ -123,6 +123,11 @@
         graph.wrapLabels(false).start();
       }
     });
+    $('#nd_showspeed').change(function() {
+      $('.nd_netmap-linklabel').css('fill',
+        ($(this).prop('checked') ? 'black' : 'none')
+      );
+    });
 
     // netmap pin/release controls
     $('#nd_netmap-releaseall').on('click', function(event) {

share/views/sidebar/device/netmap.tt

@@ -12,6 +12,7 @@
             <div class="checkbox pull-left">
               <label>
                 <input type="checkbox" name="showips" id="nd_showips"
+                  [% 'checked="checked"' IF vars.sidebar_defaults.device_netmap.showips %]
                   data-toggle="toggle" data-size="small" data-width="30"
                   data-on="Show" data-off=" " data-onstyle="success">
                 <span onclick="$('#nd_showips').bootstrapToggle('toggle')">&nbsp;Management IPs</span>
@@ -20,6 +21,7 @@
             <div class="checkbox pull-left">
               <label>
                 <input type="checkbox" name="showspeed" id="nd_showspeed"
+                  [% 'checked="checked"' IF vars.sidebar_defaults.device_netmap.showspeed %]
                   data-toggle="toggle" data-size="small" data-width="30"
                   data-on="Show" data-off=" " data-onstyle="success">
                 <span onclick="$('#nd_showspeed').bootstrapToggle('toggle')">&nbsp;Link Speed</span>