Convert reports to use HTMX

netbox/extras/views.py

@@ -694,16 +694,26 @@ class ReportResultView(ContentTypePermissionRequiredMixin, View):
 
     def get(self, request, job_result_pk):
         report_content_type = ContentType.objects.get(app_label='extras', model='report')
-        jobresult = get_object_or_404(JobResult.objects.all(), pk=job_result_pk, obj_type=report_content_type)
+        result = get_object_or_404(JobResult.objects.all(), pk=job_result_pk, obj_type=report_content_type)
 
         # Retrieve the Report and attach the JobResult to it
-        module, report_name = jobresult.name.split('.')
+        module, report_name = result.name.split('.')
         report = get_report(module, report_name)
-        report.result = jobresult
+        report.result = result
+
+        # If this is an HTMX request, return only the result HTML
+        if is_htmx(request):
+            response = render(request, 'extras/htmx/report_result.html', {
+                'report': report,
+                'result': result,
+            })
+            if result.completed:
+                response.status_code = 286
+            return response
 
         return render(request, 'extras/report_result.html', {
             'report': report,
-            'result': jobresult,
+            'result': result,
         })
 
 
@@ -821,7 +831,7 @@ class ScriptResultView(ContentTypePermissionRequiredMixin, GetScriptMixin, View)
 
         script = self._get_script(result.name)
 
-        # If this is an HTMX request, return only the rendered table HTML
+        # If this is an HTMX request, return only the result HTML
         if is_htmx(request):
             response = render(request, 'extras/htmx/script_result.html', {
                 'script': script,

netbox/templates/extras/htmx/report_result.html

@@ -0,0 +1,81 @@
+{% load helpers %}
+
+<p>
+    Run: <strong>{{ result.created|annotated_date }}</strong>
+    {% if result.completed %}
+        Duration: <strong>{{ result.duration }}</strong>
+    {% else %}
+        <div class="spinner-border" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    {% endif %}
+    <span id="pending-result-label">{% include 'extras/inc/job_label.html' with result=result %}</span>
+</p>
+{% if result.completed %}
+    <div class="card">
+        <h5 class="card-header">
+            Report Methods
+        </h5>
+        <div class="card-body">
+            <table class="table table-hover">
+                {% for method, data in result.data.items %}
+                    <tr>
+                        <td class="font-monospace"><a href="#{{ method }}">{{ method }}</a></td>
+                        <td class="text-end report-stats">
+                            <span class="badge bg-success">{{ data.success }}</span>
+                            <span class="badge bg-info">{{ data.info }}</span>
+                            <span class="badge bg-warning">{{ data.warning }}</span>
+                            <span class="badge bg-danger">{{ data.failure }}</span>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </table>
+        </div>
+    </div>
+    <div class="card">
+        <h5 class="card-header">
+            Report Results
+        </h5>
+        <div class="card-body">
+            <table class="table table-hover report">
+                <thead>
+                    <tr class="table-headings">
+                        <th>Time</th>
+                        <th>Level</th>
+                        <th>Object</th>
+                        <th>Message</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for method, data in result.data.items %}
+                        <tr>
+                            <th colspan="4" style="font-family: monospace">
+                                <a name="{{ method }}"></a>{{ method }}
+                            </th>
+                        </tr>
+                        {% for time, level, obj, url, message in data.log %}
+                            <tr class="{% if level == 'failure' %}danger{% elif level %}{{ level }}{% endif %}">
+                                <td>{{ time }}</td>
+                                <td>
+                                    <label class="badge bg-{% if level == 'failure' %}danger{% else %}{{ level }}{% endif %}">{{ level|title }}</label>
+                                </td>
+                                <td>
+                                    {% if obj and url %}
+                                        <a href="{{ url }}">{{ obj }}</a>
+                                    {% elif obj %}
+                                        {{ obj }}
+                                    {% else %}
+                                        <span class="muted">&mdash;</span>
+                                    {% endif %}
+                                </td>
+                                <td class="rendered-markdown">{{ message|render_markdown }}</td>
+                            </tr>
+                        {% endfor %}
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+{% else %}
+    <div class="well">Pending results</div>
+{% endif %}

netbox/templates/extras/report_result.html

@@ -2,98 +2,10 @@
 {% load helpers %}
 {% load static %}
 
-{% block head %}
-<script src="{% static 'jobs.js' %}?v{{ settings.VERSION }}"
-        onerror="window.location='{% url 'media_failure' %}?filename=jobs.js'"></script>
-{% endblock %}
-
 {% block content-wrapper %}
-<div class="row px-3">
-    <div class="col col-md-12">
-        <p>
-            Run: <strong>{{ result.created|annotated_date }}</strong>
-            {% if result.completed %}
-                Duration: <strong>{{ result.duration }}</strong>
-            {% else %}
-                <div class="spinner-border" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-            {% endif %}
-            <span id="pending-result-label">{% include 'extras/inc/job_label.html' with result=result %}</span>
-        </p>
-        {% if result.completed %}
-            <div class="card">
-                <h5 class="card-header">
-                    Report Methods
-                </h5>
-                <div class="card-body">
-                    <table class="table table-hover">
-                        {% for method, data in result.data.items %}
-                            <tr>
-                                <td class="font-monospace"><a href="#{{ method }}">{{ method }}</a></td>
-                                <td class="text-end report-stats">
-                                    <span class="badge bg-success">{{ data.success }}</span>
-                                    <span class="badge bg-info">{{ data.info }}</span>
-                                    <span class="badge bg-warning">{{ data.warning }}</span>
-                                    <span class="badge bg-danger">{{ data.failure }}</span>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                    </table>
-                </div>
-            </div>
-            <div class="card">
-                <h5 class="card-header">
-                    Report Results
-                </h5>
-                <div class="card-body">
-                    <table class="table table-hover report">
-                        <thead>
-                            <tr class="table-headings">
-                                <th>Time</th>
-                                <th>Level</th>
-                                <th>Object</th>
-                                <th>Message</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for method, data in result.data.items %}
-                                <tr>
-                                    <th colspan="4" style="font-family: monospace">
-                                        <a name="{{ method }}"></a>{{ method }}
-                                    </th>
-                                </tr>
-                                {% for time, level, obj, url, message in data.log %}
-                                    <tr class="{% if level == 'failure' %}danger{% elif level %}{{ level }}{% endif %}">
-                                        <td>{{ time }}</td>
-                                        <td>
-                                            <label class="badge bg-{% if level == 'failure' %}danger{% else %}{{ level }}{% endif %}">{{ level|title }}</label>
-                                        </td>
-                                        <td>
-                                            {% if obj and url %}
-                                                <a href="{{ url }}">{{ obj }}</a>
-                                            {% elif obj %}
-                                                {{ obj }}
-                                            {% else %}
-                                                <span class="muted">&mdash;</span>
-                                            {% endif %}
-                                        </td>
-                                        <td class="rendered-markdown">{{ message|render_markdown }}</td>
-                                    </tr>
-                                {% endfor %}
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        {% else %}
-            <div class="well">Pending results</div>
-        {% endif %}
+  <div class="row px-3">
+    <div class="col col-md-12" hx-get="{% url 'extras:report_result' job_result_pk=result.pk %}" hx-trigger="every 3s">
+      {% include 'extras/htmx/report_result.html' %}
     </div>
-</div>
-{% endblock %}
-
-{% block data %}
-<span data-job-url="{% url 'extras-api:jobresult-detail' pk=result.pk %}"></span>
-<span data-job-complete="{{ result.completed }}"></span>
+  </div>
 {% endblock %}