complete the observium plugin

Netdisco/Makefile.PL

@@ -19,6 +19,7 @@ requires 'HTML::Parser' => 3.70;
 requires 'HTTP::Tiny' => 0.029;
 requires 'JSON' => 0;
 requires 'List::MoreUtils' => 0.33;
+requires 'MIME::Base64' => 3.13;
 requires 'Moo' => 1.001000;
 requires 'MCE' => 1.408;
 requires 'Net::DNS' => 0.72;

Netdisco/lib/App/Netdisco/DB/Result/DevicePort.pm

@@ -7,6 +7,8 @@ package App::Netdisco::DB::Result::DevicePort;
 use strict;
 use warnings;
 
+use MIME::Base64 'encode_base64url';
+
 use base 'DBIx::Class::Core';
 __PACKAGE__->table("device_port");
 __PACKAGE__->add_columns(
@@ -266,4 +268,13 @@ See the C<with_is_free> and C<only_free_ports> modifiers to C<search()>.
 
 sub is_free { return (shift)->get_column('is_free') }
 
+=head2 base64url_port
+
+Returns a Base64 encoded version of the C<port> column value suitable for use
+in a URL.
+
+=cut
+
+sub base64url_port { return encode_base64url((shift)->port) }
+
 1;

Netdisco/lib/App/NetdiscoX/Web/Plugin/Observium.pm

@@ -1,4 +1,4 @@
-package App::NetdiscoX::Web::Plugin::ObserviumSparklines;
+package App::NetdiscoX::Web::Plugin::Observium;
 
 use Dancer ':syntax';
 use Dancer::Plugin::DBIC;
@@ -9,13 +9,13 @@ use File::ShareDir 'dist_dir';
 use Path::Class;
 
 register_device_port_column({
-  name  => 'observiumsparklines',
+  name  => 'observium',
   position => 'mid',
   label => 'Traffic',
   default => 'on',
 });
 
-register_css('observiumsparklines');
-register_javascript('observiumsparklines');
+register_css('observium');
+register_javascript('observium');
 
 true;

Netdisco/share/views/ajax/device/ports.tt

@@ -66,9 +66,13 @@
       [% FOREACH config IN settings._extra_device_port_cols %]
         [% NEXT UNLESS config.position == 'mid' AND params.${config.name} %]
         <td>
+          [% TRY %]
           [% INCLUDE "plugin/${config.name}/device_port_column.tt" %]
+          [% CATCH %]
+          <!-- dummy content required by Template Toolkit TRY -->
+          [% END %]
         </td>
-      [% END -%]
+      [% END %]
 
       [% IF params.c_descr %]
       <td nowrap>[% row.descr | html_entity %]</td>

Netdisco/share/views/plugin/observium/device_port_column.tt

@@ -0,0 +1,6 @@
+<a href="http://[% settings.plugin_observium.webhost | uri %]/device/hostname=[% device.dns || device.name | uri %]/tab=port/ifdescr=[% row.base64url_port %]/"
+  [% 'target="_blank"' IF settings.plugin_observium.open_in_new_window %]
+  class="btn nd_observium"
+  data-content='
+    <img src="http://[% settings.plugin_observium.webhost | uri %]/graph.php?type=port_bits&device=[% device.dns || device.name | uri %]&port=[% row.port | uri %]&from=-1w&to=now&width=208&height=100&title=yes"/>'
+><i class="icon-bar-chart"></i></a>

Netdisco/share/views/plugin/observium/observium.css

@@ -0,0 +1,6 @@
+.nd_observium-style {
+  min-width: none;
+  max-width: none;
+  margin-top: 5px;
+  margin-left: 15px;
+}

Netdisco/share/views/plugin/observium/observium.js

@@ -0,0 +1,25 @@
+$(document).ready(function() {
+
+  // bind qtip2 even to all future .observium buttons
+  $('#ports_pane').on('mouseover', '.nd_observium', function(event) {
+    $(this).qtip({
+      overwrite: false,
+      content: {
+        attr: 'data-content'
+      },
+      show: {
+        event: event.type,
+        ready: true
+      },
+      position: {
+        my: 'left center',
+        at: 'right centre',
+        target: 'mouse'
+      },
+      style: {
+        classes: 'qtip-bootstrap nd_observium-style'
+      }
+    });
+  });
+
+});

Netdisco/share/views/plugin/observiumsparklines/device_port_column.tt

@@ -1,4 +0,0 @@
-<button class="btn" rel="popover" data-trigger="hover" data-html="true" data-content='
-<img src="http://[% settings.plugin_observiumsparklines.webhost | html_entity %]/graph.php?type=port_bits&device=[% device.dns || device.name | uri %]&port=[% row.port | uri %]&from=-1w&to=now&width=208&height=100&title=yes"/>
-'
-><i class="icon-bar-chart"></i></button>