phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

ui - enforce premium features behind a license

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-25 13:13:02 -07:00
parent 50bd6e9a61
commit 50f5184c69
2 changed files with 89 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
ui/litellm-dashboard/src/app/page.tsx
View file

@ -199,6 +199,7 @@ const CreateKeyPage = () => {
token={token} token={token}
accessToken={accessToken} accessToken={accessToken}
keys={keys} keys={keys}
premiumUser={premiumUser}
/> />
)} )}
</div> </div>

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

@ -10,6 +10,8 @@ import {
DateRangePicker, DateRangePickerValue, DateRangePicker, DateRangePickerValue,
DonutChart, DonutChart,
AreaChart, AreaChart,
Callout,
Button,
} from "@tremor/react"; } from "@tremor/react";
import { import {
userSpendLogsCall, userSpendLogsCall,
@ -35,6 +37,7 @@ interface UsagePageProps {
userRole: string | null; userRole: string | null;
userID: string | null; userID: string | null;
keys: any[] | null; keys: any[] | null;
premiumUser: boolean;
} }
interface GlobalActivityData { interface GlobalActivityData {
@ -122,6 +125,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
userRole, userRole,
userID, userID,
keys, keys,
premiumUser,
}) => { }) => {
const currentDate = new Date(); const currentDate = new Date();
const [keySpendData, setKeySpendData] = useState<any[]>([]); const [keySpendData, setKeySpendData] = useState<any[]>([]);
@ -156,6 +160,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
let endTime = formatDate(lastDay); let endTime = formatDate(lastDay);
console.log("keys in usage", keys); console.log("keys in usage", keys);
console.log("premium user in usage", premiumUser);
const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => { const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => {
if (!startTime || !endTime || !accessToken) { if (!startTime || !endTime || !accessToken) {
@ -362,7 +367,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
</TabList> </TabList>
<TabPanels> <TabPanels>
<TabPanel> <TabPanel>
<Grid numItems={2} className="gap-2 h-[75vh] w-full"> <Grid numItems={2} className="gap-2 h-[100vh] w-full">
<Col numColSpan={2}> <Col numColSpan={2}>
<Card> <Card>
<Title>Monthly Spend</Title> <Title>Monthly Spend</Title>
@ -418,6 +423,9 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Col numColSpan={2}> <Col numColSpan={2}>
<Card className="mb-2"> <Card className="mb-2">
<Title>✨ Spend by Provider</Title> <Title>✨ Spend by Provider</Title>
{
premiumUser ? (
<>
<Grid numItems={2}> <Grid numItems={2}>
<Col numColSpan={1}> <Col numColSpan={1}>
<DonutChart <DonutChart
@ -451,6 +459,19 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Table> </Table>
</Col> </Col>
</Grid> </Grid>
</>
) : (
<div>
<p className="mb-2 text-gray-500 italic text-[12px]">Upgrade to use this feature</p>
<Button variant="primary" className="mb-2">
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
Get Free Trial
</a>
</Button>
</div>
)
}
</Card> </Card>
</Col> </Col>
</Grid> </Grid>
@ -488,6 +509,9 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Card> </Card>
{
premiumUser ? (
<>
{globalActivityPerModel.map((globalActivity, index) => ( {globalActivityPerModel.map((globalActivity, index) => (
<Card key={index}> <Card key={index}>
<Title>{globalActivity.model}</Title> <Title>{globalActivity.model}</Title>
@ -517,8 +541,67 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Grid> </Grid>
</Card> </Card>
))} ))}
</>
) :
<>
{globalActivityPerModel && globalActivityPerModel.length > 0 &&
globalActivityPerModel.slice(0, 1).map((globalActivity, index) => (
<Card key={index}>
<Title>✨ Activity by Model</Title>
<p className="mb-2 text-gray-500 italic text-[12px]">Upgrade to see analytics for all models</p>
<Button variant="primary" className="mb-2">
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
Get Free Trial
</a>
</Button>
<Card>
<Title>{globalActivity.model}</Title>
<Grid numItems={2}>
<Col>
<Subtitle
style={{
fontSize: "15px",
fontWeight: "normal",
color: "#535452",
}}
>
API Requests {globalActivity.sum_api_requests}
</Subtitle>
<AreaChart
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['api_requests']}
onValueChange={(v) => console.log(v)}
/>
</Col>
<Col>
<Subtitle
style={{
fontSize: "15px",
fontWeight: "normal",
color: "#535452",
}}
>
Tokens {globalActivity.sum_total_tokens}
</Subtitle>
<BarChart
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['total_tokens']}
onValueChange={(v) => console.log(v)}
/>
</Col>
</Grid>
</Card>
</Card>
))}
</>
}
</Grid> </Grid>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>