From 4238e4c82a774a99ca966deeb010e6614fffbab2 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 20 Feb 2024 17:10:33 -0800
Subject: [PATCH] (feat) ui - create new users

---
 ui/litellm-dashboard/src/app/page.tsx         |  3 ++
 .../src/components/create_user_button.tsx     | 42 +++++++++++++++----
 .../src/components/view_users.tsx             |  3 +-
 3 files changed, 39 insertions(+), 9 deletions(-)

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 <div>Loading...</div>;
+  }
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
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<CreateuserProps> = ({ userID, accessToken }) => {
   const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [apiuser, setApiuser] = useState<string | null>(null);
+  const [userModels, setUserModels] = useState<string[]>([]);
+  
+  // 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<CreateuserProps> = ({ userID, accessToken }) => {
             label="Models"
             name="models"
             >
-            {/* <Select
+            <Select
                 mode="multiple"
                 placeholder="Select models"
                 style={{ width: '100%' }}
@@ -80,7 +106,7 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
                     {model}
                 </Option>
                 ))}
-            </Select> */}
+            </Select>
             </Form.Item>
             
 
@@ -119,9 +145,11 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
                 <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
                 
             </Form.Item>
-          <Button htmlType="submit">
-            Create User
-          </Button>
+            <div style={{ textAlign: 'right', marginTop: '10px' }}>
+              <Button htmlType="submit">
+                Create User
+              </Button>
+              </div>
         </Form>
       </Modal>
       {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<ViewUserDashboardProps> = ({
     <Grid className="gap-2 p-10 h-[75vh] w-full">
         <CreateUser
             userID={userID}
-            userRole={userRole}
-            userModels={["litellm-proxy-budget"]}
+            userModels={["litellm-proxy-budget", "model2"]}
             accessToken={accessToken}
           />
       <Card>