[Discover] Add log level badge cell renderer for logs profile

[davismcphee]

Summary

This PR adds a log level badge cell render for log.level and log_level fields when the logs data source profile is active in Discover:

Resolves #186567.

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Flaky Test Runner was used on any tests changed
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[davismcphee]

/ci

[elasticmachine]

⏳ Build in-progress, with failures

• Buildkite Build
• Commit: bbfacef29c1e01771fceb541d1e0eeecde091820

Failed CI Steps

• Jest Integration Tests #3
• Jest Integration Tests #3
• Check Types

Test Failures

• [job] [logs] Jest Integration Tests #3 / telemetry tasks telemetry-prebuilt-rule-alerts should manage runtime errors searching endpoint metrics
• [job] [logs] Jest Integration Tests #3 / telemetry tasks telemetry-prebuilt-rule-alerts should manage runtime errors searching endpoint metrics

History

cc @davismcphee

[davismcphee]

/ci

[davismcphee]

/ci

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[michaelolo24]

Investigations code owner changes! 👍🏾

[jughosta]

Awesome! More colors on Discover page 🙂

[jughosta]

I think for some badges we might want to use white text instead of dark. For example for emerg badge here:

Or is it fine with the default dark color text regardless of current badge background color?

cc @MichaelMarcialis

[davismcphee]

I thought the same thing, although it currently matches the mockups and it seems EUI's util that is supposed to do this automatically determined the text should be dark (I tested with an extra dark colour to confirm it renders white in that case). If we want to do this, we'll need to manually decide which ones should have white text, so I'll leave it to @MichaelMarcialis to determine if we should.

[davismcphee]

I merged this PR to get the feature in, but we can make followup changes around this if needed based on @MichaelMarcialis' feedback.

[MichaelMarcialis]

Thanks for the ping, @jughosta and @davismcphee! Yes, the badges' black text color used in the mockups is correct and passes the AA WCAG accessibility standard for normal text. Switching to white will actually cause the text within the badge to fail this contrast check, even in the emerg badge.

[davismcphee]

Thanks for confirming @MichaelMarcialis!

[jughosta]

Would it be possible to use the same renders also for the badge in Log Overview tab?

[davismcphee]

Definitely doable, although I'd prefer to save it for a followup if we do since it'll require some refactoring of the current log level chip component. @elastic/obs-ux-logs-team WDYT about this suggestion to update the log level chip to use the new log badge component for consistency? If we all agree, I'll create a separate issue to implement this as a followup.

[tonyghiani]

Always in favour of visual consistency, +1 for updating it and make them look the same 👌

[davismcphee]

Great! I created a followup issue to take care of it here: #188553.

[jughosta]

LGTM 👍