[UX] Add core web vitals in obsv homepage

[shahzad31]

Summary

Fixes: #78974

Added core vital view in observability homepage, basically moved component from UX app and reused api.

[cauemarcondes]

@shahzad31 maybe you've already done it, but I think you want to add an empty state for the User Experience panel. You can do it by adding a new entry in this file https://github.com/elastic/kibana/blob/master/x-pack/plugins/observability/public/pages/overview/empty_section.ts#L53:L53

[cauemarcondes]

I don't know about this, I feel hasData has been given way more responsibility than only checking if there is any data available.

[shahzad31]

with separation of hooks this will improve

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[cauemarcondes]

@shahzad31 @formgeist I'm not sure if you want to add an empty state section for the UX too like:

[formgeist]

@cauemarcondes @shahzad31 Yes, good call - I think we should promote here too. The button link would go to the RUM agent setup instructions.

I'll try and find some copy that we can use for the message.

[cauemarcondes]

I think we should promote here too. The button link would go to the RUM agent setup instructions.

@formgeist maybe we should consider adding a new app in the /landing page too?!

[formgeist]

@cauemarcondes Perhaps, but I think this is also a silent release, so I'll follow up with the UX PMs to see how they want to promote it.

[shahzad31]

@shahzad31 I'm not sure if you want to add an empty state section for the UX too like:

@cauemarcondes added empty state, i am not sure, what happened there, i am adding this second time, i guess i deleted that while i was deleting loading improvement refactor :)

[cauemarcondes]

LGTM thanks for the refactorings 🎉

[formgeist]

I reckon we need to make the "view in app" link read the service name value so we link to the right service within the app. I think right now it doesn't pass anything into the URL params. @shahzad31 is it selecting the app with the most traffic in the UX app as well? Hence why I think it's important that you don't land on another service than is specified in the overview page.

[shahzad31]

I reckon we need to make the "view in app" link read the service name value so we link to the right service within the app. I think right now it doesn't pass anything into the URL params. @shahzad31 is it selecting the app with the most traffic in the UX app as well? Hence why I think it's important that you don't land on another service than is specified in the overview page.

@formgeist I think i will have to check, but i think it make sense to align this in UX and make sure it selects the service with most traffic, i will do the change in UX app.

[formgeist]

LGTM from design - only need to make the view in app link use the service name

[formgeist]

The UX app will find the service with the most traffic as default selected service as well, so we don't need to specify it in the URL for "view in app".

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 38d4701

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
apm	1276	1273	-3
observability	96	106	+10
total			+7

async chunks size

id	before	after	diff
apm	4.2MB	4.1MB	-4.1KB
observability	163.2KB	166.8KB	+3.7KB
total			-416.0B

distributable file count

id	before	after	diff
default	47107	47111	+4

page load bundle size

id	before	after	diff
apm	44.3KB	46.3KB	+2.0KB
observability	52.4KB	71.2KB	+18.8KB
total			+20.8KB

History

• 💔 Build #79656 failed 95ff454
• 💚 Build #79514 succeeded 3ee592d
• 💚 Build #79507 succeeded 04fcf22
• 💚 Build #79500 succeeded 16104e8
• 💚 Build #79472 succeeded 7e7a864

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream