scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-09 22:31:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 86

[MCP Gateway] UI Quality check fixes (#12521)

Browse source 
* Add tooltip to mcp server access groups

* fix ui issues
This commit is contained in:
Jugal D. Bhatt 2025-07-12 06:56:43 +05:30 • committed by GitHub
parent 38c9b69e8f
commit db57e765a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
View file

@ -3,6 +3,7 @@ import { MCPServer } from "./types";
import { Icon } from "@tremor/react";
import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
import { getMaskedAndFullUrl } from "./utils";
import { Tooltip } from "antd";
export const mcpServerColumns = (
userRole: string,
@ -64,7 +65,12 @@ export const mcpServerColumns = (
if (Array.isArray(groups) && groups.length > 0) {
// If string array
if (typeof groups[0] === "string") {
return <span>{groups.join(", ")}</span>;
const joined = groups.join(", ");
return (
<Tooltip title={joined}>
<span className="max-w-[200px] truncate block">{joined.length > 30 ? `${joined.slice(0, 30)}...` : joined}</span>
</Tooltip>
);
}
}
return <span className="text-gray-400 italic">None</span>;

9
ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
View file

@ -4,6 +4,7 @@ import {
Modal,
message,
Select,
Tooltip,
} from "antd";
import {
TabPanel,
@ -33,6 +34,7 @@ import { isAdminRole } from "@/utils/roles";
import { MCPServerView } from "./mcp_server_view";
import CreateMCPServer from "./create_mcp_server";
import MCPConnect from "./mcp_connect";
import { QuestionCircleOutlined } from '@ant-design/icons';
const { Option } = Select;
@ -291,7 +293,12 @@ const MCPServers: React.FC<MCPServerProps> = ({
</Option>
))}
</Select>
<Text className="text-lg font-semibold text-gray-900 ml-6">Access Group:</Text>
<Text className="text-lg font-semibold text-gray-900 ml-6">
Access Group:
<Tooltip title="An MCP Access Group is a set of users or teams that have permission to access specific MCP servers. Use access groups to control and organize who can connect to which servers.">
<QuestionCircleOutlined style={{ marginLeft: 4, color: '#888' }} />
</Tooltip>
</Text>
<Select
value={selectedMcpAccessGroup}
onChange={handleMcpAccessGroupChange}