[APM] Create and configure custom actions links

[nehaduggal]

Links

• Figma prototype

Summary of the problem : Currently Kibana APM UI does not allow customers to embed custom links to external URLs. Adding this ability from the actions dropdown in the trace (and transaction) details to add/edit/delete additional custom links will enable users to configure additional views of their data and/or will enable them to link to external tools for more information.

Ideal solution (optional)

• User can create an unlimited number of custom links by defining the following parameters in a manage UI
  • Link label
    • Max length, 128 chars?
  • Link URL
  • Add field value variables from the selected transaction document metadata to retrieve i.e. the trace.id and use it in the URL.
• The custom links will be displayed in all existing action menus in the APM UI
  • Trace sample
  • Transaction details
• User can scope the display of the action to a number of fields available;
  • service.environment, service.name, span.id, trace.id, transaction.id, transaction.type
• User will access a new section of the existing APM settings named "UI customization" that will have a custom links section.
• Under the hood, custom actions will additionally carry a action.type custom and the existing APM links can be type ui or similar, just to make sure they can be separated later on.
• Under the hood, the custom actions will also carry a context.type transaction which means we can extend to spans and errors at a later point for users to scope the display of their custom actions to a specific proccesor event type

Are there any pages or actions that relate to this feature?
This is an extension of the custom links in the Actions drop down captured in this issue elastic/kibana#53187

[formgeist]

@nehaduggal @graphaelli I've updated the description with some more notes on the feature from my talk with Gil earlier. Let me know if there's anything I've missed.

There's a couple of open questions, but none that urgently needs to be resolved before I'll start creating the initial screens.

• Do we need to convert the Error occurrence link currently going to Discover to an Actions menu with these custom links?
• Any other places we'd like to add the Action menu?

[formgeist]

I've made a first stab at the design proposal for this feature. As per last time, I've created a quick video with a walk-through of the UI. Basically it's a repeat of the central config UI, but with obvious changes to the creation flyouts and lists, but hopefully we should be able to leverage some of the same parts and interactions.

Video walk-through

Figma prototype

[formgeist]

Design update - Jan 22, 2020

Figma prototype

Based on some of the feedback I've gotten on the initial proposal, I've made some additions to the user flow. Overall the set up is looking good, but we want to allow the user a more direct creation from a given service view. That's why we're adding options to create a new action and go to the list of actions with a given service filtered so it's a lot easier to get an overview of the custom actions already in place.

With the UX change of adding a new custom action from within a service view, i.e. the Trace sample panel, the create flyout will open on that page, not redirecting the user to the Customize UI settings view.