Filtering now refreshes as you type.

UKB-IT-Sec · Dec 16, 2024 · 98fa484 · 98fa484
1 parent 2503d0a
commit 98fa484
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 66 deletions.
diff --git a/src/nac/subviews/device_management.py b/src/nac/subviews/device_management.py
@@ -4,6 +4,8 @@
 from django.urls import reverse_lazy
 from django.shortcuts import render
 import json
+from django.http import JsonResponse
+from django.template.loader import render_to_string
 
 from ..models import Device, AuthorizationGroup, DeviceRoleProd
 from ..forms import DeviceForm, DeviceSearchForm
@@ -38,8 +40,18 @@ def get_queryset(self):
             device_list = device_list.filter(appl_NAC_DeviceRoleProd__in=selected_device_roles_prod)
         return device_list.order_by("name")
 
+    def get(self, request, *args, **kwargs):
+        # Check if the request is an AJAX request
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            # Handle AJAX request by rendering only the relevant part of the template
+            html = render_to_string('devices_results.html', {"device_list": self.get_queryset()})
+            return JsonResponse({'html': html})
+
+        # Otherwise, handle a normal HTTP request
+        return super().get(request, *args, **kwargs)
+
     # we need this for the drop-down menus with filtering options
-    def get_context_data(self, *, object_list=None, **kwargs):
+    def get_context_data(self, **kwargs):
         context = super(DeviceListView, self).get_context_data(**kwargs)
         context["auth_group_list"] = AuthorizationGroup.objects.filter(id__in=self.request.user.authorization_group.all())
         context["device_role_prod_list"] = DeviceRoleProd.objects.all()

diff --git a/src/static/device_filtering.js b/src/static/device_filtering.js
@@ -0,0 +1,30 @@
+const search_form = $("#search_form")
+const results_div = $('#results')
+const endpoint = '/devices/'
+const delay_by_in_ms = 700
+let scheduled_function = false
+
+let ajax_call = function (endpoint, request_parameters) {
+    $.getJSON(endpoint, request_parameters)
+        .done(response => {
+                // replace the HTML contents
+                results_div.html(response['html'])
+            })
+}
+
+search_form.on('input', function () {
+
+    const request_parameters = {
+        search_string: $('#id_search_string').val(),
+        device_role_prod: $('#id_device_role_prod').val(),
+        authorization_group: $('#id_authorization_group').val()
+    }
+
+    // if scheduled_function is NOT false, cancel the execution of the function
+    if (scheduled_function) {
+        clearTimeout(scheduled_function)
+    }
+
+    // setTimeout returns the ID of the function to be executed
+    scheduled_function = setTimeout(ajax_call, delay_by_in_ms, endpoint, request_parameters);
+})
diff --git a/src/templates/base.html b/src/templates/base.html
@@ -15,7 +15,10 @@
 		<link rel="icon" href="{% static 'icons/favicon.svg' %}" sizes="any" type="image/svg+xml">
 
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
+
+		<!-- JQuery -->
+		<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+
 
 		{% block head %}{% endblock %}
 

diff --git a/src/templates/devices.html b/src/templates/devices.html
@@ -5,7 +5,7 @@
 {% block content %}
 <div class="container">
 	<h1>Devices</h1>
-	 <form action="{% url 'devices' %}" method="get">
+	 <form id="search_form" action="{% url 'devices' %}" method="get">
 		 <div class="row">
 			 {% for field in search_form %}
 			 <div class="col-md-4 ">
@@ -15,68 +15,12 @@ <h1>Devices</h1>
 		 </div>
         <button type="submit" class="btn btn-secondary btn-sm">Filter</button>
     </form>
-	<table class="table table-striped">
-		<thead>
-			<tr>
-				<th scope="col">Name</th>
-				<th scope="col">Status</th>
-				<th scope="col">FQDN</th>
-				<th scope="col">Device Role Prod</th>
-				<th scope="col">MAC</th>
-				<th scope="col" width="60"></th>
-			</tr>
-		</thead>
 
-	{% for device in device_list %}
-		<tr>
-			<td>
-				<a href="{% url 'device_detail' device.pk %}">{{ device.name }}</a>
-			</td>
-			<td>
-				{% if device.appl_NAC_Active %}
-					<span class="icon-desc" desc="Active Device"><img src="{% static 'icons/check-lg.svg' %}" alt="appl_NAC_Active_True" height="25" width="25" class="icon-zoom" /></span>
-				{% else %}
-					<span class="icon-desc" desc="Inactive Device"><img src="{% static 'icons/x-lg.svg' %}" alt="appl_NAC_Active_False" height="25" width="25" class="icon-zoom" /></span>
-				{% endif %}
-				{% if device.appl_NAC_Install %}
-					<span class="icon-desc" desc="Install"><img src="{% static 'icons/wrench.svg' %}" alt="appl_NAC_Install" height="25" width="25" class="icon-zoom"/></span>
-				{% endif %}
-			</td>
-			<td>
-				{{ device.appl_NAC_FQDN }}
-			</td>
-			<td>
-				{{ device.appl_NAC_DeviceRoleProd }}
-			</td>
-			<td>
-				{% for mac in device.get_appl_NAC_macAddressAIR %}
-					<b>
-						{% if mac != None %}
-							<span class="icon-desc" desc="macAddressAIR"><img src="{% static 'icons/wifi.svg' %}" alt="appl_NAC_macAddressAIR" height="14" width="14" class="icon-zoom"/></span>
-							<b> {{mac}}</b> <br />
-						{% endif %}
-					</b>
-				{% endfor %}
-				{% for mac in device.get_appl_NAC_macAddressCAB %}
-					<b>
-						{% if mac != None %}
-						<span class="icon-desc" desc="macAddressCAB"><img src="{% static 'icons/ethernet.svg' %}" alt="appl_NAC_macAddressCAB" height="14" width="14" class="icon-zoom"/></span>
-							<b> {{mac}}</b> <br />
-						{% endif %}
-					</b>
-				{% endfor %}
-			</td>
-			<td>
-				<a href="{% url 'device_edit' device.pk %}">
-					<span class="icon-desc" desc="edit"><img src="{% static 'icons/pencil-square.svg' %}" alt="edit" height="16" width="16" class="icon-zoom"/></span>
-
-				</a>
-				<a href="{% url 'device_delete' device.pk %}">
-					<span class="icon-desc" desc="delete"><img src="{% static 'icons/trash.svg' %}" alt="delete" height="16" width="16" class="icon-zoom"/></span>
-				</a>
-			</td>
-		</tr>
-	{% endfor %}
-	</table>
+	<div id="results">
+		{% include "devices_results.html" %}
+	</div>
 </div>
-{% endblock content %}
+
+<script type="text/javascript" src="{% static 'device_filtering.js' %}"></script>
+
+{% endblock content %}