Improve Observability setup page and process

What does this MR do and why?

This improves the setup page in three ways:

  1. After a user enables Observability, we redirect back to this page and want to show them the setup instructions. Since the page determines if we should show the setup instructions or the Enable button based on if the settings have been created, and the settings are created in a background job, we're showing them the enable button instead of the setup instructions. Add a param that allows us to show the setup instructions for this brief period when the job hasn't run yet. It won't fix everything but should be less confusing for users
  2. Add copy buttons for the OTel endpoints
  3. Add the CI/CD observability status and instructions for setting it up if it's not configured.

Duo generated summary

This change improves the GitLab Observability feature setup flow by adding better user guidance and configuration details. When users successfully request access to observability features, they're now automatically redirected to a setup page that shows their specific connection endpoints and configuration instructions. The setup page has been enhanced with more detailed network requirements, firewall configuration notes, and clearer explanations of the different connection options available. The code also adds visual indicators showing whether certain configuration variables are properly set up, and includes copy-to-clipboard buttons to make it easier for users to copy their endpoint URLs. Additionally, some of the configuration display logic was moved into a reusable component to keep the code organized. Overall, these changes make it much easier for users to understand how to connect their applications to GitLab's observability service after getting access.

References

Screenshots or screen recordings

Updated flow

Screen_Recording_2025-12-03_at_12.29.42_PM

Before After
Screenshot_2025-11-26_at_1.55.56_PM Screenshot_2025-12-03_at_12.58.11_PM

How to set up and validate locally

  1. In rails console enable the feature flag and set the group settings (Replace YOUR_EMAIL)
    Feature.enable(:observability_sass_features, group)
  2. Navigate to http://localhost:3000/groups/toolbox/-/observability/setup and click on "Enable Observability"
  3. If you want to view the changes to the other observability pages, you can mock the worker with:
    group = Group.find_by_path('toolbox')
    group.create_observability_group_o11y_setting!(
       o11y_service_url: 'http://localhost:8080',
       o11y_service_user_email: 'totallyfakeemail@fakeemailservice.com',
       o11y_service_password: 'passwordmcpasswordface',
       o11y_service_post_message_encryption_key: 'your-super-secret-encryption-key-here-32-chars-minimum',
    )
  4. Refresh the setup page and click on Observability > Services or navigate directly to http://localhost:3000/groups/toolbox/-/observability/services

MR acceptance checklist

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

Edited by Dakota Dux

Merge request reports

Loading