diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 841880bc869..a3809a7833a 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -69,6 +69,9 @@ const CreateKeyPage = () => {
}
}
+ if (!userRole) {
+ return
Loading...
;
+ }
return (
Loading...}>
diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx
index 0e2c564d2d9..b58674d12fa 100644
--- a/ui/litellm-dashboard/src/components/create_user_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_user_button.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { Button, Modal, Form, Input, message, Select, InputNumber } from "antd";
import { Button as Button2 } from "@tremor/react";
-import { userCreateCall } from "./networking";
+import { userCreateCall, modelInfoCall } from "./networking";
+const { Option } = Select;
interface CreateuserProps {
userID: string;
@@ -12,7 +13,32 @@ const Createuser: React.FC = ({ userID, accessToken }) => {
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
const [apiuser, setApiuser] = useState(null);
+ const [userModels, setUserModels] = useState([]);
+
+ // get all models
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const userRole = "any"; // You may need to get the user role dynamically
+ const modelDataResponse = await modelInfoCall(accessToken, userID, userRole);
+ // Assuming modelDataResponse.data contains an array of model objects with a 'model_name' property
+ const availableModels = [];
+ for (let i = 0; i < modelDataResponse.data.length; i++) {
+ const model = modelDataResponse.data[i];
+ availableModels.push(model.model_name);
+ }
+ console.log("Model data response:", modelDataResponse.data);
+ console.log("Available models:", availableModels);
+ // Assuming modelDataResponse.data contains an array of model names
+ setUserModels(availableModels);
+ } catch (error) {
+ console.error("Error fetching model data:", error);
+ }
+ };
+
+ fetchData(); // Call the function to fetch model data when the component mounts
+ }, []); // Empty dependency array to run only once
const handleOk = () => {
setIsModalVisible(false);
form.resetFields();
@@ -70,7 +96,7 @@ const Createuser: React.FC = ({ userID, accessToken }) => {
label="Models"
name="models"
>
- {/* */}
+
@@ -119,9 +145,11 @@ const Createuser: React.FC = ({ userID, accessToken }) => {
-
+
+
+
{apiuser && (
diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index 0cacb908ae8..9335d73f107 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -58,8 +58,7 @@ const ViewUserDashboard: React.FC = ({