make an App::Netdisco dist using Module::Install

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

@@ -0,0 +1,25 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th>Address</th>
+      <th>DNS</th>
+      <th class="center_cell">Interface</th>
+      <th>Description</th>
+      <th>Prefix</th>
+    </tr>
+  </thead>
+  </tbody>
+    [% WHILE (row = results.next) %]
+    <tr>
+      <td>[% row.alias %]</a>
+      <td>[% row.dns.remove(settings.domain_suffix) %]</a>
+      <td class="center_cell"><a class="nd_linkcell"
+        href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.port %]">[% row.port %]</a></td>
+      <td>[% row.device_port.name %]</td>
+      <td><a class="nd_linkcell"
+        href="[% vars.search_device %]&ip=[% row.subnet %]">[% row.subnet %]</a></td>
+    </tr>
+    [% END %]
+  </tbody>
+</table>
+

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

@@ -0,0 +1,97 @@
+<table class="table-condensed table-striped">
+  </tbody>
+    <tr>
+      <td>System Name</td>
+      <td>[% d.name %]</td>
+    </tr>
+    <tr>
+      <td>Location
+      [% IF vars.user.port_control %]
+      <i class="icon-edit nd_edit_icon nd_device_details_edit"></i>
+      [% END %]
+      </td>
+      [% IF vars.user.port_control %]
+      <td class="nd_editable_cell" contenteditable="true"
+        data-field="location" data-for-device="[% d.ip %]">
+          [% d.location %]
+      </td>
+      [% ELSE %]
+      <td>
+        <a rel="tooltip" data-placement="top" data-offset="5" data-title="Find Similar Devices"
+        href="[% vars.search_device %]&location=[% d.location | uri %]">[% d.location %]</a>
+      </td>
+      [% END %]
+    </tr>
+    <tr>
+      <td>Contact
+      [% IF vars.user.port_control %]
+      <i class="icon-edit nd_edit_icon nd_device_details_edit"></i>
+      [% END %]
+      </td>
+      [% IF vars.user.port_control %]
+      <td class="nd_editable_cell" contenteditable="true"
+        data-field="contact" data-for-device="[% d.ip %]">
+          [% d.contact %]
+      </td>
+      [% ELSE %]
+      <td>[% d.contact %]</td>
+      [% END %]
+    </tr>
+    <tr>
+      <td>Vendor / Model</td>
+      <td>
+        <a rel="tooltip" data-placement="top" data-offset="5" data-title="Find Similar Devices"
+        href="[% vars.search_device %]&vendor=[% d.vendor | uri %]">[% d.vendor %]</a>
+        /
+        <a rel="tooltip" data-placement="top" data-offset="5" data-title="Find Similar Devices"
+        href="[% vars.search_device %]&model=[% d.model | uri %]">[% d.model %]</a>
+      </td>
+    </tr>
+    <tr>
+      <td>OS / Version</td>
+      <td>[% d.os %] /
+        <a rel="tooltip" data-placement="top" data-offset="5"
+          data-title="Find Similar Devices"
+          href="[% vars.search_device %]&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_age %]</td>
+    </tr>
+    <tr>
+      <td>Last Discover</td>
+      <td>[% d.last_discover_stamp %]</td>
+    </tr>
+    <tr>
+      <td>Last Arpnip</td>
+      <td>[% d.last_arpnip_stamp %]</td>
+    </tr>
+    <tr>
+      <td>Last Macsuck</td>
+      <td>[% d.last_macsuck_stamp %]</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/share/views/ajax/device/netmap.tt

@@ -0,0 +1,174 @@
+<script>
+
+var winHeight = window.innerHeight;
+var winWidth  = window.innerWidth;
+
+var tree = d3.layout.tree()
+    .size([360, winHeight])
+    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
+
+// links in the initial tree drawing use this generator
+var treeLink = d3.svg.diagonal.radial()
+    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
+
+// actual device neighbor links use this generator
+var neighLink = d3.svg.diagonal.radial();
+
+// store x,y for all circles on the map
+var loc = {};
+// store actual links between all nodes
+var neighbors_data = {};
+
+// main SVG background, with support for pan/zoom
+var svg = d3.select("#netmap_pane").append("svg")
+    .attr("width", winWidth - 50)
+    .attr("height", winHeight - 100)
+    .attr("pointer-events", "all")
+  .append('g')
+    .call(d3.behavior.zoom().on("zoom", redraw))
+  .append("g")
+    .attr("transform", "translate(" + winHeight / 2 + "," + winHeight / 2 + ")");
+
+// this is the image background
+// FIXME there must be a way to discover the radial tree's size?
+svg.append('rect')
+    .attr("x", (0 - (winHeight * 2)))
+    .attr('width', "400%")
+    .attr("y", (0 - (winHeight * 2)))
+    .attr('height', "400%")
+    .attr('fill', 'white');
+
+// handle pan and zoom
+function redraw() {
+  svg.attr("transform",
+    "translate(" + d3.event.translate + ")"
+    + "scale(" + d3.event.scale + ")"
+    + "translate(" + (winHeight / 2) + "," + (winHeight / 2) + ")");
+}
+
+// save the x,y of an element into the loc dictionary
+function recordLocation(d,i) {
+  var rect = this.getBoundingClientRect();
+  loc[d.name] = {
+    'x':  (rect.left + ((rect.right - rect.left) / 2))
+    ,'y': (rect.top +  ((rect.bottom - rect.top) / 2))
+  };
+}
+
+// convert a device name to a valid CSS class name
+function to_class(name) { return 'nd_' + name.replace(/\./g, "_") }
+
+// handler for clicking on a circle - redirect to that device's netmap
+function circleClick(d) {
+    window.location = '[% uri_for('/device') %]?tab=netmap&q=' + d.ip;
+}
+
+// handler for mouseover on a circle - show that device's real neighbors
+function circleOver(d) {
+    $('.link').hide();
+    $('path.' + to_class(d.name)).show();
+    $(this).css('cursor', 'pointer');
+
+    $.each(neighbors_data[d.name], function(idx, target) {
+      if (! (target in loc)) { return true }
+      $('circle.' + to_class(target)).css('fill', '#e96cfa');
+    });
+}
+
+// handler for mouseout on a circle - hide real neighbours and show treeLinks
+function circleOut(d) {
+    $.each(neighbors_data[d.name], function(idx, target) {
+      if (! (target in loc)) { return true }
+      $('circle.' + to_class(target)).css('fill', '#fff');
+    });
+
+    $(this).css('cursor', 'auto');
+    $('path.' + to_class(d.name)).hide();
+    $('.link').show();
+}
+
+// load all device connections into neighbors_data dictionary
+$.getJSON('[% uri_for('/ajax/data/device/alldevicelinks') %]', function(data) {
+  neighbors_data = data;
+
+  // draw the tree
+  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", treeLink);
+
+    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)
+        // circle has class name of its device, so we can show/hide it
+        .attr("class", function(d) { return to_class(d.name) })
+        // store the x,y of every circle we've just drawn
+        .each(recordLocation)
+        // handlers for mouse interaction with the circles
+        .on("click", circleClick)
+        .on("mouseover", circleOver)
+        .on("mouseout", circleOut);
+
+    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; });
+
+    // reorient text on the root node
+    svg.select(".node")
+        .attr("transform", function(d) {
+          return d.x < 180 ? "rotate(0)translate(0)" : "rotate(180)translate(0)"; });
+
+    // key (name) of the root node in our locations store
+    var rootname = svg.select(".node").data()[0].name;
+    // reformatted neighbors_data for the real neighbor links
+    var neighbors = [];
+
+    // need to build neighbors array only after we have built loc dictionary,
+    // after drawing the circles and storing their x,y
+    $.each(neighbors_data, function(key, val) {
+      if (! (key in loc)) { return true }
+
+      $.each(val, function(idx, name) {
+        if (! (name in loc)) { return true }
+
+        neighbors.push({
+          'source':  {
+            'name': key
+            ,'x': loc[key]['x']
+            ,'y': loc[key]['y']
+          }
+          ,'target': {
+            'name': name
+            ,'x': loc[name]['x']
+            ,'y': loc[name]['y']
+          }
+        });
+      });
+    });
+
+    // insert Netdisco neighbor links below circles but above tree links
+    svg.selectAll(".neighbor")
+        .data(neighbors)
+      .enter().insert("path", ".node")
+        // add class name of source device, so we can show/hide the link
+        // (also "neighbor" class)
+        .attr("class", function(d) { return ("neighbor " + to_class( d.source.name )) })
+        .attr("d", neighLink)
+        .attr("transform", "translate(-" + loc[rootname]['x'] + ",-" + loc[rootname]['y'] + ")");
+  });
+
+}); // jquery getJSON for all connections
+
+</script>

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

@@ -0,0 +1,229 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th></th>
+      [% FOREACH item IN vars.port_columns %]
+      [% NEXT IF item.name == 'c_admin' %]
+      [% NEXT IF item.name == 'c_nodes' AND params.c_nodes AND params.c_neighbors %]
+        [% NEXT UNLESS params.${item.name} %]
+        <th[% ' class="center_cell"' IF NOT loop.first %]>[% item.label %]</th>
+      [% END %]
+    </tr>
+  </thead>
+  </tbody>
+    [% FOREACH row IN results %]
+    <tr>
+      <td>
+        [% IF row.up_admin == 'down' %]
+        <span class="label">S</span>
+        [% ELSIF row.stp == 'blocking' %]
+        <span class="label label-info">B</span>
+        [% ELSIF params.free OR row.is_free %]
+        <span class="label label-success">F</span>
+        [% ELSIF row.up_admin == 'up' AND row.up == 'down' %]
+        <span class="label label-warning">D</span>
+        [% END %]
+      </td>
+
+      [% IF params.c_port %]
+      [% IF vars.user.port_control AND params.c_admin %]
+      [% IF row.up_admin == 'up' %]
+      <td class="nd_editable_cell" data-action="down"
+        data-field="c_port" data-for-device="[% device %]" data-for-port="[% row.port | html_entity %]">
+        <i class="icon-hand-down nd_hand_icon"
+          rel="tooltip" data-placement="top" data-offset="3"
+          data-animation="" data-title="Click to Disable"></i>
+      [% ELSE %]
+      <td class="nd_editable_cell" data-action="up"
+        data-field="c_port" data-for-device="[% device %]" data-for-port="[% row.port | html_entity %]">
+        <i class="icon-hand-up nd_hand_icon"
+          rel="tooltip" data-placement="top" data-offset="3"
+          data-animation="" data-title="Click to Enable"></i>
+      [% END %]
+      [% ELSE %]
+      <td>
+      [% END %]
+        <a class="nd_linkcell nd_this_port_only" href="[% uri_for('/device',
+            vars.self_options) %]&q=[% params.q | uri %]&f=[% row.port | uri %]">
+        [% row.port | html_entity %]
+      </a></td>
+      [% END %]
+
+      [% IF params.c_descr %]
+      <td class="center_cell">[% row.descr | html_entity %]</td>
+      [% END %]
+
+      [% IF params.c_type %]
+      <td class="center_cell">[% row.type | html_entity %]</td>
+      [% END %]
+
+      [% IF params.c_duplex %]
+      <td class="center_cell">
+        [% IF row.up == 'up' AND row.duplex %]
+        [% row.duplex_admin | html_entity %] / [% row.duplex | html_entity %]
+        [% END %]
+      </td>
+      [% END %]
+
+      [% IF params.c_lastchange %]
+      <td class="center_cell">[% row.lastchange_stamp | html_entity %]</td>
+      [% END %]
+
+      [% IF params.c_name %]
+      [% IF vars.user.port_control AND params.c_admin %]
+      <td nowrap class="center_cell nd_editable_cell" contenteditable="true"
+          data-field="c_name" data-for-device="[% device %]" data-for-port="[% row.port | html_entity %]">
+      <i class="icon-edit nd_edit_icon"></i>
+      [% ELSE %]
+      <td nowrap class="center_cell">
+      [% END %]
+      <div class="nd_editable_cell_content">
+        [% row.name | html_entity %]
+      </div>
+      </td>
+      [% END %]
+
+      [% IF params.c_speed %]
+      <td class="center_cell">[% row.speed | html_entity %]</td>
+      [% END %]
+
+      [% IF params.c_mac %]
+      <td class="center_cell">[% row.mac | html_entity %]</td>
+      [% END %]
+
+      [% IF params.c_mtu %]
+      <td class="center_cell">[% row.mtu | html_entity %]</td>
+      [% END %]
+
+      [% IF params.c_vlan %]
+      [% IF vars.user.port_control AND params.c_admin %]
+      <td class="center_cell nd_editable_cell" contenteditable="true"
+        data-field="c_vlan" data-for-device="[% device %]" data-for-port="[% row.port | html_entity %]">
+      <i class="icon-edit nd_edit_icon"></i>
+      <div class="nd_editable_cell_content">
+        [% IF row.vlan %][% row.vlan | html_entity %][% END %]
+      </div>
+      </td>
+      [% ELSE %]
+      <td class="center_cell">
+        <a class="nd_linkcell"
+          href="[% uri_for('/search') %]?tab=vlan&q=[% row.vlan | uri %]">
+            [% row.vlan | html_entity %]</a>
+      </td>
+      [% END %]
+      [% END %]
+
+      [% IF params.c_vmember %]
+      <td>
+        [% IF row.tagged_vlans_count %]
+        [% SET output = '' %]
+        [% FOREACH vlan IN row.tagged_vlans %]
+          [% SET output = output _
+            '<a href="' _ uri_for('/search') _ '?tab=vlan&q=' _ vlan.vlan _ '">' _ vlan.vlan _ '</a>' %]
+          [% SET output = output _ ', ' IF NOT loop.last %]
+        [% END %]
+        [% IF row.tagged_vlans_count > 10 %] [%# FIXME make this a settable variable %]
+          [% SET output = '<div class="vlan_total">(' _ row.tagged_vlans_count
+            _ ')</div><span class="nd_linkcell nd_collapse_vlans">
+              <i class="cell-arrow-up-down icon-chevron-up icon-large">
+              </i>Show VLANs</span>
+              <div class="nd_collapsing nd_collapse_pre_hidden">' _ output %]
+          [% SET output = output _ '</div>' %]
+        [% END %]
+        [% output %]
+        [% END %]
+      </td>
+      [% END %]
+
+      [% IF params.c_power %]
+        [% IF row.power %]
+          [% IF row.power.admin == 'true' %]
+            [% IF vars.user.port_control AND params.c_admin %]
+              <td nowrap data-action="false"
+                data-field="c_power" data-for-device="[% device %]"
+                data-for-port="[% row.port | html_entity %]">
+
+                <i class="icon-off nd_power_icon nd_power_on"
+                  rel="tooltip" data-placement="top" data-offset="3"
+                  data-animation="" data-title="Click to Disable"></i>
+            [% ELSE %]
+              <td nowrap>
+                <i class="icon-off nd_power_on"></i>
+            [% END %]
+                <span>
+                [% IF row.power.power > 0 %]
+                  [% row.power.power %]&nbsp;mW
+                [% ELSE %]
+                  ([% row.power.status %])
+                [% END %]
+                </span>
+          [% ELSE %]
+            [% IF vars.user.port_control AND params.c_admin %]
+              <td nowrap data-action="true"
+                data-field="c_power" data-for-device="[% device %]"
+                data-for-port="[% row.port | html_entity %]">
+
+                <i class="icon-off nd_power_icon"
+                  rel="tooltip" data-placement="top" data-offset="3"
+                  data-animation="" data-title="Click to Enable"></i>
+            [% ELSE %]
+              <td>
+                <i class="icon-off"></i>
+            [% END %]
+          [% END %]
+              </td>
+        [% ELSE %]
+          <td></td>
+        [% END %]
+      [% END %]
+
+      [% IF params.c_nodes OR params.c_neighbors %]
+      <td>
+        [% IF params.c_neighbors AND row.remote_ip %]
+          [% IF row.neighbor %]
+          <a href="[% uri_for('/device',
+                vars.self_options) %]&q=[% row.neighbor.ip | uri %]&f=[% row.remote_port | uri %]">
+            [% row.neighbor.dns.remove(settings.domain_suffix) || row.neighbor.ip %]
+            ([% row.remote_port | html_entity %])</a>
+          [% ELSE %]
+          <span class="label label-important">N</span>
+          <a href="[% vars.search_node %]&q=[% row.remote_ip | uri %]">
+            [% row.remote_ip %] (port: [% row.remote_port %]
+            id: [% (row.remote_type _ ' / ') IF row.remote_type %][% row.remote_id %])</a>
+          [% END %]
+        [% END %]
+        [% IF params.c_nodes %]
+        [% FOREACH node IN row.$nodes %]
+          [% '<br/>' IF row.remote_ip OR NOT loop.first %]
+          [% '<span class="label label-warning">A</span> &nbsp;' IF NOT node.active %]
+          <a href="[% vars.search_node %]&q=[% node.mac | uri %]">[% node.mac %]</a>
+          [% ' (' _ node.time_last_age _ ')' IF params.n_age %]
+          [% IF params.n_ip %]
+            [% FOREACH ip IN node.ips %]
+            <br/>&nbsp; [% '<span class="label label-warning">A</span> &nbsp;' IF NOT ip.active %]
+              [% SET dns = ip.dns %]
+              [% IF dns %]
+              <a href="[% vars.search_node %]&q=[% ip.ip | uri %]">[% dns %] ([% ip.ip %])</a>
+              [% ELSE %]
+              <a href="[% vars.search_node %]&q=[% ip.ip | uri %]">[% ip.ip %]</a>
+              [% END %]
+            [% END %]
+          [% END %]
+        [% END %]
+        [% END %]
+      </td>
+      [% END %]
+
+      [% IF params.c_stp %]
+      <td class="center_cell">[% row.stp | html_entity %]</td>
+      [% END %]
+
+      [% IF params.c_up %]
+      <td class="center_cell">
+        [% row.up_admin | html_entity %] / [% row.up | html_entity %]
+      </td>
+      [% END %]
+    </tr>
+    [% END %]
+  </tbody>
+</table>

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

@@ -0,0 +1,29 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th>Device</th>
+      <th>Contact</th>
+      <th>Location</th>
+      <th>System Name</th>
+      <th>Model</th>
+      <th>OS Version</th>
+      <th>Management IP</th>
+      <th>Serial</th>
+    </tr>
+  </thead>
+  </tbody>
+    [% WHILE (row = results.next) %]
+    <tr>
+      <td><a href="[% uri_for('/device') %]?q=[% row.ip %]">[% row.dns.remove(settings.domain_suffix) || row.ip %]</a></td>
+      <td>[% row.contact %]</td>
+      <td>[% row.location %]</td>
+      <td>[% row.name %]</td>
+      <!-- <td>[% row.description.substr(0, 100) %][% ' &hellip;' IF row.description.length > 100 %]</td> -->
+      <td>[% row.model %]</td>
+      <td>[% row.os_ver %]</td>
+      <td>[% row.ip %]</td>
+      <td>[% row.serial %]</td>
+    </tr>
+    [% END %]
+  </tbody>
+</table>

Netdisco/share/views/ajax/search/node_by_ip.tt

@@ -0,0 +1,70 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th>MAC</th>
+      [% IF params.vendor %]
+      <th>Vendor</th>
+      [% END %]
+      <th>Match</th>
+      <th>Device or Node</th>
+      [% IF params.stamps %]
+      <th>First Seen</th>
+      <th>Last Seen</th>
+      [% END %]
+    </tr>
+  </thead>
+  </tbody>
+    [% WHILE (row = macs.next) %]
+    <tr>
+      <td><a class="nd_linkcell"
+        href="[% vars.search_node %]&q=[% row.mac | uri %]">[% row.mac %]</a></td>
+      [% IF params.vendor %]
+      <td>[% row.oui.company %]</td>
+      [% END %]
+      <td>IP &rarr; MAC</td>
+      <td><a href="[% vars.search_node %]&q=[% row.ip | uri %]">[% row.ip %]</a>
+        [% ' (' _ row.dns.remove(settings.domain_suffix) _ ')' IF row.dns %]
+        [% ' <span class="label label-warning">A</span>' IF NOT row.active %]
+      </td>
+      [% IF params.stamps %]
+      <td>[% row.time_first_stamp %]</td>
+      <td>[% row.time_last_stamp %]</td>
+      [% END %]
+    </tr>
+    [% FOREACH node IN row.node_sightings(archive_filter) %]
+    <tr>
+      <td>&nbsp;</td>
+      [% IF params.vendor %]
+      <td>&nbsp;</td>
+      [% END %]
+      <td>Switch Port</td>
+      <td><a href="[% vars.device_ports %]&q=[% node.switch | url %]&f=[% node.port | url %]&c_nodes=on&c_neighbor=on">[% node.switch %] [ [% node.port %] ]</a>
+        [% ' (' _ node.device.dns.remove(settings.domain_suffix) _ ')' IF node.device.dns %]
+        [% ' <span class="label label-warning">A</span>' IF NOT node.active %]
+      </td>
+      [% IF params.stamps %]
+      <td>[% node.time_first_stamp %]</td>
+      <td>[% node.time_last_stamp %]</td>
+      [% END %]
+    </tr>
+    [% END %]
+    [% FOREACH nodeip IN row.ip_aliases(archive_filter) %]
+    <tr>
+      <td>&nbsp;</td>
+      [% IF params.vendor %]
+      <td>&nbsp;</td>
+      [% END %]
+      <td>MAC &rarr; IP</td>
+      <td><a href="[% vars.search_node %]&q=[% nodeip.ip | uri %]">[% nodeip.ip %]</a>
+        [% ' (' _ nodeip.dns.remove(settings.domain_suffix) _ ')' IF nodeip.dns %]
+        [% ' <span class="label label-warning">A</span>' IF NOT nodeip.active %]
+      </td>
+      [% IF params.stamps %]
+      <td>[% nodeip.time_first_stamp %]</td>
+      <td>[% nodeip.time_last_stamp %]</td>
+      [% END %]
+    </tr>
+    [% END %]
+    [% END %]
+  </tbody>
+</table>

Netdisco/share/views/ajax/search/node_by_mac.tt

@@ -0,0 +1,111 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th>MAC</th>
+      [% IF params.vendor %]
+      <th>Vendor</th>
+      [% END %]
+      <th>Match</th>
+      <th>Device or Node</th>
+      [% IF params.stamps %]
+      <th>First Seen</th>
+      <th>Last Seen</th>
+      [% END %]
+    </tr>
+  </thead>
+  </tbody>
+    [% SET first_row = 1 %]
+    [% WHILE (row = ips.next) %]
+    <tr>
+      <td>
+        [% IF first_row %]
+        <a class="nd_linkcell"
+          href="[% vars.search_node %]&q=[% row.mac | uri %]">[% row.mac %]</a>
+        [% ELSE %]
+        &nbsp;
+        [% END %]
+      </a>
+      [% IF params.vendor %]
+      <td>
+        [% IF first_row %]
+        [% row.oui.company %]
+        [% ELSE %]
+        &nbsp;
+        [% END %]
+      </td>
+      [% END %]
+      <td>MAC &rarr; IP</td>
+      <td><a href="[% vars.search_node %]&q=[% row.ip | uri %]">[% row.ip %]</a>
+        [% ' (' _ row.dns.remove(settings.domain_suffix) _ ')' IF row.dns %]
+        [% ' <span class="label label-warning">A</span>' IF NOT row.active %]
+      </td>
+      [% IF params.stamps %]
+      <td>[% row.time_first_stamp %]</td>
+      <td>[% row.time_last_stamp %]</td>
+      [% END %]
+    </tr>
+    [% SET first_row = 0 %]
+    [% END %]
+    [% WHILE (node = sightings.next) %]
+    <tr>
+      <td>
+        [% IF first_row %]
+        <a class="nd_linkcell"
+          href="[% vars.search_node %]&q=[% node.mac | uri %]">[% node.mac %]</a>
+        [% ELSE %]
+        &nbsp;
+        [% END %]
+      </td>
+      [% IF params.vendor %]
+      <td>
+        [% IF first_row %]
+        [% node.oui.company %]
+        [% ELSE %]
+        &nbsp;
+        [% END %]
+      </td>
+      [% END %]
+      <td>Switch Port</td>
+      <td><a href="[% vars.device_ports %]&q=[% node.switch | url %]&f=[% node.port | url %]&c_nodes=on&c_neighbor=on">[% node.switch %] [ [% node.port %] ]</a>
+        [% ' (' _ node.device.dns.remove(settings.domain_suffix) _ ')' IF node.device.dns %]
+        [% ' <span class="label label-warning">A</span>' IF NOT node.active %]
+      </td>
+      [% IF params.stamps %]
+      <td>[% node.time_first_stamp %]</td>
+      <td>[% node.time_last_stamp %]</td>
+      [% END %]
+    </tr>
+    [% SET first_row = 0 %]
+    [% END %]
+    [% WHILE (port = ports.next) %]
+    <tr>
+      <td>
+        [% IF first_row %]
+        <a class="nd_linkcell"
+          href="[% vars.search_node %]&q=[% port.mac | uri %]">[% port.mac %]</a>
+        [% ELSE %]
+        &nbsp;
+        [% END %]
+      </td>
+      [% IF params.vendor %]
+      <td>
+        [% IF first_row %]
+        [% port.oui.company %]
+        [% ELSE %]
+        &nbsp;
+        [% END %]
+      </td>
+      [% END %]
+      <td>Switch Port</td>
+      <td><a href="[% vars.device_ports %]&q=[% port.ip | url %]&f=[% port.port | url %]&c_nodes=on&c_neighbor=on">[% port.ip %] [ [% port.port %] ]</a>
+        [% ' (' _ port.device.dns.remove(settings.domain_suffix) _ ')' IF port.device.dns %]
+      </td>
+      [% IF params.stamps %]
+      <td>[% port.creation %]</td>
+      <td>[% port.creation %]</td>
+      [% END %]
+    </tr>
+    [% SET first_row = 0 %]
+    [% END %]
+  </tbody>
+</table>

Netdisco/share/views/ajax/search/port.tt

@@ -0,0 +1,22 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th>Description</th>
+      <th>Port</th>
+      <th>Name</th>
+      <th>Vlan</th>
+    </tr>
+  </thead>
+  </tbody>
+    [% WHILE (row = results.next) %]
+    <tr>
+      <td>[% row.name %]</td>
+      <td><a href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
+        [% ' (' _ row.device.dns.remove(settings.domain_suffix) _ ')' IF row.device.dns %]
+      </td>
+      <td>[% row.descr %]</td>
+      <td>[% row.vlan %]</td>
+    </tr>
+    [% END %]
+  </tbody>
+</table>

Netdisco/share/views/ajax/search/vlan.tt

@@ -0,0 +1,30 @@
+<table class="table-bordered table-condensed table-striped">
+  <thead>
+    <tr>
+      <th>Vlan</th>
+      <th>Device</th>
+      <th>Description</th>
+      <th>Model</th>
+      <th>OS</th>
+      <th>Vendor</th>
+    </tr>
+  </thead>
+  </tbody>
+    [% WHILE (row = results.next) %]
+    <tr>
+      <td><a class="nd_linkcell nd_stealthlink"
+        href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.vlan.vlan %]</a></td>
+      <td><a class="nd_linkcell"
+        href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.dns %]</a></td>
+      <td><a class="nd_linkcell nd_stealthlink"
+        href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.vlan.description %]</a></td>
+      <td><a class="nd_linkcell nd_stealthlink"
+        href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.model %]</a></td>
+      <td><a class="nd_linkcell nd_stealthlink"
+        href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.os %]</a></td>
+      <td><a class="nd_linkcell nd_stealthlink"
+        href="[% vars.device_ports %]&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.vendor %]</a></td>
+    </tr>
+    [% END %]
+  </tbody>
+</table>

Netdisco/share/views/device.tt

@@ -0,0 +1,59 @@
+<i class="sidebar_toggle icon-wrench icon-large" id="sidebar_toggle_img_out"
+  rel="tooltip" data-placement="left" data-offset="5" data-title="Show Sidebar"></i>
+<i class="icon-question-sign icon-large" id="netmap_help_img" rel="popover"
+  data-title="Neighbor Map Controls"
+  data-html="true"
+  data-content="
+    <ul>
+      <li>Click and drag to pan</li>
+      <li>Mouse-wheel scroll to zoom</li>
+      <li>Hover to hightlight neighbors</li>
+      <li>Click to view device's map</li>
+    </ul>"
+  data-placement='left' data-trigger='click'></i>
+<div class="container-fluid">
+  <div class="sidebar sidebar_pinned">
+    <div class="well">
+      <i class="sidebar_toggle icon-signout" id="sidebar_toggle_img_in"
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Hide Sidebar"></i>
+      <i class="sidebar_pin icon-pushpin sidebar_pin_clicked"
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Unpin Sidebar"></i>
+      <div class="tab-content">
+        [% FOREACH tab IN vars.tabs %]
+        <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
+          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked"
+              method="get" action="[% uri_for('/device') %]">
+            <input name="tab" value="[% tab.id %]" type="hidden"/>
+            [% TRY %]
+            [% INCLUDE "sidebar/device/${tab.id}.tt" %]
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 1;</script>
+            [% CATCH %]
+            <!-- no "[% tab.id %]" search options -->
+            <input name="q" value="[% params.q %]" type="hidden"/>
+            <input name="f" value="[% params.f %]" type="hidden"/>
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 0;</script>
+            [% END %]
+          </form>
+        </div> <!-- /tab-pane -->
+        [% END %]
+      </div> <!-- /tab-content -->
+    </div>
+  </div>
+
+  <div class="content">
+    <ul id="search_results" class="nav nav-tabs">
+      [% FOREACH tab IN vars.tabs %]
+      <li[% ' class="active"' IF params.tab == tab.id %]><a id="[% tab.id %]_link" href="#[% tab.id %]_pane">[% tab.label %]</a></li>
+      [% END %]
+      <span id="nd_device_name">[% d.dns || d.name %]</span>
+    </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 'js/device.js' -%]
+</script>

Netdisco/share/views/index.tt

@@ -0,0 +1,55 @@
+<div class="container">
+  <div class="row nd_herorow">
+    <div class="span8 offset2">
+      [% IF params.failed %]
+      <div class="alert alert-error fade in">
+        <a class="close" data-dismiss="alert">×</a>
+        Incorrect username or password, please try again.
+      </div>
+      [% END %]
+      [% IF params.logout %]
+      <div class="alert fade in">
+        <a class="close" data-dismiss="alert">×</a>
+        You are now logged out.
+      </div>
+      [% END %]
+      [% IF params.nosuchdevice %]
+      <div class="alert fade in">
+        <a class="close" data-dismiss="alert">×</a>
+        Sorry, no such device is known.
+      </div>
+      [% END %]
+      [% IF vars.notfound %]
+      <div class="alert fade in">
+        <a class="close" data-dismiss="alert">×</a>
+        Sorry, page not found.
+          <a href="http://sourceforge.net/tracker/?group_id=80033&atid=558508" target="_blank">Report a Bug?</a>
+      </div>
+      [% END %]
+      [% IF NOT session.user %]
+      <div class="alert alert-success fade in">
+        <a class="close" data-dismiss="alert">×</a>
+        Log in to the Demo with username &quot;demo&quot; and password &quot;demo&quot;.
+      </div>
+      [% END %]
+      <div class="hero-unit">
+        <h2>Welcome to Netdisco</h2>
+        <small>Netdisco is an Open Source web-based network management tool.</small>
+        [% IF NOT session.user %]
+        <form class="nd_loginform" method="post" action="[% uri_for('/login') %]">
+          <div class="form-horizontal">
+            <input placeholder="Username" class="span2" name="username" type="text"/>
+            <input placeholder="Password" class="span2" name="password" type="password"/>
+            <button type="submit" class="btn btn-info">Log In</button>
+          </div>
+          [% IF vars.requested_path %]
+          <input type="hidden" name="path" value="[% vars.requested_path %]"/>
+          [% END %]
+        </form>
+        [% ELSE %]
+        <script type="text/javascript"> $('#nq').focus(); // set focus to navbar search </script>
+        [% END %]
+      </div>
+    </div>
+  </div>
+</div> <!-- /container -->

Netdisco/share/views/inventory.tt

@@ -0,0 +1,62 @@
+<div class="container">
+  [% IF models.count %]
+  <div class="row">
+    <div class="span6">
+      <h3 class="nd_inv_tbl_head">By Platform</h3>
+      <table class="table table-condensed">
+        <thead>
+          <tr>
+            <th>Vendor</th>
+            <th>Model</th>
+            <th>Count</th>
+          </tr>
+        </thead>
+        <tbody>
+          [% FOREACH platform IN models.all %]
+          <tr>
+            <th>
+              <a class="nd_stealthlink"
+                href="[% vars.search_device %]&vendor=[% platform.vendor %]">
+                  [% platform.vendor %]</a>
+            </th>
+            <th>
+              <a class="nd_linkcell"
+                href="[% vars.search_device %]&model=[% platform.model %]">
+                  [% platform.model %]</a>
+            </th>
+            <th>[% platform.get_column('count') %]</th>
+          </tr>
+          [% END %]
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
+      <h3 class="nd_inv_tbl_head">By Software Release</h3>
+      <table class="table table-condensed">
+        <thead>
+          <tr>
+            <th>OS</th>
+            <th>Version</th>
+            <th>Count</th>
+          </tr>
+        </thead>
+        <tbody>
+          [% FOREACH release IN releases.all %]
+          <tr>
+            <th>[% release.os %]</th>
+            <th>
+              <a class="nd_linkcell"
+                href="[% vars.search_device %]&os_ver=[% release.os_ver %]">
+                  [% release.os_ver %]</a>
+            </th>
+            <th>[% release.get_column('count') %]</th>
+          </tr>
+          [% END %]
+        </tbody>
+      </table>
+    </div>
+  </div>
+  [% ELSE %]
+  <div class="span4 alert alert-info">No devices found. Do you need to run a Discover?</div>
+  [% END %]
+</div>

Netdisco/share/views/js/common.js

@@ -0,0 +1,11 @@
+  $(document).ready(function() {
+    // 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 %]
+  });

Netdisco/share/views/js/device.js

@@ -0,0 +1,145 @@
+  // used by the tabbing interface to make sure the correct
+  // ajax content is loaded
+  var path = 'device';
+
+  function inner_view_processing(tab) {
+    // LT wanted the page title to reflect what's on the page :)
+    document.title = $('#nd_device_name').text()
+      +' - '+ $('#'+ tab + '_link').text();
+
+    // VLANs column list collapser trigger
+    // it's a bit of a faff because we can't easily use Bootstrap's collapser
+    $('.nd_collapse_vlans').toggle(function() {
+        $(this).siblings('.nd_collapsing').toggle();
+        $(this).siblings('.cell-arrow-up-down')
+          .toggleClass('icon-chevron-up icon-chevron-down');
+        $(this).html('<div class="cell-arrow-up-down icon-chevron-down icon-large"></div>Hide VLANs');
+      }, function() {
+        $(this).siblings('.nd_collapsing').toggle();
+        $(this).siblings('.cell-arrow-up-down')
+          .toggleClass('icon-chevron-up icon-chevron-down');
+        $(this).html('<div class="cell-arrow-up-down icon-chevron-up icon-large"></div>Show VLANs');
+    });
+
+    // toggle visibility of port up/down and edit controls
+
+    $('.nd_editable_cell').mouseenter(function() {
+      $(this).children('.nd_hand_icon').show();
+      if (! $(this).is(':focus')) {
+        $(this).children('.nd_edit_icon').show(); // ports
+        $(this).siblings('td').find('.nd_device_details_edit').show(); // details
+      }
+    });
+
+    $('.nd_editable_cell').mouseleave(function() {
+      $(this).children('.nd_hand_icon').hide();
+      if (! $(this).is(':focus')) {
+        $(this).children('.nd_edit_icon').hide(); // ports
+        $(this).siblings('td').find('.nd_device_details_edit').hide(); // details
+      }
+    });
+
+    $('[contenteditable=true]').focus(function() {
+        $(this).children('.nd_edit_icon').hide(); // ports
+        $(this).siblings('td').find('.nd_device_details_edit').hide(); // details
+    });
+
+    // activity for port up/down control
+    $('.icon-hand-up').click(function() {
+      port_control(this); // save
+    });
+    $('.icon-hand-down').click(function() {
+      port_control(this); // save
+    });
+
+    // activity for power enable/disable control
+    $('.nd_power_icon').click(function() {
+      port_control(this); // save
+    });
+
+    var dirty = false;
+
+    // activity for contenteditable control
+    $('[contenteditable=true]').keydown(function() {
+      var esc = event.which == 27,
+          nl  = event.which == 13;
+
+      if (esc) {
+        if (dirty) { document.execCommand('undo') }
+        $(this).blur();
+        dirty = false;
+
+      }
+      else if (nl) {
+        $(this).blur();
+        event.preventDefault();
+        dirty = false;
+        port_control(this); // save
+      }
+      else {
+        dirty = true;
+      }
+    });
+
+    // show or hide netmap help button
+    if (tab == 'netmap') {
+      $('#netmap_help_img').show();
+    }
+    else {
+      $('#netmap_help_img').hide();
+    }
+
+    // activate tooltips and popovers
+    $("[rel=tooltip]").tooltip({live: true});
+    $("[rel=popover]").popover({live: true});
+  }
+
+  $(document).ready(function() {
+    // sidebar collapser events trigger change of up/down arrow
+    $('.collapse').on('show', function() {
+      $(this).siblings().find('.arrow-up-down')
+        .toggleClass('icon-chevron-up icon-chevron-down');
+    });
+
+    $('.collapse').on('hide', function() {
+      $(this).siblings().find('.arrow-up-down')
+        .toggleClass('icon-chevron-up icon-chevron-down');
+    });
+
+    // show or hide sweeping brush icon when field has content
+    var sweep = $('#ports_form').find("input[name=f]");
+
+    if (sweep.val() === "") {
+      $('.field_clear_icon').hide();
+    } else {
+      $('.field_clear_icon').show();
+    }
+
+    sweep.change(function() {
+      if ($(this).val() === "") {
+        $('.field_clear_icon').hide();
+      } else {
+        $('.field_clear_icon').show();
+      }
+    });
+
+    // handler for sweeping brush icon in port filter box
+    $('.field_clear_icon').click(function() {
+      sweep.val('');
+      $('.field_clear_icon').hide();
+      $('#ports_form').trigger('submit');
+    });
+
+    // clickable device port names can simply resubmit AJAX rather than
+    // fetch the whole page again.
+    $('body').on('click', '.nd_this_port_only', function() {
+      event.preventDefault(); // link is real so prevent page submit
+
+      var port = $(this).text();
+      port = $.trim(port);
+      sweep.val(port);
+
+      $('.field_clear_icon').show();
+      $('#ports_form').trigger('submit');
+    });
+  });

Netdisco/share/views/js/search.js

@@ -0,0 +1,70 @@
+  // used by the tabbing interface to make sure the correct
+  // ajax content is loaded
+  var path = 'search';
+
+  // fields in the Device Search Options form (Device tab)
+  var d_inputs = $("#device_form .clearfix input").not('[type="checkbox"]')
+      .add("#device_form .clearfix select");
+
+  // if any field in Device Search Options has content, highlight in green
+  // and strikethrough the navbar search
+  function device_form_state(e) {
+    if (e.is('[value!=""]')) {
+      if (e.attr('type') == 'text') {
+        $('.field_copy_icon').hide();
+      }
+
+      e.parent(".clearfix").addClass('success');
+      $('#nq').css('text-decoration', 'line-through');
+
+      var id = '#' + e.attr('name') + '_clear_btn';
+      $(id).show();
+    }
+    else {
+      e.parent(".clearfix").removeClass('success');
+      var id = '#' + e.attr('name') + '_clear_btn';
+      $(id).hide();
+
+      if (! d_inputs.is('[value!=""]') ) {
+        $('#nq').css('text-decoration', 'none');
+        $('.field_copy_icon').show();
+      }
+    }
+  }
+
+  // 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) {
+    if (tab == 'device') {
+      d_inputs.each(function() {device_form_state($(this))});
+    }
+    else {
+      $('#nq').css('text-decoration', 'none');
+    }
+  }
+
+  // on load, check initial Device Search Options form state,
+  // and on each change to the form fields
+  $(document).ready(function() {
+    $('.field_copy_icon').hide();
+    $('.field_clear_icon').hide();
+
+    d_inputs.each(function() {device_form_state($(this))});
+    d_inputs.change(function() {device_form_state($(this))});
+
+    // handler for copy icon in search option
+    $('.field_copy_icon').click(function() {
+      var name = $(this).data('btn-for');
+      var input = $('#device_form [name=' + name + ']');
+      input.val( $('#nq').val() );
+      device_form_state(input); // will hide copy icons
+    });
+
+    // handler for bin icon in search option
+    $('.field_clear_icon').click(function() {
+      var name = $(this).data('btn-for');
+      var input = $('#device_form [name=' + name + ']');
+      input.val('');
+      device_form_state(input);
+    });
+  });

Netdisco/share/views/layouts/main.tt

@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=[% settings.charset %]" />
+  <link rel="shortcut icon" href="#" />
+  <title>Netdisco</title>
+
+  <!-- HTML5 shim, for IE6-8 support of HTML elements -->
+  <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
+  <script type="text/javascript" src="[% uri_base %]/javascripts/jquery-latest.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>
+  <script type="text/javascript" src="[% uri_base %]/javascripts/d3.min.js"></script>
+
+  <script type="text/javascript">
+    var uri_base = '[% uri_base %]';
+  </script>
+
+  <script type="text/javascript" src="[% uri_base %]/javascripts/netdisco.js"></script>
+
+  [% IF vars.user.port_control %]
+  <script type="text/javascript" src="[% uri_base %]/javascripts/toastr.js"></script>
+  <script type="text/javascript" src="[% uri_base %]/javascripts/netdisco_portcontrol.js"></script>
+
+  <link rel="stylesheet" href="[% uri_base %]/css/toastr.css"/>
+  [% END %]
+
+  <link rel="stylesheet" href="[% uri_base %]/css/bootstrap.min.css"/>
+  <link rel="stylesheet" href="[% uri_base %]/css/font-awesome.css"/>
+  <link rel="stylesheet" href="[% uri_base %]/css/netdisco.css"/>
+  <link rel="stylesheet" href="[% uri_base %]/css/nd_print.css" media="print"/>
+</head>
+
+<body>
+[%
+  more_dd = { "Reports" = "/reports" }
+  user_dd = [
+    { "title" = "Settings", "link" = "/settings" },
+    { "title" = "Help", "link" = "/help" },
+    { "title" = "Log Out", "link" = "/logout" }
+  ]
+%]
+
+<div class="navbar navbar-inverse navbar-fixed-top">
+  <div class="navbar-inner">
+    <div class="container">
+      <a class="brand" href="[% uri_for('/') %]">Netdisco</a>
+      [% IF session.user %]
+      <ul class="nav">
+        <li[% ' class="active"' IF vars.nav == 'inventory' %]>
+          <a href="[% uri_for('/inventory') %]">Inventory</a>
+        </li>
+        [% IF more_dd.size %]
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            More <b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            [% FOREACH title IN more_dd.keys.sort %]
+            <li><a href="[% uri_for(more_dd.$title) %]">[% title %]</a></li>
+            [% END %]
+          </ul>
+        </li> <!-- /dropdown -->
+        [% END %]
+      </ul>
+      <form class="navbar-search pull-left" method="get" action="[% uri_for('/search') %]">
+        <input placeholder="Find Anything" class="search-query span3" id="nq" name="q" type="text"/>
+        <span style="font-size: 24px;">
+        <i id="navsearchgo" class="icon-search navbar_icon"></i>
+        </span>
+      </form>
+      <ul class="nav pull-right">
+        <li class="nd_navbartext">Logged in as &nbsp;</li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+          [% IF vars.user.port_control %]
+            <i class="icon-user-md"></i>
+          [% ELSE %]
+            <i class="icon-user"></i>
+          [% END %]
+            [% session.user %] <b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            [% FOREACH item IN user_dd %]
+            <li><a href="[% uri_for(item.link) %]">[% item.title %]</a></li>
+            [% END %]
+          </ul>
+        </li> <!-- /dropdown -->
+      </ul>
+      [% END %]
+    </div>
+  </div>
+</div>
+
+[% content %]
+
+<script type="text/javascript">
+[%+ INCLUDE 'js/common.js' -%]
+</script>
+
+</body>
+</html>

Netdisco/share/views/report.tt

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row nd_show-grid">
+    <div class="span10 offset1">
+      <form id="nd_dev_age_form" class="form-inline">
+        Find Devices
+        <select name="age_type" class="span2">
+          <option value="first">First Discovered</option>
+          <option value="last" selected="selected">Last Updated</option>
+        </select>
+        <select name="age_bool" class="span2">
+          <option value="in">less than</option>
+          <option value="not_in" selected="selected">more than</option>
+        </select>
+        <select name="age_num" class="span1">
+          [% FOREACH count IN [1..32] %]
+          <option[% ' selected="selected"' IF count == 3 %]>[% count %]</option>
+          [% END %]
+        </select>
+        <select name="age_unit" class="span2">
+          <option>days</option>
+          <option>weeks</option>
+          <option selected="selected">months</option>
+          <option>years</option>
+        </select>
+        ago.
+        <button type="submit" class="btn btn-primary">
+          <i class="icon-search icon-white"></i></button>
+      </form>
+    </div>
+  </div>
+</div>

Netdisco/share/views/search.tt

@@ -0,0 +1,45 @@
+<i class="sidebar_toggle icon-wrench icon-large" id="sidebar_toggle_img_out"
+  rel="tooltip" data-placement="left" data-offset="5" data-title="Show Sidebar"></i>
+<div class="container-fluid">
+  <div class="sidebar">
+    <div class="well">
+      <i class="sidebar_toggle icon-signout" id="sidebar_toggle_img_in"
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Hide Sidebar"></i>
+      <i class="sidebar_pin icon-pushpin"
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Pin Sidebar"></i>
+      <div class="tab-content">
+        [% FOREACH tab IN vars.tabs %]
+        <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
+          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/search') %]">
+            <input name="tab" value="[% tab.id %]" type="hidden"/>
+            [% TRY %]
+            [% INCLUDE "sidebar/search/${tab.id}.tt" %]
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 1;</script>
+            [% CATCH %]
+            <!-- no "[% tab.id %]" search options -->
+            <input name="q" value="[% params.q %]" type="hidden"/>
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 0;</script>
+            [% END %]
+          </form>
+        </div> <!-- /tab-pane -->
+        [% END %]
+      </div> <!-- /tab-content -->
+    </div>
+  </div>
+
+  <div class="content">
+    <ul id="search_results" class="nav nav-tabs">
+      [% FOREACH tab IN vars.tabs %]
+      <li[% ' class="active"' IF params.tab == tab.id %]><a id="[% tab.id %]_link" 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 'js/search.js' -%]
+</script>

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

@@ -0,0 +1,120 @@
+
+            <input name="q" value="[% params.q %]" type="hidden"/>
+            <div class="clearfix">
+              <a class="field_clear_icon" href="#"
+                rel="tooltip" data-placement="top" data-offset="3" data-title="Show all Ports">
+                <img src="[% uri_base %]/images/tango_sweep.png"/></a>
+              <input id="nd_port_query" placeholder="Port, Name or VLAN"
+                name="f" value="[% params.f %]" type="text"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Filter by Port, Name or VLAN"/>
+            </div>
+            <div class="clearfix">
+              <span data-toggle="collapse" data-target="#nd_legend">
+                <label class="nd_collapser">Legend
+                <i class="arrow-up-down icon-chevron-up icon-large"></i>
+                </label></span>
+              <div id="nd_legend" class="collapse">
+                <ul class="inputs-list unstyled">
+                  <li>
+                    <span class="label">S</span>&nbsp; Admin Disabled
+                  </li>
+                  <li>
+                    <span class="label label-warning">D</span>&nbsp; Link Down
+                  </li>
+                  <li>
+                    <span class="label label-success">F</span>&nbsp; Port Free (Down)
+                  </li>
+                  <li>
+                    <span class="label label-info">B</span>&nbsp; Blocking
+                  </li>
+                  <li>
+                    <span class="label">P</span>&nbsp; IP Phone
+                  </li>
+                  <li>
+                    <span class="label label-important">N</span>&nbsp; Neighbor Inacessible
+                  </li>
+                  <li>
+                    <span class="label label-warning">A</span>&nbsp; Archived Data
+                  </li>
+                  <li>
+                    <span class="label"><i class="icon-refresh"></i></span>&nbsp; Click "Update View"
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="clearfix">
+              <span data-toggle="collapse" data-target="#nd_columns">
+                <label class="nd_collapser">Display Columns
+                <i class="arrow-up-down icon-chevron-down icon-large"></i>
+                </label></span>
+              <div id="nd_columns" class="collapse in">
+                <ul class="inputs-list unstyled">
+                  [% FOREACH item IN vars.port_columns %]
+                  [% NEXT IF item.name == 'c_admin' AND NOT vars.user.port_control %]
+                  <li>
+                    <label class="checkbox">
+                      <input type="checkbox" id="[% item.name %]"
+                        name="[% item.name %]"[% ' checked="checked"' IF params.${item.name} %] />
+                      [% IF item.name == 'c_admin' %]
+                        <span class="label label-inverse">[% item.label %]</span>
+                      [% ELSE %]
+                        [% item.label %]
+                      [% END %]
+                    </label>
+                  </li>
+                  [% END %]
+                </ul>
+              </div>
+            </div>
+            <div class="clearfix">
+              <span data-toggle="collapse" data-target="#nd_portprops">
+                <label class="nd_collapser">Port Properties
+                <i class="arrow-up-down icon-chevron-up icon-large"></i>
+                </label></span>
+              <div id="nd_portprops" class="collapse">
+                <ul class="inputs-list unstyled">
+                  <li>
+                    <label class="checkbox">
+                      <input type="checkbox" id="free"
+                        name="free"[% ' checked="checked"' IF params.free %]/>
+                      Only Show Free Ports
+                    </label>
+                  </li>
+                  <li>
+                    <span rel="tooltip" data-placement="left"
+                      data-offset="5" data-title="Free if Down for this period of time">
+                    <select id="nd_days_select" name="age_num">
+                      [% FOREACH count IN [1..32] %]
+                      <option[% ' selected="selected"' IF params.age_num == count %]>[% count %]</option>
+                      [% END %]
+                    </select>
+                    <select id="nd_age_select" name="age_unit">
+                      [% FOREACH unit IN [ 'days', 'weeks', 'months', 'years' ] %]
+                      <option[% ' selected="selected"' IF params.age_unit == unit %]>[% unit %]</option>
+                      [% END %]
+                    </select>
+                    </span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="clearfix">
+              <span data-toggle="collapse" data-target="#nd_nodeprops">
+                <label class="nd_collapser">Node Properties
+                <i class="arrow-up-down icon-chevron-up icon-large"></i>
+                </label></span>
+              <div id="nd_nodeprops" class="collapse">
+                <ul class="inputs-list unstyled">
+                  [% FOREACH item IN vars.connected_properties %]
+                  <li>
+                    <label class="checkbox">
+                      <input type="checkbox" id="[% item.name %]"
+                        name="[% item.name %]"[% ' checked="checked"' IF params.${item.name} %] />
+                      [% item.label %]
+                    </label>
+                  </li>
+                  [% END %]
+                </ul>
+              </div>
+            </div>
+            <button id="[% tab.id %]_submit" type="submit" class="btn btn-info">Update View</button>

Netdisco/share/views/sidebar/search/device.tt

@@ -0,0 +1,80 @@
+
+            <p class="nd_sidebar_title"><em>Device Search Options</em></p>
+            <input name="q" value="[% params.q %]" type="hidden"/>
+            <div class="clearfix">
+              <i data-btn-for="dns" class="field_copy_icon icon-copy icon-large"></i>
+              <i id="dns_clear_btn" data-btn-for="dns"
+                class="field_clear_icon icon-trash icon-large"></i>
+              <input class="nd_side_input" placeholder="DNS"
+                type="text" name="dns" value="[% params.dns %]"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="DNS"/>
+            </div>
+            <div class="clearfix">
+              <i data-btn-for="ip" class="field_copy_icon icon-copy icon-large"></i>
+              <i id="ip_clear_btn" data-btn-for="ip"
+                class="field_clear_icon icon-trash icon-large"></i>
+              <input class="nd_side_input" placeholder="IP Address"
+                type="text" name="ip" value="[% params.ip %]"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="IP Address"/>
+            </div>
+            <div class="clearfix">
+              <i data-btn-for="name" class="field_copy_icon icon-copy icon-large"></i>
+              <i id="name_clear_btn" data-btn-for="name"
+                class="field_clear_icon icon-trash icon-large"></i>
+              <input class="nd_side_input" placeholder="System Name"
+                type="text" name="name" value="[% params.name %]"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="System Name"/>
+            </div>
+            <div class="clearfix">
+              <i data-btn-for="location" class="field_copy_icon icon-copy icon-large"></i>
+              <i id="location_clear_btn" data-btn-for="location"
+                class="field_clear_icon icon-trash icon-large"></i>
+              <input class="nd_side_input" placeholder="Location"
+                type="text" name="location" value="[% params.location %]"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Location"/>
+            </div>
+            <div class="clearfix">
+              <i data-btn-for="description" class="field_copy_icon icon-copy icon-large"></i>
+              <i id="description_clear_btn" data-btn-for="description"
+                class="field_clear_icon icon-trash icon-large"></i>
+              <input class="nd_side_input" placeholder="Description"
+                type="text" name="description" value="[% params.description %]"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Description"/>
+            </div>
+            <div class="clearfix">
+              <select class="nd_side_select" size="[% vars.model_list.size > 5 ? 5 : vars.model_list.size %]"
+                multiple="on" name="model"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Model"/>
+                [% FOREACH opt IN vars.model_list %]
+                <option[% ' selected="selected"' IF vars.model_lkp.exists(opt) %]>[% opt %]</option>
+                [% END %]
+              </select>
+            </div>
+            <div class="clearfix">
+              <select class="nd_side_select" size="[% vars.os_ver_list.size > 5 ? 5 : vars.os_ver_list.size %]"
+                multiple="on" name="os_ver"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="OS Release"/>
+                [% FOREACH opt IN vars.os_ver_list %]
+                <option[% ' selected="selected"' IF vars.os_ver_lkp.exists(opt) %]>[% opt %]</option>
+                [% END %]
+              </select>
+            </div>
+            <div class="clearfix">
+              <select class="nd_side_select" size="[% vars.vendor_list.size > 5 ? 5 : vars.vendor_list.size %]"
+                multiple="on" name="vendor"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Vendor"/>
+                [% FOREACH opt IN vars.vendor_list %]
+                <option[% ' selected="selected"' IF vars.vendor_lkp.exists(opt) %]>[% opt %]</option>
+                [% END %]
+              </select>
+            </div>
+            <div class="clearfix input-prepend">
+              <label class="add-on">
+                <input type="checkbox" id="matchall"
+                  name="matchall"[% ' checked="checked"' IF params.matchall %]/>
+              </label>
+              <label class="nd_checkboxlabel" for="matchall">
+                <span class="nd_searchcheckbox uneditable-input">Match All Options</span>
+              </label>
+            </div>
+            <button id="[% tab.id %]_submit" type="submit" class="btn btn-info">Search Again</button>

Netdisco/share/views/sidebar/search/node.tt

@@ -0,0 +1,41 @@
+
+            <p class="nd_sidebar_title"><em>Node Search Options</em></p>
+            <input name="q" value="[% params.q %]" type="hidden"/>
+            <div class="clearfix input-prepend">
+              <label class="add-on">
+                <input type="checkbox" id="stamps"
+                  name="stamps"[% ' checked="checked"' IF params.stamps %]/>
+              </label>
+              <label class="nd_checkboxlabel" for="stamps">
+                <span class="nd_searchcheckbox uneditable-input">Time Stamps</span>
+              </label>
+            </div>
+            <div class="clearfix input-prepend">
+              <label class="add-on">
+                <input type="checkbox" id="vendor"
+                  name="vendor"[% ' checked="checked"' IF params.vendor %]/>
+              </label>
+              <label class="nd_checkboxlabel" for="vendor">
+                <span class="nd_searchcheckbox uneditable-input">Vendor</span>
+              </label>
+            </div>
+            <div class="clearfix input-prepend">
+              <label class="add-on">
+                <input type="checkbox" id="archived"
+                  name="archived"[% ' checked="checked"' IF params.archived %]/>
+              </label>
+              <label class="nd_checkboxlabel" for="archived">
+                <span class="nd_searchcheckbox uneditable-input">
+                  Archived Data <span class="nd_legendlabel label label-warning">A</span></span>
+              </label>
+            </div>
+            <div class="clearfix input-prepend">
+              <label class="add-on">
+                <input type="checkbox" id="partial"
+                  name="partial"[% ' checked="checked"' IF params.partial %]/>
+              </label>
+              <label class="nd_checkboxlabel" for="partial">
+                <span class="nd_searchcheckbox uneditable-input">Partial Name</span>
+              </label>
+            </div>
+            <button id="[% tab.id %]_submit" type="submit" class="btn btn-info">Search Again</button>