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)

Author: colesmcintosh

ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx

@@ -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

@@ -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,