Manual Device Topology

Needed to add the 'autocomplete' jQuery UI component because
it can do minLength=0 properly. Used the smoothness UI theme.

Added typeahead AJAX calls to support the topology searching.

Added new plugin and template for the topology editing page.

Netdisco/lib/App/Netdisco/Web/Plugin/AdminTask/PseudoDevice.pm

@@ -10,7 +10,7 @@ use Try::Tiny;
 
 register_admin_task({
   tag => 'pseudodevice',
-  label => 'Manage Pseudo Devices',
+  label => 'Pseudo Devices',
 });
 
 sub _sanity_ok {

Netdisco/lib/App/Netdisco/Web/Plugin/AdminTask/Topology.pm

@@ -0,0 +1,90 @@
+package App::Netdisco::Web::Plugin::AdminTask::Topology;
+
+use Dancer ':syntax';
+use Dancer::Plugin::Ajax;
+use Dancer::Plugin::DBIC;
+
+use App::Netdisco::Web::Plugin;
+use Try::Tiny;
+
+register_admin_task({
+  tag => 'topology',
+  label => 'Manual Device Topology',
+});
+
+sub _sanity_ok {
+    my $happy = 0;
+
+    try {
+        return 0 unless var('user')->admin;
+
+        return 0 unless length param('dns')
+          and param('dns') =~ m/^[[:print:]]+$/
+          and param('dns') !~ m/[[:space:]]/;
+
+        my $ip = NetAddr::IP::Lite->new(param('ip'));
+        return 0 if $ip->addr eq '0.0.0.0';
+
+        return 0 unless length param('ports')
+          and param('ports') =~ m/^[[:digit:]]+$/;
+
+        $happy = 1;
+    };
+
+    return $happy;
+}
+
+ajax '/ajax/content/admin/topology/add' => sub {
+    forward '/ajax/content/admin/topology'
+      unless _sanity_ok();
+
+    try {
+        schema('netdisco')->txn_do(sub {
+          my $device = schema('netdisco')->resultset('Device')
+            ->create({
+              ip => param('ip'),
+              dns => param('dns'),
+              vendor => 'netdisco',
+              last_discover => \'now()',
+            });
+
+          $device->ports->populate([
+            ['port'],
+            map {["Port$_"]} @{[1 .. param('ports')]},
+          ]);
+        });
+    };
+
+    forward '/ajax/content/admin/topology';
+};
+
+ajax '/ajax/content/admin/topology/del' => sub {
+    forward '/ajax/content/admin/topology'
+      unless _sanity_ok();
+
+    try {
+        schema('netdisco')->txn_do(sub {
+          my $device = schema('netdisco')->resultset('Device')
+            ->find({ip => param('ip')});
+
+          $device->ports->delete;
+          $device->delete;
+        });
+    };
+
+    forward '/ajax/content/admin/topology';
+};
+
+ajax '/ajax/content/admin/topology' => sub {
+    return unless var('user')->admin;
+
+    my $set = schema('netdisco')->resultset('Topology')
+      ->search({},{order_by => [qw/dev1 dev2 port1/]});
+
+    content_type('text/html');
+    template 'ajax/admintask/topology.tt', {
+      results => $set,
+    }, { layout => undef };
+};
+
+true;

Netdisco/lib/App/Netdisco/Web/TypeAhead.pm

@@ -4,13 +4,46 @@ use Dancer ':syntax';
 use Dancer::Plugin::Ajax;
 use Dancer::Plugin::DBIC;
 
-# support typeahead with simple AJAX query for device names
+use App::Netdisco::Util::Web (); # for sort_port
-ajax '/ajax/data/device/typeahead' => sub {
+use Try::Tiny;
-    my $q = param('query');
+
+ajax '/ajax/data/devicename/typeahead' => sub {
+    my $q = param('query') || param('term');
     my $set = schema('netdisco')->resultset('Device')->search_fuzzy($q);
 
     content_type 'application/json';
     return to_json [map {$_->dns || $_->name || $_->ip} $set->all];
 };
 
+ajax '/ajax/data/deviceip/typeahead' => sub {
+    my $q = param('query') || param('term');
+    my $set = schema('netdisco')->resultset('Device')->search_fuzzy($q);
+
+    content_type 'application/json';
+    return to_json [map {
+      {label => ($_->dns || $_->name || $_->ip), value => $_->ip}
+    } $set->all];
+};
+
+ajax '/ajax/data/port/typeahead' => sub {
+    my $dev  = param('dev1')  || param('dev2');
+    my $port = param('port1') || param('port2');
+    return unless length $dev;
+
+    my $set = undef;
+    try {
+        $set = schema('netdisco')->resultset('Device')
+          ->find({ip => $dev})->ports({},{order_by => 'port'});
+        $set = $set->search({port => { -ilike => "\%$port\%" }})
+          if length $port;
+    };
+    return unless defined $set;
+
+    my $results = [ sort { &App::Netdisco::Util::Web::sort_port($a->port, $b->port) } $set->all ];
+    return unless scalar @$results;
+
+    content_type 'application/json';
+    return to_json [map {$_->port} @$results];
+};
+
 true;

Netdisco/share/public/css/netdisco.css

@@ -27,6 +27,14 @@ body {
   width: 100%;
 }
 
+/* jquery ui autocomplete scrollable */
+.ui-autocomplete {
+  max-height: 200px;
+  overflow-y: auto;
+  /* prevent horizontal scrollbar */
+  overflow-x: hidden;
+}
+
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* various styles to adjust the hero box used for homepage + login */
 

Netdisco/share/public/javascripts/netdisco.js

@@ -173,7 +173,7 @@ $(document).ready(function() {
   // activate typeahead on the main search box, for device names only
   $('#nq').typeahead({
     source: function (query, process) {
-      return $.get('/ajax/data/device/typeahead', { query: query }, function (data) {
+      return $.get('/ajax/data/devicename/typeahead', { query: query }, function (data) {
         return process(data);
       });
     }

Netdisco/share/views/ajax/admintask/pseudodevice.tt

@@ -24,7 +24,7 @@
       <td class="center_cell"><a class="nd_linkcell"
         href="[% device_ports %]&q=[% row.dns | uri %]">[% row.dns | html_entity %]</a></td>
       <td class="center_cell">[% row.ip | html_entity %]</td>
-      <td class="center_cell"><input name="ports" type="number" value="[% row.port_count | html_entity %]"</td>
+      <td class="center_cell"><input name="ports" type="number" value="[% row.port_count | html_entity %]"></td>
       <td class="center_cell">
         <input name="dns" type="hidden" value="[% row.dns | html_entity %]">
         <input name="ip" type="hidden" value="[% row.ip | html_entity %]">

Netdisco/share/views/ajax/admintask/topology.tt

@@ -0,0 +1,44 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th class="center_cell">Left Device</th>
+      <th class="center_cell">Left Port</th>
+      <th class="center_cell">Right Device</th>
+      <th class="center_cell">Right Port</th>
+      <th class="center_cell">Action</th>
+    </tr>
+  </thead>
+  </tbody>
+    <tr>
+      <form name="add">
+      <td class="center_cell"><input class="nd_topo_dev  nd_topo_dev1" name="dev1"  type="text"></td>
+      <td class="center_cell"><input class="nd_topo_port nd_topo_dev1" name="port1" type="text"></td>
+      <td class="center_cell"><input class="nd_topo_dev  nd_topo_dev2" name="dev2"  type="text"></td>
+      <td class="center_cell"><input class="nd_topo_port nd_topo_dev2" name="port2" type="text"></td>
+      <td class="center_cell">
+        <button class="btn btn-small" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button>
+      </td>
+      </form>
+    </tr>
+    [% WHILE (row = results.next) %]
+    <tr>
+      <form name="update">
+      <td class="center_cell"><a class="nd_linkcell"
+        href="[% device_ports %]&q=[% row.dev1 | uri %]">[% row.dev1 | html_entity %]</a></td>
+      <td class="center_cell">[% row.port1 | html_entity %]</td>
+      <td class="center_cell"><a class="nd_linkcell"
+        href="[% device_ports %]&q=[% row.dev2 | uri %]">[% row.dev2 | html_entity %]</a></td>
+      <td class="center_cell">[% row.port2 | html_entity %]</td>
+      <td class="center_cell">
+        <input name="dev1" type="hidden" value="[% row.dev1 | html_entity %]">
+        <input name="port1" type="hidden" value="[% row.port1 | html_entity %]">
+        <input name="dev2" type="hidden" value="[% row.dev2 | html_entity %]">
+        <input name="port2" type="hidden" value="[% row.port2 | html_entity %]">
+        <button class="btn" name="del" type="submit"><i class="icon-trash text-error"></i></button>
+      </form>
+      </td>
+    </tr>
+    [% END %]
+  </tbody>
+</table>
+

Netdisco/share/views/js/admintask.js

@@ -5,9 +5,43 @@
   // this is called by do_search to support local code
   // here, when tab changes need to strike/unstrike the navbar search
   function inner_view_processing(tab) {
-    var target = '#pseudodevice_pane';
+    var target = '#' + tab + '_pane';
 
-    // activity for add pseudo device
+    // activate typeahead on the topo boxes
+    $('.nd_topo_dev').autocomplete({
+      source: '/ajax/data/deviceip/typeahead'
+      ,minLength: 0
+    });
+
+    // get all devices on device input focus
+    $(".nd_topo_dev").on('focus', function(e) { $(this).autocomplete('search', '%') });
+
+    // activate typeahead on the topo boxes
+    $('.nd_topo_port.nd_topo_dev1').autocomplete({
+      source: function (request, response)  {
+        var query = $('.nd_topo_dev1').serialize();
+        return $.get('/ajax/data/port/typeahead', query, function (data) {
+          return response(data);
+        });
+      }
+      ,minLength: 0
+    });
+
+    // activate typeahead on the topo boxes
+    $('.nd_topo_port.nd_topo_dev2').autocomplete({
+      source: function (request, response)  {
+        var query = $('.nd_topo_dev2').serialize();
+        return $.get('/ajax/data/port/typeahead', query, function (data) {
+          return response(data);
+        });
+      }
+      ,minLength: 0
+    });
+
+    // get all ports on port input focus
+    $(".nd_topo_port").on('focus', function(e) { $(this).autocomplete('search') });
+
+    // activity for admin task tables
     // dynamically bind to all forms in the table
     $(target).on('submit', 'form', function() {
       // stop form from submitting normally
@@ -18,7 +52,7 @@
         type: 'POST'
         ,async: false
         ,dataType: 'html'
-        ,url: uri_base + '/ajax/content/admin/pseudodevice/' + $(this).attr('name')
+        ,url: uri_base + '/ajax/content/admin/' + tab + '/' + $(this).attr('name')
         ,data: $(this).serializeArray()
         ,beforeSend: function() {
           $(target).html(

Netdisco/share/views/layouts/main.tt

@@ -13,6 +13,7 @@
 
   <script type="text/javascript" src="[% uri_base %]/javascripts/jquery-latest.min.js"></script>
 <!--  <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> -->
+  <script type="text/javascript" src="[% uri_base %]/javascripts/jquery-ui.custom.min.js"></script>
   <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>
@@ -32,6 +33,7 @@
   [% END %]
 
   <link rel="stylesheet" href="[% uri_base %]/css/bootstrap.min.css"/>
+  <link rel="stylesheet" href="[% uri_base %]/css/smoothness/jquery-ui.custom.min.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/font-awesome.min.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/netdisco.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/nd_print.css" media="print"/>