From 8af12b22bb29c217071900e19866d85114e89b0e Mon Sep 17 00:00:00 2001
From: jeremystretch <jstretch@ns1.com>
Date: Tue, 21 Dec 2021 08:43:01 -0500
Subject: [PATCH] Clean up report & script templates

---
 .../templates/extras/htmx/report_result.html  | 136 +++++++++---------
 .../templates/extras/htmx/script_result.html  |  18 ++-
 .../templates/extras/inc/result_pending.html  |   6 +
 netbox/templates/extras/report_result.html    |   4 +-
 netbox/templates/extras/script_result.html    |  37 +++--
 5 files changed, 96 insertions(+), 105 deletions(-)
 create mode 100644 netbox/templates/extras/inc/result_pending.html

diff --git a/netbox/templates/extras/htmx/report_result.html b/netbox/templates/extras/htmx/report_result.html
index 3bc5ad27d..b04f0c78c 100644
--- a/netbox/templates/extras/htmx/report_result.html
+++ b/netbox/templates/extras/htmx/report_result.html
@@ -1,81 +1,73 @@
 {% 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>
+  Initiated: <strong>{{ result.created|annotated_date }}</strong>
+  {% if result.completed %}
+    Duration: <strong>{{ result.duration }}</strong>
+  {% endif %}
+  <span id="pending-result-label">{% include 'extras/inc/job_label.html' %}</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 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 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>
+  <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>
+  {% include 'extras/inc/result_pending.html' %}
 {% endif %}
diff --git a/netbox/templates/extras/htmx/script_result.html b/netbox/templates/extras/htmx/script_result.html
index 013b4c81d..0336bdfaa 100644
--- a/netbox/templates/extras/htmx/script_result.html
+++ b/netbox/templates/extras/htmx/script_result.html
@@ -1,13 +1,14 @@
 {% load helpers %}
 {% load log_levels %}
 
+<p>
+  Initiated: <strong>{{ result.created|annotated_date }}</strong>
+  {% if result.completed %}
+    Duration: <strong>{{ result.duration }}</strong>
+  {% endif %}
+  <span id="pending-result-label">{% include 'extras/inc/job_label.html' %}</span>
+</p>
 {% 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">
@@ -45,8 +46,5 @@
     <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>
+  {% include 'extras/inc/result_pending.html' %}
 {% endif %}
diff --git a/netbox/templates/extras/inc/result_pending.html b/netbox/templates/extras/inc/result_pending.html
new file mode 100644
index 000000000..7d053ec2d
--- /dev/null
+++ b/netbox/templates/extras/inc/result_pending.html
@@ -0,0 +1,6 @@
+{# Indicates that a job result is still pending; used for HTMX requests #}
+<div class="spinner-border float-start me-1" id="spinner" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+<h3>Results pending...</h3>
+<small class="text-muted">Last updated {% now "H:i:s" %}</small>
diff --git a/netbox/templates/extras/report_result.html b/netbox/templates/extras/report_result.html
index 9dd733bef..3a23d705d 100644
--- a/netbox/templates/extras/report_result.html
+++ b/netbox/templates/extras/report_result.html
@@ -1,10 +1,8 @@
 {% extends 'extras/report.html' %}
-{% load helpers %}
-{% load static %}
 
 {% block content-wrapper %}
   <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">
+    <div class="col col-md-12"{% if not result.completed %} hx-get="{% url 'extras:report_result' job_result_pk=result.pk %}" hx-trigger="every 3s"{% endif %}>
       {% include 'extras/htmx/report_result.html' %}
     </div>
   </div>
diff --git a/netbox/templates/extras/script_result.html b/netbox/templates/extras/script_result.html
index f00b3bf91..41368ecad 100644
--- a/netbox/templates/extras/script_result.html
+++ b/netbox/templates/extras/script_result.html
@@ -1,8 +1,5 @@
 {% extends 'base/layout.html' %}
 {% load helpers %}
-{% load form_helpers %}
-{% load log_levels %}
-{% load static %}
 
 {% block title %}{{ script }}{% endblock %}
 
@@ -12,33 +9,33 @@
 
 {% block header %}
   <div class="row noprint">
-      <div class="col col-md-12">
-          <nav class="breadcrumb-container px-3" aria-label="breadcrumb">
-              <ol class="breadcrumb">
-                  <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}">Scripts</a></li>
-                  <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}#module.{{ script.module }}">{{ script.module|bettertitle }}</a></li>
-                  <li class="breadcrumb-item"><a href="{% url 'extras:script' module=script.module name=class_name %}">{{ script }}</a></li>
-                  <li class="breadcrumb-item">{{ result.created|annotated_date }}</li>
-              </ol>
-          </nav>
-      </div>
+    <div class="col col-md-12">
+      <nav class="breadcrumb-container px-3" aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}">Scripts</a></li>
+          <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}#module.{{ script.module }}">{{ script.module|bettertitle }}</a></li>
+          <li class="breadcrumb-item"><a href="{% url 'extras:script' module=script.module name=class_name %}">{{ script }}</a></li>
+          <li class="breadcrumb-item">{{ result.created|annotated_date }}</li>
+        </ol>
+      </nav>
+    </div>
   </div>
   {{ block.super }}
 {% endblock header %}
 
 {% block content-wrapper %}
   <ul class="nav nav-tabs px-3" role="tablist">
-      <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="#source" role="tab" data-bs-toggle="tab" class="nav-link">Source</a>
-      </li>
+    <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="#source" role="tab" data-bs-toggle="tab" class="nav-link">Source</a>
+    </li>
   </ul>
   <div class="tab-content mb-3">
     <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">
+        <div class="col col-md-12"{% if not result.completed %} hx-get="{% url 'extras:script_result' job_result_pk=result.pk %}" hx-trigger="every 3s"{% endif %}>
           {% include 'extras/htmx/script_result.html' %}
         </div>
       </div>