Merge pull request #1186 from akhilmhdh/feat/audit-log-export

feat(audit-log): improvement in loading time

backend/spec.json

@@ -306,12 +306,77 @@
     },
     "/api/v1/workspace/{workspaceId}/audit-logs": {
       "get": {
-        "description": "",
+        "summary": "Return audit logs",
+        "description": "Return audit logs",
         "parameters": [
           {
             "name": "workspaceId",
             "in": "path",
             "required": true,
+            "schema": {
+              "type": "string"
+            },
+            "description": "ID of the workspace where to get folders from"
+          },
+          {
+            "name": "offset",
+            "description": "Number of logs to skip before starting to return logs for pagination",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "limit",
+            "description": "Maximum number of logs to return for pagination",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "startDate",
+            "description": "Filter logs from this date in ISO-8601 format",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "endDate",
+            "description": "Filter logs till this date in ISO-8601 format",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "eventType",
+            "description": "Filter by type of event such as get-secrets, get-secret, create-secret, update-secret, delete-secret, etc.",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "userAgentType",
+            "description": "Filter by type of user agent such as web, cli, k8-operator, or other",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "actor",
+            "description": "Filter by actor such as user or service",
+            "required": false,
+            "in": "query",
             "schema": {
               "type": "string"
             }
@@ -319,10 +384,31 @@
         ],
         "responses": {
           "200": {
-            "description": "OK"
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "auditLogs": {
+                      "type": "array",
+                      "items": {
+                        "$ref": "#/components/schemas/AuditLog"
+                      },
+                      "description": "List of audit log"
                     }
                   }
                 }
+              }
+            }
+          }
+        },
+        "security": [
+          {
+            "apiKeyAuth": []
+          }
+        ]
+      }
     },
     "/api/v1/workspace/{workspaceId}/audit-logs/filters/actors": {
       "get": {
@@ -1132,6 +1218,43 @@
         }
       }
     },
+    "/api/v1/admin/config": {
+      "get": {
+        "description": "",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        }
+      },
+      "patch": {
+        "description": "",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        }
+      }
+    },
+    "/api/v1/admin/signup": {
+      "post": {
+        "description": "",
+        "parameters": [
+          {
+            "name": "user-agent",
+            "in": "header",
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        }
+      }
+    },
     "/api/v1/bot/{workspaceId}": {
       "get": {
         "description": "",
@@ -4560,65 +4683,6 @@
             }
           }
         }
-      },
-      "get": {
-        "summary": "Get all accessible environments of a workspace",
-        "description": "Fetch all environments that the user has access to in a specified workspace",
-        "parameters": [
-          {
-            "name": "workspaceId",
-            "in": "path",
-            "required": true,
-            "schema": {
-              "type": "string"
-            },
-            "description": "ID of the workspace"
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "OK",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "accessibleEnvironments": {
-                      "type": "array",
-                      "items": {
-                        "type": "object",
-                        "properties": {
-                          "name": {
-                            "type": "string",
-                            "example": "Development"
-                          },
-                          "slug": {
-                            "type": "string",
-                            "example": "development"
-                          },
-                          "isWriteDenied": {
-                            "type": "boolean",
-                            "example": false
-                          },
-                          "isReadDenied": {
-                            "type": "boolean",
-                            "example": false
-                          }
-                        }
-                      }
-                    }
-                  },
-                  "description": "List of environments the user has access to in the specified workspace"
-                }
-              }
-            }
-          }
-        },
-        "security": [
-          {
-            "apiKeyAuth": []
-          }
-        ]
       }
     },
     "/api/v2/workspace/{workspaceId}/tags": {
@@ -6864,6 +6928,61 @@
             "example": "2023-01-13T14:16:12.210Z"
           }
         }
+      },
+      "AuditLog": {
+        "type": "object",
+        "properties": {
+          "actor": {
+            "type": "object",
+            "properties": {
+              "type": {
+                "type": "string",
+                "example": ""
+              },
+              "metadata": {
+                "type": "object",
+                "properties": {}
+              }
+            }
+          },
+          "organization": {
+            "type": "string",
+            "example": ""
+          },
+          "workspace": {
+            "type": "string",
+            "example": ""
+          },
+          "ipAddress": {
+            "type": "string",
+            "example": ""
+          },
+          "event": {
+            "type": "object",
+            "properties": {
+              "type": {
+                "type": "string",
+                "example": ""
+              },
+              "metadata": {
+                "type": "object",
+                "properties": {}
+              }
+            }
+          },
+          "userAgent": {
+            "type": "string",
+            "example": ""
+          },
+          "userAgentType": {
+            "type": "string",
+            "example": ""
+          },
+          "expiresAt": {
+            "type": "string",
+            "example": ""
+          }
+        }
       }
     },
     "securitySchemes": {

backend/src/ee/controllers/v1/workspaceController.ts

@@ -578,6 +578,82 @@ export const rollbackWorkspaceSecretSnapshot = async (req: Request, res: Respons
  * @param res
  */
 export const getWorkspaceAuditLogs = async (req: Request, res: Response) => {
+  /* 
+    #swagger.summary = 'Return audit logs'
+    #swagger.description = 'Return audit logs'
+    
+    #swagger.security = [{
+      "apiKeyAuth": []
+    }]
+
+    #swagger.parameters['workspaceId'] = {
+      "description": "ID of the workspace where to get folders from",
+      "required": true,
+      "type": "string",
+      "in": "path"
+    }
+
+    #swagger.parameters['offset'] = {
+      "description": "Number of logs to skip before starting to return logs for pagination",
+      "required": false,
+      "type": "string"
+    }
+
+    #swagger.parameters['limit'] = {
+      "description": "Maximum number of logs to return for pagination",
+      "required": false,
+      "type": "string"
+    }
+
+   #swagger.parameters['startDate'] = {
+      "description": "Filter logs from this date in ISO-8601 format",
+      "required": false,
+      "type": "string"
+    }
+
+   #swagger.parameters['endDate'] = {
+      "description": "Filter logs till this date in ISO-8601 format",
+      "required": false,
+      "type": "string"
+    }
+
+    #swagger.parameters['eventType'] = {
+      "description": "Filter by type of event such as get-secrets, get-secret, create-secret, update-secret, delete-secret, etc.",
+      "required": false,
+      "type": "string",
+    }
+
+    #swagger.parameters['userAgentType'] = {
+      "description": "Filter by type of user agent such as web, cli, k8-operator, or other",
+      "required": false,
+      "type": "string",
+    }
+
+    #swagger.parameters['actor'] = {
+      "description": "Filter by actor such as user or service",
+      "required": false,
+      "type": "string"
+    }
+
+    #swagger.responses[200] = {
+        content: {
+            "application/json": {
+                schema: { 
+                  "type": "object",
+                  "properties": {
+                        "auditLogs": {
+                            "type": "array",
+                            "items": {
+			      $ref: "#/components/schemas/AuditLog",
+                            },
+                            "description": "List of audit log"                        
+                          },
+                  }
+                }
+            }           
+        }
+    }   
+    */
   const {
     query: { limit, offset, endDate, eventType, startDate, userAgentType, actor },
     params: { workspaceId }
@@ -626,14 +702,9 @@ export const getWorkspaceAuditLogs = async (req: Request, res: Response) => {
         }
       : {})
   };
-
   const auditLogs = await AuditLog.find(query).sort({ createdAt: -1 }).skip(offset).limit(limit);
-
-  const totalCount = await AuditLog.countDocuments(query);
-
   return res.status(200).send({
-    auditLogs,
+    auditLogs
-    totalCount
   });
 };
 
@@ -698,11 +769,7 @@ export const getWorkspaceAuditLogActorFilterOpts = async (req: Request, res: Res
     }
   }));
 
-  const actors = [
+  const actors = [...userActors, ...serviceActors, ...serviceV3Actors];
-    ...userActors, 
-    ...serviceActors,
-    ...serviceV3Actors
-  ];
 
   return res.status(200).send({
     actors

backend/src/ee/models/auditLog/auditLog.ts

@@ -1,13 +1,6 @@
 import { Schema, Types, model } from "mongoose";
-import {
+import { ActorType, EventType, UserAgentType } from "./enums";
-    ActorType,
+import { Actor, Event } from "./types";
-    EventType,
-    UserAgentType
-} from "./enums";
-import {
-    Actor,
-    Event
-} from "./types";
 
 export interface IAuditLog {
   actor: Actor;
@@ -38,7 +31,8 @@ const auditLogSchema = new Schema<IAuditLog>(
     },
     workspace: {
       type: Schema.Types.ObjectId,
-            required: false
+      required: false,
+      index: true
     },
     ipAddress: {
       type: String,

backend/src/utils/logging/logger.ts

@@ -5,12 +5,12 @@ export let logger: Logger;
 
 // https://github.com/pinojs/pino/blob/master/lib/levels.js#L13-L20
 const logLevelToSeverityLookup: Record<string, string> = {
-  '10': 'TRACE',
+  "10": "TRACE",
-  '20': 'DEBUG',
+  "20": "DEBUG",
-  '30': 'INFO',
+  "30": "INFO",
-  '40': 'WARNING',
+  "40": "WARNING",
-  '50': 'ERROR',
+  "50": "ERROR",
-  '60': 'CRITICAL'
+  "60": "CRITICAL"
 }
 
 export const initLogger = async () => {
@@ -51,7 +51,7 @@ export const initLogger = async () => {
   logger = pino(
     {
       mixin(_context, level) {
-        return { 'severity': logLevelToSeverityLookup[level] || logLevelToSeverityLookup['30'] }
+        return { "severity": logLevelToSeverityLookup[level] || logLevelToSeverityLookup["30"] }
       },
       level: process.env.PINO_LOG_LEVEL || "info",
       formatters: {

backend/src/validation/workspace.ts

@@ -121,8 +121,8 @@ export const GetWorkspaceAuditLogsV1 = z.object({
     userAgentType: z.nativeEnum(UserAgentType).nullable().optional(),
     startDate: z.string().datetime().nullable().optional(),
     endDate: z.string().datetime().nullable().optional(),
-    offset: z.coerce.number(),
+    offset: z.coerce.number().default(0),
-    limit: z.coerce.number(),
+    limit: z.coerce.number().default(20),
     actor: z.string().nullish().optional()
   })
 });

backend/swagger/index.ts

@@ -12,32 +12,32 @@ const generateOpenAPISpec = async () => {
   const doc = {
     info: {
       title: "Infisical API",
-      description: "List of all available APIs that can be consumed",
+      description: "List of all available APIs that can be consumed"
     },
     host: ["https://infisical.com"],
     servers: [
       {
         url: "https://app.infisical.com",
-        description: "Production server",
+        description: "Production server"
       },
       {
         url: "http://localhost:8080",
-        description: "Local server",
+        description: "Local server"
-      },
+      }
     ],
     securityDefinitions: {
       bearerAuth: {
         type: "http",
         scheme: "bearer",
         bearerFormat: "JWT",
-        description: "A service token in Infisical",
+        description: "A service token in Infisical"
       },
       apiKeyAuth: {
         type: "apiKey",
         in: "header",
         name: "X-API-Key",
-        description: "An API Key in Infisical",
+        description: "An API Key in Infisical"
-      },
+      }
     },
     definitions: {
       CurrentUser: {
@@ -50,7 +50,7 @@ const generateOpenAPISpec = async () => {
         iv: "iv_of_enc_nacl_private_key",
         tag: "tag_of_enc_nacl_private_key",
         updatedAt: "2023-01-13T14:16:12.210Z",
-        createdAt: "2023-01-13T14:16:12.210Z",
+        createdAt: "2023-01-13T14:16:12.210Z"
       },
       Membership: {
         user: {
@@ -60,10 +60,10 @@ const generateOpenAPISpec = async () => {
           lastName: "Doe",
           publicKey: "johns_nacl_public_key",
           updatedAt: "2023-01-13T14:16:12.210Z",
-          createdAt: "2023-01-13T14:16:12.210Z",
+          createdAt: "2023-01-13T14:16:12.210Z"
         },
         workspace: "",
-        role: "admin",
+        role: "admin"
       },
       MembershipOrg: {
         user: {
@@ -73,33 +73,35 @@ const generateOpenAPISpec = async () => {
           lastName: "Doe",
           publicKey: "johns_nacl_public_key",
           updatedAt: "2023-01-13T14:16:12.210Z",
-          createdAt: "2023-01-13T14:16:12.210Z",
+          createdAt: "2023-01-13T14:16:12.210Z"
         },
         organization: "",
         role: "owner",
-        status: "accepted",
+        status: "accepted"
       },
       Organization: {
         _id: "",
         name: "Acme Corp.",
-        customerId: "",
+        customerId: ""
       },
       Project: {
         name: "My Project",
         organization: "",
-        environments: [{
+        environments: [
+          {
             name: "development",
-          slug: "dev",
+            slug: "dev"
-        }],
+          }
+        ]
       },
       ProjectKey: {
         encryptedkey: "",
         nonce: "",
         sender: {
-          publicKey: "senders_nacl_public_key",
+          publicKey: "senders_nacl_public_key"
         },
         receiver: "",
-        workspace: "",
+        workspace: ""
       },
       CreateSecret: {
         type: "shared",
@@ -111,7 +113,7 @@ const generateOpenAPISpec = async () => {
         secretValueTag: "",
         secretCommentCiphertext: "",
         secretCommentIV: "",
-        secretCommentTag: "",
+        secretCommentTag: ""
       },
       UpdateSecret: {
         id: "",
@@ -123,7 +125,7 @@ const generateOpenAPISpec = async () => {
         secretValueTag: "",
         secretCommentCiphertext: "",
         secretCommentIV: "",
-        secretCommentTag: "",
+        secretCommentTag: ""
       },
       Secret: {
         _id: "",
@@ -141,7 +143,7 @@ const generateOpenAPISpec = async () => {
         secretCommentIV: "",
         secretCommentTag: "",
         updatedAt: "2023-01-13T14:16:12.210Z",
-        createdAt: "2023-01-13T14:16:12.210Z",
+        createdAt: "2023-01-13T14:16:12.210Z"
       },
       RawSecret: {
         _id: "abc123",
@@ -167,12 +169,10 @@ const generateOpenAPISpec = async () => {
           _id: "",
           email: "[email protected]",
           firstName: "John",
-          lastName: "Doe",
+          lastName: "Doe"
         },
         workspace: "",
-        actionNames: [
+        actionNames: ["addSecrets"],
-          "addSecrets",
-        ],
         actions: [
           {
             name: "addSecrets",
@@ -181,24 +181,24 @@ const generateOpenAPISpec = async () => {
             payload: [
               {
                 oldSecretVersion: "",
-                newSecretVersion: "",
+                newSecretVersion: ""
-              },
+              }
-            ],
+            ]
-          },
+          }
         ],
         channel: "cli",
         ipAddress: "192.168.0.1",
         updatedAt: "2023-01-13T14:16:12.210Z",
-        createdAt: "2023-01-13T14:16:12.210Z",
+        createdAt: "2023-01-13T14:16:12.210Z"
       },
       SecretSnapshot: {
         workspace: "",
         version: 1,
         secretVersions: [
           {
-            _id: "",
+            _id: ""
-          },
+          }
-        ],
+        ]
       },
       SecretVersion: {
         _id: "",
@@ -214,7 +214,7 @@ const generateOpenAPISpec = async () => {
         secretKeyTag: "",
         secretValueCiphertext: "",
         secretValueIV: "",
-        secretValueTag: "",
+        secretValueTag: ""
       },
       ServiceTokenData: {
         _id: "",
@@ -224,16 +224,32 @@ const generateOpenAPISpec = async () => {
         user: {
           _id: "",
           firstName: "",
-          lastName: "",
+          lastName: ""
         },
         expiresAt: "2023-01-13T14:16:12.210Z",
         encryptedKey: "",
         iv: "",
         tag: "",
         updatedAt: "2023-01-13T14:16:12.210Z",
-        createdAt: "2023-01-13T14:16:12.210Z",
+        createdAt: "2023-01-13T14:16:12.210Z"
       },
+      AuditLog: {
+        actor: {
+          type: "",
+          metadata: {}
         },
+        organization: "",
+        workspace: "",
+        ipAddress: "",
+        event: {
+          type: "",
+          metadata: {}
+        },
+        userAgent: "",
+        userAgentType: "",
+        expiresAt: ""
+      }
+    }
   };
 
   const outputJSONFile = "../spec.json";
@@ -243,6 +259,6 @@ const generateOpenAPISpec = async () => {
   const spec = await swaggerAutogen(outputJSONFile, endpointsFiles, doc);
 
   await fs.writeFile(outputYAMLFile, yaml.dump(spec.data));
-}
+};
 
 generateOpenAPISpec();

docs/api-reference/endpoints/audit-logs/export-audit-log.mdx

@@ -0,0 +1,4 @@
+---
+title: "Export"
+openapi: "GET /api/v1/workspace/{workspaceId}/audit-logs"
+---

docs/api-reference/endpoints/environments/create.mdx

@@ -1,4 +1,4 @@
 ---
 title: "Create"
-openapi: "POST /api/v2/workspace/{workspaceId}/environments"
+openapi: "POST /api/v1/workspace/{workspaceId}/environments"
 ---

docs/mint.json

@@ -380,6 +380,10 @@
         {
           "group": "Service Tokens",
           "pages": ["api-reference/endpoints/service-tokens/get"]
+        },
+        {
+          "group": "Audit Logs",
+          "pages": ["api-reference/endpoints/audit-logs/export-audit-log"]
         }
       ]
     },

docs/spec.yaml

@@ -192,16 +192,74 @@ paths:
                   description: Version of secret snapshot to roll back to
   /api/v1/workspace/{workspaceId}/audit-logs:
     get:
-      description: ''
+      summary: Return audit logs
+      description: Return audit logs
       parameters:
         - name: workspaceId
           in: path
           required: true
           schema:
             type: string
+          description: ID of the workspace where to get folders from
+        - name: offset
+          description: Number of logs to skip before starting to return logs for pagination
+          required: false
+          in: query
+          schema:
+            type: string
+        - name: limit
+          description: Maximum number of logs to return for pagination
+          required: false
+          in: query
+          schema:
+            type: string
+        - name: startDate
+          description: Filter logs from this date in ISO-8601 format
+          required: false
+          in: query
+          schema:
+            type: string
+        - name: endDate
+          description: Filter logs till this date in ISO-8601 format
+          required: false
+          in: query
+          schema:
+            type: string
+        - name: eventType
+          description: >-
+            Filter by type of event such as get-secrets, get-secret,
+            create-secret, update-secret, delete-secret, etc.
+          required: false
+          in: query
+          schema:
+            type: string
+        - name: userAgentType
+          description: Filter by type of user agent such as web, cli, k8-operator, or other
+          required: false
+          in: query
+          schema:
+            type: string
+        - name: actor
+          description: Filter by actor such as user or service
+          required: false
+          in: query
+          schema:
+            type: string
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  auditLogs:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/AuditLog'
+                    description: List of audit log
+      security:
+        - apiKeyAuth: []
   /api/v1/workspace/{workspaceId}/audit-logs/filters/actors:
     get:
       description: ''
@@ -691,6 +749,28 @@ paths:
       responses:
         '200':
           description: OK
+  /api/v1/admin/config:
+    get:
+      description: ''
+      responses:
+        '200':
+          description: OK
+    patch:
+      description: ''
+      responses:
+        '200':
+          description: OK
+  /api/v1/admin/signup:
+    post:
+      description: ''
+      parameters:
+        - name: user-agent
+          in: header
+          schema:
+            type: string
+      responses:
+        '200':
+          description: OK
   /api/v1/bot/{workspaceId}:
     get:
       description: ''
@@ -2834,48 +2914,6 @@ paths:
                   example: dev
               required:
                 - environmentSlug
-    get:
-      summary: Get all accessible environments of a workspace
-      description: >-
-        Fetch all environments that the user has access to in a specified
-        workspace
-      parameters:
-        - name: workspaceId
-          in: path
-          required: true
-          schema:
-            type: string
-          description: ID of the workspace
-      responses:
-        '200':
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  accessibleEnvironments:
-                    type: array
-                    items:
-                      type: object
-                      properties:
-                        name:
-                          type: string
-                          example: Development
-                        slug:
-                          type: string
-                          example: development
-                        isWriteDenied:
-                          type: boolean
-                          example: false
-                        isReadDenied:
-                          type: boolean
-                          example: false
-                description: >-
-                  List of environments the user has access to in the specified
-                  workspace
-      security:
-        - apiKeyAuth: []
   /api/v2/workspace/{workspaceId}/tags:
     get:
       description: ''
@@ -4342,6 +4380,45 @@ components:
         createdAt:
           type: string
           example: '2023-01-13T14:16:12.210Z'
+    AuditLog:
+      type: object
+      properties:
+        actor:
+          type: object
+          properties:
+            type:
+              type: string
+              example: ''
+            metadata:
+              type: object
+              properties: {}
+        organization:
+          type: string
+          example: ''
+        workspace:
+          type: string
+          example: ''
+        ipAddress:
+          type: string
+          example: ''
+        event:
+          type: object
+          properties:
+            type:
+              type: string
+              example: ''
+            metadata:
+              type: object
+              properties: {}
+        userAgent:
+          type: string
+          example: ''
+        userAgentType:
+          type: string
+          example: ''
+        expiresAt:
+          type: string
+          example: ''
   securitySchemes:
     bearerAuth:
       type: http

frontend/src/hooks/api/auditLogs/queries.tsx

@@ -1,59 +1,46 @@
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import {
+import { Actor, AuditLog, AuditLogFilters } from "./types";
-    Actor,
-    AuditLog,
-    AuditLogFilters
-} from "./types";
 
 export const workspaceKeys = {
-    getAuditLogs: (workspaceId: string, filters: AuditLogFilters) => [{ workspaceId, filters }, "audit-logs"] as const,
+  getAuditLogs: (workspaceId: string, filters: AuditLogFilters) =>
-    getAuditLogActorFilterOpts: (workspaceId: string) => [{ workspaceId }, "audit-log-actor-filters"] as const
+    [{ workspaceId, filters }, "audit-logs"] as const,
-}
+  getAuditLogActorFilterOpts: (workspaceId: string) =>
+    [{ workspaceId }, "audit-log-actor-filters"] as const
+};
 
 export const useGetAuditLogs = (workspaceId: string, filters: AuditLogFilters) => {
-    return useQuery({ 
+  return useInfiniteQuery({
     queryKey: workspaceKeys.getAuditLogs(workspaceId, filters),
-        queryFn: async () => {
+    queryFn: async ({ pageParam }) => {
-            
+      const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(
-            const params = new URLSearchParams();
+        `/api/v1/workspace/${workspaceId}/audit-logs`,
-            if (filters.eventType) {
+        {
-                params.append("eventType", filters.eventType);
+          params: {
+            ...filters,
+            offset: pageParam,
+            startDate: filters?.startDate?.toISOString(),
+            endDate: filters?.endDate?.toISOString()
           }
-
-            if (filters.userAgentType) {
-                params.append("userAgentType", filters.userAgentType); 
-            }
-
-            if (filters.actor) {
-                params.append("actor", filters.actor); 
-            }
-
-            if (filters.startDate) {
-                params.append("startDate", filters.startDate.toISOString());
-            }
-
-            if (filters.endDate) {
-                params.append("endDate", filters.endDate.toISOString());
-            }
-
-            params.append("offset", String(filters.offset));
-            params.append("limit", String(filters.limit));
-            
-            const { data } = await apiRequest.get<{ auditLogs: AuditLog[], totalCount: number }>(`/api/v1/workspace/${workspaceId}/audit-logs`, { params });
-            return data;
         }
+      );
+      return data.auditLogs;
+    },
+    getNextPageParam: (lastPage, pages) =>
+      lastPage.length !== 0 ? pages.length * filters.limit : undefined
   });
-}
+};
 
 export const useGetAuditLogActorFilterOpts = (workspaceId: string) => {
   return useQuery({
     queryKey: workspaceKeys.getAuditLogActorFilterOpts(workspaceId),
     queryFn: async () => {
-            const { data } = await apiRequest.get<{ actors: Actor[] }>(`/api/v1/workspace/${workspaceId}/audit-logs/filters/actors`);
+      const { data } = await apiRequest.get<{ actors: Actor[] }>(
+        `/api/v1/workspace/${workspaceId}/audit-logs/filters/actors`
+      );
       return data.actors;
     }
   });
-}
+};

frontend/src/hooks/api/auditLogs/types.tsx

@@ -1,8 +1,4 @@
-import {
+import { ActorType, EventType, UserAgentType } from "./enums";
-    ActorType,
-    EventType,
-    UserAgentType
-} from "./enums";
 
 interface UserActorMetadata {
   userId: string;
@@ -29,10 +25,7 @@ export interface ServiceActorV3 {
   metadata: ServiceActorMetadata;
 }
 
-export type Actor = 
+export type Actor = UserActor | ServiceActor | ServiceActorV3;
-    | UserActor
-    | ServiceActor
-    | ServiceActorV3;
 
 interface GetSecretsEvent {
   type: EventType.GET_SECRETS;
@@ -62,7 +55,7 @@ interface CreateSecretEvent {
     secretId: string;
     secretKey: string;
     secretVersion: number;
-    }
+  };
 }
 
 interface UpdateSecretEvent {
@@ -73,7 +66,7 @@ interface UpdateSecretEvent {
     secretId: string;
     secretKey: string;
     secretVersion: number;
-    }
+  };
 }
 
 interface DeleteSecretEvent {
@@ -84,28 +77,28 @@ interface DeleteSecretEvent {
     secretId: string;
     secretKey: string;
     secretVersion: number;
-    }
+  };
 }
 
 interface GetWorkspaceKeyEvent {
-    type: EventType.GET_WORKSPACE_KEY,
+  type: EventType.GET_WORKSPACE_KEY;
   metadata: {
     keyId: string;
-    }
+  };
 }
 
 interface AuthorizeIntegrationEvent {
   type: EventType.AUTHORIZE_INTEGRATION;
   metadata: {
     integration: string;
-    }
+  };
 }
 
 interface UnauthorizeIntegrationEvent {
   type: EventType.UNAUTHORIZE_INTEGRATION;
   metadata: {
     integration: string;
-    }
+  };
 }
 
 interface CreateIntegrationEvent {
@@ -124,7 +117,7 @@ interface CreateIntegrationEvent {
     targetServiceId?: string;
     path?: string;
     region?: string;
-    }
+  };
 }
 
 interface DeleteIntegrationEvent {
@@ -143,7 +136,7 @@ interface DeleteIntegrationEvent {
     targetServiceId?: string;
     path?: string;
     region?: string;
-    }
+  };
 }
 
 interface AddTrustedIPEvent {
@@ -152,7 +145,7 @@ interface AddTrustedIPEvent {
     trustedIpId: string;
     ipAddress: string;
     prefix?: number;
-    }
+  };
 }
 
 interface UpdateTrustedIPEvent {
@@ -161,7 +154,7 @@ interface UpdateTrustedIPEvent {
     trustedIpId: string;
     ipAddress: string;
     prefix?: number;
-    }
+  };
 }
 
 interface DeleteTrustedIPEvent {
@@ -170,7 +163,7 @@ interface DeleteTrustedIPEvent {
     trustedIpId: string;
     ipAddress: string;
     prefix?: number;
-    }
+  };
 }
 
 interface CreateServiceTokenEvent {
@@ -181,7 +174,7 @@ interface CreateServiceTokenEvent {
       environment: string;
       secretPath: string;
     }>;
-    }
+  };
 }
 
 interface DeleteServiceTokenEvent {
@@ -192,7 +185,7 @@ interface DeleteServiceTokenEvent {
       environment: string;
       secretPath: string;
     }>;
-    }
+  };
 }
 
 interface CreateServiceTokenV3Event {
@@ -230,7 +223,7 @@ interface CreateEnvironmentEvent {
   metadata: {
     name: string;
     slug: string;
-    }
+  };
 }
 
 interface UpdateEnvironmentEvent {
@@ -240,7 +233,7 @@ interface UpdateEnvironmentEvent {
     newName: string;
     oldSlug: string;
     newSlug: string;
-    }
+  };
 }
 
 interface DeleteEnvironmentEvent {
@@ -248,7 +241,7 @@ interface DeleteEnvironmentEvent {
   metadata: {
     name: string;
     slug: string;
-    }
+  };
 }
 
 interface AddWorkspaceMemberEvent {
@@ -256,7 +249,7 @@ interface AddWorkspaceMemberEvent {
   metadata: {
     userId: string;
     email: string;
-    }
+  };
 }
 
 interface RemoveWorkspaceMemberEvent {
@@ -264,7 +257,7 @@ interface RemoveWorkspaceMemberEvent {
   metadata: {
     userId: string;
     email: string;
-    }
+  };
 }
 
 interface CreateFolderEvent {
@@ -274,7 +267,7 @@ interface CreateFolderEvent {
     folderId: string;
     folderName: string;
     folderPath: string;
-    }
+  };
 }
 
 interface UpdateFolderEvent {
@@ -285,7 +278,7 @@ interface UpdateFolderEvent {
     oldFolderName: string;
     newFolderName: string;
     folderPath: string;
-    }
+  };
 }
 
 interface DeleteFolderEvent {
@@ -295,54 +288,54 @@ interface DeleteFolderEvent {
     folderId: string;
     folderName: string;
     folderPath: string;
-    }
+  };
 }
 
 interface CreateWebhookEvent {
-    type: EventType.CREATE_WEBHOOK,
+  type: EventType.CREATE_WEBHOOK;
   metadata: {
     webhookId: string;
     environment: string;
     secretPath: string;
     webhookUrl: string;
     isDisabled: boolean;
-    }
+  };
 }
 
 interface UpdateWebhookStatusEvent {
-    type: EventType.UPDATE_WEBHOOK_STATUS,
+  type: EventType.UPDATE_WEBHOOK_STATUS;
   metadata: {
     webhookId: string;
     environment: string;
     secretPath: string;
     webhookUrl: string;
     isDisabled: boolean;
-    }
+  };
 }
 
 interface DeleteWebhookEvent {
-    type: EventType.DELETE_WEBHOOK,
+  type: EventType.DELETE_WEBHOOK;
   metadata: {
     webhookId: string;
     environment: string;
     secretPath: string;
     webhookUrl: string;
     isDisabled: boolean;
-    }
+  };
 }
 
 interface GetSecretImportsEvent {
-    type: EventType.GET_SECRET_IMPORTS,
+  type: EventType.GET_SECRET_IMPORTS;
   metadata: {
     environment: string;
     secretImportId: string;
     folderId: string;
     numberOfImports: number;
-    }
+  };
 }
 
 interface CreateSecretImportEvent {
-    type: EventType.CREATE_SECRET_IMPORT,
+  type: EventType.CREATE_SECRET_IMPORT;
   metadata: {
     secretImportId: string;
     folderId: string;
@@ -350,11 +343,11 @@ interface CreateSecretImportEvent {
     importFromSecretPath: string;
     importToEnvironment: string;
     importToSecretPath: string;
-    }
+  };
 }
 
 interface UpdateSecretImportEvent {
-    type: EventType.UPDATE_SECRET_IMPORT,
+  type: EventType.UPDATE_SECRET_IMPORT;
   metadata: {
     secretImportId: string;
     folderId: string;
@@ -363,16 +356,16 @@ interface UpdateSecretImportEvent {
     orderBefore: {
       environment: string;
       secretPath: string;
-        }[],
+    }[];
     orderAfter: {
       environment: string;
       secretPath: string;
-        }[]
+    }[];
-    }
+  };
 }
 
 interface DeleteSecretImportEvent {
-    type: EventType.DELETE_SECRET_IMPORT,
+  type: EventType.DELETE_SECRET_IMPORT;
   metadata: {
     secretImportId: string;
     folderId: string;
@@ -380,31 +373,30 @@ interface DeleteSecretImportEvent {
     importFromSecretPath: string;
     importToEnvironment: string;
     importToSecretPath: string;
-    }
+  };
 }
 
 interface UpdateUserRole {
-    type: EventType.UPDATE_USER_WORKSPACE_ROLE,
+  type: EventType.UPDATE_USER_WORKSPACE_ROLE;
   metadata: {
     userId: string;
     email: string;
     oldRole: string;
     newRole: string;
-    }
+  };
 }
 
 interface UpdateUserDeniedPermissions {
-    type: EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS,
+  type: EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS;
   metadata: {
     userId: string;
     email: string;
     deniedPermissions: {
       environmentSlug: string;
       ability: string;
-        }[]
+    }[];
+  };
 }
-}
-
 
 export type Event =
   | GetSecretsEvent
@@ -454,14 +446,13 @@ export type AuditLog = {
   userAgentType: UserAgentType;
   createdAt: string;
   updatedAt: string;
-}
+};
 
 export type AuditLogFilters = {
   eventType?: EventType;
   userAgentType?: UserAgentType;
   actor?: string;
-    offset: number;
   limit: number;
   startDate?: Date;
   endDate?: Date;
-}
+};

frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx

@@ -8,7 +8,7 @@ export const AuditLogsPage = withProjectPermission(
     return (
       <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
         <div className="max-w-7xl px-6 w-full">
-          <div className="my-6">
+          <div className="py-6 sticky top-0 z-10 bg-bunker-800">
             <p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
             <div />
           </div>

frontend/src/views/Project/AuditLogsPage/components/LogsFilter.tsx

@@ -3,13 +3,7 @@ import { Control, Controller, UseFormReset } from "react-hook-form";
 import { faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import {
+import { Button, DatePicker, FormControl, Select, SelectItem } from "@app/components/v2";
-    Button,
-    DatePicker,
-    FormControl,
-    Select,
-    SelectItem
-} from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetAuditLogActorFilterOpts } from "@app/hooks/api";
 import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
@@ -19,17 +13,17 @@ import { Actor } from "@app/hooks/api/auditLogs/types";
 import { AuditLogFilterFormData } from "./types";
 
 const eventTypes = Object.entries(eventToNameMap).map(([value, label]) => ({ label, value }));
-const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label]) => ({ label, value }));
+const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label]) => ({
+  label,
+  value
+}));
 
 type Props = {
   control: Control<AuditLogFilterFormData>;
   reset: UseFormReset<AuditLogFilterFormData>;
-}
+};
 
-export const LogsFilter = ({
+export const LogsFilter = ({ control, reset }: Props) => {
-    control,
-    reset
-}: Props) => {
   const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
   const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
 
@@ -40,19 +34,28 @@ export const LogsFilter = ({
     switch (actor.type) {
       case ActorType.USER:
         return (
-                    <SelectItem value={`${actor.type}-${actor.metadata.userId}`} key={`user-actor-filter-${actor.metadata.userId}`}>
+          <SelectItem
+            value={`${actor.type}-${actor.metadata.userId}`}
+            key={`user-actor-filter-${actor.metadata.userId}`}
+          >
             {actor.metadata.email}
           </SelectItem>
         );
       case ActorType.SERVICE:
         return (
-                    <SelectItem value={`${actor.type}-${actor.metadata.serviceId}`} key={`service-actor-filter-${actor.metadata.serviceId}`}>
+          <SelectItem
+            value={`${actor.type}-${actor.metadata.serviceId}`}
+            key={`service-actor-filter-${actor.metadata.serviceId}`}
+          >
             {actor.metadata.name}
           </SelectItem>
         );
       case ActorType.SERVICE_V3:
         return (
-                    <SelectItem value={`${actor.type}-${actor.metadata.serviceId}`} key={`service-actor-v3-filter-${actor.metadata.serviceId}`}>
+          <SelectItem
+            value={`${actor.type}-${actor.metadata.serviceId}`}
+            key={`service-actor-v3-filter-${actor.metadata.serviceId}`}
+          >
             {actor.metadata.name}
           </SelectItem>
         );
@@ -63,11 +66,10 @@ export const LogsFilter = ({
           </SelectItem>
         );
     }
-
+  };
-    }
 
   return (
-        <div className="flex justify-between items-center">
+    <div className="flex justify-between items-center sticky top-20 z-10 bg-bunker-800">
       <div className="flex items-center">
         <Controller
           control={control}
@@ -155,7 +157,7 @@ export const LogsFilter = ({
               >
                 <DatePicker
                   value={field.value || undefined}
-                                    onChange={date => {
+                  onChange={(date) => {
                     onChange(date);
                     setIsStartDatePickerOpen(false);
                   }}
@@ -174,14 +176,10 @@ export const LogsFilter = ({
           control={control}
           render={({ field: { onChange, ...field }, fieldState: { error } }) => {
             return (
-                            <FormControl
+              <FormControl label="End date" errorText={error?.message} isError={Boolean(error)}>
-                                label="End date"
-                                errorText={error?.message}
-                                isError={Boolean(error)}
-                            >
                 <DatePicker
                   value={field.value || undefined}
-                                    onChange={date => {
+                  onChange={(date) => {
                     onChange(date);
                     setIsEndDatePickerOpen(false);
                   }}
@@ -203,17 +201,19 @@ export const LogsFilter = ({
           variant="outline_bg"
           type="submit"
           leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} className="mr-2" />}
-                    onClick={() => reset({
+          onClick={() =>
+            reset({
               eventType: undefined,
               actor: undefined,
               userAgentType: undefined,
               startDate: undefined,
               endDate: undefined
-                    })}
+            })
+          }
         >
           Clear filters
         </Button>
       </div>
     </div>
   );
-}
+};

frontend/src/views/Project/AuditLogsPage/components/LogsSection.tsx

@@ -16,16 +16,9 @@ export const LogsSection = () => {
   const { subscription } = useSubscription();
   const router = useRouter();
 
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
-        "upgradePlan"
-    ] as const);
 
-    const {
+  const { control, reset, watch } = useForm<AuditLogFilterFormData>({
-        control,
-        reset,
-        watch,
-        setValue,
-    } = useForm<AuditLogFilterFormData>({
     resolver: yupResolver(auditLogFilterFormSchema),
     defaultValues: {
       page: 1,
@@ -46,45 +39,28 @@ export const LogsSection = () => {
   const startDate = watch("startDate");
   const endDate = watch("endDate");
 
-    const page = watch("page") as number;
-    const perPage = watch("perPage") as number;
-    
   return (
-        <div 
+    <div>
-            // className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+      <LogsFilter control={control} reset={reset} />
-        >
-            {/* <div className="flex items-center mb-8">
-                <h2 className="text-xl font-semibold flex-1 text-white">
-                    Audit Logs
-                </h2>
-            </div> */}
-            <LogsFilter 
-                control={control} 
-                reset={reset}
-            />
       <LogsTable
         eventType={eventType}
         userAgentType={userAgentType}
         actor={actor}
         startDate={startDate}
         endDate={endDate}
-                page={page}
-                perPage={perPage}
-                setValue={setValue}
       />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => {
-                    
           if (!isOpen) {
             router.back();
             return;
           }
 
-                    handlePopUpToggle("upgradePlan", isOpen)
+          handlePopUpToggle("upgradePlan", isOpen);
         }}
         text="You can use audit logs if you switch to a paid Infisical plan."
       />
     </div>
   );
- }
+};

frontend/src/views/Project/AuditLogsPage/components/LogsTable.tsx

@@ -1,8 +1,9 @@
+import { Fragment } from "react";
 import { faFile } from "@fortawesome/free-solid-svg-icons";
 
 import {
+  Button,
   EmptyState,
-    Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -10,13 +11,13 @@ import {
   Td,
   Th,
   THead,
-    Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetAuditLogs } from "@app/hooks/api";
 import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 
 import { LogsTableRow } from "./LogsTableRow";
-import { SetValueType } from "./types";
 
 type Props = {
   eventType?: EventType;
@@ -24,33 +25,28 @@ type Props = {
   actor?: string;
   startDate?: Date;
   endDate?: Date;
-    page: number;
+};
-    perPage: number;
-    setValue: SetValueType;
-}
 
-export const LogsTable = ({
+const AUDIT_LOG_LIMIT = 15;
-    eventType,
+
-    userAgentType,
+export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate }: Props) => {
-    actor,
-    startDate,
-    endDate,
-    page,
-    perPage,
-    setValue
-}: Props) => {
   const { currentWorkspace } = useWorkspace();
-    const { data, isLoading } = useGetAuditLogs(currentWorkspace?._id ?? "", {
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useGetAuditLogs(
+    currentWorkspace?._id ?? "",
+    {
       eventType,
       userAgentType,
       actor,
       startDate,
       endDate,
-        offset: (page - 1) * perPage,
+      limit: AUDIT_LOG_LIMIT
-        limit: perPage
+    }
-    });
+  );
+
+  const isEmpty = !isLoading && !data?.pages?.[0].length;
 
   return (
+    <div>
       <TableContainer>
         <Table>
           <THead>
@@ -63,34 +59,37 @@ export const LogsTable = ({
             </Tr>
           </THead>
           <TBody>
-                    {!isLoading && data?.auditLogs && data?.auditLogs.map((auditLog) => (
+            {!isLoading &&
-                        <LogsTableRow 
+              data?.pages?.map((group, i) => (
-                            auditLog={auditLog} 
+                <Fragment key={`auditlog-item-${i + 1}`}>
-                            key={`audit-log-${auditLog._id}`}
+                  {group.map((auditLog) => (
-                        />
+                    <LogsTableRow auditLog={auditLog} key={`audit-log-${auditLog._id}`} />
+                  ))}
+                </Fragment>
               ))}
             {isLoading && <TableSkeleton innerKey="logs-table" columns={5} key="logs" />}
-                    {!isLoading && data?.auditLogs && data?.auditLogs.length === 0 && (
+            {isEmpty && (
               <Tr>
                 <Td colSpan={5}>
-                                <EmptyState 
+                  <EmptyState title="No audit logs on file" icon={faFile} />
-                                    title="No audit logs on file" 
-                                    icon={faFile}
-                                />
                 </Td>
               </Tr>
             )}
           </TBody>
         </Table>
-            {!isLoading && data?.totalCount !== undefined && (
-                <Pagination 
-                    count={data?.totalCount}
-                    page={page}
-                    perPage={perPage}
-                    onChangePage={(newPage) => setValue("page", newPage)}
-                    onChangePerPage={(newPerPage) => setValue("perPage", newPerPage)}
-                />
-            )}
       </TableContainer>
+      {!isEmpty && (
+        <Button
+          className="mt-4 mb-20 py-3 px-4 text-sm"
+          isFullWidth
+          variant="star"
+          isLoading={isFetchingNextPage}
+          isDisabled={isFetchingNextPage || !hasNextPage}
+          onClick={() => fetchNextPage()}
+        >
+          {hasNextPage ? "Load More" : "End of logs"}
+        </Button>
+      )}
+    </div>
   );
-}
+};