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

feat - put filtering by tags as a enterprise only feature

Browse source
This commit is contained in:
Ishaan Jaff 2024-06-03 16:38:44 -07:00
parent d00f02a75a
commit 2e51703c0b
1 changed files with 75 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,8 +13,13 @@ import {
Callout,
Button,
MultiSelect,
MultiSelectItem
MultiSelectItem,
} from "@tremor/react";
import {
Select as Select2
} from "antd";
import {
userSpendLogsCall,
keyInfoCall,
@ -771,32 +776,75 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Col>
<Col>
{
premiumUser ? (
<div>
<MultiSelect
value={selectedTags}
onValueChange={(value) => setSelectedTags(value as string[])}
>
<MultiSelectItem
key={"all-tags"}
value={"all-tags"}
onClick={() => setSelectedTags(["all-tags"])}
>
All Tags
</MultiSelectItem>
{allTagNames &&
allTagNames
.filter((tag) => tag !== "all-tags")
.map((tag: any, index: number) => {
return (
<MultiSelectItem
key={tag}
value={String(tag)}
>
{tag}
</MultiSelectItem>
);
})}
</MultiSelect>
<MultiSelect
value={selectedTags}
onValueChange={(value) => setSelectedTags(value as string[])}
>
<MultiSelectItem
key={"all-tags"}
value={"all-tags"}
onClick={() => setSelectedTags(["all-tags"])}
>
All Tags
</MultiSelectItem>
{allTagNames &&
allTagNames
.filter((tag) => tag !== "all-tags")
.map((tag: any, index: number) => {
return (
<MultiSelectItem
key={tag}
value={String(tag)}
>
{tag}
</MultiSelectItem>
);
})}
</MultiSelect>
</div>
) : (
<div>
<MultiSelect
value={selectedTags}
onValueChange={(value) => setSelectedTags(value as string[])}
>
<MultiSelectItem
key={"all-tags"}
value={"all-tags"}
onClick={() => setSelectedTags(["all-tags"])}
>
All Tags
</MultiSelectItem>
{allTagNames &&
allTagNames
.filter((tag) => tag !== "all-tags")
.map((tag: any, index: number) => {
// @ts-ignore
return (
<SelectItem
key={tag}
value={String(tag)}
disabled={true} // @ts-ignore
>
✨ {tag} (Enterpise only Feature)
</SelectItem>
);
})}
</MultiSelect>
</div>
)
}
</Col>
</Grid>
@ -807,7 +855,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Card>
<Title>Spend Per Tag</Title>
<Text>Get Started Tracking cost per tag <a className="text-blue-500" href="https://docs.litellm.ai/docs/proxy/enterprise#tracking-spend-for-custom-tags" target="_blank">here</a></Text>
<Text>Get Started Tracking cost per tag <a className="text-blue-500" href="https://docs.litellm.ai/docs/proxy/cost_tracking" target="_blank">here</a></Text>
<BarChart
className="h-72"
data={topTagsData}