[APM] Add "Analyze data" button to the Exploratory view for iOS/Swift and RUM agents and disable irrelevant components within the service views

[formgeist]

Summary

Related design issue: https://github.com/elastic/observability-design/issues/50

Related issue for adding agent icon support #100469

We want to enhance the performance analysis for the mobile agents, such as the iOS agent, and leverage the new Exploratory view that is available in Observability. We need to add individual chart links to the Exploratory view for each of the relevant charts (latency, errors, throughput, etc.) in the Service overview and Transactions / Errors views. We're working on finalizing the design of the placement of these buttons and a full guide for where they should be added.

Solution

• Adding an "Analyze data" button option to the Service header for the iOS/Swift agent and RUM services

View screens

• Link should select the default report type (kpi) and add the service.name, service.environment, and the relevant time range to the URL params.

View example documentation

Example implementation from UX app
https://github.com/elastic/kibana/blob/master/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx

Example URL link

const uxExploratoryViewLink = createExploratoryViewUrl(
  {
    'apm-series': {
      dataType: 'mobile',
      time: { from: rangeFrom, to: rangeTo },
      reportType: 'kpi',
      reportDefintion: {
        'service.name': ['elasit-co'],
        'service.environement': ['production']
      },
      operationType: 'average',
    } as SeriesUrl,
  },
  http?.basePath.get()
);

• Add tooltip to the button: upon hovering on the button, we'll display a tooltip that explains the feature is in experimental following the same implementation from the UX and Uptime apps.

View screens

• iOS/Swift – Service overview: Hide Instances scatterplot and table from the view – @sqren explained how to hide individual components from the overview page here;
• iOS/Swift: Though the iOS agent already collects CPU and Memory metrics, the Metrics tab doesn't show them yet. If making this view working for the iOS agent is too big, let's hide this tab for now.

View screens and documentation

Illustrated example from another Service overview page

[elasticmachine]

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

[sorenlouv]

If we want to hide charts on the service overview page for ios similar to what we do for RUM we need to do it here:

kibana/x-pack/plugins/apm/public/components/app/service_overview/index.tsx

Line 84 in 5da329a

{!isRumAgent && (

[formgeist]

Added some documentation on how to create dynamic URLs that can open a specific service name, environment and report type in the Exploratory view for the selected service - and also added that we need to add the same Analyze data links for RUM services going to the RUM reports available.

[AlexanderWert]

@sqren , @formgeist
The changes on the exploratory-view for the mobile data reports have been merged (#99565), so we are good to move on with this issue.
I updated / corrected some of the examples / documentation in the description above.

Let me know if there are any questions / blockers.

[formgeist]

@AlexanderWert Not sure what the scope of this integration is, but I've opened #102700 to at least rename the names of the metrics to make them consistent and some minor adjustments.

[smith]

Follow-up issues found in testing:

• [APM] Analyze data shows no data when all environments are selected #105467
• Hide the "Instances" chart from mobile overview page #105242
• [APM] Hide analyze data link when user has no lens permissions #105476