[APM Service Logs] Show flyout in LogsEmbeddable

[formgeist]

📓 Summary

One of the existing capabilities of the Logs UI log stream view is the option to view the details of a specific log document in a fly-out which can be invoked from the context menu button when hovering each log line. This capability should be available for the shared <LogStream /> component as well.

✔️ Acceptance criteria

• The action menu is shown in the service logs tab in APM.
• The shared log stream component can be configured to display the log entry action menu with the already defined "View Details" entry.
• The action menu is not enabled by default so consumers can opt into it.
• The fly-out implementation is https://github.com/elastic/kibana/blob/eff1e0c114ab8b2f44326290e91ca4b51f29ba13/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx.
• (stretch goal) The action menu is shown in the trace view logs tab in APM

🎨 Mock-ups

Action menu and fly-out as currently shown in the Logs UI:

APM: Show the details for a selected logline in the Logs tab for an individual Trace:

APM: Show the details within the Logs tab for the selected service:

💡 Implementation hints

• The menu should show up when the onOpenLogEntryFlyout prop is passed to the ScrollableLogTextStreamView. So the shared component would just have to handle basic state mangement and conditionally mount the existing fly-out. Data loading is handled within the fly-out component already.

Possible follow-up tasks

• Enable usage in dashboard embeddable if it doesn't interfere with the rest of the UI
• Enable usage in metric UI once [Infrastructure UI] Convert enhanced host details to EuiFlyout #120425 is done

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[formgeist]

As indicated in #123256 this is one of the most prioritized features for places where the Logs component is embedded as it can provide additional details without having to navigate away from the existing context.

@jasonrhodes Do you want to ensure that we prioritize on our roadmap as part of supporting embedded use-cases within Observability? Thx

[formgeist]

@jasonrhodes @smith Would you consider putting this on the planning for the next cycle? Would love to see this implemented in the embeddable logs component.

[weltenwort]

The description shows that the log stream component is used deeply in UI hierarchies and in floating dialogs. Is the addition of a fly-out appropriate in all locations or do we need to be selective about it?

[formgeist]

@weltenwort That's definitely worth considering, but in my opinion I don't think it makes sense in the above use-cases to change the behaviour depending on the location. I can imagine in all cases the user will want to learn more details about the log line and it will quickly become an expected interaction.

@katefarrar @katrin-freihofner any thoughts on adding the "view details" flyout for inspecting the log document detail in a flyout?

[katrin-freihofner]

@formgeist Inventory is going to move that flying panel into a flyout which means triggering a flyout from a flyout. I think that's why @weltenwort is concerned. I think it can work - it just needs a bit more work to define the behavior in this case.

[formgeist]

@katrin-freihofner Right, that's true. I didn't necessarily want this to be blocked by that conversion, but I imagine we can solve that use-case (and any subsequent use-cases that require to show the Logs component inside a flyout) after this implementation.