[APM] Custom actions: Add flyout for creating and editing custom actions

[formgeist]

Summary

As outlined in the design elastic/apm#196 we want to enable users to create custom actions that will appear in the Actions context menus in the UI. Currently available in the Transaction detail view and detail flyouts for Transactions and Spans in the Timeline.

Flyout for creating and editing actions

Links
Figma prototype

• Create flyout with form elements to create and edit a custom action.
• Label: Max. 128 characters validation (show error validation message if exceeded)
• Required fields: Label and URL are all required in order to create an action.
• Edit state: Option to delete the custom action in the footer.
• Filters: Option to select fieldname and enter value to scope the display of the action to e.g. a specific service or transaction name.
• Filters: Select fieldname options a limited as the user selects from the list, meaning there can only one value input per fieldname in the list. The user can comma separate to include multiple values.
• Filters: Not specifying any filters will make the action appear in all action menus in all services in the Kibana instance.

Design

[elasticmachine]

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

[formgeist]

@cauemarcondes I've updated the description with a new task list and prototype link and screens. Let me know if you have any comments or feedback.

[formgeist]

Create a related issue to track the implementation of the in-context flyout when creating an action from a selected service and transaction detail #57783

[cauemarcondes]

@formgeist can you tell me what will be the messages for:
Label:

• Empty state:
• max length 128:
  URL:
• Empty state:

If a new filter is added but the value is missing (the user has selected only the field name), are we going to show a message too or just ignore that field?

[cauemarcondes]

@formgeist Where the link Learn more in the docs. should point to?

[formgeist]

@formgeist Where the link Learn more in the docs. should point to?

I've created an issue for the documentation, so we should be able to get a permalink URL we can add https://github.com/elastic/observability-dev/issues/650

[formgeist]

Label:

• Empty state:

The placeholder text will be: e.g. Elastic.co

• max length 128:

The label exceeds 128 characters. Please review and shorten it. as invalid red text.

URL:

• Empty state:

The placeholder/empty text will be: e.g. https://www.elastic.co

Does that help?

If a new filter is added but the value is missing (the user has selected only the field name), are we going to show a message too or just ignore that field?

What kind of message are you thinking of here?