diff --git a/ui/litellm-dashboard/src/components/organizations.tsx b/ui/litellm-dashboard/src/components/organizations.tsx index 824204953086..f9ee248b82d2 100644 --- a/ui/litellm-dashboard/src/components/organizations.tsx +++ b/ui/litellm-dashboard/src/components/organizations.tsx @@ -147,211 +147,218 @@ const OrganizationsTable: React.FC = ({ } return ( - - -
- Your Organizations -
-
- {lastRefreshed && Last Refreshed: {lastRefreshed}} - -
- - - - - Click on “Organization ID” to view organization details. - - - - - - - - Organization ID - Organization Name - Created - Spend (USD) - Budget (USD) - Models - TPM / RPM Limits - Info - Actions - - - - - {organizations && organizations.length > 0 - ? organizations - .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) - .map((org: Organization) => ( - - -
- - - -
- - {org.organization_alias} - - {org.created_at ? new Date(org.created_at).toLocaleDateString() : "N/A"} - - {org.spend} - - {org.litellm_budget_table?.max_budget !== null && org.litellm_budget_table?.max_budget !== undefined ? org.litellm_budget_table?.max_budget : "No limit"} - - - {Array.isArray(org.models) && ( -
- {org.models.length === 0 ? ( - - All Proxy Models - - ) : ( - org.models.map((model, index) => - model === "all-proxy-models" ? ( - - All Proxy Models - - ) : ( - - {model.length > 30 - ? `${getModelDisplayName(model).slice(0, 30)}...` - : getModelDisplayName(model)} - - ) - ) - )} -
- )} - - - - TPM: {org.litellm_budget_table?.tpm_limit ? org.litellm_budget_table?.tpm_limit : "Unlimited"} -
- RPM: {org.litellm_budget_table?.rpm_limit ? org.litellm_budget_table?.rpm_limit : "Unlimited"} - - - - {org.members?.length || 0} Members - - - {userRole === "Admin" && ( - <> - { - setSelectedOrgId(org.organization_id); - setEditOrg(true); - }} - /> - handleDelete(org.organization_id)} - icon={TrashIcon} - size="sm" - /> - - )} - - - )) - : null} - -
- - - {(userRole === "Admin" || userRole === "Org Admin") && ( - - + +
- + Create New Organization - - - - + + + - - - - - - All Proxy Models + + All Proxy Models + + {userModels && userModels.length > 0 && userModels.map((model) => ( + + {getModelDisplayName(model)} - {userModels && userModels.length > 0 && userModels.map((model) => ( - - {getModelDisplayName(model)} - - ))} - - + ))} + + - - - - - - daily - weekly - monthly - - - - - - - - + + + + + + daily + weekly + monthly + + + + + + + + - - - + + + -
- -
- -
- - )} - - - +
+ +
+ + + + )} + + + +
+ Your Organizations +
+
+ {lastRefreshed && Last Refreshed: {lastRefreshed}} + +
+ + + + + Click on “Organization ID” to view organization details. + + + + + + + + Organization ID + Organization Name + Created + Spend (USD) + Budget (USD) + Models + TPM / RPM Limits + Info + Actions + + + + + {organizations && organizations.length > 0 + ? organizations + .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) + .map((org: Organization) => ( + + +
+ + + +
+ + {org.organization_alias} + + {org.created_at ? new Date(org.created_at).toLocaleDateString() : "N/A"} + + {org.spend} + + {org.litellm_budget_table?.max_budget !== null && org.litellm_budget_table?.max_budget !== undefined ? org.litellm_budget_table?.max_budget : "No limit"} + + + {Array.isArray(org.models) && ( +
+ {org.models.length === 0 ? ( + + All Proxy Models + + ) : ( + org.models.map((model, index) => + model === "all-proxy-models" ? ( + + All Proxy Models + + ) : ( + + {model.length > 30 + ? `${getModelDisplayName(model).slice(0, 30)}...` + : getModelDisplayName(model)} + + ) + ) + )} +
+ )} + + + + TPM: {org.litellm_budget_table?.tpm_limit ? org.litellm_budget_table?.tpm_limit : "Unlimited"} +
+ RPM: {org.litellm_budget_table?.rpm_limit ? org.litellm_budget_table?.rpm_limit : "Unlimited"} + + + + {org.members?.length || 0} Members + + + {userRole === "Admin" && ( + <> + { + setSelectedOrgId(org.organization_id); + setEditOrg(true); + }} + /> + handleDelete(org.organization_id)} + icon={TrashIcon} + size="sm" + /> + + )} + + + )) + : null} + +
+ + + + + + + + {isDeleteModalOpen ? (
@@ -389,7 +396,7 @@ const OrganizationsTable: React.FC = ({
) : <>} - + ); }; diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index 5e768f73f26b..b88971868780 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -423,221 +423,230 @@ const Teams: React.FC = ({ return (
- {selectedTeamId ? ( - { - setTeams(teams => { - if (teams == null) { - return teams; - } - - return teams.map(team => { - if (data.team_id === team.team_id) { - return updateExistingKeys(team, data) - } + + + + + {selectedTeamId ? ( + { + setTeams(teams => { + if (teams == null) { + return teams; + } - return team - }) - }) + return teams.map(team => { + if (data.team_id === team.team_id) { + return updateExistingKeys(team, data) + } + + return team + }) + }) - }} - onClose={() => { - setSelectedTeamId(null); - setEditTeam(false); - }} - accessToken={accessToken} - is_team_admin={is_team_admin(teams?.find((team) => team.team_id === selectedTeamId))} - is_proxy_admin={userRole == "Admin"} - userModels={userModels} - editTeam={editTeam} - /> - ) : ( - - -
- Your Teams - Available Teams - {isAdminRole(userRole || "") && Default Team Settings} -
-
- {lastRefreshed && Last Refreshed: {lastRefreshed}} - -
- - - - - Click on “Team ID” to view team details and manage team members. - - - - -
-
- {/* Search and Filter Controls */} -
- {/* Team Alias Search */} -
- handleFilterChange('team_alias', e.target.value)} - /> - - - -
+ }} + onClose={() => { + setSelectedTeamId(null); + setEditTeam(false); + }} + accessToken={accessToken} + is_team_admin={is_team_admin(teams?.find((team) => team.team_id === selectedTeamId))} + is_proxy_admin={userRole == "Admin"} + userModels={userModels} + editTeam={editTeam} + /> + ) : ( + + +
+ Your Teams + Available Teams + {isAdminRole(userRole || "") && Default Team Settings} +
+
+ {lastRefreshed && Last Refreshed: {lastRefreshed}} + +
+ + + + + Click on “Team ID” to view team details and manage team members. + + + + +
+
+ {/* Search and Filter Controls */} +
+ {/* Team Alias Search */} +
+ handleFilterChange('team_alias', e.target.value)} + /> + + + +
- {/* Filter Button */} - + {/* Filter Button */} + - {/* Reset Filters Button */} - -
+ {/* Reset Filters Button */} + +
- {/* Additional Filters */} - {showFilters && ( -
- {/* Team ID Search */} -
- handleFilterChange('team_id', e.target.value)} - /> - - - -
+ {/* Additional Filters */} + {showFilters && ( +
+ {/* Team ID Search */} +
+ handleFilterChange('team_id', e.target.value)} + /> + + + +
- {/* Organization Dropdown */} -
- + {/* Organization Dropdown */} +
+ +
+
+ )}
- )} -
-
- - - - Team Name - Team ID - Created - Spend (USD) - Budget (USD) - Models - Organization - Info - - +
+ + + Team Name + Team ID + Created + Spend (USD) + Budget (USD) + Models + Organization + Info + + - - {teams && teams.length > 0 - ? teams - .filter((team) => { - if (!currentOrg) return true; - return team.organization_id === currentOrg.organization_id; - }) - .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) - .map((team: any) => ( - - - {team["team_alias"]} - - -
- -
- {/* Modal Panel */} - + {/* Modal Panel */} + - {/* Confirmation Modal Content */} -
-
-
-
-

- Delete Team -

-
-

- Are you sure you want to delete this team ? -

+ {/* Confirmation Modal Content */} +
+
+
+
+

+ Delete Team +

+
+

+ Are you sure you want to delete this team ? +

+
+
+
+
+
+ +
-
- - -
-
-
-
- )} - - - {userRole == "Admin" || userRole == "Org Admin"? ( - - - -
- <> - - - - - Organization{' '} - - Organizations can have multiple teams. Learn more about{' '} - e.stopPropagation()} - > - user management hierarchy - - - }> - - - - } - name="organization_id" - initialValue={currentOrg ? currentOrg.organization_id : null} - className="mt-8" + )} + + + {userRole == "Admin" || userRole == "Org Admin"? ( + + - { - form.setFieldValue('organization_id', value); - setCurrentOrgForCreateTeam(organizations?.find((org) => org.organization_id === value) || null); - }} - filterOption={(input, option) => { - if (!option) return false; - const optionValue = option.children?.toString() || ''; - return optionValue.toLowerCase().includes(input.toLowerCase()); - }} - optionFilterProp="children" + - {organizations?.map((org) => ( - - {org.organization_alias}{" "} - ({org.organization_id}) - - ))} - - - - Models{' '} - - - - - } name="models"> - - - All Proxy Models - - {modelsToPick.map((model) => ( - - {getModelDisplayName(model)} - - ))} - - + <> + + + + + Organization{' '} + + Organizations can have multiple teams. Learn more about{' '} + e.stopPropagation()} + > + user management hierarchy + + + }> + + + + } + name="organization_id" + initialValue={currentOrg ? currentOrg.organization_id : null} + className="mt-8" + > + { + form.setFieldValue('organization_id', value); + setCurrentOrgForCreateTeam(organizations?.find((org) => org.organization_id === value) || null); + }} + filterOption={(input, option) => { + if (!option) return false; + const optionValue = option.children?.toString() || ''; + return optionValue.toLowerCase().includes(input.toLowerCase()); + }} + optionFilterProp="children" + > + {organizations?.map((org) => ( + + {org.organization_alias}{" "} + ({org.organization_id}) + + ))} + + + + Models{' '} + + + + + } name="models"> + + + All Proxy Models + + {modelsToPick.map((model) => ( + + {getModelDisplayName(model)} + + ))} + + - - - - - - daily - weekly - monthly - - - - - - - - + + + + + + daily + weekly + monthly + + + + + + + + - - - Additional Settings - - - - { - e.target.value = e.target.value.trim(); - }} - /> - - - - - - Guardrails{' '} - - e.stopPropagation()} - > - - - - - } - name="guardrails" - className="mt-8" - help="Select existing guardrails or enter new ones" - > - ({ value: name, label: name }))} - /> - - - - -
- Create Team -
- - - - ) : null} - - - - - - {isAdminRole(userRole || "") && ( - - - - )} - + + + Additional Settings + + + + { + e.target.value = e.target.value.trim(); + }} + /> + + + + + + Guardrails{' '} + + e.stopPropagation()} + > + + + + + } + name="guardrails" + className="mt-8" + help="Select existing guardrails or enter new ones" + > + ({ value: name, label: name }))} + /> + + + + +
+ Create Team +
+ + + + ) : null} + + + + + + {isAdminRole(userRole || "") && ( + + + + )} + - )} + )} + + ); };