diff --git a/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx b/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx index d98640375d4..71032ba4b3e 100644 --- a/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx @@ -258,6 +258,39 @@ export default function AuditLogs({ return completeFilteredLogs.slice(start, end); }, [completeFilteredLogs, clientCurrentPage, pageSize]); + // Check if audit logs are empty (not loading and no data) + const showAuditLogsInfo = (!allLogsQuery.data || allLogsQuery.data.length === 0); + + // Custom AuditLogsInfoMessage component + const AuditLogsInfoMessage = ({ show }: { show: boolean }) => { + if (!show) return null; + + return ( +
+
+ + + + + +
+
+

Audit Logs Not Available

+

+ To enable audit logging, add the following configuration to your LiteLLM proxy configuration file: +

+
+{`litellm_settings:
+  store_audit_logs: true`}
+          
+

+ Note: This will only affect new requests after the configuration change and proxy restart. +

+
+
+ ); + }; + const renderSubComponent = useCallback(({ row }: { row: any }) => { const AuditLogRowExpansionPanel = ({ rowData }: { rowData: AuditLogEntry }) => { const { before_value, updated_values, table_name, action } = rowData; @@ -376,6 +409,10 @@ export default function AuditLogs({

Audit Logs

+ + {/* Show Audit Logs Info Message when no data */} + +