[UI QA] 1.74.0.rc (#12348)

* fix alignment

* fix msg

* ui qa  - use correct input type

* fix logo

* fix

* fix preview

* add PremiumLoggingSettingsProps

* fix duration

* fix img

* fix img

* ui new build

litellm/proxy/common_utils/html_forms/ui_login.py

@@ -129,8 +129,19 @@ html_form = f"""
             margin-bottom: 20px;
         }}
         
-        .toggle-password input {{
-            margin-right: 6px;
+        .toggle-password input[type="checkbox"] {{
+            margin-right: 8px;
+            margin-bottom: 0;
+            vertical-align: middle;
+            width: 16px;
+            height: 16px;
+        }}
+        
+        .toggle-password label {{
+            margin-bottom: 0;
+            font-size: 14px;
+            cursor: pointer;
+            line-height: 1;
         }}
 
         input[type="submit"] {{

ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text } from "@tremor/react";
+import LoggingSettings from "../team/LoggingSettings";
+
+interface PremiumLoggingSettingsProps {
+  value: any[];
+  onChange: (settings: any[]) => void;
+  premiumUser?: boolean;
+}
+
+export function PremiumLoggingSettings({
+  value,
+  onChange,
+  premiumUser = false
+}: PremiumLoggingSettingsProps) {
+  if (!premiumUser) {
+    return (
+      <div>
+        <div className="flex flex-wrap gap-2 mb-3">
+          <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium opacity-50">
+            ✨ langfuse-logging
+          </div>
+          <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium opacity-50">
+            ✨ datadog-logging
+          </div>
+        </div>
+        <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <Text className="text-sm text-yellow-800">
+            Setting Key/Team logging settings is a LiteLLM Enterprise feature. Global Logging Settings are available for all free users. Get a trial key <a href="https://www.litellm.ai/#pricing" target="_blank" rel="noopener noreferrer" className="underline">here</a>.
+          </Text>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <LoggingSettings
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+
+export default PremiumLoggingSettings; 

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

@@ -40,7 +40,7 @@ import { Team } from "./key_team_helpers/key_list";
 import TeamDropdown from "./common_components/team_dropdown";
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
-import LoggingSettings from "./team/LoggingSettings";
+import PremiumLoggingSettings from "./common_components/PremiumLoggingSettings";
 import Createuser from "./create_user_button";
 import debounce from 'lodash/debounce';
 import { rolesWithWriteAccess } from '../utils/roles';
@@ -512,7 +512,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
           {isFormDisabled && (
             <div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-md">
               <Text className="text-blue-800 text-sm">
-                Please select a team to continue configuring your API key.
+                Please select a team to continue configuring your API key. If you do not see any teams, please contact your Proxy Admin to either provide you with access to models or to add you to a team.
               </Text>
             </div>
           )}
@@ -822,7 +822,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   </AccordionHeader>
                   <AccordionBody>
                     <div className="mt-4">
-                      <LoggingSettings value={loggingSettings} onChange={setLoggingSettings} />
+                      <PremiumLoggingSettings
+                        value={loggingSettings}
+                        onChange={setLoggingSettings}
+                        premiumUser={premiumUser}
+                      />
                     </div>
                   </AccordionBody>
                 </Accordion>

ui/litellm-dashboard/src/components/team/LoggingSettings.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { Form, Select, Space, Tooltip, Divider } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Button, Card } from '@tremor/react';
+import { Button, Card, TextInput } from '@tremor/react';
 import { PlusIcon, TrashIcon, CogIcon } from '@heroicons/react/outline';
 import { callbackInfo, Callbacks, callback_map } from '../callback_info_helpers';
 
@@ -111,9 +111,8 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({ value = [], onChange
                   </span>
                 )}
               </label>
-              <input
+              <TextInput
                 type={paramType === 'password' ? 'password' : 'text'}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                 placeholder={`os.environ/${paramName.toUpperCase()}`}
                 value={config.callback_vars[paramName] || ''}
                 onChange={(e) => updateCallbackVar(configIndex, paramName, e.target.value)}

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

@@ -60,7 +60,7 @@ import AvailableTeamsPanel from "@/components/team/available_teams";
 import VectorStoreSelector from "./vector_store_management/VectorStoreSelector";
 import PremiumVectorStoreSelector from "./common_components/PremiumVectorStoreSelector";
 import PremiumMCPSelector from "./common_components/PremiumMCPSelector";
-import LoggingSettings from "./team/LoggingSettings";
+import PremiumLoggingSettings from "./common_components/PremiumLoggingSettings";
 import type { KeyResponse, Team } from "./key_team_helpers/key_list";
 import { formatNumberWithCommas } from "../utils/dataUtils";
 
@@ -1178,9 +1178,10 @@ const Teams: React.FC<TeamProps> = ({
                         </AccordionHeader>
                         <AccordionBody>
                           <div className="mt-4">
-                            <LoggingSettings
+                            <PremiumLoggingSettings
                               value={loggingSettings}
                               onChange={setLoggingSettings}
+                              premiumUser={premiumUser}
                             />
                           </div>
                         </AccordionBody>

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

@@ -18,6 +18,11 @@ interface AuditLogsProps {
   allTeams: Team[];
 }
 
+
+const asset_logos_folder = '../ui/assets/';
+export const auditLogsPreviewImg = `${asset_logos_folder}audit-logs-preview.png`;
+
+
 export default function AuditLogs({
   userID,
   userRole,
@@ -402,16 +407,19 @@ export default function AuditLogs({
           Here's a preview of what Audit Logs offer:
         </Text>
         <img 
-          src="/audit-logs-preview.png"
+          src={auditLogsPreviewImg}
           alt="Audit Logs Preview" 
           style={{ 
             maxWidth: '100%', 
             maxHeight: '700px',
-            border: '1px solid #ccc', 
             borderRadius: '8px',
             boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
             margin: '0 auto'
           }} 
+          onError={(e) => {
+            console.error('Failed to load audit logs preview image');
+            (e.target as HTMLImageElement).style.display = 'none';
+          }}
         />
       </div>
     );

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

@@ -163,7 +163,7 @@ export const columns: ColumnDef<LogEntry>[] = [
     ),
   },
   {
-    header: "Duration",
+    header: "Duration (s)",
     accessorKey: "duration",
     cell: (info: any) => (
       <Tooltip title={String(info.getValue() || "-")}>