could the ports sidebar be finished?

Netdisco/lib/Netdisco/Web.pm

@@ -24,16 +24,54 @@ hook 'before' => sub {
 
     # make hash lookups of query lists
     foreach my $opt (qw/model vendor os_ver/) {
-        my $p = (ref '' eq ref param($opt) ? [param($opt)] : param($opt));
+        my $p = (ref [] eq ref param($opt) ? param($opt) : (param($opt) ? param($opt) : []));
         var("${opt}_lkp" => { map { $_ => 1 } @$p });
     }
 
+    # list of port detail columns
+    var('port_columns' => [
+        { name => 'c_port',        label => 'Port',              default => 'on' },
+        { name => 'c_descr',       label => 'Description',       default => ''   },
+        { name => 'c_type',        label => 'Type',              default => ''   },
+        { name => 'c_duplex',      label => 'Duplex',            default => 'on' },
+        { name => 'c_lastchange',  label => 'Last Change',       default => ''   },
+        { name => 'c_name',        label => 'Name',              default => 'on' },
+        { name => 'c_speed',       label => 'Speed',             default => 'on' },
+        { name => 'c_mac',         label => 'Port MAC',          default => ''   },
+        { name => 'c_mtu',         label => 'MTU',               default => ''   },
+        { name => 'c_vlan',        label => 'Native VLAN',       default => 'on' },
+        { name => 'c_vmember',     label => 'VLAN Membership',   default => 'on' },
+        { name => 'c_connected',   label => 'Connected Devices', default => ''   },
+        { name => 'c_stp',         label => 'Spanning Tree',     default => ''   },
+        { name => 'c_up',          label => 'Status',            default => ''   },
+    ]);
+
+    # view settings for port connected devices
+    var('connected_properties' => [
+        { name => 'n_age',      label => 'Age Stamp',     default => ''   },
+        { name => 'n_ip',       label => 'IP Address',    default => 'on' },
+        { name => 'n_archived', label => 'Archived Data', default => ''   },
+    ]);
+
     # set up default search options for each type
-    if (not param('tab') or param('tab') ne 'node') {
+    if (request->path =~ m{^/device}) {
-        params->{'stamps'} = 'checked';
+        if (not param('tab') or param('tab') ne 'ports' or scalar keys %{params()} < 4) {
-    }
+            foreach my $col (@{ var('port_columns') }) {
-    if (not param('tab') or param('tab') ne 'device') {
+                params->{$col->{name}} = 'checked' if $col->{default} eq 'on';
-        params->{'matchall'} = 'checked';
+            }
+            foreach my $col (@{ var('connected_properties') }) {
+                params->{$col->{name}} = 'checked' if $col->{default} eq 'on';
+            }
+            params->{'age_num'} = 3;
+            params->{'age_unit'} = 'months';
+        }
+    } elsif (request->path =~ m{^/search}) {
+        if (not param('tab') or param('tab') ne 'node') {
+            params->{'stamps'} = 'checked';
+        }
+        if (not param('tab') or param('tab') ne 'device') {
+            params->{'matchall'} = 'checked';
+        }
     }
 
     # set up query string defaults for hyperlinks to templates with forms
@@ -76,30 +114,6 @@ get '/device' => sub {
         return;
     }
 
-    # list of columns
-    var('port_columns' => [
-        { name => 'port',        label => 'Port' },
-        { name => 'description', label => 'Description' },
-        { name => 'type',        label => 'Type' },
-        { name => 'duplex',      label => 'Duplex' },
-        { name => 'lastchange',  label => 'Last Change' },
-        { name => 'name',        label => 'Name' },
-        { name => 'speed',       label => 'Speed' },
-        { name => 'mac',         label => 'Port Mac' },
-        { name => 'mtu',         label => 'MTU' },
-        { name => 'native',      label => 'Native VLAN' },
-        { name => 'vlan',        label => 'VLAN Membership' },
-        { name => 'connected',   label => 'Connected Devices' },
-        { name => 'stp',         label => 'Spanning Tree' },
-        { name => 'status',      label => 'Status' },
-    ]);
-
-    # details for connected devices
-    var('connected_properties' => [
-        { name => 'age',        label => 'Age Stamp' },
-        { name => 'ip',         label => 'IP Address' },
-    ]);
-
     # list of tabs
     var('tabs' => [
         { id => 'details',   label => 'Details'   },

Netdisco/public/css/style.css

@@ -132,3 +132,8 @@ form .clearfix.success input {
   border-right: 7px solid transparent;
   border-top: 8px solid #F89406;
 }
+
+/* nudge the port name/vlan filter over a little */
+.nd_port_query {
+  margin-left: -2px !important;
+}

Netdisco/views/ajax/search/node_by_ip.tt

@@ -38,7 +38,7 @@
       <td>&nbsp;</td>
       [% END %]
       <td>Switch Port</td>
-      <td><a href="/device?tab=ports&ip=[% node.switch | url %]&port=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
+      <td><a href="/device?tab=ports&ip=[% node.switch | url %]&q=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
         [% ' (' _ node.device.dns.remove(settings.domain_suffix) _ ')' IF node.device.dns %]
         [% ' <span class="label warning">a</span>' IF NOT node.active %]
       </td>

Netdisco/views/ajax/search/node_by_mac.tt

@@ -53,7 +53,7 @@
       <td>&nbsp;</td>
       [% END %]
       <td>Switch Port</td>
-      <td><a href="/device?tab=ports&ip=[% node.switch | url %]&port=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
+      <td><a href="/device?tab=ports&ip=[% node.switch | url %]&q=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
         [% ' (' _ node.device.dns.remove(settings.domain_suffix) _ ')' IF node.device.dns %]
         [% ' <span class="label warning">a</span>' IF NOT node.active %]
       </td>
@@ -70,7 +70,7 @@
       <td>&nbsp;</td>
       [% END %]
       <td>Switch Port</td>
-      <td><a href="/device?tab=ports&ip=[% port.ip | url %]&port=[% port.port | url %]">[% port.ip %] [ [% port.port %] ]</a>
+      <td><a href="/device?tab=ports&ip=[% port.ip | url %]&q=[% port.port | url %]">[% port.ip %] [ [% port.port %] ]</a>
         [% ' (' _ port.device.dns.remove(settings.domain_suffix) _ ')' IF port.device.dns %]
       </td>
       [% IF params.stamps %]

Netdisco/views/ajax/search/port.tt

@@ -11,7 +11,7 @@
     [% WHILE (row = results.next) %]
     <tr>
       <td>[% row.name %]</td>
-      <td><a href="/device?tab=ports&ip=[% row.ip %]&port=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
+      <td><a href="/device?tab=ports&ip=[% row.ip %]&q=[% 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/ajax/search/vlan.tt

@@ -13,17 +13,17 @@
     [% WHILE (row = results.next) %]
     <tr>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="/device?tab=ports&ip=[% row.ip %]&vlan=[% row.vlan.vlan %]">[% row.vlan.vlan %]</a></td>
+        href="/device?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.vlan.vlan %]</a></td>
       <td><a class="nd_linkcell"
-        href="/device?tab=ports&ip=[% row.ip %]&vlan=[% row.vlan.vlan %]">[% row.dns %]</a></td>
+        href="/device?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.dns %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="/device?tab=ports&ip=[% row.ip %]&vlan=[% row.vlan.vlan %]">[% row.vlan.description %]</a></td>
+        href="/device?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.vlan.description %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="/device?tab=ports&ip=[% row.ip %]&vlan=[% row.vlan.vlan %]">[% row.model %]</a></td>
+        href="/device?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.model %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="/device?tab=ports&ip=[% row.ip %]&vlan=[% row.vlan.vlan %]">[% row.os %]</a></td>
+        href="/device?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.os %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="/device?tab=ports&ip=[% row.ip %]&vlan=[% row.vlan.vlan %]">[% row.vendor %]</a></td>
+        href="/device?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.vendor %]</a></td>
     </tr>
     [% END %]
   </tbody>

Netdisco/views/inc/device/ports.tt

@@ -2,7 +2,37 @@
           <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/device">
             <input name="tab" value="[% tab.id %]" type="hidden"/>
             <input name="ip" value="[% params.ip %]" type="hidden"/>
-            <input name="port" value="[% params.port %]" type="hidden"/>
+            <div class="clearfix">
+              <input class="nd_port_query span3" placeholder="Port Name or VLAN"
+                name="q" value="[% params.port || params.vlan %]" type="text"
+                rel="twipsy" data-placement="right" data-offset="5" title="Filter by Port Name or VLAN"/>
+            </div>
+            <div class="clearfix">
+              <a href="#" class="nd_collapse_legend"><label>Legend</label></a>
+                <ul class="inputs-list unstyled">
+                  <li>
+                    <span class="label warning">d</span>&nbsp; Admin Disabled
+                  </li>
+                  <li>
+                    <span class="label">l</span>&nbsp; Link Down
+                  </li>
+                  <li>
+                    <span class="label">f</span>&nbsp; Port Free (Down)
+                  </li>
+                  <li>
+                    <span class="label notice">b</span>&nbsp; Blocking
+                  </li>
+                  <li>
+                    <span class="label success">p</span>&nbsp; IP Phone
+                  </li>
+                  <li>
+                    <span class="label important">n</span>&nbsp; Neighbor Inacessible
+                  </li>
+                  <li>
+                    <span class="label warning">a</span>&nbsp; Archived Data
+                  </li>
+                </ul>
+            </div>
             <div class="clearfix">
               <a href="#" class="nd_collapse_columns"><label>Display Columns</label></a>
               <div class="input nd_collapse_pre_hidden">
@@ -10,7 +40,7 @@
                   [% FOREACH item IN vars.port_columns %]
                   <li>
                     <label>
-                      <input type="checkbox" name="[% item.name %]" value="[% item.name %]"/>
+                      <input type="checkbox" id="[% item.name %]" name="[% item.name %]"[% ' checked="checked"' IF params.${item.name} %] />
                       <span>[% item.label %]</span>
                     </label>
                   </li>
@@ -18,6 +48,36 @@
                 </ul>
               </div>
             </div>
+            <div class="clearfix">
+              <a href="#" class="nd_collapse_portprop"><label>Port Properties</label></a>
+              <div class="input nd_collapse_pre_hidden">
+                <ul class="inputs-list">
+                  <li>
+                    <label>
+                      <input type="checkbox" id="free" name="free"[% ' checked="checked"' IF params.free %]/>
+                      <span>Only Show Free Ports</span>
+                    </label>
+                  </li>
+                  <p></p>
+                  <li>
+                    <span rel="twipsy" data-placement="right" data-offset="5" title="Free if Down for this period of time">
+                    <select class="nd_days_select" name="age_num"/>
+                      [% SET count = 1 %]
+                      [% WHILE count < 32 %]
+                      <option[% ' selected="selected"' IF params.age_num == count %]>[% count %]</option>
+                      [% SET count = count + 1 %]
+                      [% END %]
+                    </select>
+                    <select class="span2" 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">
               <a href="#" class="nd_collapse_nodeprop"><label>Node Properties</label></a>
               <div class="input nd_collapse_pre_hidden">
@@ -25,7 +85,7 @@
                   [% FOREACH item IN vars.connected_properties %]
                   <li>
                     <label>
-                      <input type="checkbox" name="[% item.name %]" value="[% item.name %]"/>
+                      <input type="checkbox" id="[% item.name %]" name="[% item.name %]"[% ' checked="checked"' IF params.${item.name} %] />
                       <span>[% item.label %]</span>
                     </label>
                   </li>
@@ -33,33 +93,6 @@
                 </ul>
               </div>
             </div>
-            <div class="clearfix">
-              <label>Ports become &quot;Free&quot; after</label>
-              <span rel="twipsy" data-placement="right" data-offset="5" title="Time since Port went Down">
-              <select class="nd_days_select" name="age_num"/>
-                [% SET count = 1 %]
-                [% WHILE count < 32 %]
-                <option>[% count %]</option>
-                [% SET count = count + 1 %]
-                [% END %]
-              </select>
-              <select class="span2" name="age_unit"/>
-                <option>days</option>
-                <option>weeks</option>
-                <option>months</option>
-                <option>years</option>
-              </select>
-              </span>
-            </div>
-            <div class="clearfix"></div>
-            <div class="clearfix input-prepend">
-              <label class="add-on">
-                <input type="checkbox" id="archived" name="archived"[% ' checked="checked"' IF params.archived %]/>
-              </label>
-              <label for="archived">
-                <span class="nd_searchcheckbox uneditable-input">Archived Data <span class="nd_legendlabel label warning">a</span></span>
-              </label>
-            </div>
             <div class="nd_search clearfix">
               <button id="[% tab.id %]_submit" type="submit" class="btn info">Update View</button>
               <a id="[% tab.id %]_bookmark" href="#"

Netdisco/views/inc/js/device.js

@@ -3,16 +3,32 @@
       target: 'next',
       effect: 'slide',
       changeText: true,
-      expandHtml: '<label class="nd_collapser">Display Columns<div class="arrow-down"></div></label>',
+      expandHtml: '<label class="nd_collapser">Display Columns<div class="arrow-up"></div></label>',
-      collapseHtml: '<label class="nd_collapser">Display Columns<div class="arrow-up"></div></label>',
+      collapseHtml: '<label class="nd_collapser">Display Columns<div class="arrow-down"></div></label>',
+    });
+
+    $('.nd_collapse_portprop').collapser({
+      target: 'next',
+      effect: 'slide',
+      changeText: true,
+      expandHtml: '<label class="nd_collapser">Port Properties<div class="arrow-up"></div></label>',
+      collapseHtml: '<label class="nd_collapser">Port Properties<div class="arrow-down"></div></label>',
     });
 
     $('.nd_collapse_nodeprop').collapser({
       target: 'next',
       effect: 'slide',
       changeText: true,
-      expandHtml: '<label class="nd_collapser">Node Properties<div class="arrow-down"></div></label>',
+      expandHtml: '<label class="nd_collapser">Node Properties<div class="arrow-up"></div></label>',
-      collapseHtml: '<label class="nd_collapser">Node Properties<div class="arrow-up"></div></label>',
+      collapseHtml: '<label class="nd_collapser">Node Properties<div class="arrow-down"></div></label>',
+    });
+
+    $('.nd_collapse_legend').collapser({
+      target: 'next',
+      effect: 'slide',
+      changeText: true,
+      expandHtml: '<label class="nd_collapser">Legend<div class="arrow-up"></div></label>',
+      collapseHtml: '<label class="nd_collapser">Legend<div class="arrow-down"></div></label>',
     });
 
     // parameterised for the active tab - submits search form and injects