scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-04 02:31:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 70

feat(ui): activity_metrics antd Collapse \u2192 shadcn Accordion (charts preserved)

Browse source 
- antd Collapse/Collapse.Panel \u2192 shadcn Accordion/AccordionItem/
  AccordionTrigger/AccordionContent (type='multiple' so expanding one
  model section doesn't collapse the previously-opened one).
- Header row keeps the right-aligned spend + request-count split; moved
  pr-2 onto the inner row so it doesn't collide with the chevron.
- @tremor AreaChart/BarChart/Card/Grid/Text/Title preserved \u2014 this is a
  chart-heavy component and the tremor chart primitives have no
  shadcn-equivalent in phase 1 (recharts migration is phase 2).
- Added to .eslintrc.json overrides with an inline eslint-disable on the
  preserved tremor import.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-23 10:25:33 +00:00
parent 52939eb06c
commit 38175a15a5
No known key found for this signature in database
2 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/litellm-dashboard/.eslintrc.json
View file

@ -42,7 +42,8 @@
"src/components/mcp_tools/MCPNetworkSettings.tsx",
"src/components/mcp_tools/ByokCredentialModal.tsx",
"src/components/shared/usage_date_picker.tsx",
"src/components/shared/advanced_date_picker.tsx"
"src/components/shared/advanced_date_picker.tsx",
"src/components/activity_metrics.tsx"
],
"rules": {
"litellm-ui/no-banned-ui-imports": "off",

55
ui/litellm-dashboard/src/components/activity_metrics.tsx
View file

@ -1,7 +1,13 @@
import { formatNumberWithCommas } from "@/utils/dataUtils";
import { resolveTeamAliasFromTeamID } from "@/utils/teamUtils";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import { AreaChart, BarChart, Card, Grid, Text, Title } from "@tremor/react";
import { Collapse } from "antd";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import React from "react";
import { CustomLegend, CustomTooltip } from "./common_components/chartUtils";
import { Team } from "./key_team_helpers/key_list";
@ -322,28 +328,39 @@ export const ActivityMetrics: React.FC<ActivityMetricsProps> = ({ modelMetrics,
</div>
{/* Individual Model Sections */}
<Collapse defaultActiveKey={modelNames[0]}>
<Accordion type="multiple" defaultValue={modelNames.slice(0, 1)}>
{modelNames.map((modelName) => (
<Collapse.Panel
key={modelName}
header={
<div className="flex justify-between items-center w-full">
<Title>{modelMetrics[modelName].label || "Unknown Item"}</Title>
<div className="flex space-x-4 text-sm text-gray-500">
<span>${formatNumberWithCommas(modelMetrics[modelName].total_spend, 2)}</span>
<span>{modelMetrics[modelName].total_requests.toLocaleString()} requests</span>
<AccordionItem key={modelName} value={modelName}>
<AccordionTrigger>
<div className="flex justify-between items-center w-full pr-2">
<Title>
{modelMetrics[modelName].label || "Unknown Item"}
</Title>
<div className="flex space-x-4 text-sm text-muted-foreground">
<span>
$
{formatNumberWithCommas(
modelMetrics[modelName].total_spend,
2,
)}
</span>
<span>
{modelMetrics[modelName].total_requests.toLocaleString()}{" "}
requests
</span>
</div>
</div>
}
>
<ModelSection
modelName={modelName || "Unknown Model"}
metrics={modelMetrics[modelName]}
hidePromptCachingMetrics={hidePromptCachingMetrics}
/>
</Collapse.Panel>
</AccordionTrigger>
<AccordionContent>
<ModelSection
modelName={modelName || "Unknown Model"}
metrics={modelMetrics[modelName]}
hidePromptCachingMetrics={hidePromptCachingMetrics}
/>
</AccordionContent>
</AccordionItem>
))}
</Collapse>
</Accordion>
</div>
);
};