[APM] Replace Lens embeddable charts used for mobile services

[gbamparop]

In 8.6 we have introduced the following charts for mobile services using Lens embeddables:

• most used devices
• most used network connection type
• most used OS version
• most used app version

A stretch goal for 8.8 will be to replace the lens embeddables with elastic-charts.

Links

• [APM] Gather limitations of Lens and requirements of APM  #145986
• Pitch (internal)
• Figma mockups (internal)

[elasticmachine]

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

[achyutjhunjhunwala]

@gbamparop @kpatticha Can you confirm the following behaviour.
When we replace the current Lens Embeddable implementation with elastic-charts -

1. We don't want these charts top open in Lens any more and hence we will get rid of the context menu as well

2. Is the Sunburst chart the recommended chart to use here - https://elastic.github.io/elastic-charts/?path=/story/sunburst--ordered-slices&globals=theme:light
3. We will have to add our own API implementation (ES Query) to retrieve this data as previously i can see we were passing a prepared statement to Lens Embeddable to make the query. Also pointed here
   [Update] I will use the existing get_mobile_filters endpoint to retrieve this information. Will simply modify it for my use case

[gbamparop]

1. We don't want these charts top open in Lens any more and hence we will get rid of the context menu as well

This is only available with lens embeddable so we won't have it with elastic charts.

2. Is the Sunburst chart the recommended chart to use here - https://elastic.github.io/elastic-charts/?path=/story/sunburst--ordered-slices&globals=theme:light

The ones above seem like donut charts. @boriskirov would you rather have something else instead now that we're moving away from the embeddables? We've discussed custom charts before but I think it's good to pick one which is available in elastic-charts.

[kpatticha]

I added the Figma link in the ticket description as a reference.

In the mockups, the following components were suggested.

UX solution uses similar components and we might able to reuse the component. it seems it is defined.

kibana/x-pack/plugins/observability/public/components/shared/core_web_vitals/core_vital_item.tsx

Line 77 in 70fe1a8

export function CoreVitalItem({

I suggest, if we can reuse the component to go in that direction otherwise we can explore more straightforward alternative.

[sorenlouv]

@gbamparop Can you add the reasoning for replacing lens embeddables with elastic charts? In general we want to move towards embeddables because users requests it (enables them to modify the visualisations) so there should be good reasons for moving away from them.

[kpatticha]

@sqren I tried to summarize the pros/cons here

Also, there was an internal discussion about Lens with the observability folks (Observability UI Weekly 23/02)

[gbamparop]

@gbamparop Can you add the reasoning for replacing lens embeddables with elastic charts? In general we want to move towards embeddables because users requests it (enables them to modify the visualisations) so there should be good reasons for moving away from them.

That was our intention when we started introducing charts for mobile, as @kpatticha mentions above after some analysis we have discussed with the team and decided to use custom charts instead. I think one of the main reasons is the support for comparisons so although introducing this functionality is not part of this issue, it'll be great if we pick a chart type where the design team has a path forwards about where the comparisons should be displayed.

[achyutjhunjhunwala]

@boriskirov Can you help us here picking the right chart based on the provided comments above ?

[achyutjhunjhunwala]

@isaclfreire I just realised that Boris is on PTO, could you help us here ?

[achyutjhunjhunwala]

Currently the Most Used Devices section only display the top 5 items and the percentage is summed up for those 5 devices to a 100%. As discussed with @akhileshpok, we will also display other options to cover the results returned by the sum_other_doc_count count as well

Also @akhileshpok confirmed we will not be displaying comparisons on this chart. Hence i will add the tooltip, comparisons not supported

@isaclfreire In that case the only feedback i need from you is to choose the right chart for this implementation, i believe this is the one which we will be using - https://elastic.github.io/elastic-charts/?path=/story/sunburst--with-direct-text-labels&globals=theme:light

cc: @gbamparop @kpatticha

[achyutjhunjhunwala]

The charts loads properly though i have my concerns around the data.

@sqren @dgieselaar I compared the queries fired by us and by lens team to get Most Used Charts for Device Identifier (just one example). I see a difference in response for the chart values

Query we fired is

Query fired by Lens is

The difference i see is we filter the terms by "processor.event": ["transaction"] and must query for {"term": {"transaction.type": "mobile"} ,

Due to that the difference in response is present. Is my assumption correct that our new queries are correct compared to what we were passing to Lens previously and that i can mark this as done ?

[sorenlouv]

@achyutjhunjhunwala Thanks for the thorough testing! Do you get the same numbers if you remove the filters "processor.event": ["transaction"] and {"term": {"transaction.type": "mobile"}?

It sounds right that those filters should be applied so it was probably a (small) bug that they weren't in the Lens implementation.

[achyutjhunjhunwala]

Not exact, but closer. I will mark this ticket test done in that case