ui - view all end-users on admin ui

ui/litellm-dashboard/src/components/model_dashboard.tsx

@@ -51,6 +51,7 @@ import {
   modelSettingsCall,
   adminGlobalActivityExceptions,
   adminGlobalActivityExceptionsPerDeployment,
+  allEndUsersCall,
 } from "./networking";
 import { BarChart, AreaChart } from "@tremor/react";
 import {
@@ -320,6 +321,8 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   const [showAdvancedFilters, setShowAdvancedFilters] = useState<boolean>(false);
   const [selectedAPIKey, setSelectedAPIKey] = useState<any | null>(null);
 
+  const [allEndUsers, setAllEndUsers] = useState<any[]>([]);
+
   useEffect(() => {
     updateModelMetrics(
       selectedModelGroup,
@@ -700,6 +703,10 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
 
         setSlowResponsesData(slowResponses);
 
+        let all_end_users_data = await allEndUsersCall(accessToken);
+
+        setAllEndUsers(all_end_users_data?.end_users);
+
         const routerSettingsInfo = await getCallbacksCall(
           accessToken,
           userID,
@@ -1035,6 +1042,28 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                   </Select>
           
 
+          <Text className="mt-1">
+            Select Customer Name
+          </Text>
+          <Select>
+            {
+              allEndUsers?.map((user: any, index: number) => {
+                return (
+                  <SelectItem
+                    key={index}
+                    value={user}
+                    // onClick={() => {
+                    //   setSelectedEndUser(user);
+                    // }}
+                  >
+                    {user}
+                  </SelectItem>
+                );
+              })
+            }
+          </Select>
+            
+            
 
         </div>
 

ui/litellm-dashboard/src/components/networking.tsx

@@ -1053,6 +1053,38 @@ export const allTagNamesCall = async (
 };
 
 
+export const allEndUsersCall = async (
+  accessToken: String,
+) => {
+  try {
+    let url = proxyBaseUrl
+      ? `${proxyBaseUrl}/global/all_end_users`
+      : `/global/all_end_users`;
+
+
+    console.log("in global/all_end_users call", url);
+    const response = await fetch(`${url}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+    if (!response.ok) {
+      const errorData = await response.text();
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
+
 export const userSpendLogsCall = async (
   accessToken: String,
   token: String,