Merge pull request #3300 from BerriAI/ui_viewing_teams

[UI] View Number of Keys, Members in a team

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

@@ -329,6 +329,42 @@ export const userInfoCall = async (
   }
 };
 
+
+export const teamInfoCall = async (
+  accessToken: String,
+  teamID: String | null,
+) => {
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/team/info` : `/team/info`;
+    if (teamID) {
+      url = `${url}?team_id=${teamID}`;
+    }
+    console.log("in teamInfoCall");
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      message.error(errorData, 20);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log("API Response:", data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
+
 export const getTotalSpendCall = async (
   accessToken: String,
 ) => {

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Typography } from "antd";
-import { teamDeleteCall, teamUpdateCall } from "./networking";
+import { teamDeleteCall, teamUpdateCall, teamInfoCall } from "./networking";
 import { InformationCircleIcon, PencilAltIcon, PencilIcon, StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
 import {
   Button as Button2,
@@ -73,6 +73,9 @@ const Team: React.FC<TeamProps> = ({
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [teamToDelete, setTeamToDelete] = useState<string | null>(null);
 
+  // store team info as {"team_id": team_info_object}
+  const [perTeamInfo, setPerTeamInfo] = useState<Record<string, any>>({});
+
 
   const EditTeamModal: React.FC<EditTeamModalProps> = ({ visible, onCancel, team, onSubmit }) => {
   const [form] = Form.useForm();
@@ -271,9 +274,39 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
         console.error("Error fetching user models:", error);
       }
     };
+
+
+    const fetchTeamInfo = async () => {
+      try {
+        if (userID === null || userRole === null || accessToken === null) {
+          return;
+        }
+
+        if (teams === null) {
+          return;
+        }
+
+        console.log("fetching team info:");
+
+
+        let _team_id_to_info: Record<string, any> = {};
+        for (let i = 0; i < teams?.length; i++) {
+          let _team_id = teams[i].team_id;
+          const teamInfo = await teamInfoCall(accessToken, _team_id);
+          console.log("teamInfo response:", teamInfo);
+          if (teamInfo !== null) {
+            _team_id_to_info = {..._team_id_to_info, [_team_id]: teamInfo};
+          }
+        }
+        setPerTeamInfo(_team_id_to_info);
+    } catch (error) {
+      console.error("Error fetching team info:", error);
+    }
+  };
   
     fetchUserModels();
-  }, [accessToken, userID, userRole]);
+    fetchTeamInfo();
+  }, [accessToken, userID, userRole, teams]);
 
   const handleCreate = async (formValues: Record<string, any>) => {
     try {
@@ -346,6 +379,7 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                   <TableHeaderCell>Budget (USD)</TableHeaderCell>
                   <TableHeaderCell>Models</TableHeaderCell>
                   <TableHeaderCell>TPM / RPM Limits</TableHeaderCell>
+                  <TableHeaderCell>Info</TableHeaderCell>
                 </TableRow>
               </TableHead>
 
@@ -381,6 +415,7 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                             </div>
                           ) : null}
                         </TableCell>
+                        
 
                         <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                           <Text>
@@ -390,6 +425,10 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                             {team.rpm_limit ? team.rpm_limit : "Unlimited"}
                           </Text>
                         </TableCell>
+                        <TableCell>
+                          <Text>{perTeamInfo && team.team_id && perTeamInfo[team.team_id] && perTeamInfo[team.team_id].keys && perTeamInfo[team.team_id].keys.length} Keys</Text>
+                          <Text>{perTeamInfo && team.team_id && perTeamInfo[team.team_id] && perTeamInfo[team.team_id].team_info && perTeamInfo[team.team_id].team_info.members_with_roles && perTeamInfo[team.team_id].team_info.members_with_roles.length} Members</Text>
+                        </TableCell>
                         <TableCell>
                         <Icon
                             icon={PencilAltIcon}