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

fix: make token breakdown cards click-to-expand on Total Tokens card

Browse Source
This commit is contained in:
Ryan Crabbe
2026-03-11 16:52:25 -07:00
parent af7609d856
commit 7e1c860ffe
2 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx
+2
View File
@@ -249,6 +249,8 @@ vi.mock("@ant-design/icons", async () => {
CalendarOutlined: Icon,
InfoCircleOutlined: Icon,
UserOutlined: Icon,
DownOutlined: Icon,
RightOutlined: Icon,
LoadingOutlined,
};
});
ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+49 -36
View File
@@ -6,7 +6,7 @@
* Works at 1m+ spend logs, by querying an aggregate table instead.
*/
import { InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
import { DownOutlined, InfoCircleOutlined, LoadingOutlined, RightOutlined } from "@ant-design/icons";
import {
BarChart,
Card,
@@ -148,6 +148,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
const [showCredentialBanner, setShowCredentialBanner] = useState(true);
const [topKeysLimit, setTopKeysLimit] = useState<number>(5);
const [topModelsLimit, setTopModelsLimit] = useState<number>(5);
const [showTokenBreakdown, setShowTokenBreakdown] = useState(false);
const getAllTags = async () => {
if (!accessToken) {
return;
@@ -640,47 +641,59 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
)}
</Text>
</Card>
<Card>
<Title>Total Tokens</Title>
<Card
className="cursor-pointer hover:bg-gray-50 transition-colors"
onClick={() => setShowTokenBreakdown(!showTokenBreakdown)}
>
<div className="flex items-center gap-2">
<Title>Total Tokens</Title>
{showTokenBreakdown ? (
<DownOutlined className="text-gray-400 text-xs" />
) : (
<RightOutlined className="text-gray-400 text-xs" />
)}
</div>
<Text className="text-2xl font-bold mt-2">
{userSpendData.metadata?.total_tokens?.toLocaleString() || 0}
</Text>
</Card>
</Grid>
<div className="flex justify-center gap-4 mt-4">
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Input Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-blue-600">
{userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
</Text>
</Card>
{showTokenBreakdown && (
<div className="flex justify-center gap-4 mt-4">
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Input Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-blue-600">
{userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Output Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-cyan-600">
{userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Read Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-green-600">
{userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Write Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-purple-600">
{userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Output Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-cyan-600">
{userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Read Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-green-600">
{userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Write Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-purple-600">
{userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
</div>
)}
</Card>
</Col>