tiennm99/litellm
1
0
Fork 0
mirror of https://github.com/tiennm99/litellm.git synced 2026-07-13 23:07:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2303 from BerriAI/litellm_ui_soft_budgets

Browse Source 
[FEAT] Admin UI - set soft budgets on Admin UI
This commit is contained in:
Ishaan Jaff
2024-03-02 15:54:12 -08:00
committed by GitHub
parent 603945f657 709c2518e7
commit b7bf64eccf
2 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/components/create_key_button.tsx
+34 -17
View File
@@ -2,7 +2,7 @@
import React, { useState, useEffect, useRef } from "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 {
Button as Button2,
Modal,
@@ -38,6 +38,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
const [apiKey, setApiKey] = useState(null);
const [softBudget, setSoftBudget] = useState(null);
const handleOk = () => {
setIsModalVisible(false);
form.resetFields();
@@ -54,8 +55,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
message.info("Making API Call");
setIsModalVisible(true);
const response = await keyCreateCall(accessToken, userID, formValues);
console.log("key create Response:", response);
setData((prevData) => (prevData ? [...prevData, response] : [response])); // Check if prevData is null
setApiKey(response["key"]);
setSoftBudget(response["soft_budget"]);
message.success("API Key Created");
form.resetFields();
localStorage.removeItem("userData" + userID);
@@ -108,6 +112,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({
))}
</Select>
</Form.Item>
<Form.Item label="Soft Budget (USD) Monthly" name="soft_budget" initialValue={50.00}>
<InputNumber step={0.01} precision={2} defaultValue={50.00} width={200} />
</Form.Item>
<Form.Item label="Max Budget (USD)" name="max_budget">
<InputNumber step={0.01} precision={2} width={200} />
</Form.Item>
@@ -154,28 +161,38 @@ const CreateKey: React.FC<CreateKeyProps> = ({
</Modal>
{apiKey && (
<Modal
title="Save your key"
visible={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
footer={null}
>
<Grid numItems={1} className="gap-2 w-full">
<Col numColSpan={1}>
<p>
Please save this secret key somewhere safe and accessible. For
security reasons, <b>you will not be able to view it again</b>{" "}
through your LiteLLM account. If you lose this secret key, you
will need to generate a new one.
</p>
</Col>
<Col numColSpan={1}>
{apiKey != null ? (
<Text>API Key: {apiKey}</Text>
) : (
<Text>Key being created, this might take 30s</Text>
)}
</Col>
<Card>
<Title>Save your Key</Title>
<Col numColSpan={1}>
<p>
Please save this secret key somewhere safe and accessible. For
security reasons, <b>you will not be able to view it again</b>{" "}
through your LiteLLM account. If you lose this secret key, you
will need to generate a new one.
</p>
</Col>
<Col numColSpan={1}>
{apiKey != null ? (
<div>
<Text>API Key: {apiKey}</Text>
<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>
</Modal>
)}
ui/litellm-dashboard/src/components/view_key_spend_report.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
return (
<div>
<Button size = "xs" onClick={showModal}>
<Button size = "xs" onClick={showModal} variant="secondary">
View Spend Report
</Button>
<Modal