[Logs & Metrics UI] Create alert flyout to use columns in EuiExpression

[andreadelrio]

We just updated the Index Threshold trigger type to use the new props available in EuiExpression (display='columns' and isInvalid). In Kibana, the common expression components now have a new prop called display which you can set to fullWidth to enable this new layout. You would need to do something similar for other components that are using EuiExpression.

For reference, this is the result for Index Threshold:

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[Zacqary]

I started working with this on the Metric Threshold alert, and my question is, do we actually want to implement this? I definitely want to see more visual consistency across alert types but switching away from inline expressions isn't seamless for metrics.

I think the columns layout looks good when the condition is expanded:

But my instinct is that when you collapse the expression, it should go back to the inline view:

And now with the FOR THE LAST expression still using fullWidth it looks kind of incongruous.

I tried taking fullWidth off of FOR THE LAST and it's still not ideal. Here's different states of multiple conditions expanded and collapsed:

(Note that I did add the Complete the expression to generate a preview prompt when the condition's field is empty, which I do like. Metric Threshold isn't using EuiEmptyPrompt at all so at the very least I think we should incorporate that.)

[Zacqary]

The layout works much more naturally with Inventory alerts

[Zacqary]

Log alerts also look good. We'd need to decide on a consistent spacing. Note additional whitespace between Inventory conditions versus the lack of whitespace between Log conditions.

[Zacqary]

So in summary, the open questions are:

• How do we get this layout to look good on Metric Threshold alerts?
• Do we prefer this layout? Is the columnar layout easy enough to read with multiple-condition alert types, or is it worth breaking visual consistency to keep Logs/Metrics alerts using inline layouts?

[jasonrhodes]

@elastic/observability-design how do we get this back on your radar so you can help us navigate this? The main issues are:

a) Multi-condition alerts, like @Zacqary explains in this comment above in this thread, and

b) Ratio alerts, which @Kerry350 explains here in the attached PR

Thanks!

[hbharding]

Thanks for bringing this back up @jasonrhodes - I tried to do some quick designs for the multi-condition alerts awhile back, but hadn't considered how this would work with ratio alerts. I think we'll need to take another look at this to accommodate both types. Unfortunately I don't have the bandwidth to tackle this in 7.12, but perhaps we can get this scheduled for the 7.13 cycle. We can probably design and implement this in the same release. (cc @katrin-freihofner @katefarrar)

[smith]

Not prioritizing this at this time.