mirror of
https://github.com/BerriAI/litellm.git
synced 2026-10-08 03:08:45 +00:00
feat(ui): add StatsBar component
This commit is contained in:
parent
17fb025b3a
commit
13b37f634f
1 changed files with 29 additions and 0 deletions
|
|
@ -0,0 +1,29 @@
|
|||
"use client";
|
||||
import React from "react";
|
||||
|
||||
interface StatsBarProps {
|
||||
requests: number;
|
||||
successRate: number; // 0-100
|
||||
avgLatencyMs: number;
|
||||
fallbackCount: number;
|
||||
}
|
||||
|
||||
export default function StatsBar({ requests, successRate, avgLatencyMs, fallbackCount }: StatsBarProps) {
|
||||
const stats = [
|
||||
{ label: "REQUESTS", value: requests.toLocaleString() },
|
||||
{ label: "SUCCESS", value: `${Math.round(successRate)}%` },
|
||||
{ label: "AVG LATENCY", value: avgLatencyMs > 0 ? `${Math.round(avgLatencyMs)}ms` : "—" },
|
||||
{ label: "FALLBACKS", value: fallbackCount.toLocaleString() },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-4 divide-x divide-gray-700 rounded-xl border border-gray-700 bg-[#1a1f2e] px-0">
|
||||
{stats.map(({ label, value }) => (
|
||||
<div key={label} className="flex flex-col items-start gap-1 px-6 py-4">
|
||||
<span className="text-xs font-medium uppercase tracking-widest text-gray-500">{label}</span>
|
||||
<span className="text-2xl font-bold text-white">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue