clean up usage tab

This commit is contained in:
Ishaan Jaff 2024-05-08 18:06:31 -07:00
parent f5f5bebe49
commit 0260addeac

View file

@ -375,7 +375,12 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Grid> </Grid>
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<DateRangePicker <p className="mb-2 text-gray-500 italic text-[12px]">End-Users of your LLM API calls. Tracked when a `user` param is passed in your LLM calls <a className="text-blue-500" href="https://docs.litellm.ai/docs/proxy/users" target="_blank">docs here</a></p>
<Grid numItems={2}>
<Col>
<Text>Select Time Range</Text>
<DateRangePicker
enableSelect={true} enableSelect={true}
value={dateValue} value={dateValue}
onValueChange={(value) => { onValueChange={(value) => {
@ -383,8 +388,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range
}} }}
/> />
<Text className="w-1/4 mr-2 text-right">Key</Text> </Col>
<Select defaultValue="1" className="w-3/4"> <Col>
<Text>Select Key</Text>
<Select defaultValue="1">
{keys?.map((key: any, index: number) => { {keys?.map((key: any, index: number) => {
if ( if (
key && key &&
@ -407,7 +414,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
return null; // Add this line to handle the case when the condition is not met return null; // Add this line to handle the case when the condition is not met
})} })}
</Select> </Select>
<Text className="mt-4">End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls</Text> </Col>
</Grid>
<Card className="mt-4"> <Card className="mt-4">