add sweep brush and handler to show all ports

Netdisco/public/css/style.css

@@ -195,3 +195,11 @@ h3.device_label {
   position: fixed !important;
   margin-top: 50px;
 }
+
+/* little sweep brush inside of port filter input field */
+.field_clear_icon {
+  position: absolute;
+  margin-left: 137px;
+  margin-top: 6px;
+  z-index: 1;
+}

Netdisco/views/js/device.js

@@ -79,19 +79,6 @@
       );
     }
 
-    // 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 %]
-
-    // everything starts hidden and then we show defaults
-    $('#nd_collapse_legend').click();
-
     // 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) {
@@ -117,5 +104,24 @@
     };
     $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
 
+    // handler for sweeping brush icon in port filter box
+    $('.field_clear_icon').click(function() {
+      $('#ports_form').find("input[name=q]").val('');
+      $('#ports_form').trigger('submit');
+    });
+
+    // 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 %]
+
+    // everything starts hidden and then we show defaults
+    $('#nd_collapse_legend').click();
+
 [%+ INCLUDE 'js/sidebar.js' -%]
   });

Netdisco/views/sidebar/device/ports.tt

@@ -3,6 +3,9 @@
             <input name="tab" value="[% tab.id %]" type="hidden"/>
             <input name="ip" value="[% params.ip %]" type="hidden"/>
             <div class="clearfix">
+              <a class="field_clear_icon" href="#"
+                rel="twipsy" data-placement="right" data-offset="5" title="Show all Ports">
+                <img src="[% uri_base %]/images/sweep.png"/></a>
               <input class="nd_port_query span3" placeholder="Port, Name or VLAN"
                 name="q" value="[% params.q %]" type="text"
                 rel="twipsy" data-placement="right" data-offset="5" title="Filter by Port, Name or VLAN"/>