Refactor dashboard navlets to use HTMX #3634

Simrayz · 2025-10-29T09:51:34Z

Scope and purpose

Resolves #3635.

This PR refactors the dashboard navlets logic from a complicated JS flow, to use HTMX where possible, and simplifies necessary javascript plugin interoperability.

See issue #3635 for a full description of changes.

This pull request

Implements loading and updating of navlets with HTMX
Replaces navlet_controller and navlets_controller with navlets_htmx_controller
Renders entire dashboard on initial load of the page, with individual data fetching for each navlet
Simplifies refresh of image- and ajax reload navlets

How to test

Loading navlets

Navlet Load

Open your default dashboard
Verify that navlets have a Spinner that indicates their loading state
Verify that all navlets load and resolve in their "VIEW" mode

Adding and Removing Navlets

Create a new dashboard. Verify that the dashboard has a "No widgets"
Add a new Navlet to your dashboard.
1. Verify that the Navlet is rendered in the leftmost column at the top, and that the "No widgets" message is removed.
2. Verify that the navlet is highlighted, and that the highlight is removed on hover.
3. Add another Navlet to your dashboard.
4. Reload the page, and verify that positions have been saved.
Delete a Navlet.
1. Verify that it is removed from the dashboard.
2. Remove all remaining navlets, and verify that a "No widgets" message is added to the left-most column.

Dashboard Layout

Re-ordering Navlets

Open a dashboard with many navlets, e.g. your Default dashboard.
Hold the drag handle, and move a navlet into a different column.
Reload the page, and verify that the positions were saved.

Updating columns

Open a dashboard with many navlets, e.g. your Default dashboard.
Open dashboard settings, and change the column count.
Verify that the dashboard is reloaded, and the column count is changed.

Compact Dashboard Mode

Open a dashboard with many navlets, e.g. your Default dashboard.
Change the column density from "Normal" to "Compact"
Verify that the spacing between navlets is removed.

Editing Navlets

Fill in section about how to test editing of navlets.

Periodic Refresh of Navlets

Refresh with standard interval

This can be tested with all Navlets that have a refresh_interval defined, and don't have ajax_reload or image_reload set to True. I have selected RoomStatus as an example as the refresh interval is short.

Add a RoomStatus ("Rooms with active alerts") navlet to a dashboard.
Take note of the "Last update" time, and wait 30 seconds.
Verify that the Navlet is reloaded. You can also view this in the Network tab in dev tools.

Refresh with `ajax_reload=True`

Create an empty dashboard.
Add an Alert, PDU and UPS navlet.
Configure the navlets to show content.
The default refresh interval is 30 seconds, so open the network tab and look for repeating render requests.
Verify that the "Last update" text in the bottom-right is updated every thirty seconds. Does not work for the Alert widget, if there is no data available in graphite.

Refresh for VlanGraphNavlet and GraphWidget

Add a Vlan Graph to a dashboard.
1. Go into edit mode, and select a Vlan. Not all of them have an URL, so try one that works, e.g. VLAN 20 for employees.
2. Verify that an image (or placeholder with No Data) is rendered.
Add a Chart (GraphWidget) to a dashboard.
1. Go into edit mode. You need a Chart URL and a Target URL. I found the most practical way to find values for this form was to find a GraphWidget in the account_navlet table, and copy the values from preferences.
2. Verify that an image (or placeholder with No Data) is rendered.

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.

github-actions · 2025-10-29T10:00:49Z

Test results

11 files 11 suites 12m 21s ⏱️
2 691 tests 2 689 ✅ 0 💤 2 ❌
8 570 runs 8 564 ✅ 0 💤 6 ❌

For more details on these failures, see this check.

Results for commit 143c621.

♻️ This comment has been updated with latest results.

codecov · 2025-10-29T10:01:05Z

Codecov Report

❌ Patch coverage is 83.13253% with 14 lines in your changes missing coverage. Please review.
✅ Project coverage is 62.82%. Comparing base (5eaae6b) to head (143c621).
⚠️ Report is 6 commits behind head on master.

Files with missing lines	Patch %	Lines
python/nav/web/navlets/vlangraph.py	0.00%	4 Missing ⚠️
python/nav/web/navlets/__init__.py	93.75%	3 Missing ⚠️
python/nav/web/navlets/graph.py	0.00%	3 Missing ⚠️
python/nav/web/navlets/status2.py	50.00%	2 Missing ⚠️
python/nav/web/navlets/feedreader.py	0.00%	1 Missing ⚠️
python/nav/web/navlets/report.py	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3634      +/-   ##
==========================================
+ Coverage   62.81%   62.82%   +0.01%     
==========================================
  Files         611      611              
  Lines       45125    45162      +37     
  Branches       43       43              
==========================================
+ Hits        28344    28374      +30     
- Misses      16771    16778       +7     
  Partials       10       10

☔ 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.

hmpf

Add one commit that fixes the get's and post's of all the TemplateView desecendants to also have *args (or *_) and **kwargs (or **__) even if they don use them. Devs used to Django expect it.

hmpf · 2025-10-31T07:22:21Z

python/nav/web/navlets/__init__.py

        raise NotImplementedError

-    def get_template_names(self):
+    def get_template_names(self, override_mode=None):


Put in the class docstring what override_mode is used for.

hmpf · 2025-10-31T07:29:45Z

python/nav/web/navlets/__init__.py

        return context

-    def post(self, _request, **kwargs):
+    def post(self, request, **kwargs):


Change signature to def post(self, request, *_, **kwargs):, due to Liskov substitution principle: as this is now it's a TemplateView that breaks the rules of a TemplateView.

Whoa, many old sins in this code, Liskov-wise...

hmpf · 2025-10-31T07:31:25Z

python/nav/web/navlets/__init__.py

    @property
    def mode(self):
        """Fetch the mode of this request"""
        return self.request.GET.get('mode', NAVLET_MODE_VIEW)


Changing viewclass.as_view() to spit out two different classes depending on mode might be better, but is out of scope. Django-style would be to have the mode as part of the url (`path("something/str:mode", ..) and two different views but that's even more out of scope.

I agree. The Navlets code is quite strange, and really we should separate GET and POST at least. I opted not to dig too much into the Navlets in this round, and leave that for later.

hmpf · 2025-10-31T07:36:33Z

python/nav/web/navlets/graph.py

+        url = self.preferences.get('url')
+        timestamp = int(datetime.now().timestamp())
+        context['graph_url'] = f'{url}&bust={timestamp}'


Cache-busting? Add a comment about it.

The bust parameter was defined here.

nav/python/nav/web/static/js/src/plugins/navlet_controller.js

Lines 129 to 139 in 16d6419

if (this.navlet.image_reload) {

this.refresh = setInterval(function () {

// Find image each time because of async loading

var image = that.node.find('img[data-image-reload], [data-image-reload] img');

if (image.length) {

// Add bust parameter to url to prevent caching

var uri = new URI(image.get(0)).setSearch('bust', Math.random());

image.attr('src', uri.href());

}

}, preferences.refresh_interval);

} else if (this.navlet.ajax_reload) {

I created a new staticmethod on the Navlet class, add_bust_param_to_url

hmpf · 2025-10-31T07:38:28Z

python/nav/web/navlets/vlangraph.py

+            timestamp = int(datetime.now().timestamp())
+            context['graph_url'] = f'{url}&bust={timestamp}'


Twice now.. should we have a cache-buster function?

I created a method on the Navlet class

hmpf · 2025-10-31T07:40:43Z

python/nav/web/templates/navlets/_add_navlet_modal.html

+                  hx-post="{% url 'add-user-navlet' dashboard_id %}"
+                  hx-swap="beforeend"
+          >


What happens if you keep action and post in addition to what's here now?

The native form submit event is overruled by HTMX, so adding them would make no difference. Action is only used for html form submission, or by certain javascript submit handlers across the codebase.

sonarqubecloud · 2025-11-03T09:33:08Z

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Simrayz self-assigned this Oct 29, 2025

Simrayz added cleanup javascript htmx labels Oct 29, 2025

Simrayz added the modernisation label Oct 29, 2025

Simrayz force-pushed the chore/refactor-dashboard-navlets-to-use-htmx branch 3 times, most recently from 0303f9b to 577b2c8 Compare October 30, 2025 11:36

Simrayz added 2 commits October 30, 2025 13:34

Add initial support for rendering dashboard with htmx

09202d5

Add support for adding and removing navlets with htmx

6aed704

Simrayz force-pushed the chore/refactor-dashboard-navlets-to-use-htmx branch from 577b2c8 to 79f0b28 Compare October 30, 2025 12:34

Simrayz requested a review from a team October 30, 2025 14:21

Simrayz force-pushed the chore/refactor-dashboard-navlets-to-use-htmx branch from 79f0b28 to c9d6286 Compare October 30, 2025 14:41

Simrayz added 15 commits October 30, 2025 15:43

Add loading spinner to navlets

d2ce08e

Change column chooser to update with htmx

f0de085

Add mark-new class to new navlets

1df67ca

Move navlet listeners to htmx controller

bcef557

Add support for saving navlet forms with HTMX

9d24516

Handle form errors in status navlet

2d0d392

Support re-rendering of form select elements with htmx

b04a8f5

Add bust parameter to graph urls

a82edde

Add refresh template for handling periodic refresh

0c8d98f

Refactor navlets htmx controller

2717b07

Refactor navlet handlers in separate plugin

e198ad4

Add changelog entry

2dd8160

Support ajax reload with htmx swap

28f1a3a

Remove old navlet controllers

a287e5b

Add dashboard loading tests

f4771af

Add navlet tests

20865d9

Simrayz force-pushed the chore/refactor-dashboard-navlets-to-use-htmx branch from c9d6286 to 20865d9 Compare October 30, 2025 14:43

hmpf requested changes Oct 31, 2025

View reviewed changes

fixup! Handle form errors in status navlet

16bc4a6

Simrayz force-pushed the chore/refactor-dashboard-navlets-to-use-htmx branch from 06a86d6 to 4418f4c Compare October 31, 2025 10:45

Simrayz added 3 commits October 31, 2025 11:58

fixup! Add support for saving navlet forms with HTMX

eee96ac

fixup! Add bust parameter to graph urls

c4f86d9

fixup! Handle form errors in status navlet

143c621

Simrayz force-pushed the chore/refactor-dashboard-navlets-to-use-htmx branch from 4418f4c to 143c621 Compare November 3, 2025 09:32

	if (this.navlet.image_reload) {
	this.refresh = setInterval(function () {
	// Find image each time because of async loading
	var image = that.node.find('img[data-image-reload], [data-image-reload] img');
	if (image.length) {
	// Add bust parameter to url to prevent caching
	var uri = new URI(image.get(0)).setSearch('bust', Math.random());
	image.attr('src', uri.href());
	}
	}, preferences.refresh_interval);
	} else if (this.navlet.ajax_reload) {

		timestamp = int(datetime.now().timestamp())
		context['graph_url'] = f'{url}&bust={timestamp}'

Refactor dashboard navlets to use HTMX #3634

Are you sure you want to change the base?

Refactor dashboard navlets to use HTMX #3634

Uh oh!

Conversation

Simrayz commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Scope and purpose

This pull request

How to test

Loading navlets

Navlet Load

Adding and Removing Navlets

Dashboard Layout

Re-ordering Navlets

Updating columns

Compact Dashboard Mode

Editing Navlets

Periodic Refresh of Navlets

Refresh with standard interval

Refresh with ajax_reload=True

Refresh for VlanGraphNavlet and GraphWidget

Contributor Checklist

Uh oh!

github-actions bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test results

Uh oh!

codecov bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

hmpf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hmpf Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Nov 3, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Simrayz commented Oct 29, 2025 •

edited

Loading

Refresh with `ajax_reload=True`

github-actions bot commented Oct 29, 2025 •

edited

Loading

codecov bot commented Oct 29, 2025 •

edited

Loading

hmpf Oct 31, 2025 •

edited

Loading