scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-10 03:28:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 85

[MCP Gateway] access group fixes on UI for keys and teams (#12556)

Browse source 
* add changes to mcp servers in team and keys

* added access group in bracket

* added access group capitalise
This commit is contained in:
Jugal D. Bhatt 2025-07-13 01:25:36 +05:30 • committed by GitHub
parent f0e87d4eb0
commit 5bd63c5a72
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
View file

@ -67,59 +67,51 @@ export function MCPServerPermissions({
// Function to get display name for access group
const getAccessGroupDisplayName = (group: string) => {
// If accessGroupNames is a list of names, just return the group string
return group;
};
// Merge servers and access groups into one list
const mergedItems = [
...mcpServers.map(server => ({ type: 'server', value: server })),
...mcpAccessGroups.map(group => ({ type: 'accessGroup', value: group })),
];
const totalCount = mergedItems.length;
return (
<div className="space-y-3">
<div className="flex items-center gap-2">
<ServerIcon className="h-4 w-4 text-green-600" />
<Text className="font-semibold text-gray-900">MCP Servers</Text>
<Badge color="green" size="xs">
{mcpServers.length}
{totalCount}
</Badge>
</div>
{mcpServers.length > 0 ? (
{totalCount > 0 ? (
<div className="flex flex-wrap gap-2">
{mcpServers.map((server, index) => (
<Tooltip key={index} title={`Full ID: ${server}`} placement="top">
{mergedItems.map((item, index) => (
item.type === 'server' ? (
<Tooltip key={index} title={`Full ID: ${item.value}`} placement="top">
<div
className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium cursor-help"
>
{getMCPServerDisplayName(item.value)}
</div>
</Tooltip>
) : (
<div
className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium cursor-help"
key={index}
className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-200 text-blue-800 text-sm font-medium"
>
{getMCPServerDisplayName(server)}
<span className="inline-block w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
{getAccessGroupDisplayName(item.value)} <span className="ml-1 text-xs text-blue-500">(Access Group)</span>
</div>
</Tooltip>
)
))}
</div>
) : (
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50 border border-gray-200">
<ServerIcon className="h-4 w-4 text-gray-400" />
<Text className="text-gray-500 text-sm">No MCP servers configured</Text>
</div>
)}
<div className="flex items-center gap-2 mt-4">
<ServerIcon className="h-4 w-4 text-blue-600" />
<Text className="font-semibold text-gray-900">MCP Access Groups</Text>
<Badge color="blue" size="xs">
{mcpAccessGroups.length}
</Badge>
</div>
{mcpAccessGroups.length > 0 ? (
<div className="flex flex-wrap gap-2">
{mcpAccessGroups.map((group, index) => (
<div
key={index}
className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-200 text-blue-800 text-sm font-medium"
>
{getAccessGroupDisplayName(group)}
</div>
))}
</div>
) : (
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50 border border-gray-200">
<ServerIcon className="h-4 w-4 text-gray-400" />
<Text className="text-gray-500 text-sm">No MCP access groups configured</Text>
<Text className="text-gray-500 text-sm">No MCP servers or access groups configured</Text>
</div>
)}
</div>