feat: enhance audit log functionality with status code filtering

- Added `status_code` as an optional filter in the `get_audit_logs` API.
- Updated the audit log metadata endpoint to include distinct status codes.
- Modified the frontend to support filtering by status codes with a new multi-select component.
- Implemented a utility function to provide descriptions for common HTTP status codes.
- Added comprehensive tests for the new status code filtering feature.

Author: PhiRho

app/api/audit.py

@@ -2,11 +2,11 @@
 from sqlalchemy.orm import Session
 from typing import List, Optional
 from datetime import datetime
+from sqlalchemy import distinct, text, cast, String
 from app.db.database import get_db
 from app.api.auth import get_current_user_from_auth
 from app.schemas.models import AuditLogResponse, PaginatedAuditLogResponse, AuditLogMetadata
 from app.db.models import DBAuditLog, DBUser
-from sqlalchemy import distinct
 import logging
 
 logger = logging.getLogger(__name__)
@@ -25,11 +25,12 @@ async def get_audit_logs(
     user_email: Optional[str] = None,
     from_date: Optional[datetime] = None,
     to_date: Optional[datetime] = None,
+    status_code: Optional[str] = None,
 ):
     """
     Retrieve audit logs with optional filtering.
     Only accessible by admin users.
-    event_type and resource_type can be comma-separated lists for multiple values.
+    event_type, resource_type, and status_code can be comma-separated lists for multiple values.
     """
     if not current_user.is_admin:
         logger.warning(f"Non-admin user {current_user.id} attempted to access audit logs")
@@ -56,6 +57,9 @@ async def get_audit_logs(
             query = query.filter(DBAuditLog.timestamp >= from_date)
         if to_date:
             query = query.filter(DBAuditLog.timestamp <= to_date)
+        if status_code:
+            status_codes = [sc.strip() for sc in status_code.split(',')]
+            query = query.filter(cast(DBAuditLog.details['status_code'], String).in_(status_codes))
 
         # Get total count
         total = query.count()
@@ -96,7 +100,7 @@ async def get_audit_logs_metadata(
     current_user: DBUser = Depends(get_current_user_from_auth),
 ):
     """
-    Retrieve distinct event types and resource types from audit logs.
+    Retrieve distinct event types, resource types, and status codes from audit logs.
     Only accessible by admin users.
     """
     if not current_user.is_admin:
@@ -117,9 +121,16 @@ async def get_audit_logs_metadata(
                         .filter(DBAuditLog.resource_type != '')
                         .all()]
 
+        # Get distinct status codes from the details JSON field
+        status_codes = [sc[0] for sc in db.query(distinct(cast(DBAuditLog.details['status_code'], String)))
+                       .filter(cast(DBAuditLog.details['status_code'], String).isnot(None))
+                       .filter(cast(DBAuditLog.details['status_code'], String) != '')
+                       .all()]
+
         return {
             "event_types": sorted(event_types),
-            "resource_types": sorted(resource_types)
+            "resource_types": sorted(resource_types),
+            "status_codes": sorted(status_codes, key=lambda x: int(x) if x.isdigit() else 0)
         }
 
     except Exception as e:

app/schemas/models.py

@@ -229,6 +229,7 @@ class PaginatedAuditLogResponse(BaseModel):
 class AuditLogMetadata(BaseModel):
     event_types: List[str]
     resource_types: List[str]
+    status_codes: List[str]
     model_config = ConfigDict(from_attributes=True)
 
 # Team schemas

frontend/src/app/admin/audit-logs/page.tsx

@@ -45,10 +45,37 @@ interface AuditLogFilters {
   user_email?: string;
   from_date?: string;
   to_date?: string;
+  status_code?: string[];
 }
 
 const ITEMS_PER_PAGE = 20;
 
+const getStatusCodeDescription = (code: number): string => {
+  const descriptions: Record<number, string> = {
+    200: 'OK',
+    201: 'Created',
+    204: 'No Content',
+    301: 'Moved Permanently',
+    302: 'Found',
+    304: 'Not Modified',
+    307: 'Temporary Redirect',
+    308: 'Permanent Redirect',
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    409: 'Conflict',
+    422: 'Unprocessable Entity',
+    429: 'Too Many Requests',
+    500: 'Internal Server Error',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+  };
+  return descriptions[code] || 'Unknown';
+};
+
 export default function AuditLogsPage() {
   const { toast } = useToast();
   const [filters, setFilters] = useState<AuditLogFilters>({
@@ -61,6 +88,7 @@ export default function AuditLogsPage() {
   const [itemsPerPage] = useState<number>(ITEMS_PER_PAGE);
   const [eventTypeOptions, setEventTypeOptions] = useState<{ value: string; label: string }[]>([]);
   const [resourceTypeOptions, setResourceTypeOptions] = useState<{ value: string; label: string }[]>([]);
+  const [statusCodeOptions, setStatusCodeOptions] = useState<{ value: string; label: string }[]>([]);
 
   const fetchMetadata = useCallback(async () => {
     try {
@@ -85,6 +113,15 @@ export default function AuditLogsPage() {
             label: type.charAt(0).toUpperCase() + type.slice(1).toLowerCase(),
           }))
       );
+
+      setStatusCodeOptions(
+        (data.status_codes || [])
+          .filter(Boolean)
+          .map((code: string) => ({
+            value: code,
+            label: `${code} - ${getStatusCodeDescription(parseInt(code))}`,
+          }))
+      );
     } catch (error) {
       console.error('Error fetching audit logs metadata:', error);
       toast({
@@ -107,6 +144,7 @@ export default function AuditLogsPage() {
         ...(filters.event_type?.length && { event_type: filters.event_type.join(',') }),
         ...(filters.resource_type?.length && { resource_type: filters.resource_type.join(',') }),
         ...(filters.user_email && { user_email: filters.user_email }),
+        ...(filters.status_code?.length && { status_code: filters.status_code.join(',') }),
       }).toString();
 
       const response = await get(`audit/logs?${queryParams}`, { credentials: 'include' });
@@ -179,7 +217,7 @@ export default function AuditLogsPage() {
           <CardTitle>Filters</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
             <div className="space-y-2">
               <label className="text-sm font-medium">Event Type</label>
               <MultiSelect
@@ -197,6 +235,18 @@ export default function AuditLogsPage() {
                 onValueChange={(value) => handleFilterChange('resource_type', value)}
                 defaultValue={filters.resource_type || []}
                 placeholder="Select Resources"
+                variant="default"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Status Code</label>
+              <MultiSelect
+                options={statusCodeOptions}
+                onValueChange={(value) => handleFilterChange('status_code', value)}
+                defaultValue={filters.status_code || []}
+                placeholder="Select Status Codes"
+                variant="default"
               />
             </div>
 

frontend/src/components/ui/multi-select.tsx

@@ -248,19 +248,19 @@ export const MultiSelect = React.forwardRef<
                     </Badge>
                   )}
                 </div>
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between gap-1">
                   <XIcon
-                    className="h-4 mx-2 cursor-pointer text-muted-foreground"
+                    className="h-4 mx-2 cursor-pointer text-muted-foreground flex items-center justify-center"
                     onClick={(event) => {
                       event.stopPropagation();
                       handleClear();
                     }}
                   />
                   <Separator
                     orientation="vertical"
-                    className="flex min-h-6 h-full"
+                    className="flex min-h-6 h-full mx-1"
                   />
-                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground flex items-center justify-center" />
                 </div>
               </div>
             ) : (