[APM][Services] New empty states to encourage APM usage in logs only services

[iblancof]

Summary

Closes https://github.com/elastic/kibana/issues/190522

We want to encourage the use of APM for services that only have logs, and to achieve this, we plan to add new empty states that prompt users to add this functionality.

[!WARNING] This PR is in draft until PR https://github.com/elastic/kibana/pull/191183 is merged. Some changes will be required in ServiceTabContent afterward.

New panels

These are the tabs that will be impacted by the change:

• Overview
• Dependencies
• Infrastructure
• Service Map

[!Note] The current screenshot and recordings of the Overview do not reflect the final state. In the final version, we will show the new panel only when the service has only logs, displaying both the panel and the two log charts. This will be updated once we make the modifications in ServiceTabContent after https://github.com/elastic/kibana/pull/191183 is merged.

Tab	New panel
Overview
Dependencies
Infrastructure
Service Map

Panel links

Overview panel dismissible

[obltmachine]

:robot: GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

[elasticmachine]

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

[iblancof]

[!NOTE] Converting the PR back to draft because making the necessary changes for some of the comments involves significant structural adjustments.

[iblancof]

Nice job, Irene!

I wonder if we should have image variants for the dark mode

We completely forgot about dark mode! I will add it.

My only concern at the moment is the images size. Some of them are 600kb+ (not part of this PR, but services_inventory.png is 1.1MB). Would it possible to reduce their size to ~300kb?

Thanks for pointing that out @crespocarlos! I grabbed the assets from Figma assuming they were properly sized, my mistake for not double-checking. I’ll work on improving it!

[kibana-ci]

:yellow_heart: Build succeeded, but was flaky

• Buildkite Build
• Commit: d4e30a94b2fea2b8643f606ec5b83bb9ea47841e
• Storybooks Preview
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-191825-d4e30a94b2fe

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
apm	1871	1872	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
apm	3.5MB	3.5MB	+1.5KB

History

• :yellow_heart: Build #233749 was flaky 05bf511663cf7c14e9fbd998dc0277cca277cf7f
• :broken_heart: Build #233726 failed 79d2504b1c7609ed95099b5d712e479d86fd1620
• :yellow_heart: Build #233431 was flaky 941802eb9745d6f53426f9a54c21d9c8c1f229e2
• :broken_heart: Build #233105 failed bcc76845d7f07d54e472030bc30942663fed3cfb
• :broken_heart: Build #232971 failed 06aace6f902dd030ebaf3e6605d0c72b756eafec

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

cc @iblancof

[smith]

Irene is out for the rest of the week so I'm merging this.

[kibanamachine]

💔 Some backports could not be created

Status	Branch	Result
❌	8.16	The branch "8.16" does not exist
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 191825

Questions ?

Please refer to the Backport tool documentation