feat(admin): make user activity more legible (pypi#14748)

miketheman · Oct 16, 2023 · 85a5f17 · 85a5f17
1 parent c6d9dd3
commit 85a5f17
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/warehouse/admin/static/css/admin.scss b/warehouse/admin/static/css/admin.scss
@@ -14,6 +14,11 @@
 
 @charset "utf-8";
 @import "@fortawesome/fontawesome-free/css/all.min.css";
+
+@import "admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.css";
+@import "admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.css";
+@import "admin-lte/plugins/datatables-buttons/css/buttons.bootstrap4.css";
+
 @import "admin-lte/dist/css/adminlte.css";
 
 /* Admin styles for the Warehouse project (PyPI) */

diff --git a/warehouse/admin/static/js/warehouse.js b/warehouse/admin/static/js/warehouse.js
@@ -11,10 +11,19 @@
  * limitations under the License.
  */
 
-// Import the AdminLTE version of Bootstrap JS (4.x) to avoid namespace
-// conflicts with other bootstrap packages.
-// Related: https://github.com/ColorlibHQ/AdminLTE/commit/4f1546acb25dc73b034cb15a598171f4c2b3d835
-import "admin-lte/node_modules/bootstrap";
+import "admin-lte/plugins/jquery/jquery";
+import "admin-lte/plugins/bootstrap/js/bootstrap.bundle";
+
+// Import DataTables JS
+import "admin-lte/plugins/datatables/jquery.dataTables";
+import "admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4";
+import "admin-lte/plugins/datatables-responsive/js/dataTables.responsive";
+import "admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4";
+import "admin-lte/plugins/datatables-buttons/js/dataTables.buttons";
+import "admin-lte/plugins/datatables-buttons/js/buttons.bootstrap4";
+import "admin-lte/plugins/datatables-buttons/js/buttons.html5";
+import "admin-lte/plugins/datatables-buttons/js/buttons.colVis";
+
 // Import AdminLTE JS
 import "admin-lte/build/js/AdminLTE";
 
@@ -100,3 +109,17 @@ document.querySelectorAll(".copy-text").forEach(function (element) {
     copy(element.dataset.copyText, element);
   });
 });
+
+// Activate Datatables https://datatables.net/
+// User Account Activity
+let table = $("#account-activity").DataTable({
+  responsive: true,
+  lengthChange: false,
+});
+// sort by time
+table.column(".time").order("desc").draw();
+// Hide some columns we don't need to see all the time
+table.columns([".ip_address", ".hashed_ip"]).visible(false);
+// add column visibility button
+new $.fn.dataTable.Buttons(table, {buttons: ["copy", "csv", "colvis"]});
+table.buttons().container().appendTo($(".col-md-6:eq(0)", table.table().container()));
diff --git a/warehouse/admin/templates/admin/users/detail.html b/warehouse/admin/templates/admin/users/detail.html
@@ -527,16 +527,16 @@ <h3 class="card-title">Pending OpenID Connect Publishers</h3>
           <h3 class="card-title">Account activity</h3>
         </div>
         <div class="card-body">
-          <table class="table table-hover">
+          <table id="account-activity" class="table table-striped table-hover">
             <thead>
               <tr>
-                <th scope="col">Event</th>
-                <th scope="col">Time</th>
-                <th scope="col">IP address</th>
-                <th scope="col">Hashed IP address</th>
-                <th scope="col">Location info</th>
-                <th scope="col">User-Agent</th>
-                <th scope="col">Additional information</th>
+                <th scope="col" class="event">Event</th>
+                <th scope="col" class="time">Time</th>
+                <th scope="col" class="ip_address">IP address</th>
+                <th scope="col" class="hashed_ip">Hashed IP address</th>
+                <th scope="col" class="location_info">Location info</th>
+                <th scope="col" class="user_agent">User-Agent</th>
+                <th scope="col" class="additional_info">Additional information</th>
               </tr>
             </thead>
             <tbody>