ui - show num keys, members in team

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();
@@ -272,8 +275,38 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
       }
     };
 
+
+    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>
 
@@ -382,6 +416,7 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                           ) : null}
                         </TableCell>
                         
+
                         <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                           <Text>
                             TPM:{" "}
@@ -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}