ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3218 from BerriAI/ui_cleanup_text_input

Browse Source 
[UI-Polish] Cleanup Inputing Key Name, Team Name, User Email
This commit is contained in:
Ishaan Jaff 2024-04-22 14:20:29 -07:00 committed by GitHub
commit 4fbb92e9e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 31 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
ui/litellm-dashboard/src/components/create_key_button.tsx
View File

@ -116,7 +116,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
wrapperCol={{ span: 16 }}
labelAlign="left"
>
{userRole === "App Owner" || userRole === "Admin" ? (
<>
<Form.Item
label="Key Name"
@ -124,7 +123,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
rules={[{ required: true, message: 'Please input a key name' }]}
help="required"
>
<Input />
<TextInput placeholder="" />
</Form.Item>
<Form.Item
label="Team ID"
@ -188,147 +187,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
</Select>
</Form.Item>
<Form.Item
className="mt-8"
label="Max Budget (USD)"
name="max_budget"
help={`Budget cannot exceed team max budget: $${team?.max_budget !== null && team?.max_budget !== undefined ? team?.max_budget : 'unlimited'}`}
rules={[
{
validator: async (_, value) => {
if (value && team && team.max_budget !== null && value > team.max_budget) {
throw new Error(`Budget cannot exceed team max budget: $${team.max_budget}`);
}
},
},
]}
>
<InputNumber step={0.01} precision={2} width={200} />
</Form.Item>
<Form.Item
className="mt-8"
label="Reset Budget"
name="budget_duration"
help={`Team Reset Budget: ${team?.budget_duration !== null && team?.budget_duration !== undefined ? team?.budget_duration : 'None'}`}
>
<Select defaultValue={null} placeholder="n/a">
<Select.Option value="24h">daily</Select.Option>
<Select.Option value="30d">monthly</Select.Option>
</Select>
</Form.Item>
<Form.Item
className="mt-8"
label="Tokens per minute Limit (TPM)"
name="tpm_limit"
help={`TPM cannot exceed team TPM limit: ${team?.tpm_limit !== null && team?.tpm_limit !== undefined ? team?.tpm_limit : 'unlimited'}`}
rules={[
{
validator: async (_, value) => {
if (value && team && team.tpm_limit !== null && value > team.tpm_limit) {
throw new Error(`TPM limit cannot exceed team TPM limit: ${team.tpm_limit}`);
}
},
},
]}
>
<InputNumber step={1} width={400} />
</Form.Item>
<Form.Item
className="mt-8"
label="Requests per minute Limit (RPM)"
name="rpm_limit"
help={`RPM cannot exceed team RPM limit: ${team?.rpm_limit !== null && team?.rpm_limit !== undefined ? team?.rpm_limit : 'unlimited'}`}
rules={[
{
validator: async (_, value) => {
if (value && team && team.rpm_limit !== null && value > team.rpm_limit) {
throw new Error(`RPM limit cannot exceed team RPM limit: ${team.rpm_limit}`);
}
},
},
]}
>
<InputNumber step={1} width={400} />
</Form.Item>
<Form.Item label="Expire Key (eg: 30s, 30h, 30d)" name="duration" className="mt-8">
<Input />
</Form.Item>
<Form.Item label="Metadata" name="metadata">
<Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
</Form.Item>
</>
) : (
<>
<Form.Item
label="Key Name"
name="key_alias"
rules={[{ required: true, message: 'Please input a key name' }]}
help="required"
>
<Input />
</Form.Item>
<Form.Item
label="Team ID"
name="team_id"
hidden={true}
initialValue={team ? team["team_id"] : null}
valuePropName="team_id"
className="mt-8"
>
<Input value={team ? team["team_alias"] : ""} disabled />
</Form.Item>
<Form.Item
label="Models"
name="models"
className="mb-12"
rules={[{ required: true, message: 'Please select a model' }]}
help="required"
>
<Select
mode="multiple"
placeholder="Select models"
style={{ width: "100%" }}
onChange={(values) => {
const isAllTeamModelsSelected = values.includes("all-team-models");
if (isAllTeamModelsSelected) {
const newValues = ["all-team-models"];
form.setFieldsValue({ models: newValues });
}
}}
>
<Option key="all-team-models" value="all-team-models">
All Team Models
</Option>
{team && team.models ? (
team.models.includes("all-proxy-models") ? (
userModels.map((model: string) => (
(
<Option key={model} value={model}>
{model}
</Option>
)
))
) : (
team.models.map((model: string) => (
<Option key={model} value={model}>
{model}
</Option>
))
)
) : (
userModels.map((model: string) => (
<Option key={model} value={model}>
{model}
</Option>
))
)}
</Select>
</Form.Item>
<Accordion className="mt-20 mb-8" >
<AccordionHeader>
<b>Optional Settings</b>
@ -397,7 +255,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
<InputNumber step={1} width={400} />
</Form.Item>
<Form.Item label="Expire Key (eg: 30s, 30h, 30d)" name="duration" className="mt-8">
<Input />
<TextInput placeholder="" />
</Form.Item>
<Form.Item label="Metadata" name="metadata">
<Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
@ -405,9 +263,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
</AccordionBody>
</Accordion>
</>
)}
<div style={{ textAlign: "right", marginTop: "10px" }}>
<Button2 htmlType="submit">Create Key</Button2>
</div>

4
ui/litellm-dashboard/src/components/create_user_button.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { Button, Modal, Form, Input, message, Select, InputNumber } from "antd";
import { Button as Button2, Text } from "@tremor/react";
import { Button as Button2, Text, TextInput } from "@tremor/react";
import { userCreateCall, modelAvailableCall } from "./networking";
const { Option } = Select;
@ -94,7 +94,7 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken, teams }) =
labelAlign="left"
>
<Form.Item label="User Email" name="user_email">
<Input placeholder="Enter User Email" />
<TextInput placeholder="" />
</Form.Item>
<Form.Item label="Team ID" name="team_id">
<Select

36
ui/litellm-dashboard/src/components/leftnav.tsx
View File

@ -46,8 +46,8 @@ const Sidebar: React.FC<SidebarProps> = ({
);
}
return (
<Layout style={{ minHeight: "100vh", maxWidth: "130px" }}>
<Sider width={130}>
<Layout style={{ minHeight: "100vh", maxWidth: "145px" }}>
<Sider width={145}>
<Menu
mode="inline"
defaultSelectedKeys={defaultSelectedKey ? defaultSelectedKey : ["1"]}
@ -64,11 +64,7 @@ const Sidebar: React.FC<SidebarProps> = ({
</Text>
</Menu.Item>
<Menu.Item key="11" onClick={() => setPage("api_ref")}>
<Text>
API Reference
</Text>
</Menu.Item>
{
userRole == "Admin" ? (
@ -79,15 +75,6 @@ const Sidebar: React.FC<SidebarProps> = ({
</Menu.Item>
) : null
}
{userRole == "Admin" ? (
<Menu.Item key="6" onClick={() => setPage("teams")}>
<Text>
Teams
</Text>
</Menu.Item>
) : null}
{
userRole == "Admin" ? (
<Menu.Item key="4" onClick={() => setPage("usage")}>
@ -98,6 +85,16 @@ const Sidebar: React.FC<SidebarProps> = ({
) : null
}
{userRole == "Admin" ? (
<Menu.Item key="6" onClick={() => setPage("teams")}>
<Text>
Teams
</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="5" onClick={() => setPage("users")}>
@ -111,7 +108,7 @@ const Sidebar: React.FC<SidebarProps> = ({
userRole == "Admin" ? (
<Menu.Item key="8" onClick={() => setPage("settings")}>
<Text>
Integrations
Logging & Alerts
</Text>
</Menu.Item>
) : null
@ -134,6 +131,11 @@ const Sidebar: React.FC<SidebarProps> = ({
</Text>
</Menu.Item>
) : null}
<Menu.Item key="11" onClick={() => setPage("api_ref")}>
<Text>
API Reference
</Text>
</Menu.Item>
</Menu>
</Sider>
</Layout>

6
ui/litellm-dashboard/src/components/navbar.tsx
View File

@ -55,11 +55,11 @@ const Navbar: React.FC<NavbarProps> = ({
<div className="text-left my-2 absolute top-0 left-0">
<div className="flex flex-col items-center">
<Link href="/">
<button className="text-gray-800 text-2xl py-1 rounded text-center">
<button className="text-gray-800 rounded text-center">
<img
src={imageUrl}
width={200}
height={200}
width={160}
height={160}
alt="LiteLLM Brand"
className="mr-2"
/>

3
ui/litellm-dashboard/src/components/teams.tsx
View File

@ -20,6 +20,7 @@ import {
TableHead,
TableHeaderCell,
TableRow,
TextInput,
Card,
Icon,
Button,
@ -480,7 +481,7 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
name="team_alias"
rules={[{ required: true, message: 'Please input a team name' }]}
>
<Input />
<TextInput placeholder="" />
</Form.Item>
<Form.Item label="Models" name="models">
<Select2

3
ui/litellm-dashboard/src/components/view_users.tsx
View File

@ -21,7 +21,8 @@ import {
SelectItem,
Dialog,
DialogPanel,
Icon
Icon,
TextInput,
} from "@tremor/react";
import { userInfoCall, adminTopEndUsersCall } from "./networking";
import { Badge, BadgeDelta, Button } from "@tremor/react";