implement first device tab - details

Netdisco/lib/Netdisco/DB/ResultSet/Device.pm

@@ -3,6 +3,23 @@ use base 'DBIx::Class::ResultSet';
 
 use NetAddr::IP::Lite ':lower';
 
+# override the built-in so we can munge some columns
+sub find {
+  my ($set, $ip) = @_;
+
+  return $set->SUPER::find($ip,
+    {
+      '+select' => [
+        \"replace(age(timestamp 'epoch' + uptime / 100 * interval '1 second', timestamp '1970-01-01 00:00:00-00')::text, 'mons', 'months')",
+        \"to_char(last_discover, 'YYYY-MM-DD HH24:MI')",
+        \"to_char(last_macsuck,  'YYYY-MM-DD HH24:MI')",
+        \"to_char(last_arpnip,   'YYYY-MM-DD HH24:MI')",
+      ],
+      '+as' => [qw/ uptime last_discover last_macsuck last_arpnip /],
+    }
+  );
+}
+
 # finds distinct values of a col for use in form selections
 sub get_distinct {
   my ($set, $col) = @_;

Netdisco/lib/Netdisco/Web.pm

@@ -6,6 +6,7 @@ use Dancer::Plugin::DBIC;
 
 use Digest::MD5 ();
 use Socket6 (); # to ensure dependency is met
+use HTML::Entities (); # to ensure dependency is met
 use NetAddr::IP::Lite ':lower';
 use Net::MAC ();
 use List::MoreUtils ();
@@ -32,6 +33,49 @@ hook 'before' => sub {
       for qw/stamps vendor archived partial/;
 };
 
+ajax '/ajax/content/device/:thing' => sub {
+    return "<p>Hello ". param('thing') ."</p>";
+};
+
+# device ports with a description (er, name) matching
+ajax '/ajax/content/device/details' => sub {
+    my $ip = param('ip');
+    return unless $ip;
+
+    my $device = schema('netdisco')->resultset('Device')->find($ip);
+    return unless $device;
+
+    content_type('text/html');
+    template 'ajax/device/details.tt', {
+      d => $device,
+    }, { layout => undef };
+};
+
+get '/device' => sub {
+    my $ip = NetAddr::IP::Lite->new(param('ip'));
+    if (! $ip) {
+        redirect '/?nosuchdevice=1';
+        return;
+    }
+
+    my $device = schema('netdisco')->resultset('Device')->find($ip->addr);
+    if (! $device) {
+        redirect '/?nosuchdevice=1';
+        return;
+    }
+
+    # list of tabs
+    var('tabs' => [
+        { id => 'details',   label => 'Details'   },
+        { id => 'ports',     label => 'Ports'     },
+        { id => 'modules',   label => 'Modules'   },
+        { id => 'addresses', label => 'Addresses' },
+    ]);
+
+    params->{'tab'} ||= 'details';
+    template 'device', { d => $device };
+};
+
 # device with various properties or a default match-all
 ajax '/ajax/content/search/device' => sub {
     my $has_opt = List::MoreUtils::any {param($_)}
@@ -50,7 +94,7 @@ ajax '/ajax/content/search/device' => sub {
     return unless $set->count;
 
     content_type('text/html');
-    template 'ajax/device.tt', {
+    template 'ajax/search/device.tt', {
       results => $set,
     }, { layout => undef };
 };
@@ -74,7 +118,7 @@ ajax '/ajax/content/search/node' => sub {
         my $ports = schema('netdisco')->resultset('DevicePort')
           ->by_mac($mac->as_IEEE);
 
-        template 'ajax/node_by_mac.tt', {
+        template 'ajax/search/node_by_mac.tt', {
           ips => $ips,
           sightings => $sightings,
           ports => $ports,
@@ -95,7 +139,7 @@ ajax '/ajax/content/search/node' => sub {
         }
         return unless $set->count;
 
-        template 'ajax/node_by_ip.tt', {
+        template 'ajax/search/node_by_ip.tt', {
           results => $set,
         }, { layout => undef };
     }
@@ -116,7 +160,7 @@ ajax '/ajax/content/search/vlan' => sub {
     return unless $set->count;
 
     content_type('text/html');
-    template 'ajax/vlan.tt', {
+    template 'ajax/search/vlan.tt', {
       results => $set,
     }, { layout => undef };
 };
@@ -130,7 +174,7 @@ ajax '/ajax/content/search/port' => sub {
     return unless $set->count;
 
     content_type('text/html');
-    template 'ajax/port.tt', {
+    template 'ajax/search/port.tt', {
       results => $set,
     }, { layout => undef };
 };

Netdisco/views/ajax/device/details.tt

@@ -0,0 +1,69 @@
+<table class="condensed-table zebra-striped">
+  </tbody>
+    <tr>
+      <td>System Name</td>
+      <td>[% d.name %]</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>
+        <a rel="twipsy" data-placement="above" data-offset="5" title="Find Similar Devices"
+        href="/search?tab=device&q=[% d.dns | uri %]&location=[% d.location | uri %]">[% d.location %]</a></td>
+    </tr>
+    <tr>
+      <td>Contact</td>
+      <td>[% d.contact %]</td>
+    </tr>
+    <tr>
+      <td>Model</td>
+      <td>
+        <a rel="twipsy" data-placement="above" data-offset="5" title="Find Similar Devices"
+        href="/search?tab=device&q=[% d.dns | uri %]&model=[% d.model | uri %]">[% d.model %]</a></td>
+    </tr>
+    <tr>
+      <td>OS / Version</td>
+      <td>[% d.os %] /
+        <a rel="twipsy" data-placement="above" data-offset="5"
+        title="Find Similar Devices" href="/search?tab=device&q=[% d.dns | uri %]&os_ver=[% d.os_ver | uri %]">[% d.os_ver %]</a>
+      </td>
+    </tr>
+    <tr>
+      <td>Serial Number</td>
+      <td>[% d.serial %]</td>
+    </tr>
+    <tr>
+      <td>Description</td>
+      <td>[% d.description.replace(', ',",<br/>") %]</td>
+    </tr>
+    <tr>
+      <td>Uptime</td>
+      <td>[% d.uptime %]</td>
+    </tr>
+    <tr>
+      <td>Last Discover</td>
+      <td>[% d.last_discover %]</td>
+    </tr>
+    <tr>
+      <td>Last Arpnip</td>
+      <td>[% d.last_arpnip %]</td>
+    </tr>
+    <tr>
+      <td>Last Macsuck</td>
+      <td>[% d.last_macsuck %]</td>
+    </tr>
+    <tr>
+      <td>Hardware Status</td>
+      <td>Fan: [% d.fan %]
+        <br/>PS1 [[% d.ps1_type %]]: [% d.ps1_status %]
+        <br/>PS2 [[% d.ps2_type %]]: [% d.ps2_status %]</td>
+    </tr>
+    <tr>
+      <td>MAC Address</td>
+      <td>[% d.mac %]</td>
+    </tr>
+    <tr>
+      <td>VTP Domain</td>
+      <td>[% d.vtp_domain %]</td>
+    </tr>
+  </tbody>
+</table>

Netdisco/views/ajax/search/port.tt

@@ -11,7 +11,7 @@
     [% WHILE (row = results.next) %]
     <tr>
       <td>[% row.name %]</td>
-      <td><a href="/device?q=[% row.ip %]&port=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
+      <td><a href="/device?ip=[% row.ip %]&port=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
         [% ' (' _ row.device.dns.remove(settings.domain_suffix) _ ')' IF row.device.dns %]
       </td>
       <td>[% row.descr %]</td>

Netdisco/views/device.tt

@@ -0,0 +1,32 @@
+<div class="container-fluid">
+  <div class="sidebar">
+    <div class="well">
+      <div class="tab-content">
+        [% FOREACH tab IN vars.tabs %]
+        <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
+          <div class="clearfix">
+            <h3>[% d.ip %]</h3><p>[% d.dns.remove(settings.domain_suffix) %]</p>
+          </div>
+          [%+ TRY %][% INCLUDE "inc/device/${tab.id}.tt" %][% CATCH %]<!-- no "[% tab.id %]" search options -->[% END %]
+        </div> <!-- /tab-pane -->
+        [% END %]
+      </div> <!-- /tab-content -->
+    </div>
+  </div>
+
+  <div class="nd_content content">
+    <ul id="search_results" class="tabs" data-tabs="on">
+      [% FOREACH tab IN vars.tabs %]
+      <li[% ' class="active"' IF params.tab == tab.id %]><a href="#[% tab.id %]_pane">[% tab.label %]</a></li>
+      [% END %]
+    </ul>
+    <div class="tab-content">
+      [% FOREACH tab IN vars.tabs %]
+      <div class="tab-pane[% ' active' IF params.tab == tab.id %]" id="[% tab.id %]_pane"></div>
+      [% END %]
+  </div>
+</div>
+
+<script type="text/javascript">
+[%+ INCLUDE 'inc/js/device.js' -%]
+</script>

Netdisco/views/inc/device/addresses.tt

@@ -0,0 +1,4 @@
+
+          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/device">
+            <input name="ip" value="[% d.ip %]" type="hidden"/>
+          </form>

Netdisco/views/inc/device/details.tt

@@ -0,0 +1,4 @@
+
+          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/device">
+            <input name="ip" value="[% d.ip %]" type="hidden"/>
+          </form>

Netdisco/views/inc/device/modules.tt

@@ -0,0 +1,4 @@
+
+          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/device">
+            <input name="ip" value="[% d.ip %]" type="hidden"/>
+          </form>

Netdisco/views/inc/device/ports.tt

@@ -0,0 +1,12 @@
+
+          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
+            <input name="ip" value="[% d.ip %]" type="hidden"/>
+            <input name="tab" value="[% tab.id %]" type="hidden"/>
+            <div class="nd_search clearfix">
+              <button id="[% tab.id %]_submit" type="submit" class="btn info">Update View</button>
+              <a id="[% tab.id %]_bookmark" href="#"
+                rel="twipsy" data-placement="right" data-offset="5" title="Bookmark these Settings">
+                <img class="nd_bookmark" src="/images/glyphicons_072_bookmark.png">
+              </a>
+            </div>
+          </form>

Netdisco/views/inc/js/device.js

@@ -0,0 +1,75 @@
+  $(document).ready(function() {
+    // parameterised for the active tab - submits search form and injects
+    // HTML response into the tab pane, or an error/empty-results message
+    function do_search (event, tab) {
+      var form = '#' + tab + '_form';
+      var target = '#' + tab + '_pane';
+      var mark = '#' + tab + '_bookmark';
+
+      // stop form from submitting normally
+      event.preventDefault();
+
+      // get the form params
+      var query = $(form).serialize();
+
+      // in case of slow data load, let the user know
+      $(target).html(
+        '<div class="span3 alert-message notice"><p>Waiting for results...</p></div>'
+      );
+
+      // submit the query and put results into the tab pane
+      $(target).load( '/ajax/content/device/' + tab + '?' + query,
+        function(response, status, xhr) {
+          if (status !== "success") {
+            $(target).html(
+              '<div class="span6 alert-message error">' +
+              '<p>Search failed! Please contact your site administrator.</p></div>'
+            );
+            return;
+          }
+          if (response === "") {
+            $(target).html(
+              '<div class="span3 alert-message info"><p>No matching records.</p></div>'
+            );
+          }
+          // looks good, update the bookmark for this search
+          $(mark).attr('href', '/device?' + query);
+        }
+      );
+    }
+
+    // search hook for each tab
+    [% FOREACH tab IN vars.tabs %]
+    $('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); });
+    [% END %]
+
+    // on page load, load the content for the active tab
+    [% IF params.tab %]
+    $('#[% params.tab %]_form').trigger("submit");
+    [% END %]
+
+    // on tab change, hide previous tab's search form and show new tab's
+    // search form. also trigger to load the content for the newly active tab.
+    $('#search_results').bind('change', function(e) {
+      var to = $(e.target).attr('href').replace(/^#/,"").replace(/_pane$/,"");
+      var from = $(e.relatedTarget).attr('href').replace(/^#/,"").replace(/_pane$/,"");
+
+      $('#' + from + '_search').toggleClass('active');
+      $('#' + to + '_search').toggleClass('active');
+
+      var to_form = '#' + to + '_form';
+      var from_form = '#' + from + '_form';
+      // copy current search string to new form's input box
+      $(to_form).find("input[name=q]").val(
+        $(from_form).find("input[name=q]").val()
+      );
+      $(to_form).trigger("submit");
+    });
+
+    // fix green background on search checkboxes
+    // https://github.com/twitter/bootstrap/issues/742
+    syncCheckBox = function() {
+      $(this).parents('.add-on').toggleClass('active', $(this).is(':checked'));
+    };
+    $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
+  });

Netdisco/views/index.tt

@@ -13,6 +13,12 @@
         <p>You are now logged out.</p>
       </div>
       [% END %]
+      [% IF params.nosuchdevice %]
+      <div class="nd_loginalert alert-message notice fade in" data-alert="on">
+        <a class="close" href="#">×</a>
+        <p>Sorry, no such device is known.</p>
+      </div>
+      [% END %]
       [% IF vars.notfound %]
       <div class="nd_loginalert alert-message notice fade in" data-alert="on">
         <a class="close" href="#">×</a>