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

(feat) ui - show models on create tab

Browse source
This commit is contained in:
Ishaan Jaff 2024-03-19 13:04:03 -07:00
parent 3f3ce3372c
commit d59d21f0fc
1 changed files with 37 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

43
ui/litellm-dashboard/src/components/teams.tsx
View file

@ -31,14 +31,18 @@ interface TeamProps {
searchParams: any; searchParams: any;
accessToken: string | null; accessToken: string | null;
setTeams: React.Dispatch<React.SetStateAction<Object[] | null>>; setTeams: React.Dispatch<React.SetStateAction<Object[] | null>>;
userID: string | null;
userRole: string | null;
} }
import { teamCreateCall, teamMemberAddCall, Member } from "./networking"; import { teamCreateCall, teamMemberAddCall, Member, modelAvailableCall } from "./networking";
const Team: React.FC<TeamProps> = ({ const Team: React.FC<TeamProps> = ({
teams, teams,
searchParams, searchParams,
accessToken, accessToken,
setTeams, setTeams,
userID,
userRole,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [memberForm] = Form.useForm(); const [memberForm] = Form.useForm();
@ -50,6 +54,8 @@ const Team: React.FC<TeamProps> = ({
); );
const [isTeamModalVisible, setIsTeamModalVisible] = useState(false); const [isTeamModalVisible, setIsTeamModalVisible] = useState(false);
const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false); const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
const [userModels, setUserModels] = useState([]);
const handleOk = () => { const handleOk = () => {
setIsTeamModalVisible(false); setIsTeamModalVisible(false);
form.resetFields(); form.resetFields();
@ -70,10 +76,33 @@ const Team: React.FC<TeamProps> = ({
memberForm.resetFields(); memberForm.resetFields();
}; };
useEffect(() => {
const fetchUserModels = async () => {
try {
if (userID === null || userRole === null) {
return;
}
if (accessToken !== null) {
const model_available = await modelAvailableCall(accessToken, userID, userRole);
let available_model_names = model_available["data"].map(
(element: { id: string }) => element.id
);
console.log("available_model_names:", available_model_names);
setUserModels(available_model_names);
}
} catch (error) {
console.error("Error fetching user models:", error);
}
};
fetchUserModels();
}, [accessToken, userID, userRole]);
const handleCreate = async (formValues: Record<string, any>) => { const handleCreate = async (formValues: Record<string, any>) => {
try { try {
if (accessToken != null) { if (accessToken != null) {
message.info("Making API Call"); //message.info("Making API Call");
const response: any = await teamCreateCall(accessToken, formValues); const response: any = await teamCreateCall(accessToken, formValues);
if (teams !== null) { if (teams !== null) {
setTeams([...teams, response]); setTeams([...teams, response]);
@ -81,10 +110,12 @@ const Team: React.FC<TeamProps> = ({
setTeams([response]); setTeams([response]);
} }
console.log(`response for team create call: ${response}`); console.log(`response for team create call: ${response}`);
message.success("Team created");
setIsTeamModalVisible(false); setIsTeamModalVisible(false);
} }
} catch (error) { } catch (error) {
console.error("Error creating the key:", error); console.error("Error creating the key:", error);
message.error("Error creating the team: " + error);
} }
}; };
@ -200,11 +231,11 @@ const Team: React.FC<TeamProps> = ({
placeholder="Select models" placeholder="Select models"
style={{ width: "100%" }} style={{ width: "100%" }}
> >
{/* {userModels.map((model) => ( {userModels.map((model) => (
<Option key={model} value={model}> <Select2.Option key={model} value={model}>
{model} {model}
</Option> </Select2.Option>
))} */} ))}
</Select2> </Select2>
</Form.Item> </Form.Item>
<Form.Item label="Max Budget (USD)" name="max_budget"> <Form.Item label="Max Budget (USD)" name="max_budget">