[Logs UI] Use Unified Search Bar: support date picker

[Kerry350]

Summary

Please see this issue for high level overview: #142714

This issue can be implemented before major state refactoring efforts.

Implementation hints

We have one extra requirement in the Log Explorer that requires some ✨ inventive ✨ thinking. We need to support a "Stream live" / "Stop streaming" button via the Unified Search Bar. We should be able to facilitate this via a custom submit button, which accepts any React node, and can be changed based on the boolean state.

Acceptance criteria

• Enable datePicker via the Unified Search Bar
• Respond to date / time / stream live state changes
• Apply the date / time options to the fetched data

[elasticmachine]

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

[weltenwort]

On second thought that "live stream" button seems like it would be useful in addition to a "submit" button. Maybe it would also be feasible to put the whole bar into a flex row and just add the "live stream" button in a separate flex item on the right? 🤔

[miltonhultgren]

Is this different from the "Refresh every X seconds" mode?

[weltenwort]

It's mostly identical, it just exposes it more prominently. And it has slightly different semantics because it also takes control of the scrolling.

[Kerry350]

seems like it would be useful in addition to a "submit" button. Maybe it would also be feasible to put the whole bar into a flex row and just add the "live stream" button in a separate flex item on the right?

Just for context on this issue for others: we should keep both buttons. This flex composition would be one solution, or it may even be possible to have the prop pass through both buttons (since it accepts any React node), and just respond to the relevant callbacks.

Is this different from the "Refresh every X seconds" mode?

Not really, the stream live button is just in a different location with a fixed interval. I think historically (like, far back) the callbacks and props were also a little harder to work with, although that seems simpler now.

Edit: I guess from a "converge with Discover" standpoint Discover does offer "refresh every" so maybe we should use that 🤔

[weltenwort]

I guess from a "converge with Discover" standpoint Discover does offer "refresh every" so maybe we should use that

agreed, we should sync the date picker controls with it if we don't already. But given that "live tailing" is a core feature I still see value in exposing an easy-to-discover UI component to toggle that mode.