[Logs UI] Move page template to avoid re-renders

[crespocarlos]

Summary

closes #150624

This PR improves how the page template re-renders, preventing it from doing so when context providers in the hierarchy below it change.

logs_ui.mov

For maintainers

At given moments, the Logs UI URL changes, updating the logPosition state. This will re-render the template and its children.

[elasticmachine]

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

[Kerry350]

Thanks for opening this 🙏

The new position in the hierarchy looks good to me, it's a much better / clearer home for it.

Thinking aloud here - hasData and isDataLoading are hardcoded so it would be nice if we could memoize the component to stop re-renders on context change (for example, adding a filter will cause a re-render of the template). However, due to the way React.memo works with children I really can't think of a way to make that work unless I'm missing something 🤔 Any state machine changes are always going to make the two child components need to re-render, as the logStreamPageState prop will change, and that cancels out the memoization.

@weltenwort Did you have an idea how the memoization might work here? (as you wrote the issue / ACs).

[weltenwort]

💭 Good question. I don't actually see a way to achieve that and still pass the current state to its child. We could stop doing that, but then we'd loose the type safety of the state.matches(), so I'm not too eager for that either.

[Kerry350]

We could stop doing that, but then we'd loose the type safety of the state.matches(), so I'm not too eager for that either.

Yeah, I would agree with that. If performance does become a concern I'm sure there are multiple places we can improve lower in the hierarchy.

LGTM for the change in hierarchy position 👍

[crespocarlos]

@Kerry350 we could actually remove the hasData and isDataLoading from there. Their default value is the same as we're hardcoding in the page_content.tsx.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 5965433

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
infra	1.3MB	1.3MB	+37.0B

History

• 💚 Build #108284 succeeded 9b75916

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[kibanamachine]

💔 All backports failed

Status	Branch	Result
❌	8.7	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 151311

Questions ?

Please refer to the Backport tool documentation

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 151311 locally

[weltenwort]

@crespocarlos should we add backport:skip or do we still want to backport this?

[crespocarlos]

@weltenwort completely missed these comments. Removed the labels. Thanks