tiennm99/litellm
1
0
Fork 0
mirror of https://github.com/tiennm99/litellm.git synced 2026-08-13 02:22:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix health check UI table design - Remove table-in-table design from HealthCheckComponent - Change wrapper from card styling to simple div with mb-6 spacing - Remove padding around table container for cleaner layout - Add proper icon-based actions in health check table - Use PlayIcon for new checks and RefreshIcon for re-running checks - Add loading animation with dots during health checks - Include proper tooltips for action buttons (#11897)

Browse Source
This commit is contained in:
Cole McIntosh
2025-06-19 16:07:43 -07:00
committed by GitHub
parent d2e54944a3
commit 677ef3cdde
2 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx
+3 -3
View File
@@ -470,8 +470,8 @@ const HealthCheckComponent: React.FC<HealthCheckComponentProps> = ({
};
return (
<div className="bg-white rounded-lg shadow">
<div className="border-b px-6 py-4">
<div>
<div className="mb-6">
<div className="flex justify-between items-center">
<div>
<Title>Model Health Status</Title>
@@ -505,7 +505,7 @@ const HealthCheckComponent: React.FC<HealthCheckComponentProps> = ({
</div>
</div>
<div className="p-6">
<div>
<ModelDataTable
columns={healthCheckColumns(
modelHealthStatuses,
ui/litellm-dashboard/src/components/model_dashboard/health_check_columns.tsx
+35 -15
View File
@@ -2,7 +2,7 @@ import { ColumnDef } from "@tanstack/react-table";
import { Button, Badge } from "@tremor/react";
import { Tooltip, Checkbox } from "antd";
import { Text } from "@tremor/react";
import { InformationCircleIcon } from "@heroicons/react/outline";
import { InformationCircleIcon, PlayIcon, RefreshIcon } from "@heroicons/react/outline";
interface HealthCheckData {
model_name: string;
@@ -226,21 +226,41 @@ export const healthCheckColumns = (
const model = row.original;
const modelName = model.model_name;
const hasExistingStatus = model.health_status && model.health_status !== 'none';
const tooltipText = model.health_loading
? 'Checking...'
: hasExistingStatus
? 'Re-run Health Check'
: 'Run Health Check';
return (
<div
className={`text-sm cursor-pointer ${
model.health_loading
? 'text-gray-400 cursor-not-allowed'
: 'text-indigo-600 hover:text-indigo-700 hover:underline'
}`}
onClick={() => {
if (!model.health_loading) {
runIndividualHealthCheck(modelName);
}
}}
>
{model.health_loading ? 'Checking...' : 'Run Check'}
</div>
<Tooltip title={tooltipText} placement="top">
<button
className={`p-2 rounded-md transition-colors ${
model.health_loading
? 'text-gray-400 cursor-not-allowed bg-gray-100'
: 'text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50'
}`}
onClick={() => {
if (!model.health_loading) {
runIndividualHealthCheck(modelName);
}
}}
disabled={model.health_loading}
>
{model.health_loading ? (
<div className="flex space-x-1">
<div className="w-1 h-1 bg-gray-400 rounded-full animate-pulse"></div>
<div className="w-1 h-1 bg-gray-400 rounded-full animate-pulse" style={{animationDelay: '0.2s'}}></div>
<div className="w-1 h-1 bg-gray-400 rounded-full animate-pulse" style={{animationDelay: '0.4s'}}></div>
</div>
) : hasExistingStatus ? (
<RefreshIcon className="h-4 w-4" />
) : (
<PlayIcon className="h-4 w-4" />
)}
</button>
</Tooltip>
);
},
enableSorting: false,