[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?

[formgeist]

@cauemarcondes Did you mean when you've completed the field name, what happens?

Can we move the focus on the value field right after?

[cauemarcondes]

Does that help?

Yeah, so I'll show an error message for the max characters, and only make the fields read if they are empty.

What kind of message are you thinking of here?

I see two scenarios here:

1. The user has selected an option e.g. service.name but didn't add any value.

• In this case, I would just ignore that filter, and save the action.

2. The user didn't select an option, but add value.

• In that case, I'd show a message or maybe only change the color of the select box to red.

WDYT?

[cauemarcondes]

@formgeist: Summary of what was agreed on Zoom.

• When a filter name is selected, the focus should go to the Value field. When the field loses focus and no value has been added, it should turn Red making it required.
• When a value is added in the Value field, but no filter name was selected, the Filter name field should turn Red making it required.

For now, we decided to not show any message.

[sorenlouv]

I think we should be mindful of not adding too much custom validation. If we can get validation from EUI/the platform for free, great! But if we have to handle this I think we should be careful not to spent too much energy on this.

On the same note, the text below the label field currently says:

"Labels can be max. 128 characters."

I feel this is a technical limitation that doesn't deserve this much attention. Wouldn't it be better to use that text to help the user understand what the label is used for? And why do we have a limit in the first place? I think dropping this limitation would simplify things a bit.

[formgeist]

I feel this is a technical limitation that doesn't deserve this much attention. Wouldn't it be better to use that text to help the user understand what the label is used for? And why do we have a limit in the first place? I think dropping this limitation would simplify things a bit.

I can agree to that this might not be a hard requirement to keep it below 128 chars. We can instead allow for longer, but have the help text state: Keep it as short as possible. This is the label shown in the actions context menu.

[cauemarcondes]

I feel this is a technical limitation that doesn't deserve this much attention. Wouldn't it be better to use that text to help the user understand what the label is used for? And why do we have a limit in the first place? I think dropping this limitation would simplify things a bit.

I can agree to that this might not be a hard requirement to keep it below 128 chars. We can instead allow for longer, but have the help text state: Keep it as short as possible. This is the label shown in the actions context menu.

Should we ellipses the label in the actions context menu in that case?

[formgeist]

Should we ellipses the label in the actions context menu in that case?

Yes, definitely truncate with either a EuiTooltip or simple title on the link for the full label 👍

[sorenlouv]

Wrt. filter validation: is it bad UX to simply remove a filter if either the field or value is missing when the user clicks save? That would be super simple to do.

[formgeist]

If the user has filled either field or value, there must be some intent, that's why I want to show throw a visual error and allow the user to review. We discussed that if both fields are empty, even if they have added more rows, we would allow them to save. I'm fine with making it more simple, but that was my intention with having a validation if you have filled either field.

[cauemarcondes]

Initial state: any filters are required.

• First field: Name selected, Value empty: Error
• Second field: Name empty, Value filled: Error
• Third field: Name selected, autofocus on the Value: No Error
• Fourth field: it's not required. No Error

These will be the only validations for the filter section. WDYT @sqren and @formgeist ?

[formgeist]

@cauemarcondes I think this is great for validating your inputs.

[cauemarcondes]

@formgeist what about the message in the toast notification after creating/updating a custom action?

[formgeist]

@cauemarcondes Here are the examples for successful creation, editing, and deletion.