UI: add AuditLogsInfoMessage

This commit is contained in:
Ishaan Jaff 2025-06-07 15:46:19 -07:00
parent c79f7a3ad9
commit 6e711756ac

View file

@ -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">