Merge pull request #3838 from hSaria/3090-interface-filtering

Fixes #3090: Interface filtering

docs/release-notes/version-2.6.md

@@ -4,6 +4,7 @@
 
 * [#2050](https://github.com/netbox-community/netbox/issues/2050) - Preview image attachments when hovering the link
 * [#2589](https://github.com/netbox-community/netbox/issues/2589) - Toggle for showing available prefixes/ip addresses
+* [#3090](https://github.com/netbox-community/netbox/issues/3090) - Add filter field for device interfaces
 * [#3187](https://github.com/netbox-community/netbox/issues/3187) - Add rack selection field to rack elevations
 * [#3851](https://github.com/netbox-community/netbox/issues/3851) - Allow passing initial data to custom script forms
 

netbox/project-static/js/forms.js

@@ -7,7 +7,7 @@ $(document).ready(function() {
 
     // "Toggle" checkbox for object lists (PK column)
     $('input:checkbox.toggle').click(function() {
-        $(this).closest('table').find('input:checkbox[name=pk]').prop('checked', $(this).prop('checked'));
+        $(this).closest('table').find('input:checkbox[name=pk]:visible').prop('checked', $(this).prop('checked'));
 
         // Show the "select all" box if present
         if ($(this).is(':checked')) {
@@ -400,8 +400,8 @@ $(document).ready(function() {
     window.addEventListener('hashchange', headerOffsetScroll);
 
     // Offset between the preview window and the window edges
-    const IMAGE_PREVIEW_OFFSET_X = 20
+    const IMAGE_PREVIEW_OFFSET_X = 20;
-    const IMAGE_PREVIEW_OFFSET_Y = 10
+    const IMAGE_PREVIEW_OFFSET_Y = 10;
 
     // Preview an image attachment when the link is hovered over
     $('a.image-preview').on('mouseover', function(e) {
@@ -435,6 +435,6 @@ $(document).ready(function() {
 
     // Fade the image out; it will be deleted when another one is previewed
     $('a.image-preview').on('mouseout', function() {
-        $('#image-preview-window').fadeOut('fast')
+        $('#image-preview-window').fadeOut('fast');
     });
 });

netbox/project-static/js/interface_toggles.js

@@ -0,0 +1,30 @@
+// Toggle the display of IP addresses under interfaces
+$('button.toggle-ips').click(function() {
+    var selected = $(this).attr('selected');
+    if (selected) {
+        $('#interfaces_table tr.ipaddresses').hide();
+    } else {
+        $('#interfaces_table tr.ipaddresses').show();
+    }
+    $(this).attr('selected', !selected);
+    $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
+    return false;
+});
+
+// Inteface filtering
+$('input.interface-filter').on('input', function() {
+    var filter = new RegExp(this.value);
+
+    for (interface of $(this).closest('form').find('tbody > tr')) {
+        // Slice off 'interface_' at the start of the ID
+        if (filter && filter.test(interface.id.slice(10))) {
+            // Match the toggle in case the filter now matches the interface
+            $(interface).find('input:checkbox[name=pk]').prop('checked', $('input.toggle').prop('checked'));
+            $(interface).show();
+        } else {
+            // Uncheck to prevent actions from including it when it doesn't match
+            $(interface).find('input:checkbox[name=pk]').prop('checked', false);
+            $(interface).hide();
+        }
+    }
+});

netbox/templates/dcim/device.html

@@ -556,6 +556,9 @@
                                 <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
                             </button>
                         </div>
+                        <div class="col-md-2 pull-right noprint">
+                            <input class="form-control interface-filter" type="text" placeholder="Filter" title="RegEx-enabled" style="height: 23px" />
+                        </div>
                     </div>
                     <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
                         <thead>
@@ -900,19 +903,8 @@ function toggleConnection(elem) {
 $(".cable-toggle").click(function() {
     return toggleConnection($(this));
 });
-// Toggle the display of IP addresses under interfaces
-$('button.toggle-ips').click(function() {
-    var selected = $(this).attr('selected');
-    if (selected) {
-        $('#interfaces_table tr.ipaddresses').hide();
-    } else {
-        $('#interfaces_table tr.ipaddresses').show();
-    }
-    $(this).attr('selected', !selected);
-    $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
-    return false;
-});
 </script>
+<script src="{% static 'js/interface_toggles.js' %}?v{{ settings.VERSION }}"></script>
 <script src="{% static 'js/graphs.js' %}?v{{ settings.VERSION }}"></script>
 <script src="{% static 'js/secrets.js' %}?v{{ settings.VERSION }}"></script>
 {% endblock %}

netbox/templates/virtualization/virtualmachine.html

@@ -1,5 +1,6 @@
 {% extends '_base.html' %}
 {% load custom_links %}
+{% load static %}
 {% load helpers %}
 
 {% block header %}
@@ -253,6 +254,9 @@
                         <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
                     </button>
                 </div>
+                <div class="col-md-2 pull-right noprint">
+                    <input class="form-control interface-filter" type="text" placeholder="Filter" title="RegEx-enabled" style="height: 23px" />
+                </div>
             </div>
             <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
                 <thead>
@@ -312,18 +316,5 @@
 {% endblock %}
 
 {% block javascript %}
-<script type="text/javascript">
+<script src="{% static 'js/interface_toggles.js' %}?v{{ settings.VERSION }}"></script>
-// Toggle the display of IP addresses under interfaces
-$('button.toggle-ips').click(function() {
-    var selected = $(this).attr('selected');
-    if (selected) {
-        $('#interfaces_table tr.ipaddresses').hide();
-    } else {
-        $('#interfaces_table tr.ipaddresses').show();
-    }
-    $(this).attr('selected', !selected);
-    $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
-    return false;
-});
-</script>
 {% endblock %}