diff --git a/ui/litellm-dashboard/src/components/entity_usage.tsx b/ui/litellm-dashboard/src/components/entity_usage.tsx index ca6615303e9..f7617b304b1 100644 --- a/ui/litellm-dashboard/src/components/entity_usage.tsx +++ b/ui/litellm-dashboard/src/components/entity_usage.tsx @@ -24,7 +24,7 @@ import { import AdvancedDatePicker from "./shared/advanced_date_picker"; import { Select } from 'antd'; import { ActivityMetrics, processActivityData } from './activity_metrics'; -import { DailyData, BreakdownMetrics, KeyMetricWithMetadata, EntityMetricWithMetadata } from './usage/types'; +import { DailyData, BreakdownMetrics, KeyMetricWithMetadata, EntityMetricWithMetadata, TagUsage } from './usage/types'; import { tagDailyActivityCall, teamDailyActivityCall } from './networking'; import TopKeyView from "./top_key_view"; import { formatNumberWithCommas } from "@/utils/dataUtils"; @@ -181,13 +181,14 @@ const EntityUsage: React.FC = ({ const {breakdown} = day; const {entities} = breakdown; console.log('debugTags',{entities}) - const tagDictionary = Object.keys(entities).reduce((acc: { [key: string]: string[] }, entity) => { + const tagDictionary = Object.keys(entities).reduce((acc: { [key: string]: TagUsage[] }, entity) => { const {api_key_breakdown} = entities[entity]; Object.keys(api_key_breakdown).forEach((key) => { + const tagUsage = {tag:entity,usage:api_key_breakdown[key].metrics.spend}; if (acc[key]) { - acc[key].push(entity); + acc[key].push(tagUsage); } else { - acc[key] = [entity]; + acc[key] = [tagUsage]; } }) return acc; diff --git a/ui/litellm-dashboard/src/components/top_key_view.tsx b/ui/litellm-dashboard/src/components/top_key_view.tsx index 43565330144..2e793ffe28e 100644 --- a/ui/litellm-dashboard/src/components/top_key_view.tsx +++ b/ui/litellm-dashboard/src/components/top_key_view.tsx @@ -7,6 +7,7 @@ import { DataTable } from "./view_logs/table" import { Tooltip } from "antd" import { Button } from "@tremor/react" import { formatNumberWithCommas } from "../utils/dataUtils" +import { TagUsage } from "./usage/types" interface TopKeyViewProps { topKeys: any[] @@ -95,20 +96,30 @@ const TopKeyView: React.FC = ({ topKeys, accessToken, userID, u header: "Tags", accessorKey: "tags", cell: (info: any) => { - const tags = info.getValue() as string[] | undefined; + const tags = info.getValue() as TagUsage[] | undefined; if (!tags || tags.length === 0) { return "-"; } return (
- {tags.map((tag, index) => ( - - - {tag.slice(0, 7)}... - - - ))} + {tags + .sort((a, b) => b.usage - a.usage) + .map((tag, index) => ( + +
TAG NAME: {tag.tag}
+
SPEND: {tag.usage > 0 && tag.usage < 0.01 ? '<$0.01' : `$${formatNumberWithCommas(tag.usage, 2)}`}
+
+ } + > + + {tag.tag.slice(0, 7)}... + + + ))} ); } diff --git a/ui/litellm-dashboard/src/components/usage/types.ts b/ui/litellm-dashboard/src/components/usage/types.ts index 3848ba2e18b..b7c5ecb9ae7 100644 --- a/ui/litellm-dashboard/src/components/usage/types.ts +++ b/ui/litellm-dashboard/src/components/usage/types.ts @@ -39,7 +39,7 @@ export interface KeyMetricWithMetadata { export interface KeyMetadata { key_alias: string | null team_id: string | null - tags?: string[] + tags?: {tag:string,usage:number}[] } export interface TopApiKeyData { @@ -88,3 +88,8 @@ export interface EntityMetricWithMetadata { metrics: SpendMetrics metadata: EntityMetadata } + +export interface TagUsage { + tag: string + usage: number +}