From 677ef3cdde8aea0c99471e362f7a7cd0a4a91b97 Mon Sep 17 00:00:00 2001
From: Cole McIntosh <82463175+colesmcintosh@users.noreply.github.com>
Date: Thu, 19 Jun 2025 17:07:43 -0600
Subject: [PATCH] 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)

---
 .../model_dashboard/HealthCheckComponent.tsx  |  6 +--
 .../model_dashboard/health_check_columns.tsx  | 50 +++++++++++++------
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx b/ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx
index cb4e949bf8..045a1f10db 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx
+++ b/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,
diff --git a/ui/litellm-dashboard/src/components/model_dashboard/health_check_columns.tsx b/ui/litellm-dashboard/src/components/model_dashboard/health_check_columns.tsx
index cae5a5a2b3..81270cf0ae 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard/health_check_columns.tsx
+++ b/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,