Convert scripts to use HTMX

netbox/extras/views.py

@@ -10,6 +10,7 @@ from rq import Worker
 
 from netbox.views import generic
 from utilities.forms import ConfirmationForm
+from utilities.htmx import is_htmx
 from utilities.tables import paginate_table
 from utilities.utils import copy_safe_request, count_related, normalize_querydict, shallow_compare_dict
 from utilities.views import ContentTypePermissionRequiredMixin
@@ -820,6 +821,16 @@ class ScriptResultView(ContentTypePermissionRequiredMixin, GetScriptMixin, View)
 
         script = self._get_script(result.name)
 
+        # If this is an HTMX request, return only the rendered table HTML
+        if is_htmx(request):
+            response = render(request, 'extras/htmx/script_result.html', {
+                'script': script,
+                'result': result,
+            })
+            if result.completed:
+                response.status_code = 286
+            return response
+
         return render(request, 'extras/script_result.html', {
             'script': script,
             'result': result,

netbox/templates/extras/htmx/script_result.html

@@ -0,0 +1,52 @@
+{% load helpers %}
+{% load log_levels %}
+
+{% if result.completed %}
+  <p>
+    Run: <strong>{{ result.created|annotated_date }}</strong>
+    {% if result.completed %}
+      Duration: <strong>{{ result.duration }}</strong>
+    {% endif %}
+  </p>
+  <div class="card mb-3">
+    <h5 class="card-header">Script Log</h5>
+    <div class="card-body">
+      <table class="table table-hover panel-body">
+        <tr>
+          <th>Line</th>
+          <th>Level</th>
+          <th>Message</th>
+        </tr>
+        {% for log in result.data.log %}
+          <tr>
+            <td>{{ forloop.counter }}</td>
+            <td>{% log_level log.status %}</td>
+            <td class="rendered-markdown">{{ log.message|render_markdown }}</td>
+          </tr>
+        {% empty %}
+          <tr>
+            <td colspan="3" class="text-center text-muted">
+              No log output
+            </td>
+          </tr>
+        {% endfor %}
+      </table>
+    </div>
+    {% if execution_time %}
+      <div class="card-footer text-end text-muted">
+        <small>Exec Time: {{ execution_time|floatformat:3 }}s</small>
+      </div>
+    {% endif %}
+  </div>
+  <h4>Output</h4>
+  {% if result.data.output %}
+    <pre class="block">{{ result.data.output }}</pre>
+  {% else %}
+    <p class="text-muted">None</p>
+  {% endif %}
+{% else %}
+  <div class="spinner-border" id="spinner" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <h3>Results pending...</h3>
+{% endif %}

netbox/templates/extras/script_result.html

@@ -4,16 +4,10 @@
 {% load log_levels %}
 {% load static %}
 
-{% block head %}
-<script src="{% static 'jobs.js' %}?v{{ settings.VERSION }}"
-        onerror="window.location='{% url 'media_failure' %}?filename=jobs.js'"></script>
-{% endblock %}
-
 {% block title %}{{ script }}{% endblock %}
 
 {% block subtitle %}
   {{ script.Meta.description|render_markdown }}
-  <span id="pending-result-label">{% include 'extras/inc/job_label.html' with result=result %}</span>
 {% endblock %}
 
 {% block header %}
@@ -37,81 +31,21 @@
       <li class="nav-item" role="presentation">
           <a href="#log" role="tab" data-bs-toggle="tab" class="nav-link active">Log</a>
       </li>
-      <li class="nav-item" role="presentation">
-          <a href="#output" role="tab" data-bs-toggle="tab" class="nav-link">Output</a>
-      </li>
       <li class="nav-item" role="presentation">
           <a href="#source" role="tab" data-bs-toggle="tab" class="nav-link">Source</a>
       </li>
   </ul>
   <div class="tab-content mb-3">
-      <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 %}
-      </p>
-      <div role="tabpanel" class="tab-pane active" id="log">
-          {% if result.completed %}
-              <div class="row">
-                  <div class="col col-md-12">
-                      <div class="card">
-                          <h5 class="card-header">
-                              Script Log
-                          </h5>
-                          <div class="card-body">
-                              <table class="table table-hover panel-body">
-                                  <tr>
-                                      <th>Line</th>
-                                      <th>Level</th>
-                                      <th>Message</th>
-                                  </tr>
-                                  {% for log in result.data.log %}
-                                      <tr>
-                                          <td>{{ forloop.counter }}</td>
-                                          <td>{% log_level log.status %}</td>
-                                          <td class="rendered-markdown">{{ log.message|render_markdown }}</td>
-                                      </tr>
-                                  {% empty %}
-                                      <tr>
-                                          <td colspan="3" class="text-center text-muted">
-                                              No log output
-                                          </td>
-                                      </tr>
-                                  {% endfor %}
-                              </table>
-                          </div>
-                          {% if execution_time %}
-                              <div class="card-footer text-end text-muted">
-                                  <small>Exec Time: {{ execution_time|floatformat:3 }}s</small>
-                              </div>
-                          {% endif %}
-                      </div>
-                  </div>
-              </div>
-          {% else %}
-              <div class="row">
-                  <div class="col col-md-12">
-                      <div class="well">Pending Results</div>
-                  </div>
-              </div>
-          {% endif %}
-      </div>
-      <div role="tabpanel" class="tab-pane" id="output">
-          <pre class="block">{{ result.data.output }}</pre>
-      </div>
-      <div role="tabpanel" class="tab-pane" id="source">
-          <p><code>{{ script.filename }}</code></p>
-          <pre class="block">{{ script.source }}</pre>
+    <div role="tabpanel" class="tab-pane active" id="log">
+      <div class="row">
+        <div class="col col-md-12" hx-get="{% url 'extras:script_result' job_result_pk=result.pk %}" hx-trigger="every 3s">
+          {% include 'extras/htmx/script_result.html' %}
+        </div>
       </div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="source">
+      <p><code>{{ script.filename }}</code></p>
+      <pre class="block">{{ script.source }}</pre>
+    </div>
   </div>
 {% endblock content-wrapper %}
-
-{% block data %}
-<span data-job-url="{% url 'extras-api:jobresult-detail' pk=result.pk %}"></span>
-<span data-job-complete="{{ result.completed }}"></span>
-{% endblock %}