From 6e711756acfd83b23fb986104f8c06f2bebfa78e Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 7 Jun 2025 15:46:19 -0700
Subject: [PATCH] UI: add AuditLogsInfoMessage

---
 .../src/components/view_logs/audit_logs.tsx   | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

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 (
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start mb-6">
+        <div className="text-blue-500 mr-3 flex-shrink-0 mt-0.5">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="16" x2="12" y2="12"></line>
+            <line x1="12" y1="8" x2="12.01" y2="8"></line>
+          </svg>
+        </div>
+        <div>
+          <h4 className="text-sm font-medium text-blue-800">Audit Logs Not Available</h4>
+          <p className="text-sm text-blue-700 mt-1">
+            To enable audit logging, add the following configuration to your LiteLLM proxy configuration file:
+          </p>
+          <pre className="mt-2 bg-white p-3 rounded border border-blue-200 text-xs font-mono overflow-auto">
+{`litellm_settings:
+  store_audit_logs: true`}
+          </pre>
+          <p className="text-xs text-blue-700 mt-2">
+            Note: This will only affect new requests after the configuration change and proxy restart.
+          </p>
+        </div>
+      </div>
+    );
+  };
+
   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({
         <h1 className="text-xl font-semibold py-4">
               Audit Logs
             </h1>
+          
+          {/* Show Audit Logs Info Message when no data */}
+          <AuditLogsInfoMessage show={showAuditLogsInfo} />
+          
           <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0">
             
             <div className="flex flex-wrap items-center gap-3">