Replace changelog template code with table in home view

netbox/netbox/views/__init__.py

@@ -21,10 +21,12 @@ from dcim.models import (
 )
 from extras.choices import JobResultStatusChoices
 from extras.models import ObjectChange, JobResult
+from extras.tables import ObjectChangeTable
 from ipam.models import Aggregate, IPAddress, IPRange, Prefix, VLAN, VRF
 from netbox.constants import SEARCH_MAX_RESULTS, SEARCH_TYPES
 from netbox.forms import SearchForm
 from tenancy.models import Tenant
+from utilities.tables import paginate_table
 from virtualization.models import Cluster, VirtualMachine
 
 
@@ -122,7 +124,11 @@ class HomeView(View):
 
             return stats
 
-        changelog = ObjectChange.objects.restrict(request.user, 'view').prefetch_related('user', 'changed_object_type')
+        # Compile changelog table
+        changelog = ObjectChange.objects.restrict(request.user, 'view').prefetch_related(
+            'user', 'changed_object_type'
+        )[:10]
+        changelog_table = ObjectChangeTable(changelog)
 
         # Check whether a new release is available. (Only for staff/superusers.)
         new_release = None
@@ -140,7 +146,7 @@ class HomeView(View):
             'search_form': SearchForm(),
             'stats': build_stats(),
             'report_results': report_results,
-            'changelog': changelog[:15],
+            'changelog_table': changelog_table,
             'new_release': new_release,
         })
 

netbox/templates/home.html

@@ -1,6 +1,7 @@
 {% extends 'base/layout.html' %}
 {% load get_status %}
 {% load helpers %}
+{% load render_table from django_tables2 %}
 
 {% block header %}
     {{ block.super }}
@@ -51,44 +52,16 @@
   </div>
 
   {# Changelog #}
-  <div class="row my-4 flex-grow-1 changelog-container">
-    <div class="col">
-      <div class="card">
-        <h6 class="card-header text-primary text-center">Changelog</h6>
-          {% if changelog and perms.extras.view_objectchange %}
-            {# TODO: Replace this with a django-tables2 Table #}
-            <table class="table table-flush align-middle table-hover">
-              <thead>
-                <tr>
-                  <th scope="col">User</th>
-                  <th scope="col">Action</th>
-                  <th scope="col">Type</th>
-                  <th scope="col">Object</th>
-                  <th scope="col">Time</th>
-                </tr>
-              </thead>
-              <tbody>
-                {% for change in changelog %}
-                  <tr class="{% get_status change.get_action_display %}" data-href="{{ change.get_absolute_url }}">
-                    <th scope="row">{{ change.user|default:change.user_name }}</th>
-                    <td>{{ change.get_action_display|bettertitle }}</td>
-                    <td>{{ change.changed_object_type.name|bettertitle }}</td>
-                    <td>
-                      {% if change.changed_object.get_absolute_url %}
-                      <a class="text-body" href="{{ change.changed_object.get_absolute_url }}">{{ change.changed_object }}</a>
-                      {% else %} {{ change.changed_object|default:change.object_repr }} {% endif %}
-                    </td>
-                    <td>{{ change.time|date:'SHORT_DATETIME_FORMAT' }}</td>
-                  </tr>
-                {% endfor %}
-              </tbody>
-            </table>
-          {% elif perms.extras.view_objectchange %}
-            <div class="alert alert-secondary mt-4" role="alert">
-              No change history found.
-            </div>
-          {% endif %}
+  {% if perms.extras.view_objectchange %}
+    <div class="row my-4 flex-grow-1 changelog-container">
+      <div class="col">
+        <div class="card">
+          <h6 class="card-header text-primary text-center">Change Log</h6>
+          <div class="card-body">
+            {% include 'inc/responsive_table.html' with table=changelog_table %}
+          </div>
         </div>
+      </div>
     </div>
-  </div>
+  {% endif %}
 {% endblock content %}