[Obs User Experience] Core Web Vitals timings don't change colour to reflect status

[paulb-elastic]

The colour of the core web vitals in the User Experience dashboard (that represents RUM data) does not change to reflect the status of the value (good, needs improvement, poor).

The values are currently shown in green, the same colour that reflects the good state for these metrics, which suggests the value is good. However, even when the value is not good (e.g. 13.66 seconds for LCP), it still shows as green.

In the above screenshot, all vitals are in fact poor:

• LCP of 13.66 seconds is greater than 4 seconds
• INP of 2.80 seconds is greater than 500ms
• CLS of 0.811 is greater than 0.25

These have all been seen on the https://edge-oblt.kb.us-west2.gcp.elastic-cloud.com/ environment, where there is RUM data.

As these metrics are currently shown in green (the same green that reflects good), then the UX suggests that the metric is good, which is misleading. It should be shown in green, yellow or red, based on it being good, needs improvement, or poor.

Kibana version:

• All versions (main and 8.14)

Steps to reproduce: The following steps should highlight the issue with existing data

1. Visit https://edge-oblt.kb.us-west2.gcp.elastic-cloud.com/app/ux
2. Increase the time range from 15 minutes to 7 days
3. Change the percentile to 99th
4. As these settings will represent almost all users on the site, you should get a larger set of core web vitals, that are not good.

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)