implement simple d3 based netmap

Netdisco/lib/Netdisco/Web/Device.pm

@@ -82,6 +82,69 @@ ajax '/ajax/content/device/:thing' => sub {
     return "<p>Hello, this is where the ". param('thing') ." content goes.</p>";
 };
 
+ajax '/ajax/content/device/netmap' => sub {
+    content_type('text/html');
+    template 'ajax/device/netmap.tt', {}, { layout => undef };
+};
+
+sub _get_name {
+    my $ip = shift;
+    my $domain = quotemeta( setting('domain_suffix') || '' );
+
+    (my $dns = (var('devices')->{$ip} || '')) =~ s/$domain$//;
+    return ($dns || $ip);
+}
+
+sub _add_children {
+    my ($ptr, $childs) = @_;
+    my @legit = ();
+
+    foreach my $c (@$childs) {
+        next if exists var('seen')->{$c};
+        var('seen')->{$c}++;
+        push @legit, $c;
+        push @{$ptr}, { name => _get_name($c) };
+    }
+
+    for (my $i = 0; $i < @legit; $i++) {
+        $ptr->[$i]->{children} = [];
+        _add_children($ptr->[$i]->{children}, var('links')->{$legit[$i]});
+    }
+}
+
+# d3 seems not to use proper json semantics, so get instead of ajax
+get '/ajax/data/device/netmap' => sub {
+    my $start = param('q');
+    return unless $start;
+
+    my @devices = schema->resultset('Device')->search({}, {
+      result_class => 'DBIx::Class::ResultClass::HashRefInflator',
+      columns => ['ip', 'dns'],
+    })->all;
+    var(devices => { map { $_->{ip} => $_->{dns} } @devices });
+
+    var(links => {});
+    my $rs = schema->resultset('Virtual::DeviceLinks')->search({}, {
+      result_class => 'DBIx::Class::ResultClass::HashRefInflator',
+    });
+
+    while (my $l = $rs->next) {
+        var('links')->{ $l->{left_ip} } ||= [];
+        push @{ var('links')->{ $l->{left_ip} } }, $l->{right_ip};
+    }
+
+    my %tree = (
+        name => _get_name($start),
+        children => [],
+    );
+
+    var(seen => {});
+    _add_children($tree{children}, var('links')->{$start});
+
+    content_type('application/json');
+    return to_json(\%tree);
+};
+
 # device interface addresses
 ajax '/ajax/content/device/addresses' => sub {
     my $ip = param('q');
@@ -202,6 +265,7 @@ get '/device' => sub {
         { id => 'details',   label => 'Details'   },
         { id => 'ports',     label => 'Ports'     },
         { id => 'modules',   label => 'Modules'   },
+        { id => 'netmap',    label => 'Neighbors' },
         { id => 'addresses', label => 'Addresses' },
     ]);
 

Netdisco/public/css/netdisco.css

@@ -350,3 +350,22 @@ form .clearfix.success input {
 }
 
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* D3 SVG */
+
+.node circle {
+  fill: #fff;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.node {
+  font: 10px sans-serif;
+}
+
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

Netdisco/views/ajax/device/netmap.tt

@@ -0,0 +1,65 @@
+<script>
+
+var diameter = window.innerHeight;
+
+var tree = d3.layout.tree()
+    .size([360, diameter])
+    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
+
+var diagonal = d3.svg.diagonal.radial()
+    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
+
+var svg = d3.select("#netmap_pane").append("svg")
+    .attr("width", window.innerWidth - 50)
+    .attr("height", diameter - 100)
+    .attr("pointer-events", "all")
+  .append('g')
+    .call(d3.behavior.zoom().on("zoom", redraw))
+  .append("g")
+    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
+
+// FIXME there must be a way to discover the radial tree's size?
+svg.append('rect')
+    .attr("x", (0 - (diameter * 2)))
+    .attr('width', "400%")
+    .attr("y", (0 - (diameter * 2)))
+    .attr('height', "400%")
+    .attr('fill', 'white');
+
+function redraw() {
+  // console.log("here", d3.event.translate, d3.event.scale);
+  svg.attr("transform",
+    "translate(" + d3.event.translate + ")"
+    + "scale(" + d3.event.scale + ")"
+    + "translate(" + (diameter / 2) + "," + (diameter / 2) + ")");
+}
+
+d3.json("[% uri_for('/ajax/data/device/netmap') %]?&q=[% params.q | uri %]", function(error, root) {
+  var nodes = tree.nodes(root),
+      links = tree.links(nodes);
+
+  var link = svg.selectAll(".link")
+      .data(links)
+    .enter().append("path")
+      .attr("class", "link")
+      .attr("d", diagonal);
+
+  var node = svg.selectAll(".node")
+      .data(nodes)
+    .enter().append("g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
+
+  node.append("circle")
+      .attr("r", 4.5);
+
+  node.append("text")
+      .attr("dy", ".31em")
+      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
+      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
+      .text(function(d) { return d.name; });
+});
+
+d3.select(self.frameElement).style("height", diameter - 100 + "px");
+
+</script>

Netdisco/views/layouts/main.tt

@@ -15,6 +15,7 @@
   <script type="text/javascript" src="[% uri_base %]/javascripts/jquery-history.js"></script>
   <script type="text/javascript" src="[% uri_base %]/javascripts/jquery-deserialize.js"></script>
   <script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap.min.js"></script>
+  <script type="text/javascript" src="[% uri_base %]/javascripts/d3.min.js"></script>
 
   <script type="text/javascript">
     var uri_base = '[% uri_base %]';