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

(feat) ui - conditionally show form based on userRole

Browse source
This commit is contained in:
ishaan-jaff 2024-02-03 12:50:30 -08:00
parent 59790c6cef
commit 6de6774509
2 changed files with 54 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,7 @@ const { Option } = Select;
interface CreateKeyProps { interface CreateKeyProps {
userID: string; userID: string;
userRole: string;
accessToken: string; accessToken: string;
data: any[] | null; data: any[] | null;
setData: React.Dispatch<React.SetStateAction<any[] | null>>; setData: React.Dispatch<React.SetStateAction<any[] | null>>;
@ -18,6 +19,7 @@ interface CreateKeyProps {
const CreateKey: React.FC<CreateKeyProps> = ({ const CreateKey: React.FC<CreateKeyProps> = ({
userID, userID,
userRole,
accessToken, accessToken,
data, data,
setData, setData,
@ -80,45 +82,56 @@ const CreateKey: React.FC<CreateKeyProps> = ({
name="key_alias" name="key_alias"
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item
label="Team ID"
name="team_id"
>
<Input placeholder="ai_team" />
</Form.Item>
<Form.Item <Form.Item
label="Models (Comma Separated). Eg: gpt-3.5-turbo,gpt-4" label="Description"
name="models" name="description"
> >
<Input placeholder="gpt-4,gpt-3.5-turbo" /> <Input placeholder="ai_team" />
</Form.Item> </Form.Item>
<Form.Item {userRole === 'App Owner' || userRole === 'Admin' ? (
label="Max Budget (USD)" <>
name="max_budget" <Form.Item
> label="Models (Comma Separated). Eg: gpt-3.5-turbo,gpt-4"
<InputNumber step={0.01} precision={2} width={200}/> name="models"
</Form.Item> >
<Form.Item <Input placeholder="gpt-4,gpt-3.5-turbo" />
label="Duration (eg: 30s, 30h, 30d)" </Form.Item>
name="duration"
>
<Input /> <Form.Item
</Form.Item> label="Max Budget (USD)"
<Form.Item name="max_budget"
label="Team ID" >
name="team_id" <InputNumber step={0.01} precision={2} width={200}/>
> </Form.Item>
<Input placeholder="ai_team" /> <Form.Item
</Form.Item> label="Duration (eg: 30s, 30h, 30d)"
<Form.Item name="duration"
label="Metadata" >
name="metadata" <Input />
> </Form.Item>
<Input.TextArea rows={4} placeholder="Enter metadata as JSON" /> <Form.Item
</Form.Item> label="Metadata"
<div style={{ textAlign: 'right', marginTop: '10px' }}> name="metadata"
<Button2 htmlType="submit"> >
Create Key <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
</Button2> </Form.Item>
</div> </>
) : null}
<div style={{ textAlign: 'right', marginTop: '10px' }}>
<Button2 htmlType="submit">
Create Key
</Button2>
</div>
</Form> </Form>
</Modal> </Modal>
{apiKey && ( {apiKey && (

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

@ -31,6 +31,8 @@ const UserDashboard = () => {
switch (userRole.toLowerCase()) { switch (userRole.toLowerCase()) {
case "app_owner": case "app_owner":
return "App Owner"; return "App Owner";
case "demo_app_owner":
return "AppOwner";
case "admin": case "admin":
return "Admin"; return "Admin";
case "app_user": case "app_user":
@ -104,12 +106,14 @@ const UserDashboard = () => {
<Col numColSpan={1}> <Col numColSpan={1}>
<ViewKeyTable <ViewKeyTable
userID={userID} userID={userID}
userRole={userRole}
accessToken={accessToken} accessToken={accessToken}
data={data} data={data}
setData={setData} setData={setData}
/> />
<CreateKey <CreateKey
userID={userID} userID={userID}
userRole={userRole}
accessToken={accessToken} accessToken={accessToken}
data={data} data={data}
setData={setData} setData={setData}