diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json index 2301b806348..9ab39c57bfd 100644 --- a/ui/litellm-dashboard/package-lock.json +++ b/ui/litellm-dashboard/package-lock.json @@ -4092,6 +4092,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz", "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==", + "license": "MIT", "peerDependencies": { "react": ">= 16" } diff --git a/ui/litellm-dashboard/src/components/top_key_view.tsx b/ui/litellm-dashboard/src/components/top_key_view.tsx index 2e793ffe28e..39e66f7f77c 100644 --- a/ui/litellm-dashboard/src/components/top_key_view.tsx +++ b/ui/litellm-dashboard/src/components/top_key_view.tsx @@ -8,6 +8,7 @@ import { Tooltip } from "antd" import { Button } from "@tremor/react" import { formatNumberWithCommas } from "../utils/dataUtils" import { TagUsage } from "./usage/types" +import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/outline" interface TopKeyViewProps { topKeys: any[] @@ -24,6 +25,19 @@ const TopKeyView: React.FC = ({ topKeys, accessToken, userID, u const [selectedKey, setSelectedKey] = useState(null) const [keyData, setKeyData] = useState(undefined) const [viewMode, setViewMode] = useState<"chart" | "table">("table") + const [expandedTags, setExpandedTags] = useState>(new Set()) + + const toggleTagsExpansion = (apiKey: string) => { + setExpandedTags(prev => { + const newSet = new Set(prev) + if (newSet.has(apiKey)) { + newSet.delete(apiKey) + } else { + newSet.add(apiKey) + } + return newSet + }) + } const handleKeyClick = async (item: any) => { if (!accessToken) return @@ -97,29 +111,49 @@ const TopKeyView: React.FC = ({ topKeys, accessToken, userID, u accessorKey: "tags", cell: (info: any) => { const tags = info.getValue() as TagUsage[] | undefined; + const apiKey = info.row.original.api_key; + const isExpanded = expandedTags.has(apiKey); + if (!tags || tags.length === 0) { return "-"; } + const sortedTags = tags.sort((a, b) => b.usage - a.usage); + const displayTags = isExpanded ? sortedTags : sortedTags.slice(0, 2); + const hasMoreTags = tags.length > 2; + return (
- {tags - .sort((a, b) => b.usage - a.usage) - .map((tag, index) => ( +
+ {displayTags.map((tag, index) => ( -
TAG NAME: {tag.tag}
-
SPEND: {tag.usage > 0 && tag.usage < 0.01 ? '<$0.01' : `$${formatNumberWithCommas(tag.usage, 2)}`}
+
Tag Name: {tag.tag}
+
Spend: {tag.usage > 0 && tag.usage < 0.01 ? '<$0.01' : `$${formatNumberWithCommas(tag.usage, 2)}`}
} > - + {tag.tag.slice(0, 7)}... ))} + {hasMoreTags && ( + + )} +
); }