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 - filter by selected date time

Browse source
This commit is contained in:
Ishaan Jaff 2024-06-21 14:36:28 -07:00
parent d30cdd82cc
commit e0a2717a19
1 changed files with 60 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

84
ui/litellm-dashboard/src/components/cache_dashboard.tsx
View file

@ -23,6 +23,17 @@ const formatDateWithoutTZ = (date: Date | undefined) => {
return date.toISOString().split('T')[0]; return date.toISOString().split('T')[0];
}; };
function valueFormatterNumbers(number: number) {
const formatter = new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
notation: 'compact',
compactDisplay: 'short',
});
return formatter.format(number);
}
interface CachePageProps { interface CachePageProps {
accessToken: string | null; accessToken: string | null;
token: string | null; token: string | null;
@ -43,8 +54,8 @@ const CacheDashboard: React.FC<CachePageProps> = ({
const [selectedApiKeys, setSelectedApiKeys] = useState([]); const [selectedApiKeys, setSelectedApiKeys] = useState([]);
const [selectedModels, setSelectedModels] = useState([]); const [selectedModels, setSelectedModels] = useState([]);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [cachedResponses, setCachedResponses] = useState(0); const [cachedResponses, setCachedResponses] = useState("0");
const [cachedTokens, setCachedTokens] = useState(0); const [cachedTokens, setCachedTokens] = useState("0");
const [cacheHitRatio, setCacheHitRatio] = useState("0"); const [cacheHitRatio, setCacheHitRatio] = useState("0");
const [dateValue, setDateValue] = useState<DateRangePickerValue>({ const [dateValue, setDateValue] = useState<DateRangePickerValue>({
@ -64,9 +75,31 @@ const CacheDashboard: React.FC<CachePageProps> = ({
fetchData(); fetchData();
}, [accessToken]); }, [accessToken]);
const uniqueApiKeys = [...new Set(data.map((item) => item.api_key))]; const uniqueApiKeys = [...new Set(data.map((item) => item?.api_key ? item.api_key : ""))];
const uniqueModels = [...new Set(data.map((item) => item.model))]; const uniqueModels = [...new Set(data.map((item) => item?.model ? item.model : ""))];
const uniqueCallTypes = [...new Set(data.map((item) => item.call_type))]; const uniqueCallTypes = [...new Set(data.map((item) => item?.call_type ? item.call_type : ""))];
const updateCachingData = async (startTime: Date | undefined, endTime: Date | undefined) => {
if (!startTime || !endTime || !accessToken) {
return;
}
// the endTime put it to the last hour of the selected date
endTime.setHours(23, 59, 59, 999);
// startTime put it to the first hour of the selected date
startTime.setHours(0, 0, 0, 0);
let new_cache_data = await adminGlobalCacheActivity(
accessToken,
formatDateWithoutTZ(startTime),
formatDateWithoutTZ(endTime)
)
setData(new_cache_data);
}
useEffect(() => { useEffect(() => {
console.log("DATA IN CACHE DASHBOARD", data); console.log("DATA IN CACHE DASHBOARD", data);
@ -136,8 +169,8 @@ const CacheDashboard: React.FC<CachePageProps> = ({
}, []); }, []);
// set header cache statistics // set header cache statistics
setCachedResponses(cache_hits); setCachedResponses(valueFormatterNumbers(cache_hits));
setCachedTokens(cached_tokens); setCachedTokens(valueFormatterNumbers(cached_tokens));
if (llm_api_requests > 0) { if (llm_api_requests > 0) {
let cache_hit_ratio = ((cache_hits / llm_api_requests) * 100).toFixed(2); let cache_hit_ratio = ((cache_hits / llm_api_requests) * 100).toFixed(2);
setCacheHitRatio(cache_hit_ratio); setCacheHitRatio(cache_hit_ratio);
@ -152,10 +185,7 @@ const CacheDashboard: React.FC<CachePageProps> = ({
}, [selectedApiKeys, selectedModels, dateValue, data]); }, [selectedApiKeys, selectedModels, dateValue, data]);
return ( return (
<Card> <Card>
<Title>API Activity Dashboard</Title>
<Subtitle>Cache hits vs API requests broken down by call type</Subtitle>
<Grid numItems={3} className="gap-4 mt-4"> <Grid numItems={3} className="gap-4 mt-4">
<Col> <Col>
<MultiSelect <MultiSelect
@ -185,8 +215,12 @@ const CacheDashboard: React.FC<CachePageProps> = ({
</Col> </Col>
<Col> <Col>
<DateRangePicker <DateRangePicker
enableSelect={true}
value={dateValue} value={dateValue}
// onChange={setDateRange} onValueChange={(value) => {
setDateValue(value);
updateCachingData(value.from, value.to);
}}
selectPlaceholder="Select date range" selectPlaceholder="Select date range"
/> />
</Col> </Col>
@ -230,26 +264,28 @@ const CacheDashboard: React.FC<CachePageProps> = ({
</div> </div>
<Subtitle>Cache Hits vs API Requests</Subtitle>
<BarChart <BarChart
className="mt-6" title="Cache Hits vs API Requests"
data={filteredData} data={filteredData}
index="name" index="name"
valueFormatter={valueFormatterNumbers}
categories={["LLM API requests", "Cache hit"]} categories={["LLM API requests", "Cache hit"]}
colors={["blue", "teal"]} colors={["blue", "teal"]}
yAxisWidth={48} yAxisWidth={48}
/> />
<Card> <Subtitle>Cached Completion Tokens vs Generated Completion Tokens</Subtitle>
<BarChart <BarChart
className="mt-6" className="mt-6"
data={filteredData} data={filteredData}
index="name" index="name"
categories={["Generated Completion Tokens", "Cached Completion Tokens"]} valueFormatter={valueFormatterNumbers}
colors={["blue", "teal"]} categories={["Generated Completion Tokens", "Cached Completion Tokens"]}
yAxisWidth={48} colors={["blue", "teal"]}
/> yAxisWidth={48}
</Card> />
</Card> </Card>