phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-27 19:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui - show global activity

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-25 12:22:10 -07:00
parent 19b1ac7c82
commit f083444719
2 changed files with 76 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
ui/litellm-dashboard/src/components/usage.tsx
View file

@ -25,6 +25,7 @@ import {
modelInfoCall,
adminspendByProvider,
adminGlobalActivity,
adminGlobalActivityPerModel,
} from "./networking";
import { start } from "repl";
@ -126,6 +127,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
const [spendByProvider, setSpendByProvider] = useState<any[]>([]);
const [globalActivity, setGlobalActivity] = useState<any[]>([]);
const [globalActivityPerModel, setGlobalActivityPerModel] = useState<any[]>([]);
const [selectedKeyID, setSelectedKeyID] = useState<string | null>("");
const [dateValue, setDateValue] = useState<DateRangePickerValue>({
from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
@ -277,6 +279,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
let global_activity_response = await adminGlobalActivity(accessToken, startTime, endTime);
setGlobalActivity(global_activity_response)
let global_activity_per_model = await adminGlobalActivityPerModel(accessToken, startTime, endTime);
console.log("global activity per model", global_activity_per_model);
setGlobalActivityPerModel(global_activity_per_model)
} else if (userRole == "App Owner") {
await userSpendLogsCall(
@ -453,6 +459,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['api_requests']}
onValueChange={(v) => console.log(v)}
/>
@ -464,6 +471,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['total_tokens']}
onValueChange={(v) => console.log(v)}
/>
@ -472,6 +480,38 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Card>
{globalActivityPerModel.map((globalActivity, index) => (
<Card key={index}>
<Title>{globalActivity.model}</Title>
<Grid numItems={2}>
<Col>
<Subtitle>API Requests {globalActivity.sum_api_requests}</Subtitle>
<AreaChart
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['api_requests']}
onValueChange={(v) => console.log(v)}
/>
</Col>
<Col>
<Subtitle>Tokens {globalActivity.sum_total_tokens}</Subtitle>
<BarChart
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['total_tokens']}
onValueChange={(v) => console.log(v)}
/>
</Col>
</Grid>
</Card>
))}
</Grid>
</TabPanel>
</TabPanels>