Skip to content

Replace QuickSelect in DeviceHistory tool with HTMX#3440

Merged
lunkwill42 merged 3 commits intomasterfrom
chore/3434-use-htmx-for-device-history
Aug 19, 2025
Merged

Replace QuickSelect in DeviceHistory tool with HTMX#3440
lunkwill42 merged 3 commits intomasterfrom
chore/3434-use-htmx-for-device-history

Conversation

@Simrayz
Copy link
Copy Markdown
Contributor

@Simrayz Simrayz commented Aug 14, 2025

Scope and purpose

Implements #3434, replacing QuickSelect in DeviceHistory with an HTMX implementation, similar to for Maintenance Tasks.

  • Adds HTMX select tools to the Device History tool, for both the Device History and Register Error Event tabs.
  • Removes QuickSelect from the Device History tool
  • Changed form description to reflect actual behaviour and components available for search
  • Add additional tests for Register Error Event form

The existing code has some discrepancy in the Register Error Event form, such as including device groups in the search, but not considering them in the form submission. This leaves only netboxes and modules as possible devices to register errors on. However, the register_error_events supports both locations, rooms, netboxes and modules. As such, I was not able to understand the conflicting "business rules" by looking at the code.

As a "solution" i opted to remove the device group select, and only make netboxes and modules searchable in the form. If the intended behavior is to support all component types in this form, I can implement this in a follow up PR.

A follow-up task it to remove QuickSelect from the codebase entirely, which was omitted to keep this PR small.

Screenshots

Before

Device History Search
image
image

Register Error Event
image

After

Device History search
image

Register Error Event
image

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to NAV can be found in the
Hacker's guide to NAV.

  • Added a changelog fragment for towncrier
  • Added/amended tests for new/changed code
  • Added/changed documentation
  • Linted/formatted the code with ruff, easiest by using pre-commit
  • The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See https://cbea.ms/git-commit/
  • This pull request is based on the correct upstream branch: For a patch/bugfix affecting the latest stable version, it should be based on that version's branch (<major>.<minor>.x). For a new feature or other additions, it should be based on master.
  • If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
  • If this results in changes in the UI: Added screenshots of the before and after
  • If this adds a new Python source code file: Added the boilerplate header to that file

@Simrayz Simrayz self-assigned this Aug 14, 2025
@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 14, 2025

Test results

   12 files     12 suites   12m 5s ⏱️
2 248 tests 2 248 ✅ 0 💤 0 ❌
6 219 runs  6 219 ✅ 0 💤 0 ❌

Results for commit 18190f6.

♻️ This comment has been updated with latest results.

@codecov
Copy link
Copy Markdown

codecov bot commented Aug 14, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.77%. Comparing base (870d276) to head (18190f6).
⚠️ Report is 546 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3440      +/-   ##
==========================================
- Coverage   60.96%   60.77%   -0.20%     
==========================================
  Files         607      608       +1     
  Lines       44062    44053       -9     
  Branches       48       48              
==========================================
- Hits        26863    26772      -91     
- Misses      17187    17269      +82     
  Partials       12       12              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Simrayz Simrayz force-pushed the chore/3434-use-htmx-for-device-history branch 2 times, most recently from 9a0c844 to 9620b12 Compare August 14, 2025 12:30
Replace quickselect in Device History error events with HTMX
@Simrayz Simrayz force-pushed the chore/3434-use-htmx-for-device-history branch from 9620b12 to 7aa7a1d Compare August 14, 2025 12:58
@Simrayz Simrayz marked this pull request as ready for review August 14, 2025 13:08
@Simrayz Simrayz changed the title Chore/3434 use htmx for device history Replace QuickSelect in DeviceHistory tool with HTMX Aug 15, 2025
@lunkwill42
Copy link
Copy Markdown
Member

The existing code has some discrepancy in the Register Error Event form, such as including device groups in the search, but not considering them in the form submission. This leaves only netboxes and modules as possible devices to register errors on. However, the register_error_events supports both locations, rooms, netboxes and modules. As such, I was not able to understand the conflicting "business rules" by looking at the code.

As a "solution" i opted to remove the device group select, and only make netboxes and modules searchable in the form. If the intended behavior is to support all component types in this form, I can implement this in a follow up PR.

Looking at the original form, having Device Groups under "register error event" makes no sense. Error events cannot be logged for device groups, they must be logged for individual devices. I get the distinct feeling that device groups must have been added to the QuickSelect component at some point, and that whoever added it forgot to ensure it wasn't enabled on the "register error event" page.

So I'd say your solution to this conundrum is a-ok.

Copy link
Copy Markdown
Member

@lunkwill42 lunkwill42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks pretty good - but the button labels on the history search page are now misnomers: They say "Add this" or "Add that". But these buttons do not "add" anything, they execute a search based on what you've selected in the list (see the button text in the old UI).

I also realized we should follow up this PR with a fix for #1996 - and also that we should potentially follow up with something more complicated for netboxes, since the Netbox' model's relation to Device has change significantly since the device history tool was written...

@Simrayz Simrayz force-pushed the chore/3434-use-htmx-for-device-history branch from 0385fc8 to 435acb5 Compare August 15, 2025 11:07
@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Aug 15, 2025

Looks pretty good - but the button labels on the history search page are now misnomers: They say "Add this" or "Add that". But these buttons do not "add" anything, they execute a search based on what you've selected in the list (see the button text in the old UI).

I also realized we should follow up this PR with a fix for #1996 - and also that we should potentially follow up with something more complicated for netboxes, since the Netbox' model's relation to Device has change significantly since the device history tool was written...

Oops! The search utility now takes a (required) button text pattern instead of a suffix, and modified the tests to reflect this.

@Simrayz Simrayz requested a review from lunkwill42 August 15, 2025 11:38
Copy link
Copy Markdown
Member

@lunkwill42 lunkwill42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much better :)

@Simrayz Simrayz force-pushed the chore/3434-use-htmx-for-device-history branch from 435acb5 to 18190f6 Compare August 18, 2025 07:43
@sonarqubecloud
Copy link
Copy Markdown

@Simrayz Simrayz requested a review from lunkwill42 August 18, 2025 07:53
Base automatically changed from poc/maintenance-htmx-simen to master August 18, 2025 09:58
Copy link
Copy Markdown
Member

@lunkwill42 lunkwill42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything LGTM, except: The confirm/submit-button is missing from the "Register error event" form once I've selected a device to add an error comment to...

@lunkwill42 lunkwill42 dismissed their stale review August 19, 2025 13:26

Belay that last comment - there are some inconsistencies in the UI I'm still trying to figure out...

Copy link
Copy Markdown
Member

@lunkwill42 lunkwill42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The whole of device history gets a bit confusing UX-wise, and it isn't really this PR's fault. We have a lot of followup work for usability here, methinks :-)

@lunkwill42 lunkwill42 merged commit 864d6bf into master Aug 19, 2025
16 of 17 checks passed
@lunkwill42 lunkwill42 deleted the chore/3434-use-htmx-for-device-history branch August 19, 2025 13:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace QuickSelect with HTMX-based component picker in Device History tool

2 participants