[APM] Elastic Agent: Add option to create APM agent keys in context of configuring an integration

[formgeist]

Summary

Since we've added a UI around creating APM agent keys for authentication between APM server (Integration) and APM agents, we should consider showing an option to create keys directly within the integration as the user is configuring authentication. There are two proposals for how to support this UX.

Proposal A: Link to APM agent keys in Settings

This is the minimal effort option to add a button link to the APM agent keys management view in Settings and to allow users to create keys there and then go back to continue the integration setup.

The proposed flow is;

• The user is configuring the APM integration
• Enables the "API key for agent authentication"
• Option to "Create APM agent key" is displayed
• Clicks the button link to go to the Agent Keys view in APM Settings (preferably in a new window not to loose changes)
• User creates a new key and copies the key to be configured in their APM agent
• User returns to complete the integration configuration

CleanShot.2021-12-15.at.09.32.36.mp4

▶️ Figma prototype

Proposal B: Offer in-context option to create agent key(s)

Another option is to provide an option to create keys in the context of setting up the integration which won't move the user out of the existing setup flow. After successfully creating a key, the key will be displayed in view for as long as they're viewing the current state. There's another option for creating another key so the user can create more at a time.

The proposed flow is;

• The user is configuring the APM integration
• Enables the "API key for agent authentication"
• Option to "Create APM agent key" is displayed
• The create agent key flyout is shown and the user configures the key and saves it
• The key is presented in view and can be copied to be configured in their agent
• User returns to complete the integration configuration

CleanShot.2021-12-15.at.09.33.07.mp4

▶️ Figma prototype

@graphaelli @simitt @felixbarny @sqren Looking for your feedback on the above proposals and any questions or suggestions you might have to improve this?

[elasticmachine]

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

[felixbarny]

I didn't have a detailed look yet. But what comes to mind is that if an api key or secret token is configured, we have to pass that along when doing Java runtime attachment. This should be doable with the --config option in the attacher.

[formgeist]

@felixbarny thanks - that's definitely worth noting.

I've updated the description with more detailed flows so it's easier to follow the flow of each proposal.

[simitt]

Both options look valid, of course the second option, where the apm api key creation is integrated and not directing the user to a different page would be even nicer.