Merge pull request #3440 from Uninett/chore/3434-use-htmx-for-device-history

Replace QuickSelect in DeviceHistory tool with HTMX

Author: lunkwill42

changelog.d/3434.changed.md

@@ -0,0 +1 @@
+Replace quickselect with HTMX component picker in Device history tool

python/nav/web/devicehistory/urls.py

@@ -22,6 +22,11 @@
 
 urlpatterns = [
     re_path(r'^$', views.devicehistory_search, name='devicehistory-search'),
+    re_path(
+        r'^componentsearch/$',
+        views.devicehistory_component_search,
+        name='devicehistory-component-search',
+    ),
     re_path(r'^history/$', views.devicehistory_view, name='devicehistory-view'),
     re_path(
         r'^history/room/(?P<room_id>.+)/$',
@@ -39,6 +44,11 @@
         name='devicehistory-view-location',
     ),
     re_path(r'^registererror/$', views.error_form, name='devicehistory-registererror'),
+    re_path(
+        r'^registererror/componentsearch/$',
+        views.registererror_component_search,
+        name='devicehistory-registererror-component-search',
+    ),
     re_path(
         r'^do_registererror/$',
         views.register_error,

python/nav/web/devicehistory/utils/componentsearch.py

@@ -0,0 +1,127 @@
+from typing import Union
+
+from django.db.models import Model, Q, QuerySet
+from nav.models.manage import Netbox, Module, Location, NetboxGroup, Room
+
+
+def get_component_search_results(
+    search: str, button_text: str, exclude: list[type[Model]] = []
+):
+    """
+    Retrieves grouped search results for component types based on a search query.
+
+    :param search: The search term to filter components.
+    :param button_text: A format string for the button label, which will be formatted
+        with the component type label. It should contain exactly one '%s' placeholder.
+
+    :param exclude: A list of component types to exclude from the search.
+        Defaults to an empty list.
+    :returns: Dictionary mapping component names to dictionaries with the
+        following keys:
+
+        - **label** (*str*): Display label for the component type.
+        - **has_grouping** (*bool*): Indicates if the results are grouped.
+        - **values** (*list or list of tuples*): Grouped or ungrouped search results.
+        - **button** (*str*): Label for the associated action button.
+    """
+    if button_text.count('%s') != 1:
+        raise ValueError("button_text must contain exactly one '%s' placeholder")
+
+    results = {}
+    searches = _get_search_queries(search, exclude)
+
+    for component_type, query, group_by in searches:
+        component_query = _get_component_query(component_type, query)
+        component_results = _prefetch_and_group_components(
+            component_type, component_query, group_by
+        )
+
+        if component_results:
+            component_name = component_type._meta.db_table
+            component_label = component_type._meta.verbose_name.title()
+            results[component_name] = {
+                'label': component_label,
+                'values': component_results,
+                'has_grouping': group_by is not None,
+                'button': button_text % component_label,
+            }
+    return results
+
+
+def _get_search_queries(search: str, exclude: list[Model] = []):
+    """
+    Constructs a list of search queries for different component types.
+
+    Excludes specified component types if provided.
+    """
+    searches: list[tuple[type[Model], Q, type[Model] | None]] = [
+        (Location, Q(id__icontains=search), None),
+        (Room, Q(id__icontains=search), Location),
+        (
+            Netbox,
+            Q(sysname__icontains=search)
+            | Q(entities__device__serial__icontains=search),
+            Room,
+        ),
+        (NetboxGroup, Q(id__icontains=search), None),
+        (
+            Module,
+            Q(name__icontains=search) | Q(device__serial__icontains=search),
+            Netbox,
+        ),
+    ]
+    if exclude:
+        searches = [
+            (component_type, query, group_by)
+            for component_type, query, group_by in searches
+            if component_type not in exclude
+        ]
+    return searches
+
+
+def _get_component_query(component_type: Model, query: Q):
+    """
+    Constructs a query result for the specified component type based on
+    the provided query.
+    """
+    if component_type._meta.db_table == "netbox":
+        return Netbox.objects.with_chassis_serials().filter(query).distinct()
+    return component_type.objects.filter(query)
+
+
+def _prefetch_and_group_components(
+    component_type: Model, query_results: QuerySet, group_by: Union[Model, None] = None
+):
+    """
+    Prefetches related objects and groups the results by the specified group_by model.
+
+    If group_by is None, returns a flat list of component IDs and labels.
+    If group_by is specified, groups the results by the related model's
+    string representation.
+    """
+    if group_by is None or not hasattr(component_type, group_by._meta.db_table):
+        return [
+            (component.id, _get_option_label(component)) for component in query_results
+        ]
+
+    group_by_name = group_by._meta.db_table
+    component_results = query_results.prefetch_related(group_by_name)
+    grouped_results = {}
+    for component in component_results:
+        group_by_model = getattr(component, group_by_name)
+        group_name = str(group_by_model)
+        option = (component.id, _get_option_label(component))
+
+        if group_name not in grouped_results:
+            grouped_results[group_name] = []
+        grouped_results[group_name].append(option)
+    return [(group, components) for group, components in grouped_results.items()]
+
+
+def _get_option_label(component: Model):
+    """
+    Returns a string representation of the component for use in option labels.
+    """
+    if component._meta.db_table == 'netbox':
+        return '%(sysname)s [%(ip)s - %(chassis_serial)s]' % component.__dict__
+    return str(component)

python/nav/web/devicehistory/views.py

@@ -21,39 +21,26 @@
 from django.http import HttpResponseRedirect
 from django.shortcuts import render, redirect
 from django.urls import reverse
+from django.views.decorators.http import require_http_methods
 
 from nav.event2 import EventFactory
 from nav.models.fields import INFINITY
-from nav.models.manage import Netbox, Module
+from nav.models.manage import Netbox, Module, Room, Location, NetboxGroup
 from nav.models.event import AlertHistory
 from nav.web.message import new_message, Messages
-from nav.web.quickselect import QuickSelect
 from nav.web.devicehistory.utils.history import (
     fetch_history,
     get_messages_for_history,
     group_history_and_messages,
     describe_search_params,
     add_descendants,
 )
+from nav.web.devicehistory.utils.componentsearch import get_component_search_results
 from nav.web.devicehistory.utils.error import register_error_events
 from nav.web.devicehistory.forms import DeviceHistoryViewFilter
 
 device_event = EventFactory('ipdevpoll', 'eventEngine', 'deviceState')
 
-DEVICEQUICKSELECT_VIEW_HISTORY_KWARGS = {
-    'button': 'View %s history',
-    'module': True,
-    'netbox_label': '%(sysname)s [%(ip)s - %(chassis_serial)s]',
-}
-DEVICEQUICKSELECT_POST_ERROR_KWARGS = {
-    'button': 'Add %s error event',
-    'location': False,
-    'room': False,
-    'module': True,
-    'netbox_label': '%(sysname)s [%(ip)s - %(chassis_serial)s]',
-}
-
-
 # Often used timelimits, in seconds:
 ONE_DAY = 24 * 3600
 ONE_WEEK = 7 * ONE_DAY
@@ -66,8 +53,6 @@
 
 def devicehistory_search(request):
     """Implements the device history landing page / search form"""
-    device_quickselect = QuickSelect(**DEVICEQUICKSELECT_VIEW_HISTORY_KWARGS)
-
     if 'from_date' in request.GET:
         form = DeviceHistoryViewFilter(request.GET)
         if form.is_valid():
@@ -77,14 +62,29 @@ def devicehistory_search(request):
 
     info_dict = {
         'active': {'device': True},
-        'quickselect': device_quickselect,
         'navpath': [('Home', '/'), ('Device History', '')],
         'title': 'NAV - Device History',
         'form': form,
     }
     return render(request, 'devicehistory/history_search.html', info_dict)
 
 
+@require_http_methods(["POST"])
+def devicehistory_component_search(request):
+    """HTMX endpoint for component searches from device history form"""
+    raw_search = request.POST.get("search")
+    search = raw_search.strip() if raw_search else ''
+    if not search:
+        return render(
+            request, 'devicehistory/_component-search-results.html', {'results': {}}
+        )
+
+    results = get_component_search_results(search, "View %s history")
+    return render(
+        request, 'devicehistory/_component-search-results.html', {'results': results}
+    )
+
+
 def devicehistory_view_location(request, location_id):
     url = reverse('devicehistory-view')
     return redirect(url + '?loc=%s' % location_id)
@@ -152,7 +152,6 @@ def devicehistory_view(request, **_):
 
 def error_form(request):
     """Implements the 'register error event' form"""
-    device_quickselect = QuickSelect(**DEVICEQUICKSELECT_POST_ERROR_KWARGS)
     error_comment = request.POST.get('error_comment', "")
 
     return render(
@@ -161,7 +160,6 @@ def error_form(request):
         {
             'active': {'error': True},
             'confirm': False,
-            'quickselect': device_quickselect,
             'error_comment': error_comment,
             'title': 'NAV - Device History - Register error',
             'navpath': [
@@ -172,6 +170,24 @@ def error_form(request):
     )
 
 
+@require_http_methods(["POST"])
+def registererror_component_search(request):
+    """HTMX endpoint for component searches from device history form"""
+    raw_search = request.POST.get("search")
+    search = raw_search.strip() if raw_search else ''
+    if not search:
+        return render(
+            request, 'devicehistory/_component-search-results.html', {'results': {}}
+        )
+
+    results = get_component_search_results(
+        search, 'Add %s error event', [Room, Location, NetboxGroup]
+    )
+    return render(
+        request, 'devicehistory/_component-search-results.html', {'results': results}
+    )
+
+
 def confirm_error_form(request):
     """Implements confirmation form for device error event registration"""
     selection = {

python/nav/web/static/js/src/devicehistory.js

@@ -13,39 +13,35 @@
  * License along with NAV. If not, see <http://www.gnu.org/licenses/>.
  */
 
-require(['plugins/quickselect'], function (QuickSelect) {
-    $(document).ready(function() {
-        var _quickselect = new QuickSelect('.quickselect');
-        createTooltips();
-    });
-
-    function createTooltips() {
-        /**
-         * Create tooltips on the fly
+$(document).ready(function() {
+    createTooltips();
+});
 
-         * This is necessary because of the way Foundation loops through each
-         * element and creates dom-elements on page load, thus totally killing
-         * performance when the number of tooltips grow large.
-         *
-         * This solution is bare bones. It does not handle any extra options
-         * on the element. It does not handle touch devices. Thus it is only
-         * functional for desktop users.
-         */
-        $('#device-history-search-results').on('mouseenter',
-            '.fa-envelope, .netbox-sysname-tooltip', function (event) {
+function createTooltips() {
+    /**
+     * Create tooltips on the fly
 
-            var target = $(event.currentTarget);
-            if (!target.data('selector')) {
-                // selector data attribute is only there if create has been
-                // run before
-                Foundation.libs.tooltip.create(target);
-                target.on('mouseleave', function (event) {
-                    Foundation.libs.tooltip.hide($(event.currentTarget));
-                });
-            }
-            Foundation.libs.tooltip.showTip(target);
+     * This is necessary because of the way Foundation loops through each
+     * element and creates dom-elements on page load, thus totally killing
+     * performance when the number of tooltips grow large.
+     *
+     * This solution is bare bones. It does not handle any extra options
+     * on the element. It does not handle touch devices. Thus it is only
+     * functional for desktop users.
+     */
+    $('#device-history-search-results').on('mouseenter',
+        '.fa-envelope, .netbox-sysname-tooltip', function (event) {
 
-        });
-    }
+        var target = $(event.currentTarget);
+        if (!target.data('selector')) {
+            // selector data attribute is only there if create has been
+            // run before
+            Foundation.libs.tooltip.create(target);
+            target.on('mouseleave', function (event) {
+                Foundation.libs.tooltip.hide($(event.currentTarget));
+            });
+        }
+        Foundation.libs.tooltip.showTip(target);
 
-});
+    });
+}

python/nav/web/templates/devicehistory/_component-search-results.html

@@ -0,0 +1,35 @@
+{% if results %}
+    {% for component_type, result in results.items %}
+        <div>
+            <label for="id_{{ component_type }}" style="font-weight: bold;">{{ result.label }}</label>
+            <select multiple id="id_{{ component_type }}" name="{{ component_type }}">
+                {% if result.has_grouping %}
+                    {% for optgroup, options in result.values %}
+                        <optgroup label="{{ optgroup }}">
+                            {% for id, label in options %}
+                                <option value="{{ id }}">{{ label }}</option>
+                            {% endfor %}
+                        </optgroup>
+                    {% endfor %}
+                {% else %}
+                    {% for id, label in result.values %}
+                        <option value="{{ id }}">{{ label }}</option>
+                    {% endfor %}
+                {% endif %}
+            </select>
+            <div class="row">
+                <button type="submit" class="small secondary" name="submit_{component_type}">
+                    {{ result.button }}
+                </button>
+                <button
+                    type="button" class="secondary small"
+                    onclick="Array.from(document.getElementById('id_{{ component_type }}').options).forEach(opt => opt.selected = true);"
+                >
+                    Select all
+                </button>
+            </div>
+        </div>
+    {% endfor %}
+{% else %}
+    <strong>No hits</strong>
+{% endif %}