From e1d1f522ff07c573979eb494c02c9befb07cd202 Mon Sep 17 00:00:00 2001
From: Saria Hajjar <sariahajjar@gmail.com>
Date: Fri, 3 Jan 2020 19:38:51 +0000
Subject: [PATCH] Closes #3090: Filter field for interface

---
 docs/release-notes/version-2.6.md             |  6 ++++++
 netbox/templates/dcim/device.html             | 19 +++++++++++++++++++
 .../virtualization/virtualmachine.html        | 19 +++++++++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/docs/release-notes/version-2.6.md b/docs/release-notes/version-2.6.md
index 2bf55d857..c4589a009 100644
--- a/docs/release-notes/version-2.6.md
+++ b/docs/release-notes/version-2.6.md
@@ -1,3 +1,9 @@
+# v2.6.12 (FUTURE)
+
+## Enhancements
+
+* [#3090](https://github.com/netbox-community/netbox/issues/3090) - Add filter field for device interfaces
+
 # v2.6.11 (2020-01-03)
 
 ## Bug Fixes
diff --git a/netbox/templates/dcim/device.html b/netbox/templates/dcim/device.html
index 57e2b03b8..55332ca80 100644
--- a/netbox/templates/dcim/device.html
+++ b/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 (RegExp)" style="height: 24px" />
+                        </div>
                     </div>
                     <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
                         <thead>
@@ -912,6 +915,22 @@ $('button.toggle-ips').click(function() {
     $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
     return false;
 });
+$('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();
+        }
+    }
+});
 </script>
 <script src="{% static 'js/graphs.js' %}?v{{ settings.VERSION }}"></script>
 <script src="{% static 'js/secrets.js' %}?v{{ settings.VERSION }}"></script>
diff --git a/netbox/templates/virtualization/virtualmachine.html b/netbox/templates/virtualization/virtualmachine.html
index 2498039ff..736d6bc5c 100644
--- a/netbox/templates/virtualization/virtualmachine.html
+++ b/netbox/templates/virtualization/virtualmachine.html
@@ -253,6 +253,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 (RegExp)" style="height: 24px" />
+                </div>
             </div>
             <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
                 <thead>
@@ -325,5 +328,21 @@ $('button.toggle-ips').click(function() {
     $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
     return false;
 });
+$('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();
+        }
+    }
+});
 </script>
 {% endblock %}