diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx index b4369f0a45c..20259eef3de 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx @@ -61,6 +61,67 @@ export const mcpServerColumns = ( ), }, + { + id: "health_status", + header: "Health Status", + cell: ({ row }) => { + const server = row.original; + const status = server.status || "unknown"; + const lastCheck = server.last_health_check; + const error = server.health_check_error; + + const getStatusColor = (status: string) => { + switch (status) { + case "healthy": + return "text-green-500 bg-green-50 hover:bg-green-100"; + case "unhealthy": + return "text-red-500 bg-red-50 hover:bg-red-100"; + default: + return "text-gray-500 bg-gray-50 hover:bg-gray-100"; + } + }; + + const getStatusIcon = (status: string) => { + switch (status) { + case "healthy": + return "●"; + case "unhealthy": + return "●"; + default: + return "●"; + } + }; + + const tooltipContent = ( +
+
Health Status: {status}
+ {lastCheck && ( +
+ Last Check: {new Date(lastCheck).toLocaleString()} +
+ )} + {error && ( +
+
Error:
+
{error}
+
+ )} + {!lastCheck && !error && ( +
No health check data available
+ )} +
+ ); + + return ( + + + + ); + }, + }, { id: "mcp_access_groups", header: "Access Groups", diff --git a/ui/litellm-dashboard/src/components/mcp_tools/types.tsx b/ui/litellm-dashboard/src/components/mcp_tools/types.tsx index 9bf5725ac0b..5973a438650 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/types.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/types.tsx @@ -138,6 +138,9 @@ export interface MCPServer { created_by: string updated_at: string updated_by: string + status?: "healthy" | "unhealthy" | "unknown" + last_health_check?: string | null + health_check_error?: string | null teams?: Team[] mcp_access_groups?: string[] allowed_tools?: string[]