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 - sort models by latency

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-17 16:33:08 -07:00
parent 36b2d51e48
commit dd7b60089c
1 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -145,6 +145,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
const [modelMetrics, setModelMetrics] = useState<any[]>([]);
const [modelLatencyMetrics, setModelLatencyMetrics] = useState<any[]>([]);
const firstDay = new Date(
currentDate.getFullYear(),
@ -271,7 +272,13 @@ const UsagePage: React.FC<UsagePageProps> = ({
);
console.log("Model metrics response:", modelMetricsResponse);
// Sort by latency (avg_latency_seconds)
const sortedByLatency = [...modelMetricsResponse].sort((a, b) => b.avg_latency_seconds - a.avg_latency_seconds);
console.log("Sorted by latency:", sortedByLatency);
setModelMetrics(modelMetricsResponse);
setModelLatencyMetrics(sortedByLatency);
} catch (error) {
console.error("There was an error fetching the data", error);
// Optionally, update your UI to reflect the error state here as well
@ -434,6 +441,8 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Col>
</Grid>
</TabPanel>
<TabPanel>
<Card>
<Title>Number Requests per Model</Title>
<BarChart
@ -446,10 +455,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
tickGap={5}
/>
</Card>
<Card>
<Card className="mt-4">
<Title>Latency Per Model</Title>
<BarChart
data={modelMetrics}
data={modelLatencyMetrics}
index="model"
categories={["avg_latency_seconds"]}
colors={["red"]}
@ -458,7 +467,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
tickGap={5}
/>
</Card>
<TabPanel>
</TabPanel>
</TabPanels>