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

ui - show teams as dropdown in create user flow

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-19 15:07:13 -07:00
parent f220a337bd
commit 559a312c9c
3 changed files with 20 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -145,6 +145,7 @@ const CreateKeyPage = () => {
userRole={userRole}
token={token}
keys={keys}
teams={teams}
accessToken={accessToken}
setKeys={setKeys}
/>

42
ui/litellm-dashboard/src/components/create_user_button.tsx
View file

@ -7,9 +7,10 @@ const { Option } = Select;
interface CreateuserProps {
userID: string;
accessToken: string;
teams: any[] | null;
}
const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken, teams }) => {
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
const [apiuser, setApiuser] = useState<string | null>(null);
@ -90,38 +91,27 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
wrapperCol={{ span: 16 }}
labelAlign="left"
>
<Form.Item label="User ID" name="user_id">
<Input placeholder="Enter User ID" />
<Form.Item label="User Email" name="user_email">
<Input placeholder="Enter User Email" />
</Form.Item>
<Form.Item label="Team ID" name="team_id">
<Input placeholder="ai_team" />
</Form.Item>
<Form.Item label="Models" name="models">
<Select
mode="multiple"
placeholder="Select models"
<Select
placeholder="Select Team ID"
style={{ width: "100%" }}
>
{userModels.map((model) => (
<Option key={model} value={model}>
{model}
{teams ? (
teams.map((team: any) => (
<Option key={team.team_id} value={team.team_id}>
{team.team_alias}
</Option>
))
) : (
<Option key="default" value={null}>
Default Team
</Option>
))}
)}
</Select>
</Form.Item>
<Form.Item label="Max Budget (USD)" name="max_budget">
<InputNumber step={0.01} precision={2} width={200} />
</Form.Item>
<Form.Item label="Tokens per minute Limit (TPM)" name="tpm_limit">
<InputNumber step={1} width={400} />
</Form.Item>
<Form.Item label="Requests per minute Limit (RPM)" name="rpm_limit">
<InputNumber step={1} width={400} />
</Form.Item>
<Form.Item label="Duration (eg: 30s, 30h, 30d)" name="duration">
<Input />
</Form.Item>
<Form.Item label="Metadata" name="metadata">
<Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
</Form.Item>

4
ui/litellm-dashboard/src/components/view_users.tsx
View file

@ -36,6 +36,7 @@ interface ViewUserDashboardProps {
keys: any[] | null;
userRole: string | null;
userID: string | null;
teams: any[] | null;
setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
}
@ -45,6 +46,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
keys,
userRole,
userID,
teams,
setKeys,
}) => {
const [userData, setUserData] = useState<null | any[]>(null);
@ -151,7 +153,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
return (
<div style={{ width: "100%" }}>
<Grid className="gap-2 p-2 h-[75vh] w-full mt-8">
<CreateUser userID={userID} accessToken={accessToken} />
<CreateUser userID={userID} accessToken={accessToken} teams={teams}/>
<Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh] mb-4">
<TabGroup>
<TabList variant="line" defaultValue="1">