Closes: #9583 - Add column specific search field to tables #15073

DanSheps · 2024-02-07T18:20:15Z

Closes: #9583 - Add column specific search field to tables

The plan is to use the existing filterset to generate form fields on the table column headers to allow for inline-filtering using HTMX requests

Progress

Fields are generated for type fields HTMX requests are sent and account for both fields
Integrate with "quick search"
Works with custom fields
Allow dropdown to float outside of the parent div

Todo

~~Add input fields for "name"~~ Not needed - Quick search is suitable for this
~~Fix filter float (Move before field name perhaps)~~ Done
~~Add show/hide filter (Optional)~~ Outside of scope

DanSheps

I think this is mostly there

netbox/netbox/views/generic/bulk_views.py

DanSheps · 2024-02-07T19:46:35Z

netbox/templates/inc/table_controls_htmx.html

@@ -5,7 +5,7 @@
  <div class="col-auto d-print-none">
    <div class="input-group input-group-flat me-2 quicksearch">
      <input type="search" results="5" name="q" id="quicksearch" class="form-control px-2 py-1" placeholder="Quick search"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
+        hx-get="" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />


Removed full path, as this will allow taking into account filters on the form (to facilitate pushing of the filters from the column as well).

Should not impact functionality

Should not impact functionality

Do we know this for sure? IIRC we specify the full path for a reason, I just can't recall why.

From my testing, I haven't found any issues with it.

netbox/utilities/templatetags/form_helpers.py

…field_to_tables' into 9583-add_column_specific_search_field_to_tables

jeremystretch

I'm seeing a lot of errors when trying to load the filter fields.

This is likely due to having multiple form fields with the same ID (one on the table and one on the "filters" tab).

netbox/utilities/templatetags/form_helpers.py

…ction for column filters

…tables

netbox/utilities/templatetags/form_helpers.py

netbox/templates/inc/table_htmx.html

netbox/templates/inc/table_header_filter_dropdown.html

jeremystretch · 2024-03-20T19:45:15Z

netbox/templates/inc/table_controls_htmx.html

@@ -5,7 +5,7 @@
  <div class="col-auto d-print-none">
    <div class="input-group input-group-flat me-2 quicksearch">
      <input type="search" results="5" name="q" id="quicksearch" class="form-control px-2 py-1" placeholder="Quick search"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
+        hx-get="" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />


Should not impact functionality

Do we know this for sure? IIRC we specify the full path for a reason, I just can't recall why.

netbox/templates/inc/table_header_filter_dropdown.html

netbox/templates/inc/table_htmx.html

netbox/utilities/templatetags/form_helpers.py

jeremystretch · 2024-03-20T19:55:00Z

netbox/utilities/templatetags/form_helpers.py

+        field.field.widget.attrs.update({
+            'id': f'table_filter_id_{field.name}',
+            'hx-get': url if url else '#',
+            'hx-push-url': "true",
+            'hx-target': '#object_list',
+            'hx-trigger': 'hidden.bs.dropdown from:closest .dropdown'
+        })


I'm not sure this approach is tenable: We're using the same form field for both the column and the regular filter form (behind the second tab). Setting HTMX attributes on a non-HTMX form field should be avoided, and overriding its ID may cause problems. IMO we should try to identify a cleaner approach.

I have went ahead and made a possible modification to this.

In bulk views, I initialize two copies of the form:

A copy of the form for the filtering tab

A copy of the form for the table column filtering

Since this render_table_filter_field tag is only used by the table coumn filtering logic, this shouldn't be a problem anymore.

Let me know if this approach is a more "safer" one while allowing for some code re-use. I can go a little deeper and perhaps modify all filtersets to add a "column filter" tuple to allow a more clean approach to limiting the columns as well.

AFAICT this should work fine, but do we need a full form instance for the columns? It might suffice to make a copy of the relevant fields from the filter form and attach them to their respective columns.

Though with either approach, I feel like we're missing a step. The current implementation depends on the column name and the field name matching (form_field=table.filterset_form|get_filter_field:column.name). This should work ~95% of the time but inevitably we're going to find exceptions. I'd like to see if we can devise a more robust approach, short of duplicating the field definitions.

AFAICT this should work fine, but do we need a full form instance for the columns? It might suffice to make a copy of the relevant fields from the filter form and attach them to their respective columns.

Instead of initializing the form right away, we could copy the form definition and then remove fields that not present on the table before intitialization. This feels like excess code for very little gain however

Though with either approach, I feel like we're missing a step. The current implementation depends on the column name and the field name matching (form_field=table.filterset_form|get_filter_field:column.name). This should work ~95% of the time but inevitably we're going to find exceptions. I'd like to see if we can devise a more robust approach, short of duplicating the field definitions.

I think we should handle this on a case-by-case. The only other option would be looking at the table and building a completely new form class dynamically based on the table field types, however we then would likely lose all the custom filtering unless we tie it with the existing filter form somehow.

jeremystretch · 2024-03-20T20:08:36Z

Another concern: There's no way to quickly discern when a column filter has been applied.

netbox/templates/inc/table_htmx.html

netbox/utilities/templatetags/form_helpers.py

DanSheps · 2025-01-21T03:00:02Z

Interesting note:

yarn:bundle on windows outputs CSS with RGB color values
yarn:bundle on linux outputs CSS with HEX color values

…into 9583-add_column_specific_search_field_to_tables

…ps://github.com/netbox-community/netbox into 9583-add_column_specific_search_field_to_tables

DanSheps · 2025-02-13T16:53:17Z

@arthanson @bctiemann I just updated the bundle. Could you two give this a look?

arthanson · 2025-02-18T16:43:46Z

@DanSheps build is failing?

DanSheps · 2025-02-18T20:35:40Z

Thanks @arthanson, wil let you know when it passes.

DanSheps · 2025-02-19T18:25:02Z

I think I only update the styles, this is my bad. Pushing the latest bundle now.

DanSheps · 2025-02-19T21:19:06Z

@arthanson good to go it looks like

arthanson · 2025-02-25T17:03:52Z

Just a note - not sure if this is a bootstrap type behavior but if you click a filter dropdown (leave it open) then click another filter dropdown - it closes the first one, opens the new one, then closes the new one. If you close the first one and then select the new one it works okay, but if you don't close the first one it will auto-close the second one after a brief delay.

Actually while testing I was finding this pretty annoying - even if I close a previous filter dropdown then quickly select another it will auto close it. There seems to be some type of delayed close signal or something.

arthanson · 2025-02-25T17:07:55Z

Sites -> Locations table there is a dropdown for "FACILITY" that drops down for a text entry box, but it doesn't seem to search correctly. I added faculty "aaa" to one and "bbb" to another location then in the dropdown searched for "bbb" and it errors "No Locations were selected".

arthanson · 2025-02-25T17:12:03Z

Contact Assignments "OBJECT TYPE" filter, because of the long name it causes UI issues - if it was a bit longer the x at the end of object would not be selectable, it doesn't scroll either (meaning you can't scroll sideways to get to the x from what I've tried). Not sure how fixable this is and can remove the filter in the chit, but would be good to fix if possible.

arthanson · 2025-02-25T17:15:49Z

Height is the same as facility above - it allows me to select a number but when I do an press return it say "No racks were selected" even if there are Racks with that height.

arthanson · 2025-02-25T17:27:23Z

Is this by design or a bug? If I do filters by the filter drop-down then I get the filter chit but the "Filters" tab doesn't show any filter applied, and if I go to the filters tab it doesn't show any filters. This is different behavior then if I select the filter via the filter tab. It seems a bit confusing that I have the filter chit but the filters are working two different ways. Say I use the filter dropdown to filter something then I want to filter something more complex and go to the filter tab, but now I don't have that filter. Seems like they should work inter-changeably?

Actually, think bug - if you apply filters from two different columns, then remove one by clicking the chit the Filters tab then shows the correct info.

arthanson · 2025-02-25T17:32:23Z

Device Types - "PART NUMBER" also doesn't work:

arthanson

Still seems like (minor) UI issues, I didn't test every table dropdown as several issues (like certain entry fields aren't filtering correctly) seem to be a general issue. It's a nice feature, but I'm a bit worried that it could be a support issue (minor UX nits popping up)

I haven't done a thorough code review again as these UX issues will cause code changes.

DanSheps · 2025-02-25T22:18:44Z

Still seems like (minor) UI issues, I didn't test every table dropdown as several issues (like certain entry fields aren't filtering correctly) seem to be a general issue. It's a nice feature, but I'm a bit worried that it could be a support issue (minor UX nits popping up)

I haven't done a thorough code review again as these UX issues will cause code changes.

I will have to check but if there isn't a corresponding filter it shouldn't allow filtering. This seems like it is allowing filtering even if the filter itself doesn't exist. I will double check though and see what I can find.

arthanson · 2025-02-28T15:22:44Z

Great work, however as per discussion, closing this one for now as it needs another round of refactoring and fixing some UI issues. @DanSheps can you re open it after changes are complete. The major areas to look at are:

Look into an alternative solution that doesn't require column names to match the filter names per Jeremy's earlier comment "The current implementation depends on the column name and the field name matching (form_field=table.filterset_form|get_filter_field:column.name). This should work ~95% of the time but inevitably we're going to find exceptions. I'd like to see if we can devise a more robust approach, short of duplicating the field definitions."
Investigate / fix the issue "allowing filtering even if the filter itself doesn't exist" found in the UI testing. (Sites -> Locations table dropdown for "FACILITY" )
Filters tab getting updated when filter Is selected

I think a final UI run-through of every table / dropdown needs to be done to double-check the functionality.

DanSheps added 4 commits February 2, 2024 15:49

Preliminary work on 9583.

4c39516

HTMX work on 9583.

e762755

Preliminary work on 9583.

f7294f7

Preliminary work on 9583.

664a0eb

DanSheps changed the base branch from develop to feature February 7, 2024 19:41

DanSheps commented Feb 7, 2024

View reviewed changes

Apply some quick fixes and add comments

cc423f5

jeremystretch added this to the v4.0 milestone Feb 8, 2024

DanSheps added 10 commits February 9, 2024 16:35

Final work on #9583 for basic functionality

50557c0

CSS update for dropdown

03f67f3

Merge remote-tracking branch 'origin/9583-add_column_specific_search_…

3243ebd

…field_to_tables' into 9583-add_column_specific_search_field_to_tables

Update CSS

b54cfd6

Change dropdown position and fix test failure

5f69666

Fix test failure

06c1aff

Merge in recent feture changes

4ae6683

Update CSS after merge

c3f1a96

Optimizations

f81f76f

Fix extraneous __all__ entry

0309796

DanSheps marked this pull request as ready for review February 12, 2024 22:09

DanSheps requested a review from jeremystretch February 12, 2024 22:09

jeremystretch reviewed Feb 13, 2024

View reviewed changes

netbox/utilities/templatetags/form_helpers.py Outdated Show resolved Hide resolved

Fix tom-select errors related to field id. Break out render_field fun…

84151cb

…ction for column filters

DanSheps requested a review from jeremystretch February 16, 2024 21:57

jeremystretch added 2 commits March 7, 2024 08:50

Merge branch 'feature' into 9583-add_column_specific_search_field_to_…

77bfd62

…tables

Merge branch 'feature' into 9583-add_column_specific_search_field_to_…

25a4e94

…tables

jeremystretch requested changes Mar 20, 2024

View reviewed changes

DanSheps commented Mar 22, 2024

View reviewed changes

netbox/templates/inc/table_htmx.html Outdated Show resolved Hide resolved

DanSheps commented Mar 22, 2024

View reviewed changes

netbox/templates/inc/table_htmx.html Outdated Show resolved Hide resolved

DanSheps commented Mar 22, 2024

View reviewed changes

netbox/utilities/templatetags/form_helpers.py Outdated Show resolved Hide resolved

DanSheps added 3 commits January 20, 2025 17:35

Remove debug

451a1f4

Fix test error and OOB-swap

434cf37

Fix test error

e7649f0

DanSheps requested a review from jeremystretch January 21, 2025 03:00

DanSheps added 3 commits February 13, 2025 10:48

Merge branch 'feature' of https://github.com/netbox-community/netbox …

7144954

…into 9583-add_column_specific_search_field_to_tables

Merge branch '9583-add_column_specific_search_field_to_tables' of htt…

762ebe2

…ps://github.com/netbox-community/netbox into 9583-add_column_specific_search_field_to_tables

Update bundle

01cb7be

DanSheps requested review from arthanson and bctiemann and removed request for arthanson and jeremystretch February 13, 2025 16:52

DanSheps force-pushed the 9583-add_column_specific_search_field_to_tables branch from 02ddf4d to 01cb7be Compare February 19, 2025 20:55

Update Style

49bcf57

arthanson requested changes Feb 25, 2025

View reviewed changes

arthanson closed this Feb 28, 2025

github-actions bot locked as resolved and limited conversation to collaborators Mar 31, 2025

Closes: #9583 - Add column specific search field to tables #15073

Closes: #9583 - Add column specific search field to tables #15073

Uh oh!

Conversation

DanSheps commented Feb 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!