spend data in tags tooltip

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<EntityUsageProps> = ({
       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;

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<TopKeyViewProps> = ({ 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 (
         <div className="overflow-hidden">
-          {tags.map((tag, index) => (
-            <Tooltip key={index} title={tag}>
-              <span className="px-2 py-1 bg-gray-100 rounded-full text-xs mr-1">
-                {tag.slice(0, 7)}...
-              </span>
-            </Tooltip>
-          ))}
+            {tags
+              .sort((a, b) => b.usage - a.usage)
+              .map((tag, index) => (
+              <Tooltip 
+                key={index} 
+                title={
+                  <div>
+                    <div><span className="text-gray-300">TAG NAME:</span> {tag.tag}</div>
+                    <div><span className="text-gray-300">SPEND:</span> {tag.usage > 0 && tag.usage < 0.01 ? '<$0.01' : `$${formatNumberWithCommas(tag.usage, 2)}`}</div>
+                  </div>
+                }
+              >
+                <span className="px-2 py-1 bg-gray-100 rounded-full text-xs mr-1">
+                  {tag.tag.slice(0, 7)}...
+                </span>
+              </Tooltip>
+            ))}
         </div>
       );
     }

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
+}