Skip to content

Conversation

colesmcintosh
Copy link
Contributor

@colesmcintosh colesmcintosh commented Jun 19, 2025

Title

Fix health check UI table design

Relevant issues

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

  • I have Added testing in the tests/litellm/ directory, Adding at least 1 test is a hard requirement - see details
  • I have added a screenshot of my new test passing locally
  • My PR passes all unit tests on make test-unit
  • My PR's scope is as isolated as possible, it only solves 1 specific problem

Type

🧹 Refactoring

Changes

This PR fixes the health check UI table design by removing the table-in-table layout and improving the user experience:

UI Improvements

  • Remove table-in-table design: Changed HealthCheckComponent wrapper from card styling (bg-white rounded-lg shadow) to simple div
  • Cleaner layout: Updated header styling from border-b px-6 py-4 to mb-6 for better spacing
  • Remove excess padding: Removed p-6 padding around table container

Enhanced Actions Column

  • Icon-based actions: Added proper PlayIcon and RefreshIcon for health check actions
  • Smart icon selection: Shows PlayIcon for new checks, RefreshIcon for re-running existing checks
  • Loading animation: Added animated dots during health check progress
  • Better UX: Included tooltips explaining each action ("Run Health Check" vs "Re-run Health Check")

Files Changed

  • ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx: Updated component layout and removed card wrapper
  • ui/litellm-dashboard/src/components/model_dashboard/health_check_columns.tsx: Enhanced Actions column with proper icons and UX
…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
Copy link

vercel bot commented Jun 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
litellm ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2025 8:46pm
@colesmcintosh colesmcintosh marked this pull request as ready for review June 19, 2025 20:56
Copy link
Contributor

@ishaan-jaff ishaan-jaff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can I get a screenshot or Loom of this

@colesmcintosh
Copy link
Contributor Author

Can I get a screenshot or Loom of this

@ishaan-jaff
Screenshot 2025-06-19 at 5 01 09 PM

@ishaan-jaff ishaan-jaff merged commit 677ef3c into BerriAI:main Jun 19, 2025
6 checks passed
@colesmcintosh colesmcintosh deleted the fix-health-ui-table branch June 24, 2025 14:22
satendrakumar pushed a commit to satendrakumar/litellm that referenced this pull request Jul 24, 2025
…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 (BerriAI#11897)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants