add server-side pagination for audit logging

api/tacticalrmm/logs/views.py

@@ -6,6 +6,7 @@ from django.shortcuts import get_object_or_404
 from django.http import HttpResponse
 from django.utils import timezone as djangotime
 from django.db.models import Q
+from django.core.paginator import Paginator
 from datetime import datetime as dt
 
 from rest_framework.response import Response
@@ -27,6 +28,14 @@ class GetAuditLogs(APIView):
         from clients.models import Client
         from agents.models import Agent
 
+        pagination = request.data["pagination"]
+
+        order_by = (
+            f"-{pagination['sortBy']}"
+            if pagination["descending"]
+            else f"{pagination['sortBy']}"
+        )
+
         agentFilter = Q()
         clientFilter = Q()
         actionFilter = Q()
@@ -68,9 +77,18 @@ class GetAuditLogs(APIView):
             .filter(actionFilter)
             .filter(objectFilter)
             .filter(timeFilter)
-        )
+        ).order_by(order_by)
 
-        return Response(AuditLogSerializer(audit_logs, many=True).data)
+        paginator = Paginator(audit_logs, pagination["rowsPerPage"])
+
+        return Response(
+            {
+                "audit_logs": AuditLogSerializer(
+                    paginator.get_page(pagination["page"]), many=True
+                ).data,
+                "total": paginator.count,
+            }
+        )
 
 
 class FilterOptionsAuditLog(APIView):

web/src/components/AuditManager.vue

@@ -119,6 +119,7 @@
     <q-separator />
     <q-card-section>
       <q-table
+        @request="onRequest"
         dense
         :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
         class="audit-mgr-tbl-sticky"
@@ -263,8 +264,10 @@ export default {
       ],
       pagination: {
         rowsPerPage: 25,
+        rowsNumber: null,
         sortBy: "entry_time",
         descending: true,
+        page: 1,
       },
     };
   },
@@ -355,10 +358,23 @@ export default {
         });
       }
     },
+    onRequest(props) {
+      // needed to update external pagination object
+      const { page, rowsPerPage, sortBy, descending } = props.pagination;
+
+      this.pagination.page = page;
+      this.pagination.rowsPerPage = rowsPerPage;
+      this.pagination.sortBy = sortBy;
+      this.pagination.descending = descending;
+
+      this.search();
+    },
     search() {
       this.$q.loading.show();
       this.searched = true;
-      let data = {};
+      let data = {
+        pagination: this.pagination,
+      };
 
       if (!!this.agentFilter && this.agentFilter.length > 0) data["agentFilter"] = this.agentFilter;
       else if (!!this.clientFilter && this.clientFilter.length > 0) data["clientFilter"] = this.clientFilter;
@@ -371,7 +387,8 @@ export default {
         .patch("/logs/auditlogs/", data)
         .then(r => {
           this.$q.loading.hide();
-          this.auditLogs = Object.freeze(r.data);
+          this.auditLogs = Object.freeze(r.data.audit_logs);
+          this.pagination.rowsNumber = r.data.total;
         })
         .catch(e => {
           this.$q.loading.hide();