[APM] Fleet: APM Integration settings (fleet editor) redesign

[simitt]

Design issue: https://github.com/elastic/observability-design/issues/29

Add an editor for configuring APM Server options when installed as Elastic Agent integration and configured in Fleet.

Only a handful of APM settings can be configured in the experimental APM Server package for Agent/Fleet Integration. elastic/apm-server#4690 introduces a few more options, where having dedicated setting groups would be more user friendly; e.g. grouping together RUM config options or security related config options. More options to follow throughout the journey of becoming an Elastic Agent Integration.

Also in scope (in alignment with the design issue):

• APM Agent manual installation instructions
• Java agent runtime attachment UI

Fleet UI allows for custom extensions. @kevinlog and @paul-tavares were working on a nice custom policy editor for the Elastic Endpoint Integration, which might be used as reference implementation.

More APM Server config options will follow; in case all options need to be known for the design, we can list the options here.

Screenshots

Current APM Server Integration UI

Elastic Endpoint Editor

Solution

As described in https://github.com/elastic/observability-design/issues/29, the redesign of the integrations settings page will consist of relevant groups for the configuration of the server. This design is meant as a display pattern rather than a 1-1 ordering of the fields and the content will need additional texts for certain group descriptions. This will come in a later iteration.

• Each group is displayed in a panel with a panel header including a title and description. The contents will be displayed as described forms. We'll determine the shown options vs. hiding the uncommon options in "Advanced options" accordion. This will make the default setup much easier to digest when adding the integration initially.

• Options for enabling features such as RUM and TLS will determine the required/optional state of the inputs in the group form. E.g. enabling TLS will show invalid until the required fields are filled.

• Frozen flags (read-only configurations due to Cloud-managed Fleet) will show a prepend label with a lock icon and the input itself as read-only.

View full unfolded page

[elasticmachine]

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

[graphaelli]

This will be good to have but considering it an unlikely stretch goal for 7.13.

[graphaelli]

@formgeist - @jalvz can provide requirements for design

[jalvz]

We will also have some settings to configure the Java agent attacher (elastic/apm-server#4830, elastic/apm-server#4829), which will probably need a clear visual distinction, too.

[felixbarny]

For other agents, we'd also want to show manual installation instructions. See also #88822 and #93420 (comment) #89989.
I agree that a design phase makes a lot of sense. Do we already have a design issue for 7.13 for this? I'm happy to collaborate on that.

[formgeist]

@felixbarny and others; I've opened a separate design issue to track the design process for the new configuration view https://github.com/elastic/observability-design/issues/29 - feel free to add additional specifications in there.

[formgeist]

Updated the description with the proposed settings redesign. This should give enough guidance for the initial implementation and we can iron out the details later on. cc @sqren @simitt