[APM] Enhance status code presentation in the Transaction sample header

[formgeist]

Summary

Enhancing the visual presentation of the HTTP status code in the Transaction header.

Solution

Highlight especially 4xx and 5xx status codes, because assumptions are that users are most interested in these being highlighted in the Transaction header, Timeline visualization and Transaction detail flyouts.

• Convert 4xx and 5xx status code labels to EuiBadge with their respective visualization colours from the TPM graph.
  • 4xx: euiColorVis7
  • 5xx: euiColorVis2
• Show badges replacing labels in;
  • Transaction header
  • Span row design
  • Transaction detail flyout
• Strip out 2xx and 3xx from the span row design in Timeline
• Remove euiColorVis7 and euiColorVis2 from our common service visualization palette used in Timeline assigned to services rendered. This is avoid confusing colour combinations, when we want to highlight.

Example of 4xx result transaction

Example of 5xx result transaction

[elasticmachine]

Pinging @elastic/apm-ui

[formgeist]

Moved to implementation

[formgeist]

Idea: To avoid clashing with the applied colour palette for services (which is just the default visualization palette), we could exempt the 4 colours we use for the Transaction result. That way they'll never mix.

[sorenlouv]

we could exempt the 4 colours we use for the Transaction result

I'm good with that. How many colors will that leave us with for services?

[formgeist]

@sqren Like 5 🙈But we have to find a more scaleable solution to this issue in any case, if that's a bigger range of colours in our services palette.

[sorenlouv]

Oh, not a lot. But yeah, we need a more scalable solution regardless...

[makwarth]

We could just highlight 4xx (one shade of red) and 5xx (another shade of red), meaning good responses are just displayed as today (plain text). That's "just" 2 colors.

[formgeist]

Sounds like a good plan to me. So only using EuiBadge for 4xx and 5xx status codes in the view will look something like this;

Would like to get a PR up next week, where we can try this out and see how it feels. I also like the fact that we'd only take out 2 colours from our services colour palette, and ones that anyways immediately would catch the attention of users because they're "warning orange" and "screaming red".

[makwarth]

LGTM 👍

[formgeist]

Updated description with the decided changes

[sorenlouv]

Fixed in #44842