phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

ui - show num keys, members in team

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-25 11:09:15 -07:00
parent 54e0acde35
commit 8ff8b29cfa
1 changed files with 41 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

43
ui/litellm-dashboard/src/components/teams.tsx
View file

@ -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}