Adjust the visual styling of health check

What does this MR do and why?

Adjust the visual styling of health check results to make it feel like an intentional widget within the GitLab Duo page for self-managed Administrators.

  • Using the monospace font gives the feel of a system response that looks different from traditional alerts.
  • The final result of the check is output below to make it clear what the outcome of the results mean.
  • Adds skeleton loaders with a loading icon+text to indicate that a response has not be received yet
  • Adds a badge to indicate feature maturity

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
Before - Health Check.png Admin code suggestions XL.png
CleanShot 2024-08-06 at 16.18.09.gif No loading state while awaiting response CleanShot_2024-08-07_at_20.17.14 Skeleton loader + Loading icon

How to set up and validate locally

  1. Enable Duo Pro following instructions in https://docs.gitlab.com/ee/development/ai_features/index.html
  2. Run GDK in Self-Managed mode and enable AI features for the instance
  3. Enabled the :cloud_connector_status feature flag via Rails console
  4. Navigate to /admin/code_suggestions
  5. Use the Run health check button to view results.
Edited by Denys Mishunov

Merge request reports

Loading