(UI) - Allow Internal Users to View their own logs (#8933)

* ui fix leftnav, allow internal users to view their own logs

* pass user_id in uiSpendLogs call

* ui filter logs for internal user

* fix internal users page

* ui show correct message when store prompts is disabled

* fix internal user logs

* test_ui_view_spend_logs_with_user_id

* test spend management endpoint

ui/litellm-dashboard/src/components/leftnav.tsx

@@ -20,6 +20,7 @@ import {
   SafetyOutlined,
   ExperimentOutlined
 } from '@ant-design/icons';
+import { old_admin_roles, v2_admin_role_names, all_admin_roles, rolesAllowedToSeeUsage } from '../utils/roles';
 
 const { Sider } = Layout;
 
@@ -40,12 +41,6 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
-const old_admin_roles = ["Admin", "Admin Viewer"];
-const v2_admin_role_names = ["proxy_admin", "proxy_admin_viewer", "org_admin"];
-const all_admin_roles = [...old_admin_roles, ...v2_admin_role_names];
-const rolesAllowedToSeeUsage = ["Admin", "Admin Viewer", "Internal User", "Internal Viewer"];
-
-
 // Note: If a menu item does not have a role, it is visible to all roles.
 const menuItems: MenuItem[] = [
   { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined /> },
@@ -57,7 +52,7 @@ const menuItems: MenuItem[] = [
   { key: "5", page: "users", label: "Internal Users", icon: <UserOutlined />, roles: all_admin_roles },
   { key: "14", page: "api_ref", label: "API Reference", icon: <ApiOutlined /> },
   { key: "16", page: "model-hub", label: "Model Hub", icon: <AppstoreOutlined /> },
-  { key: "15", page: "logs", label: "Logs", icon: <LineChartOutlined />, roles: all_admin_roles },
+  { key: "15", page: "logs", label: "Logs", icon: <LineChartOutlined />},
 
   
   { 

ui/litellm-dashboard/src/components/networking.tsx

@@ -1806,8 +1806,7 @@ export const uiSpendLogsCall = async (
   end_date?: string,
   page?: number,
   page_size?: number,
-  min_spend?: number,
-  max_spend?: number,
+  user_id?: string,
 ) => {
   try {
     // Construct base URL
@@ -1817,13 +1816,12 @@ export const uiSpendLogsCall = async (
     const queryParams = new URLSearchParams();
     if (api_key) queryParams.append('api_key', api_key);
     if (team_id) queryParams.append('team_id', team_id);
-    if (min_spend) queryParams.append('min_spend', min_spend.toString());
-    if (max_spend) queryParams.append('max_spend', max_spend.toString());
     if (request_id) queryParams.append('request_id', request_id);
     if (start_date) queryParams.append('start_date', start_date);
     if (end_date) queryParams.append('end_date', end_date);
     if (page) queryParams.append('page', page.toString());
     if (page_size) queryParams.append('page_size', page_size.toString());
+    if (user_id) queryParams.append('user_id', user_id);
 
     // Append query parameters to URL if any exist
     const queryString = queryParams.toString();

ui/litellm-dashboard/src/components/view_logs/ConfigInfoMessage.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface ConfigInfoMessageProps {
+  show: boolean;
+}
+
+export const ConfigInfoMessage: React.FC<ConfigInfoMessageProps> = ({ show }) => {
+  if (!show) return null;
+  
+  return (
+    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start">
+      <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">Request/Response Data Not Available</h4>
+        <p className="text-sm text-blue-700 mt-1">
+          To view request and response details, enable prompt storage in your LiteLLM configuration by adding the following to your <code className="bg-blue-100 px-1 py-0.5 rounded">proxy_config.yaml</code> file:
+        </p>
+        <pre className="mt-2 bg-white p-3 rounded border border-blue-200 text-xs font-mono overflow-auto">
+{`general_settings:
+  store_model_in_db: true
+  store_prompts_in_spend_logs: true`}
+        </pre>
+        <p className="text-xs text-blue-700 mt-2">
+          Note: This will only affect new requests after the configuration change.
+        </p>
+      </div>
+    </div>
+  );
+}; 

ui/litellm-dashboard/src/components/view_logs/index.tsx

@@ -10,6 +10,8 @@ import { Row } from "@tanstack/react-table";
 import { prefetchLogDetails } from "./prefetch";
 import { RequestResponsePanel } from "./columns";
 import { ErrorViewer } from './ErrorViewer';
+import { internalUserRoles } from "../../utils/roles";
+import { ConfigInfoMessage } from './ConfigInfoMessage';
 
 interface SpendLogsTableProps {
   accessToken: string | null;
@@ -62,6 +64,9 @@ export default function SpendLogsTable({
   const [selectedTeamId, setSelectedTeamId] = useState("");
   const [selectedKeyHash, setSelectedKeyHash] = useState("");
   const [selectedFilter, setSelectedFilter] = useState("Team ID");
+  const [filterByCurrentUser, setFilterByCurrentUser] = useState(
+    userRole && internalUserRoles.includes(userRole)
+  );
 
   const queryClient = useQueryClient();
 
@@ -93,6 +98,13 @@ export default function SpendLogsTable({
       document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+
+  useEffect(() => {
+    if (userRole && internalUserRoles.includes(userRole)) {
+      setFilterByCurrentUser(true);
+    }
+  }, [userRole]);
+
   const logs = useQuery<PaginatedResponse>({
     queryKey: [
       "logs",
@@ -103,6 +115,7 @@ export default function SpendLogsTable({
       endTime,
       selectedTeamId,
       selectedKeyHash,
+      filterByCurrentUser ? userID : null,
     ],
     queryFn: async () => {
       if (!accessToken || !token || !userRole || !userID) {
@@ -130,7 +143,8 @@ export default function SpendLogsTable({
         formattedStartTime,
         formattedEndTime,
         currentPage,
-        pageSize
+        pageSize,
+        filterByCurrentUser ? userID : undefined
       );
 
       // Trigger prefetch for all logs
@@ -600,6 +614,12 @@ function RequestViewer({ row }: { row: Row<LogEntry> }) {
   const hasError = row.original.metadata?.status === "failure";
   const errorInfo = hasError ? row.original.metadata?.error_information : null;
   
+  // Check if request/response data is missing
+  const hasMessages = row.original.messages && 
+    (Array.isArray(row.original.messages) ? row.original.messages.length > 0 : Object.keys(row.original.messages).length > 0);
+  const hasResponse = row.original.response && Object.keys(formatData(row.original.response)).length > 0;
+  const missingData = !hasMessages || !hasResponse;
+  
   // Format the response with error details if present
   const formattedResponse = () => {
     if (hasError && errorInfo) {
@@ -678,6 +698,9 @@ function RequestViewer({ row }: { row: Row<LogEntry> }) {
         </div>
       </div>
 
+      {/* Configuration Info Message - Show when data is missing */}
+      <ConfigInfoMessage show={missingData} />
+
       {/* Request/Response Panel */}
       <div className="grid grid-cols-2 gap-4">
         {/* Request Side */}
@@ -688,6 +711,7 @@ function RequestViewer({ row }: { row: Row<LogEntry> }) {
               onClick={() => navigator.clipboard.writeText(JSON.stringify(getRawRequest(), null, 2))}
               className="p-1 hover:bg-gray-200 rounded"
               title="Copy request"
+              disabled={!hasMessages}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
@@ -715,6 +739,7 @@ function RequestViewer({ row }: { row: Row<LogEntry> }) {
               onClick={() => navigator.clipboard.writeText(JSON.stringify(formattedResponse(), null, 2))}
               className="p-1 hover:bg-gray-200 rounded"
               title="Copy response"
+              disabled={!hasResponse}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
@@ -723,16 +748,18 @@ function RequestViewer({ row }: { row: Row<LogEntry> }) {
             </button>
           </div>
           <div className="p-4 overflow-auto max-h-96 bg-gray-50">
-            <pre className="text-xs font-mono whitespace-pre-wrap break-all">{JSON.stringify(formattedResponse(), null, 2)}</pre>
+            {hasResponse ? (
+              <pre className="text-xs font-mono whitespace-pre-wrap break-all">{JSON.stringify(formattedResponse(), null, 2)}</pre>
+            ) : (
+              <div className="text-gray-500 text-sm italic text-center py-4">Response data not available</div>
+            )}
           </div>
         </div>
       </div>
 
-
       {/* Error Card - Only show for failures */}
       {hasError && errorInfo && <ErrorViewer errorInfo={errorInfo} />}
 
-
       {/* Tags Card - Only show if there are tags */}
       {row.original.request_tags && Object.keys(row.original.request_tags).length > 0 && (
         <div className="bg-white rounded-lg shadow">

ui/litellm-dashboard/src/utils/roles.ts

@@ -0,0 +1,7 @@
+// Define admin roles and permissions
+export const old_admin_roles = ["Admin", "Admin Viewer"];
+export const v2_admin_role_names = ["proxy_admin", "proxy_admin_viewer", "org_admin"];
+export const all_admin_roles = [...old_admin_roles, ...v2_admin_role_names];
+
+export const internalUserRoles = ["Internal User", "Internal Viewer"];
+export const rolesAllowedToSeeUsage = ["Admin", "Admin Viewer", "Internal User", "Internal Viewer"];