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

(feat) set soft limits per key

Browse source
This commit is contained in:
ishaan-jaff 2024-03-02 15:31:59 -08:00
parent 163c8f1c5a
commit 709c2518e7
1 changed files with 32 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

50
ui/litellm-dashboard/src/components/create_key_button.tsx
View file

@ -2,7 +2,7 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { Button, TextInput, Grid, Col } from "@tremor/react"; import { Button, TextInput, Grid, Col } from "@tremor/react";
import { Card, Metric, Text } from "@tremor/react"; import { Card, Metric, Text, Title, Subtitle } from "@tremor/react";
import { import {
Button as Button2, Button as Button2,
Modal, Modal,
@ -38,6 +38,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
const [form] = Form.useForm(); const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false); const [isModalVisible, setIsModalVisible] = useState(false);
const [apiKey, setApiKey] = useState(null); const [apiKey, setApiKey] = useState(null);
const [softBudget, setSoftBudget] = useState(null);
const handleOk = () => { const handleOk = () => {
setIsModalVisible(false); setIsModalVisible(false);
form.resetFields(); form.resetFields();
@ -54,8 +55,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
message.info("Making API Call"); message.info("Making API Call");
setIsModalVisible(true); setIsModalVisible(true);
const response = await keyCreateCall(accessToken, userID, formValues); const response = await keyCreateCall(accessToken, userID, formValues);
console.log("key create Response:", response);
setData((prevData) => (prevData ? [...prevData, response] : [response])); // Check if prevData is null setData((prevData) => (prevData ? [...prevData, response] : [response])); // Check if prevData is null
setApiKey(response["key"]); setApiKey(response["key"]);
setSoftBudget(response["soft_budget"]);
message.success("API Key Created"); message.success("API Key Created");
form.resetFields(); form.resetFields();
localStorage.removeItem("userData" + userID); localStorage.removeItem("userData" + userID);
@ -108,7 +112,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="Soft Budget (USD) Monthly" name="soft_budget"> <Form.Item label="Soft Budget (USD) Monthly" name="soft_budget" initialValue={50.00}>
<InputNumber step={0.01} precision={2} defaultValue={50.00} width={200} /> <InputNumber step={0.01} precision={2} defaultValue={50.00} width={200} />
</Form.Item> </Form.Item>
<Form.Item label="Max Budget (USD)" name="max_budget"> <Form.Item label="Max Budget (USD)" name="max_budget">
@ -157,28 +161,38 @@ const CreateKey: React.FC<CreateKeyProps> = ({
</Modal> </Modal>
{apiKey && ( {apiKey && (
<Modal <Modal
title="Save your key"
visible={isModalVisible} visible={isModalVisible}
onOk={handleOk} onOk={handleOk}
onCancel={handleCancel} onCancel={handleCancel}
footer={null} footer={null}
> >
<Grid numItems={1} className="gap-2 w-full"> <Grid numItems={1} className="gap-2 w-full">
<Col numColSpan={1}> <Card>
<p> <Title>Save your Key</Title>
Please save this secret key somewhere safe and accessible. For <Col numColSpan={1}>
security reasons, <b>you will not be able to view it again</b>{" "} <p>
through your LiteLLM account. If you lose this secret key, you Please save this secret key somewhere safe and accessible. For
will need to generate a new one. security reasons, <b>you will not be able to view it again</b>{" "}
</p> through your LiteLLM account. If you lose this secret key, you
</Col> will need to generate a new one.
<Col numColSpan={1}> </p>
{apiKey != null ? ( </Col>
<Text>API Key: {apiKey}</Text> <Col numColSpan={1}>
) : ( {apiKey != null ? (
<Text>Key being created, this might take 30s</Text> <div>
)} <Text>API Key: {apiKey}</Text>
</Col> <Title className="mt-6">Budgets</Title>
<Text>Soft Limit Budget: ${softBudget}</Text>
<Button className="mt-3">
Test Alert
</Button>
</div>
) : (
<Text>Key being created, this might take 30s</Text>
)}
</Col>
</Card>
</Grid> </Grid>
</Modal> </Modal>
)} )}