[Log Explorer] Log Flyout header and table

[tonyghiani]

📓 Summary

We want to add a flyout heading section with the most relevant details of a log such as the level, timestamp and the log message.
Also, we want to keep in view the original tabbed content already present in vanilla Discover.

🎨 Design

• Figma design

✔️ Acceptance criteria

• Should display a log.level badge. The badge should be coloured accordingly with the level (normalized to lowercase values for unique entries), a hypothetical colour mapping can be:
  • error ➡️ danger
  • warning ➡️ warning
  • info ➡️ primary
  • any other ➡️ default
• Should display a timestamp badge in ISO 8601 date format.
• Should display the log message field. This one...
  • should be limited to 100px height to prevent taking to much space, with the option to scroll the content and expand it in fullscreen mode.
  • should be copyable.
• Should display the original flyout content at the end of the page, which means including the tabbed content for Table and JSON sections.

💡 Implementation hints

• For the message field, the EuiCodeblock component should provide most of the requirements out of the box.
• The original tabbed content should be already provided by the customization extension point when [Log Explorer] Enhance flyout customization extension point to support content replacement #169394 is implemented.

[ruflin]

Should display the log message field. This one...

We need to discuss in more detail on what happens if message is empty. @weltenwort is thinking more about this.

[tonyghiani]

We need to discuss in more detail on what happens if message is empty.

Totally, we already had a sync yesterday about this and we'll probably talk more about this.
Meanwhile, we'll proceed with this implementation as planned to not block the other flyout tasks.