mirror of
https://github.com/BerriAI/litellm.git
synced 2025-04-26 19:24:27 +00:00
Allow org admin to create teams on UI (#8407)
* fix(client_initialization_utils.py): handle custom llm provider set with valid value not from model name * fix(handle_jwt.py): handle groups not existing in jwt token if user not in group, this won't exist * fix(handle_jwt.py): add new `enforce_team_based_model_access` flag to jwt auth allows proxy admin to enforce user can only call model if team has access * feat(navbar.tsx): expose new dropdown in navbar - allow org admin to create teams within org context * fix(navbar.tsx): remove non-functional cogicon * fix(proxy/utils.py): include user-org memberships in `/user/info` response return orgs user is a member of and the user role within org * feat(organization_endpoints.py): allow internal user to query `/organizations/list` and get all orgs they belong to enables org admin to select org they belong to, to create teams * fix(navbar.tsx): show change in ui when org switcher clicked * feat(page.tsx): update user role based on org they're in allows org admin to create teams in the org context * feat(teams.tsx): working e2e flow for allowing org admin to add new teams * style(navbar.tsx): clarify switching orgs on UI is in BETA * fix(organization_endpoints.py): handle getting but not setting members * test: fix test * fix(client_initialization_utils.py): revert custom llm provider handling fix - causing unintended issues * docs(token_auth.md): cleanup docs
This commit is contained in:
Krish Dholakia
GitHub
parent
fb121c82e8
commit
c55422a2f8
12 changed files with 285 additions and 142 deletions
|
|
@ -163,10 +163,12 @@ scope: "litellm-proxy-admin ..."
|
|||
|
||||
```yaml
|
||||
general_settings:
|
||||
master_key: sk-1234
|
||||
enable_jwt_auth: True
|
||||
litellm_jwtauth:
|
||||
user_id_jwt_field: "sub"
|
||||
team_ids_jwt_field: "groups"
|
||||
user_id_upsert: true # add user_id to the db if they don't exist
|
||||
enforce_team_based_model_access: true # don't allow users to access models unless the team has access
|
||||
```
|
||||
|
||||
This is assuming your token looks like this:
|
||||
|
|
|
|||
|
|
@ -36,7 +36,14 @@ model_list:
|
|||
|
||||
litellm_settings:
|
||||
cache: true
|
||||
|
||||
|
||||
general_settings:
|
||||
enable_jwt_auth: True
|
||||
litellm_jwtauth:
|
||||
user_id_jwt_field: "sub"
|
||||
team_ids_jwt_field: "groups"
|
||||
user_id_upsert: true # add user_id to the db if they don't exist
|
||||
enforce_team_based_model_access: true # don't allow users to access models unless the team has access
|
||||
|
||||
router_settings:
|
||||
redis_host: os.environ/REDIS_HOST
|
||||
|
|
|
|||
|
|
@ -260,6 +260,7 @@ class LiteLLMRoutes(enum.Enum):
|
|||
"/key/health",
|
||||
"/team/info",
|
||||
"/team/list",
|
||||
"/organization/list",
|
||||
"/team/available",
|
||||
"/user/info",
|
||||
"/model/info",
|
||||
|
|
@ -1100,24 +1101,6 @@ class NewOrganizationRequest(LiteLLM_BudgetTable):
|
|||
budget_id: Optional[str] = None
|
||||
|
||||
|
||||
class LiteLLM_OrganizationTable(LiteLLMPydanticObjectBase):
|
||||
"""Represents user-controllable params for a LiteLLM_OrganizationTable record"""
|
||||
|
||||
organization_id: Optional[str] = None
|
||||
organization_alias: Optional[str] = None
|
||||
budget_id: str
|
||||
metadata: Optional[dict] = None
|
||||
models: List[str]
|
||||
created_by: str
|
||||
updated_by: str
|
||||
|
||||
|
||||
class NewOrganizationResponse(LiteLLM_OrganizationTable):
|
||||
organization_id: str # type: ignore
|
||||
created_at: datetime
|
||||
updated_at: datetime
|
||||
|
||||
|
||||
class OrganizationRequest(LiteLLMPydanticObjectBase):
|
||||
organizations: List[str]
|
||||
|
||||
|
|
@ -1492,6 +1475,28 @@ class LiteLLM_OrganizationMembershipTable(LiteLLMPydanticObjectBase):
|
|||
model_config = ConfigDict(protected_namespaces=())
|
||||
|
||||
|
||||
class LiteLLM_OrganizationTable(LiteLLMPydanticObjectBase):
|
||||
"""Represents user-controllable params for a LiteLLM_OrganizationTable record"""
|
||||
|
||||
organization_id: Optional[str] = None
|
||||
organization_alias: Optional[str] = None
|
||||
budget_id: str
|
||||
metadata: Optional[dict] = None
|
||||
models: List[str]
|
||||
created_by: str
|
||||
updated_by: str
|
||||
|
||||
|
||||
class LiteLLM_OrganizationTableWithMembers(LiteLLM_OrganizationTable):
|
||||
members: List[LiteLLM_OrganizationMembershipTable]
|
||||
|
||||
|
||||
class NewOrganizationResponse(LiteLLM_OrganizationTable):
|
||||
organization_id: str # type: ignore
|
||||
created_at: datetime
|
||||
updated_at: datetime
|
||||
|
||||
|
||||
class LiteLLM_UserTable(LiteLLMPydanticObjectBase):
|
||||
user_id: str
|
||||
max_budget: Optional[float]
|
||||
|
|
@ -2375,6 +2380,7 @@ class LiteLLM_JWTAuth(LiteLLMPydanticObjectBase):
|
|||
)
|
||||
scope_mappings: Optional[List[ScopeMapping]] = None
|
||||
enforce_scope_based_access: bool = False
|
||||
enforce_team_based_model_access: bool = False
|
||||
|
||||
def __init__(self, **kwargs: Any) -> None:
|
||||
# get the attribute names for this Pydantic model
|
||||
|
|
|
|||
|
|
@ -154,7 +154,10 @@ class JWTHandler:
|
|||
return False
|
||||
|
||||
def get_team_ids_from_jwt(self, token: dict) -> List[str]:
|
||||
if self.litellm_jwtauth.team_ids_jwt_field is not None:
|
||||
if (
|
||||
self.litellm_jwtauth.team_ids_jwt_field is not None
|
||||
and token.get(self.litellm_jwtauth.team_ids_jwt_field) is not None
|
||||
):
|
||||
return token[self.litellm_jwtauth.team_ids_jwt_field]
|
||||
return []
|
||||
|
||||
|
|
@ -699,6 +702,11 @@ class JWTAuthManager:
|
|||
"""Find first team with access to the requested model"""
|
||||
|
||||
if not team_ids:
|
||||
if jwt_handler.litellm_jwtauth.enforce_team_based_model_access:
|
||||
raise HTTPException(
|
||||
status_code=403,
|
||||
detail="No teams found in token. `enforce_team_based_model_access` is set to True. Token must belong to a team.",
|
||||
)
|
||||
return None, None
|
||||
|
||||
for team_id in team_ids:
|
||||
|
|
@ -731,7 +739,7 @@ class JWTAuthManager:
|
|||
if requested_model:
|
||||
raise HTTPException(
|
||||
status_code=403,
|
||||
detail=f"No team has access to the requested model: {requested_model}. Checked teams={team_ids}",
|
||||
detail=f"No team has access to the requested model: {requested_model}. Checked teams={team_ids}. Check `/models` to see all available models.",
|
||||
)
|
||||
|
||||
return None, None
|
||||
|
|
|
|||
|
|
@ -160,6 +160,7 @@ async def new_organization(
|
|||
"error": f"User not allowed to give access to model={m}. Models you have access to = {user_api_key_dict.models}"
|
||||
},
|
||||
)
|
||||
|
||||
organization_row = LiteLLM_OrganizationTable(
|
||||
**data.json(exclude_none=True),
|
||||
created_by=user_api_key_dict.user_id or litellm_proxy_admin_name,
|
||||
|
|
@ -201,6 +202,7 @@ async def delete_organization():
|
|||
"/organization/list",
|
||||
tags=["organization management"],
|
||||
dependencies=[Depends(user_api_key_auth)],
|
||||
response_model=List[LiteLLM_OrganizationTableWithMembers],
|
||||
)
|
||||
async def list_organization(
|
||||
user_api_key_dict: UserAPIKeyAuth = Depends(user_api_key_auth),
|
||||
|
|
@ -216,24 +218,34 @@ async def list_organization(
|
|||
if prisma_client is None:
|
||||
raise HTTPException(status_code=500, detail={"error": "No db connected"})
|
||||
|
||||
if (
|
||||
user_api_key_dict.user_role is None
|
||||
or user_api_key_dict.user_role != LitellmUserRoles.PROXY_ADMIN
|
||||
):
|
||||
raise HTTPException(
|
||||
status_code=401,
|
||||
detail={
|
||||
"error": f"Only admins can list orgs. Your role is = {user_api_key_dict.user_role}"
|
||||
},
|
||||
)
|
||||
if prisma_client is None:
|
||||
raise HTTPException(
|
||||
status_code=400,
|
||||
detail={"error": CommonProxyErrors.db_not_connected_error.value},
|
||||
)
|
||||
response = await prisma_client.db.litellm_organizationtable.find_many(
|
||||
include={"members": True}
|
||||
)
|
||||
|
||||
# if proxy admin - get all orgs
|
||||
if user_api_key_dict.user_role == LitellmUserRoles.PROXY_ADMIN:
|
||||
response = await prisma_client.db.litellm_organizationtable.find_many(
|
||||
include={"members": True}
|
||||
)
|
||||
# if internal user - get orgs they are a member of
|
||||
else:
|
||||
org_memberships = (
|
||||
await prisma_client.db.litellm_organizationmembership.find_many(
|
||||
where={"user_id": user_api_key_dict.user_id}
|
||||
)
|
||||
)
|
||||
org_objects = await prisma_client.db.litellm_organizationtable.find_many(
|
||||
where={
|
||||
"organization_id": {
|
||||
"in": [membership.organization_id for membership in org_memberships]
|
||||
}
|
||||
},
|
||||
include={"members": True},
|
||||
)
|
||||
|
||||
response = org_objects
|
||||
|
||||
return response
|
||||
|
||||
|
|
|
|||
|
|
@ -1415,7 +1415,8 @@ class PrismaClient:
|
|||
if key_val is None:
|
||||
key_val = {"user_id": user_id}
|
||||
response = await self.db.litellm_usertable.find_unique( # type: ignore
|
||||
where=key_val # type: ignore
|
||||
where=key_val, # type: ignore
|
||||
include={"organization_memberships": True},
|
||||
)
|
||||
elif query_type == "find_all" and key_val is not None:
|
||||
response = await self.db.litellm_usertable.find_many(
|
||||
|
|
|
|||
|
|
@ -1446,7 +1446,7 @@ def test_bedrock_on_router():
|
|||
# test openai-compatible endpoint
|
||||
@pytest.mark.asyncio
|
||||
async def test_mistral_on_router():
|
||||
litellm.set_verbose = True
|
||||
litellm._turn_on_debug()
|
||||
model_list = [
|
||||
{
|
||||
"model_name": "gpt-3.5-turbo",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import Sidebar from "@/components/leftnav";
|
|||
import Usage from "@/components/usage";
|
||||
import CacheDashboard from "@/components/cache_dashboard";
|
||||
import { setGlobalLitellmHeaderName } from "@/components/networking";
|
||||
import { Organization } from "@/components/networking";
|
||||
|
||||
function getCookie(name: string) {
|
||||
const cookieValue = document.cookie
|
||||
|
|
@ -49,6 +50,8 @@ function formatUserRole(userRole: string) {
|
|||
return "Admin";
|
||||
case "proxy_admin_viewer":
|
||||
return "Admin Viewer";
|
||||
case "org_admin":
|
||||
return "Org Admin";
|
||||
case "internal_user":
|
||||
return "Internal User";
|
||||
case "internal_viewer":
|
||||
|
|
@ -75,6 +78,8 @@ export default function CreateKeyPage() {
|
|||
const [userEmail, setUserEmail] = useState<null | string>(null);
|
||||
const [teams, setTeams] = useState<null | any[]>(null);
|
||||
const [keys, setKeys] = useState<null | any[]>(null);
|
||||
const [currentOrg, setCurrentOrg] = useState<Organization | null>(null);
|
||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
||||
const [proxySettings, setProxySettings] = useState<ProxySettings>({
|
||||
PROXY_BASE_URL: "",
|
||||
PROXY_LOGOUT_URL: "",
|
||||
|
|
@ -166,6 +171,20 @@ export default function CreateKeyPage() {
|
|||
}
|
||||
}, [token]);
|
||||
|
||||
const handleOrgChange = (org: Organization) => {
|
||||
setCurrentOrg(org);
|
||||
console.log(`org: ${JSON.stringify(org)}`)
|
||||
if (org.members && userRole != "Admin") { // don't change user role if user is admin
|
||||
for (const member of org.members) {
|
||||
console.log(`member: ${JSON.stringify(member)}`)
|
||||
if (member.user_id == userID) {
|
||||
console.log(`member.user_role: ${member.user_role}`)
|
||||
setUserRole(formatUserRole(member.user_role));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
|
|
@ -181,6 +200,7 @@ export default function CreateKeyPage() {
|
|||
setUserEmail={setUserEmail}
|
||||
setTeams={setTeams}
|
||||
setKeys={setKeys}
|
||||
setOrganizations={setOrganizations}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
|
|
@ -191,6 +211,9 @@ export default function CreateKeyPage() {
|
|||
premiumUser={premiumUser}
|
||||
setProxySettings={setProxySettings}
|
||||
proxySettings={proxySettings}
|
||||
currentOrg={currentOrg}
|
||||
organizations={organizations}
|
||||
onOrgChange={handleOrgChange}
|
||||
/>
|
||||
<div className="flex flex-1 overflow-auto">
|
||||
<div className="mt-8">
|
||||
|
|
@ -213,6 +236,7 @@ export default function CreateKeyPage() {
|
|||
setUserEmail={setUserEmail}
|
||||
setTeams={setTeams}
|
||||
setKeys={setKeys}
|
||||
setOrganizations={setOrganizations}
|
||||
/>
|
||||
) : page == "models" ? (
|
||||
<ModelDashboard
|
||||
|
|
@ -251,6 +275,7 @@ export default function CreateKeyPage() {
|
|||
accessToken={accessToken}
|
||||
userID={userID}
|
||||
userRole={userRole}
|
||||
currentOrg={currentOrg}
|
||||
/>
|
||||
) : page == "organizations" ? (
|
||||
<Organizations
|
||||
|
|
|
|||
|
|
@ -1,24 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
import type { MenuProps } from "antd";
|
||||
import { Dropdown, Space } from "antd";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import {
|
||||
Button,
|
||||
Text,
|
||||
Metric,
|
||||
Title,
|
||||
TextInput,
|
||||
Grid,
|
||||
Col,
|
||||
Card,
|
||||
} from "@tremor/react";
|
||||
import { Dropdown } from "antd";
|
||||
import { CogIcon } from "@heroicons/react/outline";
|
||||
import { Organization } from "@/components/networking";
|
||||
|
||||
|
||||
// Define the props type
|
||||
interface NavbarProps {
|
||||
userID: string | null;
|
||||
userRole: string | null;
|
||||
|
|
@ -26,7 +12,12 @@ interface NavbarProps {
|
|||
premiumUser: boolean;
|
||||
setProxySettings: React.Dispatch<React.SetStateAction<any>>;
|
||||
proxySettings: any;
|
||||
currentOrg: Organization | null;
|
||||
onOrgChange?: (org: Organization) => void;
|
||||
onNewOrg?: () => void;
|
||||
organizations?: Organization[];
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({
|
||||
userID,
|
||||
userRole,
|
||||
|
|
@ -34,101 +25,163 @@ const Navbar: React.FC<NavbarProps> = ({
|
|||
premiumUser,
|
||||
setProxySettings,
|
||||
proxySettings,
|
||||
currentOrg = null,
|
||||
onOrgChange = () => {},
|
||||
onNewOrg = () => {},
|
||||
organizations = []
|
||||
}) => {
|
||||
console.log("User ID:", userID);
|
||||
console.log("userEmail:", userEmail);
|
||||
console.log("premiumUser:", premiumUser);
|
||||
|
||||
// const userColors = require('./ui_colors.json') || {};
|
||||
console.log(`currentOrg: ${JSON.stringify(currentOrg)}`)
|
||||
console.log(`organizations: ${JSON.stringify(organizations)}`)
|
||||
const isLocal = process.env.NODE_ENV === "development";
|
||||
if (isLocal != true) {
|
||||
console.log = function() {};
|
||||
}
|
||||
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
|
||||
const imageUrl = isLocal ? "http://localhost:4000/get_image" : "/get_image";
|
||||
let logoutUrl = "";
|
||||
|
||||
console.log("PROXY_settings=", proxySettings);
|
||||
|
||||
if (proxySettings) {
|
||||
if (proxySettings.PROXY_LOGOUT_URL && proxySettings.PROXY_LOGOUT_URL !== undefined) {
|
||||
logoutUrl = proxySettings.PROXY_LOGOUT_URL;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("logoutUrl=", logoutUrl);
|
||||
let logoutUrl = proxySettings?.PROXY_LOGOUT_URL || "";
|
||||
|
||||
const handleLogout = () => {
|
||||
// Clear cookies
|
||||
document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||||
window.location.href = logoutUrl;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const items: MenuProps["items"] = [
|
||||
const userItems: MenuProps["items"] = [
|
||||
{
|
||||
key: "1",
|
||||
label: (
|
||||
<>
|
||||
<p>Role: {userRole}</p>
|
||||
<p>ID: {userID}</p>
|
||||
<p>Premium User: {String(premiumUser)}</p>
|
||||
</>
|
||||
<div className="px-1 py-1">
|
||||
<p className="text-sm text-gray-600">Role: {userRole}</p>
|
||||
<p className="text-sm text-gray-600">ID: {userID}</p>
|
||||
<p className="text-sm text-gray-600">Premium User: {String(premiumUser)}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
label: <p onClick={handleLogout}>Logout</p>,
|
||||
label: <p className="text-sm hover:text-gray-900" onClick={handleLogout}>Logout</p>,
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<div className="w-full px-4">
|
||||
<div className="flex justify-between items-center h-14">
|
||||
{/* Left side - Just Logo */}
|
||||
<div className="flex items-center">
|
||||
<Link href="/" className="flex items-center">
|
||||
<button className="text-gray-800 rounded text-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="LiteLLM Brand"
|
||||
className="h-10 w-40 object-contain"
|
||||
/>
|
||||
</button>
|
||||
</Link>
|
||||
const orgMenuItems: MenuProps["items"] = [
|
||||
...(userRole === "Admin"
|
||||
? [{
|
||||
key: 'global',
|
||||
label: (
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<span className="text-sm">Global View</span>
|
||||
</div>
|
||||
),
|
||||
onClick: () => onOrgChange({ organization_id: "global", organization_alias: "Global View" } as Organization)
|
||||
}]
|
||||
: [
|
||||
{
|
||||
key: 'header',
|
||||
label: 'Organizations',
|
||||
type: 'group' as const,
|
||||
style: {
|
||||
color: '#6B7280',
|
||||
fontSize: '0.875rem'
|
||||
}
|
||||
},
|
||||
...organizations.map(org => ({
|
||||
key: org.organization_id,
|
||||
label: (
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<span className="text-sm">{org.organization_alias}</span>
|
||||
</div>
|
||||
),
|
||||
onClick: () => onOrgChange(org)
|
||||
})),
|
||||
{
|
||||
key: "note",
|
||||
label: (
|
||||
<div className="flex items-center justify-between py-1 px-2 bg-gray-50 text-gray-500 text-xs italic">
|
||||
<span>Switching between organizations on the UI is currently in beta.</span>
|
||||
</div>
|
||||
),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
)
|
||||
];
|
||||
|
||||
{/* Right side - Links and Admin */}
|
||||
<div className="flex items-center space-x-6">
|
||||
<a
|
||||
href="https://docs.litellm.ai/docs/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-gray-600 hover:text-gray-800"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
<Dropdown menu={{ items }}>
|
||||
<button className="flex items-center text-sm text-gray-600 hover:text-gray-800">
|
||||
User
|
||||
<svg
|
||||
className="ml-1 w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
return (
|
||||
<nav className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<div className="w-full">
|
||||
<div className="flex items-center h-12 px-4">
|
||||
{/* Left side with correct logo positioning */}
|
||||
<div className="flex items-center flex-shrink-0">
|
||||
<Link href="/" className="flex items-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="LiteLLM Brand"
|
||||
className="h-8 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Organization selector with beta label */}
|
||||
<div className="ml-8 flex items-center">
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: orgMenuItems,
|
||||
style: {
|
||||
width: '280px',
|
||||
padding: '4px',
|
||||
marginTop: '4px'
|
||||
}
|
||||
}}
|
||||
trigger={['click']}
|
||||
placement="bottomLeft"
|
||||
>
|
||||
<button className="inline-flex items-center text-[13px] text-gray-700 hover:text-gray-900 transition-colors">
|
||||
{currentOrg ? currentOrg.organization_alias : "Default Organization"}
|
||||
<svg
|
||||
className="ml-1 w-4 h-4 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</Dropdown>
|
||||
<span className="ml-2 text-[10px] bg-blue-100 text-blue-800 font-medium px-2 py-0.5 rounded">BETA</span>
|
||||
</div>
|
||||
|
||||
{/* Right side nav items */}
|
||||
<div className="flex items-center space-x-5 ml-auto">
|
||||
<a
|
||||
href="https://docs.litellm.ai/docs/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[13px] text-gray-600 hover:text-gray-900 transition-colors"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: userItems,
|
||||
style: {
|
||||
padding: '4px',
|
||||
marginTop: '4px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<button className="inline-flex items-center text-[13px] text-gray-600 hover:text-gray-900 transition-colors">
|
||||
User
|
||||
<svg
|
||||
className="ml-1 w-4 h-4 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
export default Navbar;
|
||||
|
|
@ -15,6 +15,24 @@ export interface Model {
|
|||
model_info: Object | null;
|
||||
}
|
||||
|
||||
export interface Organization {
|
||||
organization_id: string;
|
||||
organization_alias: string;
|
||||
budget_id: string;
|
||||
metadata: Record<string, any>;
|
||||
models: string[];
|
||||
spend: number;
|
||||
model_spend: Record<string, number>;
|
||||
created_at: string;
|
||||
created_by: string;
|
||||
updated_at: string;
|
||||
updated_by: string;
|
||||
litellm_budget_table: any; // Simplified to any since we don't need the detailed structure
|
||||
teams: any[] | null;
|
||||
users: any[] | null;
|
||||
members: any[] | null;
|
||||
}
|
||||
|
||||
const baseUrl = "/"; // Assuming the base URL is the root
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { Typography } from "antd";
|
||||
import { teamDeleteCall, teamUpdateCall, teamInfoCall } from "./networking";
|
||||
import { teamDeleteCall, teamUpdateCall, teamInfoCall, Organization } from "./networking";
|
||||
import TeamMemberModal from "@/components/team/edit_membership";
|
||||
import {
|
||||
InformationCircleIcon,
|
||||
|
|
@ -64,6 +64,7 @@ interface TeamProps {
|
|||
setTeams: React.Dispatch<React.SetStateAction<Object[] | null>>;
|
||||
userID: string | null;
|
||||
userRole: string | null;
|
||||
currentOrg: Organization | null;
|
||||
}
|
||||
|
||||
interface EditTeamModalProps {
|
||||
|
|
@ -90,6 +91,7 @@ const Team: React.FC<TeamProps> = ({
|
|||
setTeams,
|
||||
userID,
|
||||
userRole,
|
||||
currentOrg
|
||||
}) => {
|
||||
const [lastRefreshed, setLastRefreshed] = useState("");
|
||||
|
||||
|
|
@ -285,7 +287,7 @@ const Team: React.FC<TeamProps> = ({
|
|||
if (accessToken != null) {
|
||||
const newTeamAlias = formValues?.team_alias;
|
||||
const existingTeamAliases = teams?.map((t) => t.team_alias) ?? [];
|
||||
let organizationId = formValues?.organization_id;
|
||||
let organizationId = formValues?.organization_id || currentOrg?.organization_id;
|
||||
if (organizationId === "" || typeof organizationId !== 'string') {
|
||||
formValues.organization_id = null;
|
||||
} else {
|
||||
|
|
@ -618,7 +620,7 @@ const Team: React.FC<TeamProps> = ({
|
|||
)}
|
||||
</Card>
|
||||
</Col>
|
||||
{userRole == "Admin"? (
|
||||
{userRole == "Admin" || userRole == "Org Admin"? (
|
||||
<Col numColSpan={1}>
|
||||
<Button
|
||||
className="mx-auto"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import {
|
|||
getTotalSpendCall,
|
||||
getProxyUISettings,
|
||||
teamListCall,
|
||||
Organization,
|
||||
organizationListCall
|
||||
} from "./networking";
|
||||
import { Grid, Col, Card, Text, Title } from "@tremor/react";
|
||||
import CreateKey from "./create_key_button";
|
||||
|
|
@ -58,6 +60,7 @@ interface UserDashboardProps {
|
|||
setUserEmail: React.Dispatch<React.SetStateAction<string | null>>;
|
||||
setTeams: React.Dispatch<React.SetStateAction<Object[] | null>>;
|
||||
setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
|
||||
setOrganizations: React.Dispatch<React.SetStateAction<Organization[]>>;
|
||||
premiumUser: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -77,6 +80,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
|
|||
setUserEmail,
|
||||
setTeams,
|
||||
setKeys,
|
||||
setOrganizations,
|
||||
premiumUser,
|
||||
}) => {
|
||||
const [userSpendData, setUserSpendData] = useState<UserInfo | null>(
|
||||
|
|
@ -169,10 +173,10 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
|
|||
}
|
||||
}
|
||||
if (userID && accessToken && userRole && !keys && !userSpendData) {
|
||||
const cachedUserModels = sessionStorage.getItem("userModels" + userID);
|
||||
if (cachedUserModels) {
|
||||
setUserModels(JSON.parse(cachedUserModels));
|
||||
} else {
|
||||
// const cachedUserModels = sessionStorage.getItem("userModels" + userID);
|
||||
// if (cachedUserModels) {
|
||||
// setUserModels(JSON.parse(cachedUserModels));
|
||||
// } else {
|
||||
const fetchTeams = async () => {
|
||||
let givenTeams;
|
||||
if (userRole != "Admin" && userRole != "Admin Viewer") {
|
||||
|
|
@ -198,17 +202,15 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
|
|||
null,
|
||||
null
|
||||
);
|
||||
console.log(
|
||||
`received teams in user dashboard: ${Object.keys(
|
||||
response
|
||||
)}; team values: ${Object.entries(response.teams)}`
|
||||
);
|
||||
|
||||
setUserSpendData(response["user_info"]);
|
||||
console.log(`userSpendData: ${JSON.stringify(userSpendData)}`)
|
||||
|
||||
console.log(`response["user_info"]["organization_memberships"]: ${JSON.stringify(response["user_info"]["organization_memberships"])}`)
|
||||
|
||||
|
||||
// set keys for admin and users
|
||||
if (!response?.teams[0].keys) {
|
||||
if (!response?.teams?.[0]?.keys) {
|
||||
setKeys(response["keys"]);
|
||||
} else {
|
||||
setKeys(
|
||||
|
|
@ -229,6 +231,8 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
|
|||
setSelectedTeam(defaultTeam);
|
||||
|
||||
}
|
||||
|
||||
|
||||
sessionStorage.setItem(
|
||||
"userData" + userID,
|
||||
JSON.stringify(response["keys"])
|
||||
|
|
@ -261,10 +265,15 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
|
|||
// Optionally, update your UI to reflect the error state here as well
|
||||
}
|
||||
};
|
||||
const fetchOrganizations = async () => {
|
||||
const organizations = await organizationListCall(accessToken);
|
||||
setOrganizations(organizations);
|
||||
}
|
||||
fetchData();
|
||||
fetchTeams();
|
||||
fetchOrganizations();
|
||||
}
|
||||
}
|
||||
// }
|
||||
}, [userID, token, accessToken, keys, userRole]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue