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