tiennm99/litellm
1
0
Fork 0
mirror of https://github.com/tiennm99/litellm.git synced 2026-07-05 01:07:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

provider logos on usage page (#13372)

Browse Source
This commit is contained in:
tanjiro
2025-08-07 23:41:30 +09:00
committed by GitHub
parent dfada882f1
commit 7d978f0ffc
2 changed files with 58 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/components/entity_usage.tsx
+23 -1
View File
@@ -29,6 +29,7 @@ import { tagDailyActivityCall, teamDailyActivityCall } from './networking';
import TopKeyView from "./top_key_view";
import { formatNumberWithCommas } from "@/utils/dataUtils";
import { valueFormatterSpend } from "./usage/utils/value_formatters";
import { getProviderLogoAndName } from "./provider_info_helpers";
interface EntityMetrics {
metrics: {
@@ -688,7 +689,28 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
<TableBody>
{getProviderSpend().map((provider) => (
<TableRow key={provider.provider}>
<TableCell>{provider.provider}</TableCell>
<TableCell>
<div className="flex items-center space-x-2">
{provider.provider && (
<img
src={getProviderLogoAndName(provider.provider).logo}
alt={`${provider.provider} logo`}
className="w-4 h-4"
onError={(e) => {
const target = e.target as HTMLImageElement;
const parent = target.parentElement;
if (parent) {
const fallbackDiv = document.createElement('div');
fallbackDiv.className = 'w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs';
fallbackDiv.textContent = provider.provider?.charAt(0) || '-';
parent.replaceChild(fallbackDiv, target);
}
}}
/>
)}
<span>{provider.provider}</span>
</div>
</TableCell>
<TableCell>
${formatNumberWithCommas(provider.spend, 2)}
</TableCell>
ui/litellm-dashboard/src/components/new_usage.tsx
+35 -29
View File
@@ -34,20 +34,14 @@ import {
import AdvancedDatePicker from "./shared/advanced_date_picker"
import { AreaChart } from "@tremor/react"
import { userDailyActivityCall, tagListCall } from "./networking";
import { Tag } from "./tag_management/types";
import ViewUserSpend from "./view_user_spend";
import TopKeyView from "./top_key_view";
import { ActivityMetrics, processActivityData } from "./activity_metrics";
import UserAgentActivity from "./user_agent_activity";
import {
SpendMetrics,
DailyData,
ModelActivityData,
MetricWithMetadata,
KeyMetricWithMetadata,
} from "./usage/types";
import EntityUsage from "./entity_usage";
import { userDailyActivityCall, tagListCall } from "./networking"
import { Tag } from "./tag_management/types"
import ViewUserSpend from "./view_user_spend"
import TopKeyView from "./top_key_view"
import { ActivityMetrics, processActivityData } from "./activity_metrics"
import UserAgentActivity from "./user_agent_activity"
import { SpendMetrics, DailyData, ModelActivityData, MetricWithMetadata, KeyMetricWithMetadata } from "./usage/types"
import EntityUsage from "./entity_usage"
import {
old_admin_roles,
v2_admin_role_names,
@@ -62,6 +56,7 @@ import { formatNumberWithCommas } from "@/utils/dataUtils"
import { valueFormatterSpend } from "./usage/utils/value_formatters"
import CloudZeroExportModal from "./cloudzero_export_modal"
import { ChartLoader } from "./shared/chart_loader"
import { getProviderLogoAndName } from "./provider_info_helpers"
interface NewUsagePageProps {
accessToken: string | null
@@ -416,16 +411,8 @@ const NewUsagePage: React.FC<NewUsagePageProps> = ({ accessToken, userRole, user
<TabList variant="solid" className="mt-1">
{all_admin_roles.includes(userRole || "") ? <Tab>Global Usage</Tab> : <Tab>Your Usage</Tab>}
<Tab>Team Usage</Tab>
{all_admin_roles.includes(userRole || "") ? (
<Tab>Tag Usage</Tab>
) : (
<></>
)}
{all_admin_roles.includes(userRole || "") ? (
<Tab>User Agent Activity</Tab>
) : (
<></>
)}
{all_admin_roles.includes(userRole || "") ? <Tab>Tag Usage</Tab> : <></>}
{all_admin_roles.includes(userRole || "") ? <Tab>User Agent Activity</Tab> : <></>}
</TabList>
<TabPanels>
{/* Your Usage Panel */}
@@ -658,7 +645,29 @@ const NewUsagePage: React.FC<NewUsagePageProps> = ({ accessToken, userRole, user
.filter((provider) => provider.spend > 0)
.map((provider) => (
<TableRow key={provider.provider}>
<TableCell>{provider.provider}</TableCell>
<TableCell>
<div className="flex items-center space-x-2">
{provider.provider && (
<img
src={getProviderLogoAndName(provider.provider).logo}
alt={`${provider.provider} logo`}
className="w-4 h-4"
onError={(e) => {
const target = e.target as HTMLImageElement
const parent = target.parentElement
if (parent) {
const fallbackDiv = document.createElement("div")
fallbackDiv.className =
"w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs"
fallbackDiv.textContent = provider.provider?.charAt(0) || "-"
parent.replaceChild(fallbackDiv, target)
}
}}
/>
)}
<span>{provider.provider}</span>
</div>
</TableCell>
<TableCell>${formatNumberWithCommas(provider.spend, 2)}</TableCell>
<TableCell className="text-green-600">
{provider.successful_requests.toLocaleString()}
@@ -725,10 +734,7 @@ const NewUsagePage: React.FC<NewUsagePageProps> = ({ accessToken, userRole, user
</TabPanel>
{/* User Agent Activity Panel */}
<TabPanel>
<UserAgentActivity
accessToken={accessToken}
userRole={userRole}
/>
<UserAgentActivity accessToken={accessToken} userRole={userRole} />
</TabPanel>
</TabPanels>
</TabGroup>